/* ==========================================================================
   UNIT 4 · BUILT FOR THE EXCEPTIONS
   --------------------------------------------------------------------------
   Horizontal scroll story on a deep-teal → navy field.
   Rail content:  intro (title + first sentence)
                  → 4 tall photo cards (the four exceptions)
                  → "own platform" card (second sentence + mini diagram)
   Pinned mode (.is-scrolly, added by JS):
     • .exceptions__stage is position: sticky (CSS pin, no JS pin)
     • the track height is calculated by JS from the rail's real width
       (stage height + horizontal distance) and updated on resize
     • the rail's x is driven from a LIVE getBoundingClientRect() reading
   Fallback (no JS / reduced motion): native horizontal swipe with
   scroll-snap inside the stage.
   The stage clips its own overflow; no ancestor of the stage does.
   ========================================================================== */

.exceptions {
  background: linear-gradient(160deg, var(--c-deep-teal) 0%, #022452 45%, var(--c-navy) 100%);
}

.exceptions__decor {
  background:
    radial-gradient(ellipse 40% 50% at 15% 30%, rgba(0, 169, 182, 0.22), transparent 70%),
    radial-gradient(ellipse 50% 45% at 90% 90%, rgba(0, 169, 182, 0.10), transparent 70%);
}

[dir="rtl"] .exceptions__decor {
  scale: -1 1;
}

/* Pinned mode removes the section padding — the stage provides its own */
.exceptions.is-scrolly {
  padding-block: 0;
}

.exceptions__track {
  position: relative;
}

/* ---------------------------------------------------------------------------
   Stage
   --------------------------------------------------------------------------- */
.exceptions__stage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-xl);
  /* Clips the rail. Overflow on the sticky element ITSELF does not affect
     its own stickiness (only ancestors matter); `hidden` is used instead
     of `clip` for older Safari support. */
  overflow: hidden;
}

.exceptions.is-scrolly .exceptions__stage {
  position: sticky;
  inset-block-start: var(--header-h);
  block-size: calc(100svh - var(--header-h));
  padding-block: clamp(1.5rem, 4vh, 3rem);
}

/* Inline padding that aligns the first card with the page container */
.exceptions__rail {
  --rail-pad: max(var(--gutter), calc((100% - var(--container)) / 2));

  display: flex;
  align-items: center;            /* cards keep their own aspect ratio */
  gap: clamp(1rem, 2vw, 1.5rem);
  padding-inline: var(--rail-pad);
}

/* Fallback: native swipe with snap points */
.exceptions:not(.is-scrolly) .exceptions__rail {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--rail-pad);
  padding-block-end: var(--space-md);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--c-teal) transparent;
}

.exceptions:not(.is-scrolly) .exceptions__rail > * {
  scroll-snap-align: start;
}

.exceptions.is-scrolly .exceptions__rail {
  inline-size: max-content;
  will-change: transform;
}

/* ---------------------------------------------------------------------------
   Intro panel
   --------------------------------------------------------------------------- */
.exc-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-lg);
  flex-shrink: 0;
  inline-size: min(84vw, 25rem);
  text-align: center;
  align-items: center;
}

@media (min-width: 48rem) {
  .exc-intro {
    text-align: start;
    align-items: flex-start;
  }
}

.exc-intro p {
  color: var(--c-on-dark-body);
}

/* "Scroll to explore" cue — an arrow nudging toward inline-end */
.exc-intro__cue {
  display: inline-grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: 50%;
  border: 1px solid var(--c-glass-border);
  background-color: var(--c-glass);
  color: var(--c-teal);
}

.exc-intro__cue svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  animation: exc-cue 2.2s var(--ease-in-out) infinite;
}

[dir="rtl"] .exc-intro__cue svg {
  scale: -1 1;
}

@keyframes exc-cue {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(6px); }
}

/* ---------------------------------------------------------------------------
   Exception photo cards
   --------------------------------------------------------------------------- */
.exc-card {
  position: relative;
  flex-shrink: 0;
  inline-size: min(72vw, 19rem);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--r-panel);
  border: 1px solid var(--c-glass-border);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.55);
  isolation: isolate;
}

/* Pinned mode: size cards by viewport height so the stage never overflows */
.exceptions.is-scrolly .exc-card {
  inline-size: auto;
  block-size: min(60svh, 30rem);
}

