/* Screenshot-based mock styling — used by tour-screenshot-mocks.jsx
   The screenshot frame matches the image's natural aspect ratio exactly,
   no letterboxing. */

/* The mod-mock-stage normally has a fixed aspect (synthetic phone mock).
   When a screenshot mock is inside, we let the .scrn-device own the
   aspect ratio instead, so portrait/landscape both fit cleanly. */
.mod-mock-stage:has(.scrn) {
  aspect-ratio: auto;
  height: auto;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Remove the heavy inner shadow/glow that the synthetic mock used */
  box-shadow: none;
  border: none;
  /* The .scrn-device clips itself to its own rounded frame, so the stage must
     NOT clip — otherwise the tab strip that sits BELOW the device gets cut off
     on tight (laptop-height) viewports. */
  overflow: visible;
}

/* ── Portrait screenshot mocks: height-bound layout ──────────────────────────
   Mirrors the working landscape pattern. The device + tab strip form a column
   that fills the available height; the DEVICE shrinks (flex-shrink) so the
   strip is ALWAYS fully visible and tappable, never clipped — regardless of
   viewport height or how many rows the tabs wrap to. */
.card-module:not(.card-module-landscape) .mod-mock-stage:has(.scrn-port) {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: 100%;
}
.card-module:not(.card-module-landscape) .scrn-port {
  height: 100%;
  max-height: 100%;
  min-height: 0;
  justify-content: center;
  gap: 12px;
}
.card-module:not(.card-module-landscape) .scrn-port .scrn-device {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: auto;
}
.card-module:not(.card-module-landscape) .scrn-port .scrn-explore { flex: 0 0 auto; }

/* ── Portrait modules: tab rail on the RIGHT of the phone ─────────────────
   The phone shot is tall & narrow, leaving empty side space — put the tab
   pills in a vertical rail beside it so the screenshot can grow taller. */
.card-module:not(.card-module-landscape) .scrn-port {
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  gap: 16px;
}
.card-module:not(.card-module-landscape) .scrn-port .scrn-device {
  flex: 1 1 auto;
  width: auto;
  height: 100%;
  min-width: 0;
}
.card-module:not(.card-module-landscape) .scrn-port .scrn-explore {
  order: 2;                /* rail sits to the RIGHT of the device */
  flex: 0 0 auto;
  width: clamp(116px, 13vw, 158px);
  margin-top: 0;
  min-height: 0;
  align-items: stretch;
  justify-content: center;
  align-self: stretch;
  gap: 10px;
  overflow-y: auto;
}
.card-module:not(.card-module-landscape) .scrn-port .scrn-cue { justify-content: flex-start; text-align: left; }
.card-module:not(.card-module-landscape) .scrn-port .scrn-progress { width: 100%; }
.card-module:not(.card-module-landscape) .scrn-port .scrn-tabs {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  gap: 7px;
  padding: 2px;
}
.card-module:not(.card-module-landscape) .scrn-port .scrn-tab { justify-content: flex-start; white-space: normal; text-align: left; }
.card-module:not(.card-module-landscape) .scrn-port .scrn-tab-pointer { display: none; }
/* Portrait phone can now use the full row height — lift the 300px width cap
   so the taller frame isn't artificially pinched. */
.card-module:not(.card-module-landscape) .scrn-port .scrn-frame-phone .scrn-img { max-width: calc(100cqw - 16px); }

.scrn {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

/* The "device" frame around the screenshot — aspect comes from the image.
   The outer .scrn-device is just a SIZER + container; the visible bezel lives
   on .scrn-bezel and is sized in container units (cqw), so the rim stays a
   constant *proportion* of the device at any size — it never balloons when the
   viewport (and the device) shrink. */
.scrn-device {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  container-type: size;
}
.scrn-bezel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
  box-sizing: border-box;
  border-radius: clamp(12px, 4.4cqmin, 34px);
  overflow: hidden;
  padding: clamp(3px, 1.7cqmin, 9px);
  background:
    linear-gradient(150deg,
      #2b313c 0%, #1a1f28 18%, #0d1015 50%, #1a1f28 82%, #30374222 100%),
    #101319;
  box-shadow:
    0 16px 40px rgba(0,0,0,0.48),
    0 5px 14px rgba(0,0,0,0.40),
    0 0 0 1px rgba(0,0,0,0.60),
    inset 0 1px 1px rgba(255,255,255,0.16),
    inset 0 -1px 2px rgba(0,0,0,0.55);
}
.scrn-bezel::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 3; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(125deg,
    rgba(255,255,255,0.16) 0%,
    rgba(255,255,255,0.05) 13%,
    transparent 33%,
    transparent 64%,
    rgba(255,255,255,0.04) 100%);
  mix-blend-mode: screen;
}

