/* ============================================================
   ARTINO — part 5: RESPONSIVE LAYER
   Loaded last so equal-specificity rules win by source order.
   Breakpoints:
     980px — large tablet / small laptop trims
     860px — primary stacking point (nav burger, 1-col layouts,
             hero phone hidden, app fragments re-flowed)
     560px — phone fine-tuning (type scale, CTA stacking, toggles)
     (hover:none) — touch devices get "resolved" demo states since
             the hover-driven product shots can't be triggered.
   ============================================================ */

/* ============================================================
   980px — gentle trims before the full stack
   ============================================================ */
@media (max-width: 980px) {
  .fblock { gap: 44px; }
  .nav-links { gap: 24px; }
  .feature-sec { padding: 90px 0 30px; }
  .solution { padding: 120px 0; }
}

/* ============================================================
   860px — PRIMARY MOBILE BREAKPOINT
   ============================================================ */
@media (max-width: 860px) {

  /* ---- use small-viewport height so the URL bar doesn't cause jumps ---- */
  @supports (min-height: 100svh) { .hero { min-height: 100svh; } }

  /* the mobile bar is shorter than the desktop nav — tighten the anchor offset */
  html { scroll-padding-top: 70px; }

  /* ---- NAV: swap the inline links for the burger + curtain menu ---- */
  .nav-inner { padding: 15px 22px; }
  .nav-links { display: none; }
  .nav-burger { display: block; }

  /* ---- HERO ---- */
  .hero { padding-bottom: 9vh; }
  .hero-feed { display: none !important; }           /* decorative phone — would cover the copy */
  .hero h1 { line-height: 1.06; }
  .hero h1 .ln { white-space: normal; }              /* allow the longer copy to wrap instead of clipping */
  .hero .sub { margin-top: 20px; }
  .hero .cta-row { margin-top: 26px; }

  /* ---- shared section rhythm (tighten the generous desktop padding) ---- */
  .wrap { padding: 0 24px; }
  .sec-head { padding: 0 24px; }
  .roles { padding: 74px 0 60px; }
  .roles .head { margin-bottom: 36px; }
  .problem { padding: 74px 0 60px; }
  .problem .head { margin-bottom: 40px; }
  .solution { padding: 88px 0; }
  .solution h2 { margin: 28px auto; max-width: 20ch; }
  .manifesto { padding: 80px 0 84px; }
  .manifesto cite { margin-bottom: 34px; }
  .feature-sec { padding: 60px 0 16px; }
  .benefits { padding: 80px 0 56px; }
  .benefits .head { margin-bottom: 40px; }
  .how { padding: 80px 0 60px; }
  .how .head { margin-bottom: 44px; }
  .track { margin-bottom: 48px; }
  .testi { padding: 32px 0 80px; }
  .testi .head { margin-bottom: 36px; }
  .waitlist { padding: 86px 0 96px; margin-top: 56px; }
  .footer { padding: 48px 0 40px; }

  /* ---- ROLE CLARITY: stack the 3 cards ---- */
  .role-grid { grid-template-columns: 1fr; }
  .role-card { padding: 30px 24px; }
  .role-card:nth-child(2) { transform: none; }       /* drop the desktop stagger when stacked */
  .roles .finep { margin-top: 34px; }

  /* ---- FEATURE BLOCKS: single column, visual first everywhere ---- */
  .fblock { grid-template-columns: 1fr; gap: 28px; padding: 46px 24px; }
  .fblock.flip .fb-visual,
  .fblock.flip .fb-copy { order: 0; }                /* normalise to DOM order (image, then copy) */
  .fb-copy { text-align: left; }
  .fb-copy p { max-width: none; }

  /* photo becomes a contained banner instead of a full-bleed absolute layer */
  .fb-visual { min-height: 0; }
  .fblock .fb-photo {
    position: relative; inset: auto;
    height: clamp(190px, 46vw, 250px);
    border-radius: 14px;
  }

  /* app fragments: pull out of the absolute corners, centre them, cap width,
     and overlap the photo's lower edge so they still read as "floating UI".
     !important is needed to beat .frag.app{position:absolute} and the inline
     transform the parallax script writes. */
  .fblock .frag {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: min(330px, 86vw) !important;
    margin: -42px auto 0 !important;
    z-index: 2;
  }
  .fblock .frag ~ .frag { margin: 16px auto 0 !important; }   /* 2nd fragment (bookings) sits below */

  /* ---- analytics dashboards (full-width, not .frag) ---- */
  .dash-frag, .evan-frag { width: 100%; }

  /* ---- MARQUEE: smaller so more art forms read per screen ---- */
  .marquee { padding: 20px 0; }
  .marquee-item { font-size: 24px; padding: 0 22px; }
  .marquee-item::after { margin-left: 44px; }

  /* ---- TESTIMONIALS: cards that fit the viewport with a peek ---- */
  .testi-track { gap: 18px; }
  .tcard { width: min(360px, 82vw); padding: 28px; }

  /* ---- FOOTER ---- */
  .footer-inner { padding: 0 24px; gap: 32px; }
  .footer-base { padding: 24px 24px 0; }
}

