/*
 * mobile.css
 * Mobile optimisation for Nodarama website
 * Load after newstyle.css and 3site.css on all pages
 * Targets: phones (≤480px), small tablets (≤640px), tablets (≤768px)
 *
 * Strategy:
 *  index.html  — panels become vertical scroll instead of 2D world pan
 *  3site pages — editorial layout collapses cleanly, nav becomes hamburger-style
 */

/* ════════════════════════════════════════════════════════════════
   SHARED MOBILE BASE — applies to all pages
   ════════════════════════════════════════════════════════════════ */

@media (min-width: 769px) {
  .screenshot-block.screenshot-block-monitor {
    display: grid !important;
    grid-template-columns: minmax(420px, 640px) minmax(320px, 520px) !important;
    justify-content: center;
    align-items: center;
    gap: 3.5rem;
  }

  .screenshot-block.screenshot-block-monitor .screen-caption {
    text-align: left !important;
    max-width: 640px;
  }

  .screenshot-block.screenshot-block-monitor .monitor-video-frame {
    width: min(34vw, 480px);
  }
}

@media (max-width: 768px) {

  /* ── TYPOGRAPHY SCALE DOWN ── */
  :root {
    font-size: 15px;
  }

  /* ── 3SITE HEADER ── */
  .site-header-3 { position: sticky; top: 0; }

  .site-header-inner-3 { padding: 0.6rem 1rem 0.7rem; }

  .site-brand-3 { min-height: 58px; }
  .site-brand-3 img { width: min(58vw, 340px); }

  /* Nav: stack into 2 col grid, hide subnavs */
  .nav-list-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.3rem 0.6rem;
    margin-top: 0.4rem;
  }
  .nav-link-3 { font-size: 0.9rem; padding: 0.22rem 0; }
  .subnav-3 { display: none !important; } /* hide dropdowns on mobile — touch unfriendly */

  /* ── HERO SECTION ── */
  .page-hero-3, .page-hero-editorial {
    min-height: 200px;
    padding: 2rem 1rem 2rem;
  }
  .page-hero-3.page-hero-editorial .page-title-3 {
    font-size: clamp(2.2rem, 9vw, 3.2rem);
    margin-bottom: 0.8rem;
  }
  .page-summary-3 {
    font-size: 0.97rem;
    line-height: 1.65;
    margin-top: 0.8rem;
  }
  .page-kicker-3 { font-size: 0.75rem; margin-bottom: 0.5rem; }

  /* ── CONTENT CARDS ── */
  .content-card-3 { padding: 1.5rem 1rem 1.6rem; }
  .content-card-3 h2 { font-size: 1.15rem; margin-bottom: 0.55rem; }
  .content-card-3 p, .content-card-3 li { font-size: 0.96rem; line-height: 1.65; }

  .page-main-3 { padding: 0 1rem 3rem; }
  .section-grid-3 { gap: 1rem; margin-top: 1rem; }

  /* ── EDITORIAL LAYOUTS ── */

  /* Split feature: single column, image on top */
  .split-feature,
  .split-feature-reverse {
    grid-template-columns: 1fr;
    direction: ltr;
  }
  .split-feature-img {
    min-height: 220px;
    max-height: 280px;
  }
  .split-feature-img img { height: 100%; }
  .split-feature-text {
    padding: 2rem 1.2rem;
  }
  .split-feature-text h2 { font-size: 1.2rem; margin-bottom: 0.9rem; }
  .split-feature-text p  { font-size: 0.96rem; line-height: 1.65; }
  .split-feature-text li { font-size: 0.94rem; }
  .split-feature-text h3 { font-size: 0.72rem; }

  /* Feature grids: single column */
  .feature-grid {
    padding: 2.5rem 1.2rem;
    gap: 2rem;
  }
  .feature-grid-2,
  .feature-grid-3 { grid-template-columns: 1fr; }
  .feature-item h2 { font-size: 1.05rem; }
  .feature-item p  { font-size: 0.95rem; }

  /* Screenshot blocks */
  .screenshot-block { padding: 2.5rem 1rem; gap: 1.2rem; }
  .screenshot-block .screen-caption p { font-size: 0.92rem; }
  .screenshot-frame { width: 100%; }

  /* Pull band */
  .pull-band { padding: 2.5rem 1.2rem; }
  .pull-band p { font-size: clamp(1.2rem, 4.5vw, 1.6rem); }

  /* Ambient section */
  .ambient-section { min-height: 280px; }
  .ambient-section .ambient-content { padding: 2rem 1.2rem; }
  .ambient-section .ambient-content h2 { font-size: clamp(1.3rem, 4.8vw, 1.9rem); }
  .ambient-section .ambient-content p  { font-size: 0.96rem; }

  /* Cinematic image breaks shorter on mobile */
  .img-break-tall, .img-break-tall img { max-height: 240px; height: 240px; }

  /* Dark spacer reduced */
  .dark-spacer { padding: 1.8rem 0; }

  /* ── PRICING TABLE ── */
  .pricing-table-3 { gap: 0.6rem; }
  .pricing-row-3 {
    grid-template-columns: 1fr;
    gap: 0.3rem;
    padding: 0.9rem 0.8rem;
  }
  .pricing-head-3 { display: none; }
  .pricing-tier-3  { font-size: 1rem; }
  .pricing-price-3 { font-size: 1.05rem; }
  .pricing-details-3 li { font-size: 0.9rem; }

  /* ── FOOTER ── */
  .site-footer-inner-3 { padding: 1.5rem 1rem 2.5rem; }
  .footer-grid-3 { grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
  .footer-brand-3 img { width: min(55vw, 280px); }
  .footer-group-3 h3 { font-size: 0.88rem; }
  .footer-link-3  { font-size: 0.88rem; }
  .footer-copy-3  { font-size: 0.8rem; margin-top: 1rem; }
}