.exc-card__img {
  position: absolute;
  inset-block: 0;
  inset-inline-start: -8%;
  inline-size: 116%;              /* extra width feeds the inner parallax */
  block-size: 100%;
  object-fit: cover;
  z-index: -2;
  transition: scale 0.8s var(--ease-out);
}

.exc-card:hover .exc-card__img {
  scale: 1.05;
}

.exc-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(2, 17, 58, 0) 35%, rgba(2, 17, 58, 0.88) 100%);
}

/* Glass caption bar */
.exc-card__caption {
  position: absolute;
  inset-inline: var(--space-sm);
  inset-block-end: var(--space-sm);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border-radius: var(--r-card);
  border: 1px solid var(--c-glass-border);
  background-color: rgba(2, 17, 58, 0.45);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.exc-card__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 12px;
  background-color: var(--c-teal);
  color: var(--c-navy);
}

.exc-card__icon svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.exc-card h3 {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  color: var(--c-on-dark);
}

/* ---------------------------------------------------------------------------
   "Own platform" closing card
   --------------------------------------------------------------------------- */
.exc-owned {
  display: grid;
  flex-shrink: 0;
  inline-size: min(86vw, 40rem);
  overflow: hidden;
  border-radius: var(--r-panel);
  border: 1px solid var(--c-glass-border);
  background-color: var(--c-glass);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

@media (min-width: 48rem) {
  .exc-owned {
    grid-template-columns: 0.85fr 1.15fr;
  }
}

.exceptions.is-scrolly .exc-owned {
  align-self: center;
  max-block-size: calc(100svh - var(--header-h) - 5rem);
}

@media (min-width: 48rem) {
  .exceptions.is-scrolly .exc-owned {
    block-size: min(60svh, 30rem);
  }
}

/* Pinned on phones: drop the photo so the copy + diagram fit the viewport
   (the four exception cards before it carry the imagery) */
@media (max-width: 47.99rem) {
  .exceptions.is-scrolly .exc-owned__media {
    display: none;
  }
}

.exc-owned__media {
  min-block-size: 9rem;
}

.exc-owned__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.exc-owned__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-lg);
  padding: clamp(1.25rem, 3vw, 2rem);
}

.exc-owned__body p {
  font-size: var(--fs-small);
  color: var(--c-on-dark-body);
}

/* Mini route diagram: direct path vs. dependency */
.exc-routes {
  display: grid;
  gap: var(--space-sm);
}

.exc-route {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.exc-route__start {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: 10px;
  background-color: var(--c-white);
}

.exc-route__start img {
  inline-size: 70%;
}

.exc-route__line {
  position: relative;
  flex: 1;
  min-inline-size: 1.5rem;
  block-size: 2px;
  border-radius: var(--r-pill);
  background-color: var(--c-teal);
}

.exc-route__end {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding-block: 0.375rem;
  padding-inline: 0.625rem;
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
}

.exc-route__end svg {
  inline-size: 0.9375rem;
  block-size: 0.9375rem;
  flex-shrink: 0;
}

.exc-route--direct .exc-route__end {
  background-color: var(--c-teal);
  color: var(--c-navy);
}

/* Dependency route: faded, dashed, crossed out */
.exc-route--blocked {
  opacity: 0.6;
}

.exc-route--blocked .exc-route__start {
  background-color: var(--c-glass-strong);
}

.exc-route--blocked .exc-route__line {
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.45) 0 5px, transparent 5px 10px);
}

.exc-route__x {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  border-radius: 50%;
  background-color: var(--c-navy);
  color: #FF8A8A;
}

[dir="rtl"] .exc-route__x {
  translate: 50% -50%;
}

.exc-route__x svg {
  inline-size: 0.75rem;
  block-size: 0.75rem;
}

.exc-route--blocked .exc-route__end {
  border: 1px solid var(--c-glass-border);
  color: var(--c-on-dark-body);
  text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, 0.5);
}

/* ---------------------------------------------------------------------------
   Progress bar (pinned mode only)
   --------------------------------------------------------------------------- */
.exceptions__progress {
  display: none;
  inline-size: min(100% - 2 * var(--gutter), 20rem);
  block-size: 3px;
  margin-inline: auto;
  border-radius: var(--r-pill);
  background-color: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.exceptions.is-scrolly .exceptions__progress {
  display: block;
}

.exceptions__progress-fill {
  display: block;
  block-size: 100%;
  border-radius: inherit;
  background-color: var(--c-teal);
  transform: scaleX(0);
  transform-origin: left center;
}

[dir="rtl"] .exceptions__progress-fill {
  transform-origin: right center;
}