.scrn-frame-phone  .scrn-bezel { border-radius: clamp(16px, 5cqmin, 40px); }
.scrn-frame-tablet .scrn-bezel { border-radius: clamp(10px, 3cqmin, 22px); padding: clamp(3px, 1.3cqmin, 8px); }

.scrn-img {
  display: block;
  width: auto;
  height: auto;
  max-width: calc(100cqw - 16px);
  max-height: calc(100cqh - 16px);
  border-radius: clamp(8px, 3.2cqmin, 26px);
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.scrn-frame-tablet .scrn-img { border-radius: clamp(6px, 2cqmin, 14px); }
/* Portrait-only absolute size caps so a phone/tablet never grows huge on tall
   viewports. Landscape tablets fill their cell (wide image), so no cap there. */
.card-module:not(.card-module-landscape) .scrn-frame-phone  .scrn-img { max-width: min(calc(100cqw - 16px), 300px); }
.card-module:not(.card-module-landscape) .scrn-frame-tablet .scrn-img { max-width: min(calc(100cqw - 16px), 440px); }

/* ── Explore strip below the device ──────────────────────────────────────── */
.scrn-explore {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
}

/* Tab strip */
.scrn-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
  padding: 4px 4px 2px;
}
.scrn-tab {
  position: relative;
  appearance: none;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(148,163,184,0.14);
  background: rgba(255,255,255,0.04);
  color: rgba(226,232,240,0.78);
  font: 700 11px/1 var(--tw-body), sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 16px;
  min-height: 34px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  white-space: nowrap;
}
/* The per-tab +/✓ circle badges read like radio buttons — removed. Progress is
   shown by the cue ("N/total explored") + the progress bar instead. */
.scrn-tab .scrn-tab-mark { display: none; }
.scrn-tab:hover {
  border-color: rgba(148,163,184,0.30);
  background: rgba(255,255,255,0.08);
  color: #fff;
  transform: translateY(-1px);
}
.scrn-tab:active { transform: translateY(0); }