/* ============================================================
   560px — PHONE FINE-TUNING
   ============================================================ */
@media (max-width: 560px) {

  /* tighter gutters on small phones */
  .wrap,
  .sec-head,
  .footer-inner { padding-left: 20px; padding-right: 20px; }
  .nav-inner { padding-left: 20px; padding-right: 20px; }
  .footer-base { padding-left: 20px; padding-right: 20px; }
  .fblock { padding: 40px 20px; }

  /* type scale — bring the big display sizes down so headings don't crowd */
  .hero h1 { font-size: clamp(32px, 8.6vw, 44px); }
  .hero .sub { font-size: 17px; }
  .roles .head .t,
  .benefits .head h2,
  .how .head h2,
  .problem .head h2,
  .solution h2 { font-size: clamp(28px, 7.4vw, 38px); }
  .sec-head h2 { font-size: clamp(28px, 7.2vw, 37px); }
  .waitlist h2 { font-size: clamp(32px, 9vw, 48px); }
  .manifesto blockquote { font-size: clamp(25px, 7vw, 34px); }

  /* HERO CTAs: full-width stacked for thumb-friendly targets */
  .hero .cta-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero .cta-row .btn { width: 100%; justify-content: center; }

  /* WAITLIST role toggle: stack the 3 pills full-width (clean tap targets)
     instead of the cramped 2-then-1 wrap the inline row produces. */
  .role-toggle { display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 100%; max-width: 320px; border-radius: 14px; }
  .role-toggle button { width: 100%; white-space: nowrap; padding: 11px 14px; }

  /* MANIFESTO CTA + analytics blocks stack their inner grids */
  .kpi-row { gap: 8px; }
  .kpi { padding: 11px; }
  .kpi .k-val { font-size: 18px; }
  .kpi .k-val .muted { font-size: 12px; }
  .dash-lower, .dash-row2 { grid-template-columns: 1fr; gap: 12px; }

  /* poster fragment: keep its 2-up studio layout but a touch tighter */
  .po-stage { gap: 9px; }
}

/* ============================================================
   LIVING DEMOS — JS-driven play
   The product mockups used to animate only on :hover (so they froze
   on touch). Their triggers in artino-4.css are now a .play class that
   JS adds when the fragment scrolls into view (auto-play) and re-adds
   on hover / tap (replay). Works on every device, touch included.
   ============================================================ */
.feed-phone, .pf-frag, .pr-frag, .bk-frag, .tk-frag, .ch-frag,
.pub-frag, .po-frag, .se-frag, .sw-frag, .dash-frag { cursor: pointer; }
/* used for an instant reset between replays (snap to start, then animate) */
.no-trans, .no-trans * { transition: none !important; animation: none !important; }

