/* ============================================================
   COMPONENT: Shared Service-Page Template — section styles
   FILE: assets/css/service-page.css
   Phase: Stage 8.0 (Final Master Blueprint Roadmap V3, §11 —
   "Shared Visa / Service Page Template").
   Depends on: tokens.css, base.css, buttons.css, surfaces.css
   (loaded before this file).

   Scope: this file owns ONLY the section types Stage 8.0
   introduces that no existing component already covers —
   Eligibility Snapshot, Popular Countries, Required Documents,
   and the Prep Checklist. Page Header, Breadcrumbs, Process,
   FAQ Accordion and CTA Band are reused as-is from their own
   existing stylesheets (page-header.css, breadcrumbs.css,
   process.css, faq.css, cta-band.css) — nothing here redefines
   them, per the roadmap's "no second competing component" rule.

   Background rhythm: this file only sets background-color on
   `.service-section` / `.service-section--alt` (the shared
   white/light-gray alternator every other internal page already
   uses — see about.css/contact.css/client-portal.css for the
   same `--alt` convention). Individual service pages choose
   which sections get `--alt` to keep the alternation correct
   around the fixed-background components (Process = white,
   FAQ = navy gradient) that sit between them.

   Card system: every card in this file is `.surface--solid`
   (surfaces.css) for the white background/border/radius/shadow —
   only per-card layout is added here, same convention as
   benefits.css / services.css.

   Bilingual/RTL: logical properties only (margin-inline,
   padding-inline, text-align: start), matching every other
   Stage 6/6.5 component — reads correctly under dir="rtl" with
   no changes needed here.
   ============================================================ */

/* ----------------------------------------------------------
   SHARED SECTION SHELL
   Reused by every section below except Process/FAQ/CTA Band,
   which keep their own dedicated background rules.
---------------------------------------------------------- */
.service-section {
  background-color: var(--color-white);
  padding-block: var(--space-10);
}

.service-section--alt {
  background-color: var(--color-light-gray);
}

.service-section__inner {
  text-align: center;
}

.service-section__heading {
  margin: 0 0 var(--space-2);
  color: var(--color-navy);
  font-size: var(--text-h2);
}

.service-section__subheading {
  max-width: 640px;
  margin: 0 auto var(--space-6);
  color: var(--color-dark-gray);
  font-size: var(--text-body);
}

/* ============================================================
   1. ELIGIBILITY SNAPSHOT
   A quick, scannable "do you qualify" read — not a substitute
   for the full consultation, framed as a snapshot only.
   ============================================================ */
.eligibility-snapshot__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  text-align: start;
  list-style: none;
}

.eligibility-snapshot__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
}

.eligibility-snapshot__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background-color: rgba(var(--color-gold-rgb), 0.14);
  color: var(--color-navy);
}

.eligibility-snapshot__icon svg {
  width: 18px;
  height: 18px;
}

.eligibility-snapshot__text {
  margin: 0;
  color: var(--color-dark-gray);
  font-size: var(--text-body);
}

.eligibility-snapshot__text strong {
  display: block;
  margin-block-end: 2px;
  color: var(--color-navy);
  font-family: var(--font-heading);
}

.eligibility-snapshot__note {
  margin: var(--space-5) auto 0;
  max-width: 640px;
  color: var(--color-dark-gray);
  font-size: var(--text-small);
}

@media (min-width: 768px) {
  .eligibility-snapshot__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   2. POPULAR COUNTRIES
   Destination cards — factual, non-comparative descriptions
   only; no invented approval rates or guarantees.
   ============================================================ */
.popular-countries__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  list-style: none;
}

.popular-countries__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  text-align: start;

  transition:
    border-color var(--duration-fast) var(--ease-premium),
    box-shadow var(--duration-fast) var(--ease-premium),
    transform var(--duration-fast) var(--ease-premium);
}

.popular-countries__card:hover {
  border-color: var(--color-navy);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.popular-countries__flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background-color: rgba(var(--color-navy-rgb), 0.08);
  color: var(--color-navy);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-small);
}

.popular-countries__name {
  margin: 0;
  color: var(--color-navy);
  font-family: var(--font-heading);
  font-size: 1.1rem;
}

.popular-countries__text {
  margin: 0;
  color: var(--color-dark-gray);
  font-size: var(--text-small);
  line-height: var(--line-height-body);
}

@media (min-width: 640px) {
  .popular-countries__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .popular-countries__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================================
   3. REQUIRED DOCUMENTS
   ============================================================ */
.required-documents__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  text-align: start;
  list-style: none;
}

.required-documents__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
}

.required-documents__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--color-navy);
}

.required-documents__icon svg {
  width: 22px;
  height: 22px;
}

.required-documents__text {
  margin: 0;
  color: var(--color-dark-gray);
  font-size: var(--text-body);
}

.required-documents__text strong {
  display: block;
  margin-block-end: 2px;
  color: var(--color-navy);
  font-family: var(--font-heading);
}

@media (min-width: 768px) {
  .required-documents__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   4. PREP CHECKLIST
   A readiness checklist distinct from Required Documents (which
   lists *what* is needed) — this lists the *actions* to take
   before applying. Static/printable, native markup only.
   ============================================================ */
.prep-checklist__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 720px;
  margin-inline: auto;
  text-align: start;
  list-style: none;
}

.prep-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
}

.prep-checklist__box {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-block-start: 2px;
  border: 1.5px solid var(--color-gold);
  border-radius: var(--radius-sm);
  color: var(--color-gold);
}

.prep-checklist__box svg {
  width: 14px;
  height: 14px;
}

.prep-checklist__text {
  margin: 0;
  color: var(--color-dark-gray);
  font-size: var(--text-body);
}