/* Section: GO DEEPER, "Explore the network."
   Kept: eyebrow + heading, VIEW ALL ABOUT PAGES top right, three photo cards with the white
   hairline over the title and a green Learn More, linking to the same About pages.
   New: a "hairline accordion", a lighter sibling of the homepage network accordion: the
   same tokens (--dur-accordion, --ease-elastic, --accordion-intent) and the same JS
   (sections.js [data-accordion], unchanged). The open card glides wider (flex-grow), a
   green line draws across its hairline, its photo settles and Learn More rises in.
   Titles keep one size and one width, so nothing reflows; only flex-grow, transform and
   opacity animate. Reduced motion and touch: equal cards, everything visible. */

.explore { padding-block: var(--section-y) calc(var(--section-y) * 0.75); }
.explore__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(32px, 24px + 2vw, 56px); }
.explore__head .section-head { margin-bottom: 0; }

.xcards {
  --xcard-gap: 16px; --xcard-pad: 28px; --xcard-grow: 1.8;
  display: flex; gap: var(--xcard-gap); height: 500px;
  container-type: inline-size;
}
.xcard {
  --on: 0; /* 1 on the open card */
  position: relative; isolation: isolate; overflow: hidden;
  flex: 1 1 0; min-width: 0;
  flex-grow: calc(1 + (var(--xcard-grow) - 1) * var(--on));
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--xcard-pad);
  border-radius: var(--r-lg);
  color: var(--c-white); background: var(--color-surface-3);
  --focus: var(--color-focus);
}
/* Cards also carry data-reveal; keep its fade-up and add the grow (the Round 1 fix) */
.xcards .xcard {
  transition:
    flex-grow var(--dur-accordion) var(--ease-elastic),
    opacity var(--dur-reveal) var(--ease-out) calc(var(--i, 0) * var(--stagger)),
    transform var(--dur-reveal) var(--ease-out) calc(var(--i, 0) * var(--stagger));
}
.xcard__img {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;
  transform: scale(calc(1.06 - 0.06 * var(--on)));
  transition: transform 900ms var(--ease-out);
}
.xcard::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--c-ink) 34%, transparent) 0%, color-mix(in srgb, var(--c-ink) 6%, transparent) 24%, color-mix(in srgb, var(--c-ink) 34%, transparent) 52%, color-mix(in srgb, var(--c-ink) 90%, transparent) 100%); }
.xcard__arrow { position: absolute; top: 20px; right: 20px; }

/* Staging's white hairline; a green line draws across it on the open card */
.xcard__rule { position: relative; display: block; height: 2px; margin-bottom: 20px; border-radius: 2px; background: color-mix(in srgb, var(--c-white) 90%, transparent); overflow: hidden; }
.xcard__rule::after {
  content: ""; position: absolute; inset: 0; background: var(--color-accent);
  transform: scaleX(var(--on)); transform-origin: left center;
  transition: transform var(--dur-accordion) var(--ease-out);
}
/* One size; the width is a closed card's content width so the text never re-wraps.
   Closed content width = (row - 2 gaps - 3 cards' padding) / (open grow + 2) */
.xcard__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 24px; line-height: 1.2; letter-spacing: -0.015em;
  width: calc((100cqi - 2 * var(--xcard-gap) - 6 * var(--xcard-pad)) / (var(--xcard-grow) + 2));
  text-wrap: balance;
}
.xcard__cta {
  display: block; margin-top: 18px;
  opacity: var(--on); transform: translateY(calc(12px * (1 - var(--on))));
  transition: opacity 240ms linear, transform var(--dur-base) var(--ease-out);
  transition-delay: calc(var(--on) * 180ms); /* in after the card starts to open; out at once */
}

/* Open card. With JS (sections.js): .is-active after a short hover intent, or at once
   on keyboard focus; the first card when idle. Without JS: :has() */
.xcard.is-active,
.xcards:not(.is-ready):not(:has(.xcard:hover, .xcard:focus-visible)) .xcard:first-child,
.xcards:not(.is-ready) .xcard:hover,
.xcards:not(.is-ready) .xcard:focus-visible { --on: 1; }
.xcard:hover .arrow, .xcard:focus-visible .arrow { --arrow-bg: var(--color-accent); --arrow-fg: var(--color-on-accent); --arrow-border: var(--color-accent); }

/* Reduced motion: three equal cards, everything visible */
@media (prefers-reduced-motion: reduce) and (min-width: 1024px) {
  .xcard, .xcards .xcard:first-child { flex-grow: 1 !important; }
  .xcard__img { transform: none; }
  .xcard__cta { opacity: 1 !important; transform: none !important; }
  .xcard__title { width: auto; }
}

/* Touch / tablet / phone: equal cards, nothing hidden behind hover */
@media (max-width: 1023px), (hover: none) {
  .xcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); height: auto; }
  .xcard { aspect-ratio: 3 / 4; --xcard-pad: 22px; }
  /* Titles sit higher on these shorter cards (and wrap at 768): a deeper lower scrim keeps them AA */
  .xcard::after { background: linear-gradient(180deg, color-mix(in srgb, var(--c-ink) 30%, transparent) 0%, color-mix(in srgb, var(--c-ink) 8%, transparent) 18%, color-mix(in srgb, var(--c-ink) 58%, transparent) 46%, color-mix(in srgb, var(--c-ink) 92%, transparent) 100%); }
  .xcard__img { transform: none; }
  .xcard__title { width: auto; } /* stays 24px: large text over photos */
  .xcard__cta { opacity: 1; transform: none; }
}
@media (max-width: 599px) {
  .xcards { grid-template-columns: 1fr; }
  .xcard { aspect-ratio: 4 / 3; }
}