/* ════════════════════════════════════════════════════════════════════════
   reel-desktop.css — full-bleed split-screen reel for mouse-driven screens
   ════════════════════════════════════════════════════════════════════════
   Shared by every reel page: /, cityboy-v2, x27, revolt-v2, school-run.

   Same DOM, same content, same snap behaviour as the phone reel. The only
   thing that changes is direction: the vertical photo-over-text stack
   becomes a horizontal photo-beside-text split that fills the screen,
   instead of a 420px phone frame floating in a black void.

   This replaced the per-page JS redirect to the *-classic.html pages
   (retired 2026-08-13). Those pages were noindex and canonical'd to their
   reel, so they earned none of their own traffic — desktop was ~21% of
   sessions being handed a second, unindexed site to maintain.

   GATE: width + a FINE pointer. Deliberately not `hover`, and not a UA
   test. A touch-screen Windows laptop reports pointer:fine for its
   trackpad and correctly gets this layout; phones and tablets report
   pointer:coarse and keep the stack. That is the case the old redirect
   got wrong.

   Behaviour (wheel clamping, keyboard) lives in reel-desktop.js.
   ════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) and (pointer: fine) {

  /* Fluid, not fixed. A 1024px laptop and a 1512px desktop are both
     "desktop" but differ by half a screen; fixed padding left only ~300px
     of text column on the small end. The gutter floor is set by the side
     rail (52px button + 26px offset) so copy never runs under it. */
  :root { --rail-gutter: clamp(96px, 7.6vw, 116px); --side-pad: clamp(40px, 4.6vw, 72px); }

  /* No void left to letterbox — navy rather than black in case of a gap. */
  .stage { background: var(--bg-navy, #0a1628); }
  .reel-shell {
    width: 100%; height: 100%;
    max-width: none;
    border-radius: 0;
    box-shadow: none;
  }

  /* ── The split ──────────────────────────────────────────────────────
     Photo keeps a hair over half. The source images are portrait
     (1170×1353), so a ~0.85-ratio half-screen box crops almost nothing. */
  .reel { flex-direction: row; }
  .reel-photo { flex: 0 0 52%; height: 100%; }
  .reel-content {
    flex: 1 1 48%;
    /* min-width:0 — without it a long unbroken Bangla word can push a flex
       item past its basis and steal width from the photo. */
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 104px var(--rail-gutter) 80px var(--side-pad);
  }
  /* Cap the measure. 48vw of unbroken Bangla body copy is unreadable; the
     panel stays wide, the text column does not. Cap only — never
     width:100%, or inline-flex chips stretch to the full column. */
  .reel-content > * { max-width: 600px; }
  .reel-content > .stock-pill { max-width: max-content; }

  /* Seam: the photo's bottom fade becomes an inner-edge fade, so the two
     halves meet softly instead of on a hard vertical line. */
  .reel-photo::after {
    top: 0; bottom: 0; left: auto; right: 0;
    width: 200px; height: auto;
    background: linear-gradient(to right,
      transparent 0%, rgba(0,0,0,0.22) 45%, var(--content-bg, var(--bg-navy, #0a1628)) 100%);
  }

  /* ── Typography, scaled for viewing distance ───────────────────────── */
  .h-hero { font-size: clamp(42px, 4.3vw, 64px); letter-spacing: -2.5px; }
  /* Most .h-big on these pages carry an inline font-size (30–32px) tuned
     for a 390px phone column, so a plain rule would never win. Match the
     inline attribute and override it — one selector instead of editing
     every heading, and the phone sizes stay exactly as they are. */
  .h-big, .h-big[style*="font-size"] {
    font-size: clamp(32px, 3.1vw, 46px) !important; letter-spacing: -1.8px;
  }
  .product-name { font-size: clamp(30px, 2.9vw, 42px); letter-spacing: -1.4px; }
  .en-subtitle, .product-tagline { font-size: 15px; }
  .eyebrow, .product-eyebrow { font-size: 11px; letter-spacing: 1px; }
  .product-chip { font-size: 12px; padding: 6px 12px; }

  /* Spec tiles (product pages) */
  .spec-big { font-size: clamp(24px, 2.1vw, 30px); }
  .spec-unit { font-size: 13px; }
  .spec-detail, .spec-tile { font-size: 12px; }

  /* Story modules (homepage) */
  .mission-body { font-size: 16px; }
  .mission-en { font-size: 13px; }
  .impact-tile-big { font-size: 30px; }
  .impact-tile-label, .brand-tile-label { font-size: 12px; }
  .brand-tile-big { font-size: 34px; }
  .brand-tile-big.sm { font-size: 23px; }
  .vision-phase-big { font-size: 23px; }

  /* ── Photo-less slides (CTA, footer) go full width, centred ────────── */
  .reel--cta .reel-content,
  .reel--footer .reel-content {
    padding: 96px var(--rail-gutter) 72px var(--rail-gutter);
    align-items: center;
    text-align: center;
  }
  .reel--cta .reel-content > *,
  .reel--footer .reel-content > * { max-width: 760px; }

  /* align-items:center makes every flex child shrink to its own text,
     which left the CTA button stack ~269px wide in the middle of a 1512px
     field. This is the conversion slide — give it real presence. */
  .reel--cta .cta-headline { font-size: clamp(38px, 3.9vw, 58px); line-height: 0.98; }
  .reel--cta .cta-sub { font-size: 17px; }
  .reel--cta .cta-group { width: 100%; max-width: 520px; }
  .reel--cta .cta-group > * { width: 100%; }

  /* Footer reads as a document, not a hero. */
  .reel--footer .reel-content { text-align: left; align-items: flex-start; }
  .reel--footer .reel-content > * { max-width: 1000px; width: 100%; }
  .reel--footer .footer-links-grid { grid-template-columns: repeat(4, 1fr); }

  /* ── Side rail — the persistent conversion affordance ──────────────
     On a phone this is a small overlay; here it is the only always-visible
     CTA on the page, so it gets real size, a permanent label and a hover
     state. components.js's .whatsapp-float / .sticky-cta-global stay
     hidden: they are laid out for the classic pages and would collide. */
  .side-rail { right: 26px; top: 50%; gap: 20px; }
  .rail-btn { width: 52px; height: 52px; border-radius: 26px; }
  .rail-btn svg { width: 23px; height: 23px; }
  .rail-btn:hover {
    background: var(--accent, #FFB800);
    color: var(--accent-ink, #1a1000);
    border-color: var(--accent, #FFB800);
    transform: translateY(-2px);
  }
  .rail-label { font-size: 10px; }
  .reel-shell.on-yellow .rail-btn:hover {
    background: var(--accent-ink, #1a1000); color: var(--accent, #FFB800);
  }

  .progress { top: 64px; left: 40px; right: 40px; gap: 6px; }

  /* X27's spec drawer is a phone bottom-sheet. On a wide screen a
     full-width sheet is unreadable — centre it and cap the measure. */
  .spec-drawer { max-width: 720px; left: 50%; transform: translateX(-50%) translateY(100%); }
  .spec-drawer.open { transform: translateX(-50%) translateY(0); }
  .spec-drawer-body { max-height: 70vh; }

  /* ── Click affordances ─────────────────────────────────────────────
     Dead clicks are the reel's worst metric (33% of mobile sessions). A
     cursor makes a non-interactive element that looks pressable more
     obvious, not less, so say plainly what is clickable and what is not. */
  .reel-photo img { cursor: default; }
  .footer-links-grid a, .footer-contact a, .footer-social a,
  .rail-btn-wrap, .rail-btn, .spec-drawer-trigger { cursor: pointer; }
  .impact-tile, .brand-tile, .vision-phase, .product-chip,
  .spec-tile, .stock-pill { cursor: default; user-select: none; }
}

/* Small laptops: hand the text column back some width. At 1024 a 52/48
   split leaves the copy noticeably tighter than the photo needs. */
@media (min-width: 1024px) and (max-width: 1279px) and (pointer: fine) {
  .reel-photo { flex: 0 0 45%; }
  .reel-content { flex: 1 1 55%; }
  .side-rail { right: 16px; gap: 16px; }
  .rail-btn { width: 46px; height: 46px; border-radius: 23px; }
  .progress { top: 58px; left: 24px; right: 24px; }
}

/* Ultra-wide: stop the photo becoming a mural and the text drifting to
   the far edge. */
@media (min-width: 1800px) and (pointer: fine) {
  .reel-photo { flex: 0 0 48%; }
  .reel-content { padding-left: 120px; }
  .reel-content > * { max-width: 660px; }
}