/* Active — the single, clear selection: a clean solid accent pill. */
.scrn-tab.active {
  background: var(--accent, #3B82F6);
  border-color: var(--accent, #3B82F6);
  color: #fff;
  box-shadow: 0 8px 18px -6px var(--accent-soft, rgba(59,130,246,0.75));
}
.scrn-tab.active::before { display: none; }

/* ── Tap cue + progress ──────────────────────────────────────────────────── */
.scrn-cue {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font: 800 10.5px/1.2 var(--tw-body), sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(203,213,225,0.95);
  transition: color 0.25s ease;
}
.scrn-cue-label { display: inline-flex; align-items: center; gap: 6px; }
.scrn-cue-count {
  font-weight: 900;
  color: var(--accent, #3B82F6);
  letter-spacing: 0.04em;
}
.scrn-cue-slash { opacity: 0.5; margin: 0 1px; }
.scrn-cue.done { color: #34D399; }
.scrn-cue.done .scrn-cue-count { color: #34D399; }
.scrn-cue-check {
  display: inline-grid; place-items: center;
  width: 15px; height: 15px; border-radius: 50%;
  background: #34D399; color: #06281c;
  font-size: 10px; font-weight: 900;
}

/* Thin progress bar tracking how many tabs have been opened */
.scrn-progress {
  width: min(220px, 70%);
  height: 4px;
  border-radius: 999px;
  background: rgba(148,163,184,0.20);
  overflow: hidden;
}
.scrn-progress-fill {
  display: block; height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent, #3B82F6), color-mix(in oklab, var(--accent, #3B82F6) 60%, #34D399));
  transition: width .45s cubic-bezier(.2,.8,.25,1);
}
.scrn-cue.done ~ .scrn-progress .scrn-progress-fill { background: #34D399; }

/* Unseen tabs stay bright so the un-explored ones lead the eye. */
.scrn-tab.unseen { color: #fff; }
/* "Next" is a NUDGE, not a selection — just the bobbing caret + a soft ring
   pulse. No accent fill/border (that read like a second selected tab). */
.scrn-tab.next {
  color: #fff;
  animation: scrn-tab-glow 1.8s ease-in-out infinite;
}
@keyframes scrn-tab-glow {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-soft, rgba(59,130,246,0.40)); }
  60%      { box-shadow: 0 0 0 5px rgba(59,130,246,0); }
}
/* Downward caret that bobs above the next tab — a clear "tap here" anchor. */
.scrn-tab-pointer {
  position: absolute;
  left: 50%; top: -13px;
  width: 16px; height: 16px;
  margin-left: -8px;
  pointer-events: none;
  animation: scrn-point-bob 1s ease-in-out infinite;
}
.scrn-tab-pointer::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--accent, #3B82F6);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}
@keyframes scrn-point-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
/* Explored tabs gently recede so the un-explored ones lead the eye. */
.scrn-tab.seen:not(.active) {
  color: rgba(226,232,240,0.5);
  border-color: rgba(148,163,184,0.10);
  background: rgba(255,255,255,0.02);
}

@media (prefers-reduced-motion: reduce) {
  .scrn-tab.next { animation: none; }
  .scrn-tab-pointer { animation: none; }
}

/* ── LANDSCAPE MODULE CARD ───────────────────────────────────────────────
   Tablet on top (gets the lion's share of height), compact explainer below.
   The .card has fixed height & overflow:hidden, so both rows are bounded. */
.card-module.card-module-landscape {
  position: relative;
  display: grid;
  /* Two-column feature-split: readable copy | tablet (hero). */
  grid-template-columns: minmax(290px, 0.82fr) minmax(0, 1.25fr);
  grid-template-rows: 1fr;
  column-gap: clamp(24px, 3.2vw, 56px);
  align-items: center;
  padding: clamp(22px, 3.2vh, 44px) clamp(28px, 3.2vw, 60px);
  overflow: hidden;
}

/* Alternate the sides across cards (odd modules) so it doesn't read as a fixed
   template: tablet on the LEFT, copy on the RIGHT. */
.card-module-landscape.mod-flip {
  grid-template-columns: minmax(0, 1.25fr) minmax(290px, 0.82fr);
}
.card-module-landscape.mod-flip .mod-mock-wrap { order: 1; }
.card-module-landscape.mod-flip .mod-left { order: 2; }

/* RIGHT column — tablet (hero), vertically centred, flat (no tilt/transform). */
.card-module-landscape .mod-mock-wrap {
  order: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  position: static;
  perspective: none;
  transform: none;
  filter: none;
  will-change: auto;
  contain: none;
  container-type: normal;
}
.card-module-landscape .mod-mock-stage,
.card-module-landscape .mod-mock-stage:has(.scrn) {
  max-width: none;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-module-landscape .scrn {
  width: 100%;
  height: 100%;
  gap: 6px;
}
.card-module-landscape .scrn-device {
  width: 100%;
  height: 100%;
}
.card-module-landscape .scrn-img {
  object-fit: contain;
}
.card-module-landscape .mod-mock-hint {
  margin-top: 2px;
  text-align: center;
  font-size: 10px;
}

/* LEFT column — a readable, vertically-centred content stack that inherits the
   normal (portrait) .mod-exp sizes. Eyebrow → title → intro → cards → actions. */
.card-module-landscape .mod-left {
  order: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
}
.card-module-landscape .mod-exp {
  display: block;
  max-height: none;
  overflow: hidden;
}
.card-module-landscape .mod-exp-note { display: none; }   /* drop the star-note to save height */
.card-module-landscape .mod-exp-title {
  font-size: clamp(23px, 2.4vw, 32px);
  line-height: 1.15;
  margin-bottom: 12px;
}
.card-module-landscape .mod-exp-intro {
  font-size: clamp(14.5px, 1.15vw, 17px);
  line-height: 1.5;
}
.card-module-landscape .mod-exp-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 20px 0 0;
}
.card-module-landscape .mod-exp-card { min-height: 0; }
.card-module-landscape .mod-exp-card-head { font-size: 15px; margin-bottom: 3px; }
.card-module-landscape .mod-exp-card-sub {
  font-size: 13.5px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Keep the no-transform fix so the tablet doesn't animate a transform. */
.card-module-landscape .mod-mock-wrap { animation: none !important; }
.card-module-landscape .mod-actions { flex-shrink: 0; margin-top: 18px; }

/* ── Landscape tabbed modules: tablet on top, tab strip directly beneath ──
   (default column .scrn layout). The strip — tap cue, progress bar, and the
   tab pills — sits right under the device so the tabs clearly belong to it. */
.card-module-landscape .scrn {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.card-module-landscape .mod-mock-stage { position: static; transform: none; }
.card-module-landscape .scrn { perspective: 1500px; }
.card-module-landscape .scrn-device {
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  /* 3D tilt + hover parallax. Applied to the device only, so the tab strip
     (a sibling) stays flat. Eases toward flat when you mouse over the tablet. */
  transform: rotateY(calc(var(--tilt, 8deg) * -1)) rotateX(1.5deg);
  transition: transform .45s ease;
}
.card-module-landscape .scrn-device:hover {
  transform: rotateY(calc(var(--tilt, 8deg) * -0.35)) rotateX(0deg);
}
.card-module-landscape .scrn-img { object-fit: contain; max-height: 100%; }
.card-module-landscape .scrn-explore {
  position: static;
  flex: 0 0 auto;
  width: 100%;
  margin: 0;
  min-height: 0;
}
.card-module-landscape .scrn-tabs {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 8px;
  padding: 0;
}
.card-module-landscape .scrn-tab {
  justify-content: center;
  white-space: nowrap;
  text-align: center;
  letter-spacing: 0.06em;
}
.rail-right .scrn-tab.active::before { left: auto; right: 0; border-radius: 2px 0 0 2px; }
.card-module:not(.card-module-landscape).rail-left .scrn-port .scrn-explore { order: -1; }

/* Narrow screens: stack to one column — tablet on top, copy below. */
/* Tablet / large-phone band ONLY (761–860px). Must NOT overlap the ≤760 phone
   block below, or its higher specificity (.card-module.card-module-landscape)
   would override the phone stack on non-flip cards. */
@media (min-width: 761px) and (max-width: 860px) {
  .card-module.card-module-landscape {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1.1fr) auto;
    column-gap: 0;
    row-gap: 14px;
    padding: 18px 20px 20px;
  }
  .card-module-landscape .mod-mock-wrap { order: 1; }
  .card-module-landscape .mod-left { order: 2; justify-content: flex-start; }
  .card-module-landscape .mod-exp-cards { flex-direction: row; }
  .card-module-landscape .mod-exp-card-sub { -webkit-line-clamp: 1; }
}

/* ── Portrait-iPad screenshots get a slightly wider stage than iPhone ───
   so the Match Center / Roster captures don't feel pinched. */
.card-module:not(.card-module-landscape) .mod-mock-stage:has(.scrn-frame-tablet) {
  max-width: 420px;
}

/* On the smallest viewport, tab pills tighten up */
@media (max-width: 600px) {
  .scrn-tab {
    font-size: 9px;
    padding: 8px 9px;
    min-height: 32px;
    letter-spacing: 0.05em;
  }
}

/* Short viewports: collapse the cue/tab stack so wrapped chips never clip. */
@media (max-height: 680px) {
  .scrn-explore { gap: 6px; margin-top: 8px; }
  .scrn-cue { font-size: 9px; }
  .scrn-cue-check { width: 13px; height: 13px; font-size: 9px; }
  .scrn-progress { height: 3px; }
  .scrn-tabs { gap: 6px; }
  .scrn-tab { padding: 8px 11px; min-height: 32px; }
}
@media (max-height: 560px) {
  .scrn-cue { display: none; }
  .scrn-explore { gap: 5px; margin-top: 6px; }
  .scrn-tab { padding: 6px 9px; min-height: 28px; font-size: 9px; }
  .card-module:not(.card-module-landscape) .scrn-port .scrn-device { min-height: min(120px, 34cqh); }
}

/* ── MOBILE (≤760): size the screenshot straight off the viewport ────────────
   Desktop sizes the image with container-query units (max-height: 100cqh) off
   the .scrn-device size container. On phones the device is a flex item whose
   height the browser treats as INDEFINITE for size containment, so cqh resolves
   to 0 and the screenshot collapses to nothing — the tablet "vanishes".
   Here we drop container sizing (container-type:normal) and bound the image by
   viewport height + the device's definite width (max-width:100%) instead, so it
   always renders. This block is last in the last-loaded stylesheet, so it wins
   the cascade at equal specificity. */
@media (max-width: 760px) {
  .scrn-device { container-type: normal; }
  .scrn-bezel { max-height: none; }
  .scrn-img {
    max-width: 100%;
    width: auto;
    height: auto;
  }
  /* Landscape (tablet) shots are wide — a shorter cap keeps title + shot + cards
     comfortable on one screen. Portrait (roster) shots are tall, so allow more. */
  .card-module-landscape .scrn-img { max-height: 46vh; }
  .card-module:not(.card-module-landscape) .scrn-img { max-height: 62vh; }
}