/* ============================================================================
   responsive.css — breakpoint behaviour + print (PDF export) rules
   Load order: bootstrap → style.css → animations.css → responsive.css
   ==========================================================================*/

/* ---------- Proportional type scale by viewport height -------------------
   Everything sized in rem shrinks with the projector, so dense slides keep
   their layout instead of spilling into a scroll.                          */
@media (max-height: 960px) { html { font-size: 15px; } }
@media (max-height: 820px) { html { font-size: 14.2px; } }
@media (max-height: 720px) { html { font-size: 13.4px; } }

/* ---------- Large desktop / projector (≥1600px) -------------------------- */
@media (min-width: 1600px) {
  :root { --slide-pad-x: 8vw; }
  .slide-head h2 { font-size: 2.15rem; }
  .title-slide h1 { font-size: 4rem; }
  .lead-text { font-size: 1.12rem; }
}

/* ---------- Short viewports (laptops, 16:9 projectors ≤960px tall) -------
   A 1600×900 projector leaves roughly 660px of slide body once the header and
   footer are taken out, so the compact scale starts well above 820px.       */
@media (max-height: 960px) {
  :root { --slide-pad-y: 4vh; --footer-h: 56px; }
  .slide-head h2 { font-size: 1.72rem; }
  .slide-head { margin-bottom: 15px; padding-bottom: 10px; }
  .lead-text { font-size: .98rem; margin-bottom: 12px; }
  .kpi .val { font-size: 1.6rem; }
  .title-slide h1 { font-size: 2.9rem; }
  .thanks h1 { font-size: 2.5rem; }
  .chart-holder { min-height: 140px; }

  /* component-level compaction so the densest slides still fit without scroll */
  .grid { gap: 10px; }
  .card-tile { padding: 11px 13px; }
  .card-tile small { font-size: .8rem; margin-top: 2px; }
  .icon-card { padding: 13px; }
  .wf-step { padding: 6px 14px; }
  .stage { padding: 6px 13px; }
  .tbl th, .tbl td { padding: 6px 12px; }
  .note { padding: 8px 12px; font-size: .82rem; margin-top: 9px; }
  ul.clean li { padding: 8px 10px 8px 32px; }
  .arch-layer { padding: 7px 14px; }
  .chart-box { padding: 10px 12px 4px; }
  .chart-box .cap { margin-bottom: 6px; }
  .mb-10 { margin-bottom: 8px; }
}

@media (max-height: 660px) {
  :root { --slide-pad-y: 3vh; }
  .slide-head h2 { font-size: 1.5rem; }
  .slide-head .head-icon { width: 38px; height: 38px; font-size: 1rem; }
  .title-slide h1 { font-size: 2.4rem; }
  .title-slide .meta { margin-top: 18px; }
  .card-tile { padding: 10px 12px; font-size: .92rem; }
}

/* ---------- Tablet (≤1180px) -------------------------------------------- */
@media (max-width: 1180px) {
  .g5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .col2-wide { grid-template-columns: minmax(0, 1fr); }
  .vision { padding: 18px; }
  .stepper .st { flex: 1 1 46%; margin-bottom: 20px; }
}