/* ============================================================
   FEATURE CAROUSELS (For Artists / For Event Organisers)
   Desktop: the .fcarousel wrapper is transparent — the feature blocks
   stack exactly as before. Mobile: it becomes a horizontal scroll-snap
   carousel with pagination dots, so the page is far shorter.
   ============================================================ */
.fcarousel { display: contents; }
.fcarousel-dots { display: none; }

@media (max-width: 860px) {
  .fcarousel {
    display: flex;
    align-items: flex-start;          /* slides keep their natural height… */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;   /* keep the swipe inside the carousel — no overshoot / back-nav */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    transition: height 0.35s var(--ease);   /* …carousel resizes to the active slide (set by JS) */
  }
  .fcarousel::-webkit-scrollbar { display: none; }
  .fcarousel > .fblock {
    flex: 0 0 100%;
    width: 100%;
    margin: 0;
    padding: 30px 20px 36px;
    scroll-snap-align: start;          /* one full slide per page — matches the JS clientWidth*i math */
    scroll-snap-stop: always;
  }

  .fcarousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    margin-top: 16px;
    padding: 0 20px;
  }
  .fcarousel-dots .fc-dot {
    width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
    background: var(--gold-line); cursor: pointer; flex: none;
    transition: background 0.3s var(--ease), transform 0.3s var(--ease);
  }
  .fcarousel-dots .fc-dot.on { background: var(--tungsten); transform: scale(1.3); }

  /* Prev / next arrows pinned to the row edges; the auto margins keep the
     dots centred between them. They make the swipe affordance obvious. */
  .fc-arrow {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; padding: 0; flex: none;
    border: 1px solid var(--gold-line); border-radius: 50%;
    background: rgba(201,162,39,0.06); color: var(--tungsten);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: opacity 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
  }
  .fc-arrow svg { width: 17px; height: 17px; }
  .fc-arrow:active { background: rgba(201,162,39,0.16); border-color: var(--tungsten); }
  .fc-arrow:disabled { opacity: 0.28; cursor: default; }
  .fc-prev { margin-right: auto; }
  .fc-next { margin-left: auto; }
}

/* ============================================================
   ANALYTICS as a compact feature fragment
   The two analytics blocks are now standard photo + app-fragment +
   copy features (like the others), so every carousel slide is the
   same size. This shrinks the old full-width dashboard to a ~330px
   phone fragment. Selectors are specific enough to beat the generic
   .kpi / .k-val sizes (incl. the 560px phone rules above).
   ============================================================ */
.dash-frag, .evan-frag { width: 330px; }
.an-body { padding: 8px 14px 14px; }
.dash-frag .kpi-row, .evan-frag .kpi-row { gap: 7px; margin: 9px 0 11px; }
.dash-frag .kpi, .evan-frag .kpi { padding: 8px 9px; }
.dash-frag .kpi .k-label, .evan-frag .kpi .k-label { font-size: 8px; }
.dash-frag .kpi .k-val, .evan-frag .kpi .k-val { font-size: 14px; margin-top: 3px; }
.dash-frag .chart-card, .evan-frag .chart-card { padding: 10px 12px; }
.dash-frag .chart-card .ui-label, .evan-frag .chart-card .ui-label { font-size: 9px; }
.dash-frag .bars { height: 56px; gap: 5px; margin-top: 9px; }
.dash-frag .dash-reels { margin-top: 11px; gap: 6px; }
.dash-frag .dash-reels .rl { font-size: 11px; }
.evan-frag .hbars { gap: 9px; }
.evan-frag .hbars .hl { width: 56px; font-size: 10px; }
.evan-frag .hbars .hv { font-size: 10px; width: 24px; }
/* tickets-by-tier bars grow when the demo plays */
.evan-frag .hbars .ht i { width: 0; }
.evan-frag.play .hbars .ht i { width: var(--w, 100%); }