/* Shared page-level patterns that don't belong in generic components */

.feature-list { display: flex; flex-direction: column; gap: var(--space-4); }
.feature-list li { display: flex; gap: var(--space-3); align-items: center; font-size: var(--fs-sm); color: var(--color-text-muted); }
.feature-list li svg {
  width: 26px; height: 26px; padding: 5px; box-sizing: border-box;
  flex-shrink: 0; border-radius: 50%;
  background: var(--brand-gradient-soft); color: var(--color-primary);
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-9);
  align-items: center;
}
.split--reverse .split__media { order: -1; }
.split__media {
  aspect-ratio: 4/3.2;
  border-radius: var(--radius-lg);
  background: radial-gradient(ellipse 70% 60% at 50% 42%, rgba(47,127,176,0.16), transparent 70%), var(--color-bg-alt);
  border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.split__media svg { width: 34%; height: 34%; color: var(--color-primary); opacity: 0.95; stroke-width: 2; filter: drop-shadow(0 10px 18px rgba(15, 27, 48, 0.22)); }
.split__image { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.split__media::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--brand-gradient);
  opacity: 0.06;
}
.split h2 { margin-bottom: var(--space-4); }
.split > div > p.lead { margin-bottom: var(--space-6); }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
}

/* Related links row */
.related-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.related-pill {
  padding: 0.6rem 1.1rem; border-radius: var(--radius-full);
  border: 1px solid var(--color-border); font-size: var(--fs-sm); font-weight: 600; color: var(--navy-800);
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.related-pill:hover { border-color: var(--teal-500); color: var(--color-primary); background: var(--brand-gradient-soft); }

/* Category filter chips (blog / sector pages) */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-bottom: var(--space-9); }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0.55rem 1.2rem; border-radius: var(--radius-full); font-size: var(--fs-sm); font-weight: 700;
  border: 1px solid var(--color-border); color: var(--gray-600);
  cursor: pointer; user-select: none;
  transition: all var(--transition-fast);
}
.chip svg { width: 14px; height: 14px; flex-shrink: 0; }
.chip.is-active, .chip:hover { background: var(--navy-900); color: var(--white); border-color: var(--navy-900); }
.blog-empty-state { text-align: center; color: var(--gray-600); padding-block: var(--space-6); }

/* Legal / info page prose */
.prose { max-width: 760px; margin-inline: auto; }
.prose h2 { margin-top: var(--space-8); margin-bottom: var(--space-3); }
.prose p { margin-bottom: var(--space-4); }

/* Remote support step card */
.step-card {
  display: flex; gap: var(--space-4); align-items: flex-start;
  padding: var(--space-5); border-radius: var(--radius-md); border: 1px solid var(--color-border);
}
.step-card__num {
  width: 36px; height: 36px; border-radius: 50%; background: var(--brand-gradient); color: var(--white);
  display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; font-size: var(--fs-sm);
}

/* Embedded external portal (AKINSOFT vb.) */
.iframe-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
.iframe-toolbar p { margin: 0; font-size: var(--fs-sm); }
.iframe-embed {
  width: 100%;
  height: 78vh;
  min-height: 560px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  background: var(--white);
}
.iframe-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* 404 */
.error-page { min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; }
.error-page__code { font-size: 6rem; font-weight: 800; background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }

/* Services page: alternating title+icon / description+CTA blocks */
.service-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-9);
  align-items: center;
}
.service-block--reverse .service-block__content { order: -1; }
.service-block__visual {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.service-block__icon {
  width: 84px; height: 84px;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.service-block__icon svg { width: 42%; height: 42%; color: var(--color-primary); position: relative; z-index: 1; stroke-width: 2; }
.service-block__icon::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--brand-gradient);
  opacity: 0.08;
}
.service-block__visual h2 { margin: 0; }
.service-block__content h2 { margin-bottom: var(--space-5); }
.service-block__content p.lead { margin-bottom: var(--space-6); }

.service-block__banner {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  display: block;
}

.service-block--wide-visual { grid-template-columns: 2.4fr 1fr; }
.service-block--wide-visual.service-block--reverse { grid-template-columns: 1fr 2.4fr; }

@media (max-width: 900px) {
  .service-block { grid-template-columns: 1fr; }
  .service-block--reverse .service-block__content { order: 0; }
  .service-block--wide-visual { grid-template-columns: 1fr; }
  .service-block--wide-visual.service-block--reverse { grid-template-columns: 1fr; }
}