/* ---------- Tablet portrait / large phone (≤900px) ---------------------- */
@media (max-width: 900px) {
  :root { --slide-pad-x: 6vw; --slide-pad-y: 3.4vh; }

  .slide-head { gap: 10px; }
  .slide-head h2 { font-size: 1.32rem; }
  .slide-head .head-icon { display: none; }
  .badge-pill { font-size: .62rem; padding: 6px 10px; }

  .g2, .g3, .g4, .g5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .col2 { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .thanks .tk { grid-template-columns: repeat(2, 1fr); }

  .title-slide h1 { font-size: 2.15rem; }
  .title-slide .sub { font-size: 1.05rem; }
  .title-slide .meta { gap: 28px; font-size: .86rem; }
  .thanks h1 { font-size: 2.1rem; }

  .arch-layer { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .arch-layer .ico { display: none; }

  .wf-step { grid-template-columns: 40px minmax(0, 1fr); }
  .wf-step .wf-sla { grid-column: 2; justify-self: start; margin-top: 4px; }
  .wf-arrow { margin-left: 20px; }

  .stepper .st { flex: 1 1 100%; margin-right: 0; margin-bottom: 24px; }
  .stepper .st::after {
    right: 50%; top: auto; bottom: -20px;
    transform: translateX(50%) rotate(90deg);
  }

  #sidebar { width: 300px; }
  .close-foot { gap: 20px; }
}

/* ---------- Phone (≤640px) --------------------------------------------- */
@media (max-width: 640px) {
  :root { --slide-pad-x: 5vw; --footer-h: 58px; }

  .g2, .g3, .g4, .g5 { grid-template-columns: minmax(0, 1fr); }
  .thanks .tk { grid-template-columns: 1fr; }
  .flow .step { font-size: .84rem; padding: 8px 11px; }
  .flow .arrow { display: none; }

  .slide-head h2 { font-size: 1.16rem; }
  .badge-pill { display: none; }
  .lead-text { font-size: .92rem; }

  .kpi .val { font-size: 1.45rem; }
  .tbl { font-size: .86rem; }

  .deck-footer { gap: 8px; padding: 0 12px; }
  .deck-footer .brand span { display: none; }
  .nav-btn { font-size: .8rem; padding: 8px 12px; }
  .nav-btn .lbl { display: none; }
  #hint { display: none; }

  .close-foot { flex-direction: column; gap: 16px; }
  .close-contact { text-align: center; }
}

/* ---------- Reduced motion --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-aos] { opacity: 1 !important; transform: none !important; }
}

/* ---------- Print / Export to PDF --------------------------------------
   One slide per landscape page. The printable area of A4 landscape at 8mm
   margins is 1062 x 733px (96dpi), which is narrower than any screen tier, so
   two things are needed: the type scale steps down, and the multi-column
   layouts are pinned back to their desktop form — otherwise the ≤1180px
   tablet rules stack the columns and a slide grows past a page.
   Verified: 20 slides → 20 pages, nothing clipped (Chrome/Edge).
   ---------------------------------------------------------------------- */
@media print {
  @page { size: A4 landscape; margin: 8mm; }

  html { font-size: 11.4px; }

  html, body {
    overflow: visible !important;
    background: #fff !important;
    height: auto !important;
  }

  #progress, .deck-footer, #sidebar, #sb-overlay, #hint { display: none !important; }
  #deck { position: static !important; width: auto !important; height: auto !important; }

  .slide {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 6mm 8mm !important;
    break-after: page;
    page-break-after: always;
    box-shadow: none !important;
  }
  .slide:last-child { break-after: auto; page-break-after: auto; }
  .title-slide, .thanks { min-height: 170mm !important; }
  .slide-body { overflow: visible !important; }
  /* Content is top-aligned on paper: a page-height slide box plus the centring
     spacers makes Chrome fragment each slide across two pages. */
  .slide-body::before, .slide-body::after { content: none !important; display: none !important; }

  /* ---- keep the desktop composition at page width ---- */
  .col2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 12px !important; }
  .col2-wide { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) !important; gap: 12px !important; }
  .split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) !important; gap: 12px !important; }
  .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .g5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .thanks .tk { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .slide-head .head-icon { display: grid !important; }

  .stepper .st { flex: 1 1 0 !important; margin: 0 18px 0 0 !important; }
  .stepper .st:last-child { margin-right: 0 !important; }
  .stepper .st::after {
    right: -14px !important; top: 50% !important; bottom: auto !important;
    transform: translateY(-50%) !important;
  }

  .arch-layer { grid-template-columns: 36px minmax(0, 1fr) !important; }
  .arch-layer .ico { display: grid !important; }
  .wf-step { grid-template-columns: 42px minmax(0, 1fr) auto !important; }
  .wf-step .wf-sla { grid-column: auto !important; margin-top: 0 !important; }

  /* ---- density for the page ---- */
  .chart-holder { min-height: 34mm !important; }
  /* Print the static chart snapshot: revealing every slide at once resizes each
     live canvas, which clears it, and the repaint needs a frame that printing
     never provides. */
  .chart-holder canvas { display: none !important; }
  .chart-print {
    display: block !important;
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    object-position: left top;
  }
  .chart-box { padding: 7px 9px 2px !important; }
  .slide-head { margin-bottom: 7px !important; padding-bottom: 5px !important; }
  .lead-text { margin-bottom: 7px !important; }
  .grid { gap: 6px !important; }
  .card-tile, .icon-card { padding: 6px 9px !important; }
  .kpi { padding: 8px 10px !important; }
  .tbl th, .tbl td { padding: 3.5px 8px !important; }
  .note { margin-top: 6px !important; padding: 5px 9px !important; }
  ul.clean { gap: 4px !important; }
  ul.clean li { padding: 4px 8px 4px 24px !important; }
  ul.clean li::before { top: 11px; left: 9px; }
  .wf-step, .stage { padding: 4px 9px !important; }
  .wf-arrow { margin: 0 0 0 20px !important; }
  .stages { gap: 3px !important; }
  .phase-tag { margin: 6px 0 4px !important; }
  .movegap { margin-left: 18px !important; }
  .vision { padding: 12px !important; }
  .mini-tl .mt { padding: 6px 9px !important; }
  .timeline { padding-left: 22px !important; }
  .tl-item { padding-bottom: 9px !important; }

  /* keep the dark hero slides readable in print */
  .title-slide, .thanks {
    background: #0b2e4f !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .card-tile, .icon-card, .kpi, .chart-box, .portal-card, .arch-layer, .stage, .wf-step {
    break-inside: avoid;
    page-break-inside: avoid;
    box-shadow: none !important;
  }

  /* a sticky <thead> makes Chrome fragment the table and repeat its header */
  .tbl-wrap, .tbl, .tbl tr, .tbl thead, .tbl tbody {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .tbl thead th { position: static !important; }
  /* no scroll containers on paper — let the table use the page width */
  .tbl-wrap { overflow: visible !important; }
  .tbl { min-width: 0 !important; }

  [data-aos] { opacity: 1 !important; transform: none !important; }
}