/* ============================================================
   COMPONENT: Services Overview
   FILE: assets/css/services.css
   Depends on: services.html.
   Loaded after benefits.css (Phase 1.0 §6, in build order).

   Global Card System: `.surface--solid` (surfaces.css) supplies
   the card's white background, hairline border, radius and
   resting shadow — same convention benefits.css/partners.css
   already use. Only card-specific layout (icon badge, internal
   spacing, the link affordance, hover/focus) is added here,
   scoped under .services__card — nothing here redefines the
   surface system itself.

   Section background is light-gray, continuing the white/
   light-gray alternation already established by Statistics
   (white) -> Partners (light-gray) -> Benefits (white) above it.

   Stage 5.10 correction: grid holds five cards (Visit, Work,
   Family, Business & Investor, Student) instead of the previous
   eight — see the desktop column-count note further down.

   Hover pattern: values copied from buttons.css's secondary/
   primary hover treatment (border-color: var(--color-navy),
   background tint, shadow escalation, a small lift) — the same
   convention benefits.css uses. No new hover system.

   Card = link: unlike .benefits__card (a plain <li>),
   .services__card is an <a>, so it additionally needs
   text-decoration reset, a visible focus-visible state (the
   same outline buttons.css uses on .btn), and full-height flex
   so every card in a row lines up regardless of description
   length.

   JAVASCRIPT / MOTION — Part B:
   services.js registers window.Sections.initServices, which adds
   `.js-motion-ready` to each card and calls
   AppMotion.staggerChildren() — the identical mechanism
   benefits.js/statistics.js already use, no new IntersectionObserver
   or DOMContentLoaded listener. See the "ENTRANCE MOTION HOOK"
   section below: exactly like Benefits and Statistics, the resting
   (no-JS) state is already opacity: 1 / transform: none, so a slow
   or failed services.js load never hides a card or its link — the
   section works fully with JavaScript disabled.
   ============================================================ */

.services {
  background-color: var(--color-light-gray);
  padding-block: var(--space-10);
}

.services__inner {
  text-align: center;
}

.services__heading {
  margin: 0 0 var(--space-2);
  color: var(--color-navy);
  font-size: var(--text-h3);
}

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

/* ------------------------------------------------------------
   GRID
   Single column on mobile, 2 columns on tablet, 3 columns on
   desktop (3 + 2) for the five Stage 5.10 cards — mirrors the
   column-count progression already used by Statistics/Partners/
   Benefits.
------------------------------------------------------------ */
.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);

  list-style: none;
}

.services__item {
  display: flex;
}

/* ------------------------------------------------------------
   CARD (an <a>, so the whole card is the click target)
------------------------------------------------------------ */
.services__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-4);
  text-align: left;
  text-decoration: none;
  color: inherit;

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

.services__card:hover {
  border-color: rgba(var(--color-navy-rgb), 0.3);
  background-color: rgba(var(--color-navy-rgb), 0.04);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Priority badge — Stage 5.10 correction: same visual treatment
   as .pricing__badge (pricing.css), scoped here so no new badge
   system is introduced. Marks the Homepage's primary service. */
.services__badge {
  margin: 0;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background-color: rgba(var(--color-gold-rgb), 0.12);
  color: var(--color-gold);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* "View All Services" — Stage 5.10 correction: same
   .cta-wrap/.btn--tertiary convention includes/portfolio.html
   and includes/pricing.html already use for their "view full
   page" link, so Student Visa and every other approved service
   stay one click away even though the grid above only shows
   five cards. */
.services__cta-wrap {
  margin-top: var(--space-6);
}
.services__card:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.services__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  background-color: rgba(var(--color-gold-rgb), 0.12);
  color: var(--color-gold);

  transition:
    background-color var(--duration-fast) var(--ease-premium),
    transform var(--duration-fast) var(--ease-premium);
}

.services__icon svg {
  width: 24px;
  height: 24px;
}

/* Restrained accent on hover: a slightly stronger icon tint and a
   very small scale — no color-family change, so it stays within
   the navy/white/gold system rather than reading as a new effect. */
.services__card:hover .services__icon {
  background-color: rgba(var(--color-gold-rgb), 0.18);
  transform: scale(1.05);
}

.services__title {
  margin: 0;
  color: var(--color-navy);
  font-size: 1.125rem;
  line-height: var(--line-height-heading);
}

.services__text {
  flex-grow: 1;
  margin: 0;
  color: var(--color-dark-gray);
  font-size: var(--text-small);
  line-height: var(--line-height-body);
}

/* ------------------------------------------------------------
   LINK AFFORDANCE
   A visible text + arrow pair rather than relying on the whole
   card being clickable alone — keeps the action legible even
   for users scanning quickly or without hover/color cues.
------------------------------------------------------------ */
.services__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-1);
  color: var(--color-navy);
  font-family: var(--font-heading);
  font-size: var(--text-small);
  font-weight: 600;
}

.services__link-arrow {
  width: 16px;
  height: 16px;
  transition: transform var(--duration-fast) var(--ease-premium);
}

.services__card:hover .services__link {
  color: var(--color-gold);
}

.services__card:hover .services__link-arrow {
  transform: translateX(3px);
}

/* ------------------------------------------------------------
   ENTRANCE MOTION HOOK
   Resting state (no classes) is fully visible: opacity: 1 / no
   transform by default, so a slow or failed services.js load
   never hides content or its link — matches the Statistics/
   Benefits "ENTRANCE MOTION HOOK" pattern exactly.
   `.js-motion-ready` is added by services.js itself,
   synchronously, before it calls AppMotion.staggerChildren().
------------------------------------------------------------ */
.services__card {
  opacity: 1;
  transform: none;
}

.services__card.js-motion-ready {
  transition:
    opacity var(--duration-slow) var(--ease-premium),
    transform var(--duration-slow) var(--ease-premium),
    border-color var(--duration-fast) var(--ease-premium),
    background-color var(--duration-fast) var(--ease-premium),
    box-shadow var(--duration-fast) var(--ease-premium);
  transition-delay: var(--stagger-delay, 0ms);
}

/* ------------------------------------------------------------
   RESPONSIVE
   Breakpoint values copied from tokens.css's documented
   reference values, same convention benefits.css uses.
------------------------------------------------------------ */

/* Tablet: 2 columns */
@media (min-width: 768px) {
  .services__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
}

/* Desktop and up: 3 columns (3 + 2 for the five Stage 5.10 cards) */
@media (min-width: 1024px) {
  .services {
    padding-block: var(--space-12);
  }

  .services__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }

  .services__card {
    padding: var(--space-5);
  }
}

/* Small mobile: tighten spacing, keep cards compact */
@media (max-width: 479px) {
  .services {
    padding-block: var(--space-8);
  }

  .services__grid {
    gap: var(--space-3);
  }

  .services__card {
    padding: var(--space-3);
  }
}

/* ------------------------------------------------------------
   REDUCED MOTION
   Same convention as benefits.css: the hover lift/transform is
   removed for users who have requested less motion, while state
   changes that aren't motion (border/background/shadow) remain.
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .services__card:hover {
    transform: none;
  }

  .services__card:hover .services__icon {
    transform: none;
  }

  .services__card:hover .services__link-arrow {
    transform: none;
  }
}

/* Stage 7 — alternate background modifier for reuse of this section
   on the Services Overview page (white/light-gray rhythm), same
   convention as every other section pair in the project. */
.services--alt {
  background-color: var(--color-light-gray);
}