/* ════════════════════════════════════════════════════════════════
   PHONE — ≤480px
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {

  .site-brand-3 img { width: min(72vw, 280px); }
  .nav-list-3 { grid-template-columns: 1fr 1fr; gap: 0.2rem 0.5rem; }
  .nav-link-3 { font-size: 0.82rem; }

  .footer-grid-3 { grid-template-columns: 1fr 1fr; }
  .pull-band p { font-size: 1.15rem; }
  .split-feature-img { max-height: 200px; min-height: 180px; }
  .img-break-tall, .img-break-tall img { max-height: 180px; height: 180px; }
}

/* ════════════════════════════════════════════════════════════════
   INDEX.HTML — 2D PANEL NAVIGATION → VERTICAL STACK
   On mobile the world-pan system becomes a single scrolling page.
   Panels are taken out of fixed positioning and stacked vertically.
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── WORLD / VIEWPORT — unlock scrolling ── */
  html, body { overflow: auto; overflow-x: hidden; }

  .viewport {
    width: 100vw;
    height: auto;
    overflow: visible;
  }

  .world {
    position: relative;
    inset: auto;
    width: 100vw;
    height: auto;
    transform: none !important;    /* override JS transform */
    transition: none !important;
    display: flex;
    flex-direction: column;
  }

  /* All panels become full-width natural-height blocks */
  .panel {
    position: relative;
    width: 100vw;
    height: auto;
    min-height: 100svh;            /* svh = small viewport height, avoids browser chrome issue */
    left: auto !important;
    top: auto !important;
    overflow: visible;
  }

  /* Re-order panels to make reading sense:
     center (hero) → left (verbatim) → right (atelier) → middle (design) → bottom (cta) */
  .panel-center { order: 1; }
  .panel-left   { order: 2; }
  .panel-right  { order: 3; }
  .panel-middle { order: 4; }
  .panel-bottom { order: 5; height: auto; overflow-y: visible; overflow-x: hidden; }

  /* ── CENTER PANEL: HERO ── */
  /* All children were position:absolute — make them static flow */
  .panel-center > *, .panel-left > *, .panel-right > *,
  .panel-middle > *, .panel-bottom > * {
    position: relative;
    z-index: 3;
  }

  /* Panel bg stays absolute behind content */
  .panel-bg {
    position: absolute;
    inset: 0;
    height: 100%;
    z-index: 0;
  }

  /* Hero center layout */
  .panel-center {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 2rem 1.2rem 5rem;
    gap: 0;
    background: #000;
  }

  .hero-brand {
    position: relative;
    top: auto; left: auto;
    margin-bottom: 2rem;
    width: 100%;
  }
  .hero-wordmark { width: min(82vw, 380px); }

  .hero-copy {
    position: relative;
    top: auto; left: auto;
    transform: none;
    width: 100%;
    margin-bottom: 2.5rem;
  }
  .hero-copy p { font-size: clamp(0.95rem, 3.8vw, 1.18rem); }

  .hero-title-band {
    position: relative;
    left: auto; right: auto; bottom: auto;
    height: auto; width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
  }

  .hero-verbatim, .hero-atelier {
    position: relative;
    left: auto; top: auto;
    transform: none;
    width: 100%;
    text-align: left;
  }
  .hero-verbatim h1 { font-size: clamp(2.2rem, 10vw, 3.5rem); letter-spacing: 0.12em; }
  .hero-atelier h2  { font-size: clamp(2.4rem, 11vw, 3.8rem); letter-spacing: 0.12em; }
  .hero-atelier p   { text-align: left; }

  .hero-arrow { display: none; }

  .hero-bottom-line {
    position: relative;
    left: auto; bottom: auto;
    transform: none;
    width: 100%;
    text-align: left;
    font-size: clamp(1rem, 4vw, 1.3rem);
    margin-bottom: 2rem;
  }

  /* Nav controls in panel context */
  .down-link, .up-link {
    position: relative;
    left: auto; top: auto; bottom: auto;
    transform: none;
    margin: 1rem auto 0;
    display: none; /* hide slide controls — using scroll now */
  }

  /* ── LEFT PANEL: VERBATIM ── */
  .panel-left {
    display: flex;
    flex-direction: column;
    padding: 0;
    background: var(--cream);
  }

  .left-info-card {
    position: relative;
    top: auto; left: auto;
    width: 100%;
    height: auto;
    padding: 2.5rem 1.2rem 2rem;
    gap: 1.2rem;
  }
  .left-info-card h2 { font-size: 1.05rem; }
  .left-info-card p, .left-info-card li { font-size: 0.97rem; }

  .left-overlay-copy {
    position: relative;
    top: auto; right: auto;
    text-align: left;
    padding: 1.5rem 1.2rem 0;
    background: rgba(0,0,0,0.65);
    width: 100%;
  }
  .left-product-title { font-size: clamp(2rem, 9vw, 3rem); letter-spacing: 0.12em; }
  .left-product-sub   { font-size: clamp(1rem, 4vw, 1.3rem); }

  .return-button.return-left {
    position: relative;
    top: auto; left: auto; right: auto; bottom: auto;
    margin: 1rem 0 1.5rem 1.2rem;
    align-self: flex-start;
  }

  /* ── RIGHT PANEL: ATELIER ── */
  .panel-right {
    display: flex;
    flex-direction: column;
    padding: 0;
  }

  .right-title-block {
    position: relative;
    top: auto; left: auto;
    transform: none;
    padding: 2rem 1.2rem 1rem;
    background: rgba(0,0,0,0.55);
    width: 100%;
  }
  .right-title-block h1 { font-size: clamp(2.2rem, 9.5vw, 3.2rem); letter-spacing: 0.14em; }
  .right-title-block p  { font-size: clamp(0.95rem, 3.8vw, 1.2rem); }

  .right-info-card {
    position: relative;
    top: auto; right: auto;
    width: 100%;
    height: auto;
    padding: 1.5rem 1.2rem 2rem;
    text-align: left;
    background: rgba(0,0,0,0.72);
  }
  .right-info-card h2 { font-size: 1.05rem; }
  .right-info-card p, .right-info-card li { font-size: 0.97rem; }
  .right-cta { justify-self: start; }

  .return-button.return-right {
    position: relative;
    top: auto; left: auto; right: auto; bottom: auto;
    margin: 0 0 1.5rem 1.2rem;
    align-self: flex-start;
  }

  /* ── MIDDLE PANEL: DESIGN / KERNEL ── */
  .panel-middle {
    display: flex;
    flex-direction: column;
    padding: 2rem 1.2rem 3rem;
    gap: 0;
  }

  .design-topline {
    position: relative;
    top: auto; left: auto;
    transform: none;
    width: 100%;
    font-size: clamp(1rem, 4vw, 1.3rem);
    margin-bottom: 1.5rem;
    text-align: left;
    color: rgba(255,255,255,0.9);
  }

  .design-grid {
    position: relative;
    top: auto; left: auto; right: auto;
    height: auto; width: 100%;
    grid-template-columns: 1fr;
    gap: 1.8rem;
    padding: 0;
    margin-bottom: 2rem;
  }

  .design-left-copy {
    max-width: 100%;
    padding: 0;
    color: rgba(255,255,255,0.92);
  }
  .design-left-copy h2 {
    font-size: clamp(2.8rem, 12vw, 4.5rem);
    letter-spacing: 0.15em;
    margin-bottom: 1rem;
    -webkit-text-fill-color: unset;
    background: none;
    color: rgba(255,255,255,0.92);
  }
  .design-left-copy p { font-size: clamp(0.95rem, 3.6vw, 1.1rem); }

  .design-right-copy {
    max-width: 100%;
    padding: 0;
    text-align: left;
  }
  .design-right-copy p, .design-right-copy li {
    font-size: clamp(0.95rem, 3.6vw, 1.1rem);
  }
  .design-right-copy ul { margin-top: 1rem; }

  .kernel-title {
    position: relative;
    right: auto; bottom: auto;
    font-size: clamp(1.6rem, 7.5vw, 2.4rem);
    letter-spacing: 0.14em;
    margin-top: 1rem;
  }

  /* ── BOTTOM PANEL: CTA ── */
  .panel-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 1.2rem 0;
    height: auto;
    min-height: auto;
    overflow: visible;
  }

  .bottom-cta-stack {
    position: relative;
    top: auto; right: auto;
    width: min(90vw, 420px);
    margin: 0 auto 3rem;
  }

  .footer-button {
    min-height: 72px;
    border-radius: 14px;
  }

  .bottom-brand-mark {
    position: relative;
    left: auto; bottom: auto;
    transform: none;
    margin: 0 auto 1.5rem;
  }
  .bottom-brand-mark img { width: min(72vw, 340px); }

  .bottom-footer-nav {
    position: relative;
    left: auto; right: auto; bottom: auto;
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
    padding: 1.8rem 1.2rem 2.5rem;
    margin-top: 0;
  }
  .bottom-footer-nav h4  { font-size: 0.9rem; }
  .bottom-footer-nav a   { font-size: 0.88rem; }

  /* Dark fill and collapsed header not needed in scroll mode */
  .bottom-dark-fill     { display: none; }
  .collapsed-site-header { display: none; }

  /* ── SECTION LABELS between stacked panels ── */
  .panel-left::before,
  .panel-right::before,
  .panel-middle::before {
    content: attr(aria-label);
    display: block;
    font-family: "Courier New", monospace;
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(212,134,49,0.7);
    padding: 0.6rem 1.2rem;
    background: rgba(0,0,0,0.85);
    border-bottom: 1px solid rgba(212,134,49,0.18);
    width: 100%;
  }
}

/* ════════════════════════════════════════════════════════════════
   PHONE ≤ 480px — tighten further
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {

  .panel-center  { padding: 1.5rem 1rem 3.5rem; }
  .panel-middle  { padding: 1.5rem 1rem 2.5rem; }
  .panel-bottom  { padding: 2rem 1rem 0; }

  .hero-wordmark { width: min(88vw, 300px); }
  .left-info-card { padding: 2rem 1rem 1.8rem; }
  .right-title-block { padding: 1.5rem 1rem 0.8rem; }
  .right-info-card   { padding: 1.2rem 1rem 1.8rem; }

  .bottom-footer-nav { grid-template-columns: 1fr 1fr; padding: 1.5rem 1rem 2rem; }
  .bottom-cta-stack  { width: min(96vw, 380px); }
  .footer-button { min-height: 62px; }

  .design-left-copy h2 { font-size: clamp(2.4rem, 13vw, 3.5rem); }
  .kernel-title         { font-size: clamp(1.3rem, 7vw, 2rem); }

  .pull-band p { font-size: 1.05rem; }
  .screenshot-block { padding: 2rem 0.5rem; }
}

/* ════════════════════════════════════════════════════════════════
   TOUCH: remove hover-dependent interactions that don't work on touch
   ════════════════════════════════════════════════════════════════ */

@media (hover: none) {
  .content-card-3:hover       { transform: none; box-shadow: none; }
  .split-feature-img img:hover { transform: none; }
  .screenshot-frame:hover      { transform: none; box-shadow: 0 32px 80px rgba(0,0,0,0.7); }
  .footer-button:hover         { transform: none; }
  .outline-button:hover        { transform: none; box-shadow: none; }
  .hero-verbatim:hover h1      { letter-spacing: 0.18em; text-shadow: 0 3px 16px rgba(0,0,0,0.5); }
  .hero-atelier:hover h2       { letter-spacing: 0.18em; text-shadow: 0 3px 16px rgba(0,0,0,0.5); }
  .hero-wordmark:hover         { filter: none; }
  .kernel-patent:hover         { transform: none; filter: drop-shadow(0 8px 32px rgba(0,0,0,0.45)); }
}