/* Print / A4 export stylesheet */
@page {
  size: A4;
  margin: 14mm 14mm;
}

@media print {
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  html {
    /* Tighten the web's viewport-relative (vw) spacing scale for a fixed A4 page —
       the mobile/desktop clamp() values are sized for a scrolling screen, not a
       page budget, and left every printed section with large empty margins. */
    --section-pad-y: 8mm;
    --gutter: 8mm;
  }

  html, body { background: #fff !important; font-size: 10.5pt; }

  .skip-link,
  .topnav,
  .topnav__pdf,
  .closing__pdf,
  .journey__label::after { display: none !important; }

  a[href]::after { content: "" !important; }

  main { display: block; }

  /* Vietnamese line-breaking: avoid ugly mid-phrase wraps and single-word
     widows on the last line of a paragraph. */
  p, li, h1, h2, h3 { text-wrap: pretty; }

  .cover {
    min-height: 0;
    height: 265mm;
    max-height: 265mm;
    overflow: hidden;
    page-break-after: always;
    break-after: page;
    background: var(--navy-950) !important;
    justify-content: center;
    gap: 2rem;
  }
  .cover__mid { margin: 0; }
  /* Web's max-width:16ch + clamp() are sized for a narrow mobile viewport and
     force "Tăng tốc giữa biến động," onto 2 rows even though the full A4
     content width has room — override both so the <br/>-ed first line sits
     on its own single row at this page width. */
  .cover__headline {
    font-size: 27pt;
    max-width: none;
    width: 100%;
    white-space: nowrap;
    letter-spacing: -0.01em;
  }
  .cover__headline span { white-space: normal; }

  /* No forced break before/after each numbered section — that's what left
     pages 25-60% blank (a section's own content rarely divides evenly into
     whole A4 pages). Content now flows continuously; break-inside/avoid rules
     below keep individual cards, headings and photos from being split or
     orphaned as it does. */
  .section { padding: var(--section-pad-y) var(--gutter); }
  .section--navy { background: var(--navy-900) !important; }
  .section--navy::before { display: none; }

  h1, h2, h3 { break-after: avoid; break-inside: avoid; }
  .section__head { break-after: avoid; break-inside: avoid; margin-bottom: 6mm; padding-bottom: 3mm; }

  .season-card, .audience__card, .value, .speaker, .timeline__item,
  .logo-grid li, .moderator, .closing__photo, .schedule-hero,
  .timeline__photo-pair { break-inside: avoid; }

  /* The one true orphan: this disclaimer belongs with the logo grid it
     footnotes, never alone at the top of a fresh page. */
  .partners__footnote { break-before: avoid; break-inside: avoid; }

  .season-card { margin-bottom: 4mm; padding: 5mm !important; }
  .h-with-mark { margin-top: 5mm; }
  .overview__intro { margin-bottom: 3mm; }
  .overview__intro h2 { margin-bottom: 2mm; }

  /* Single row of 6 (matches the original one-page layout) instead of a
     3x2 grid — halves the vertical footprint of the stats block, which is
     what makes the whole of section 01 (stats + season card + logo grid)
     fit on one A4 page. */
  .stats {
    grid-template-columns: repeat(6, 1fr) !important;
    margin: 3mm 0 !important;
    gap: 0.5rem !important;
  }
  .stats li strong { font-size: 1.25rem !important; }
  .stats li span { font-size: 0.55rem !important; }

  .season-card__grid { margin: 3mm 0 !important; gap: 0.75rem !important; }
  .season-card__quote { margin-top: 3mm !important; padding-top: 3mm !important; }

  .partners { margin-top: 2mm; }
  .partners__head { margin-bottom: 1.5mm !important; }
  .partners__title, .partners__sub { font-size: 7pt !important; }

  /* 27 logos + 1 "+400" chip = 28 cells — 7 columns divides evenly into
     4 full rows with nothing left empty (6 columns left 3 cells blank).
     Chromium's print engine never fragments a CSS Grid across pages (same
     root cause as the .journey fix below) — the whole logo-grid was
     jumping to a fresh page as one block even with room to spare on the
     page before it. Flexbox wraps the same 7-up layout but DOES fragment,
     so the grid can split cleanly between row 3 and row 4 if a page ends
     mid-grid. gap+background still draws the hairline dividers. */
  /* No outer border/background/overflow-hidden "box" wrapper in print — the
     base styles' rounded container reads fine as one solid block on screen,
     but once the flex container fragments across pages (row 3 on page N,
     row 4 on page N+1) that same wrapper's bottom border + fill-colour
     background render as a hollow, empty-looking box trailing the last row
     that DID fit. Hairline cell borders alone still read as a grid. */
  .logo-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-bottom: 1.5mm !important;
    gap: 1px !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    background: transparent !important;
  }
  .logo-grid li {
    flex: 0 0 calc(100% / 7 - 1px) !important;
    background: #fff !important;
    box-shadow: 0 0 0 0.5px var(--line) !important;
  }
  .logo-grid img { max-height: 14px !important; }
  .logo-grid li { min-height: 30px !important; padding: 0.25rem !important; }
  .logo-grid__more { font-size: 0.46rem !important; }
  .partners__footnote { font-size: 7pt; line-height: 1.35; }

  /* Section 02 (ĐỐI TƯỢNG + Giá trị) reads as one fresh page too — a
     mid-page start left no room for the Value block beneath it and
     orphaned it alone on the next page. */
  .audience { grid-template-columns: repeat(3, 1fr) !important; gap: 0.6rem !important; margin-bottom: 5mm !important; }
  .audience__card { padding: 0.75rem !important; }
  .audience__card h3 { font-size: 0.95rem !important; margin-bottom: 0.3rem !important; }
  .audience__card p { font-size: 8.5pt; margin-bottom: 0.5rem !important; }
  .audience__stat { margin-bottom: 0.5rem !important; }
  .tags { gap: 0.3rem !important; }
  .tags li { font-size: 7pt !important; padding: 0.2rem 0.5rem !important; }

  .values { grid-template-columns: repeat(2, 1fr) !important; margin-top: 3mm; gap: 0.6rem 1.25rem !important; }
  .value h3 { font-size: 0.95rem !important; margin: 0.3rem 0 0.2rem !important; }
  .value p { font-size: 8.5pt !important; }
  .value__icon { width: 18px !important; height: 18px !important; }

  /* Speaker cards as compact rows (photo left, bio right) instead of a 3-wide
     photo grid — a 3-up grid row is one ~550px atomic chunk that print pages
     break on awkwardly; one row per speaker is small enough to pack tightly
     without leaving a page half empty. */
  /* The whole DIỄN GIẢ section must read as ONE tidy A4 page (chị Tuyền,
     02/10 13:47) — give it a fresh page so all 6 speakers + moderator get
     the full page height to work with, instead of starting mid-page and
     spilling onto a second one. */
  #dien-gia { break-before: page; }
  .speakers__lede { margin-bottom: 3.5mm; font-size: 1.1rem !important; }
  .speakers { grid-template-columns: 1fr !important; gap: 2.75mm !important; }
  .speaker {
    display: grid !important;
    grid-template-columns: 22mm 1fr !important;
    column-gap: 4mm;
    align-items: start;
  }
  .speaker img {
    width: 22mm !important;
    aspect-ratio: 1/1;
    margin-bottom: 0 !important;
  }
  /* Đặng Huỳnh Ức My: full original portrait, no crop — same frame, letterboxed. */
  .speaker--full img {
    object-fit: contain !important;
  }
  .speaker__info { display: block !important; }
  .speaker__session { margin-bottom: 0.2rem; padding-left: 0.6rem; }
  .speaker h3 { font-size: 1rem; margin-bottom: 0.15rem; }
  .speaker__role { font-size: 7.3pt; margin-bottom: 0.25rem; line-height: 1.25; }
  .speaker__bio { font-size: 7.3pt; padding-top: 0.25rem; line-height: 1.3; }

  .moderator { margin-top: 2.5mm; padding-top: 2mm; }

  #chuong-trinh h2 { margin-bottom: 3mm !important; }
  .schedule-hero { margin-bottom: 3.5mm; }
  .schedule-hero img { aspect-ratio: 5.5/1; }

  /* CSS Grid containers don't fragment across Chromium print pages — the
     whole .journey block was jumping to the next page as one atomic unit.
     Plain block flow lets it break between tracks/items instead. */
  .journey { display: block !important; }
  .journey__track { margin-bottom: 4mm; }
  .journey__track:last-child { margin-bottom: 0; }
  .journey__label { break-after: avoid; margin-bottom: 2.5mm !important; padding-bottom: 1.5mm !important; }
  .timeline__item {
    padding-bottom: 2.5mm !important;
    margin-bottom: 2.5mm !important;
  }
  /* Chromium print pagination leaves a ghost sliver of a few tall Vietnamese
     diacritics (e.g. from "KẾT NỐI...") painted at the very bottom of the
     PREVIOUS page even though break-inside:avoid correctly moves the whole
     heading+photos block to the next page. Neither extra margin nor an
     explicit break-before on the item removed it — it's glyph ink bleeding
     past its own box, not a fit-computation issue — so clip it at source:
     force the heading's own box to crop any ink outside its line box. */
  .timeline__item--photo + .timeline__item--photo h3 {
    overflow: hidden !important;
    isolation: isolate;
  }
  .timeline__time { font-size: 0.95rem !important; }
  .timeline__body h3 { font-size: 0.88rem !important; margin-bottom: 0.2rem !important; }
  .timeline__body p { font-size: 8pt !important; margin: 0 0 0.3rem !important; line-height: 1.35; }
  .timeline__panel { font-size: 7.5pt !important; }

  /* Compact the two "HOẠT ĐỘNG SONG HÀNH" photos — at the web's 3:2 ratio
     a full-width single image ate ~1/3 of a page on its own. */
  .timeline__body img { margin-top: 0.4rem !important; aspect-ratio: 3.6/1 !important; }
  .timeline__photo-pair { margin-top: 0.4rem !important; gap: 0.4rem !important; }
  .timeline__photo-pair img { aspect-ratio: 4/3 !important; }

  /* Closing flows right after section 04 instead of forcing a fresh page —
     that forced break is what left section 04's last page ~1/3 blank. */
  .closing { padding: 6mm 8mm !important; }
  .closing__dots { width: 220px; }
  .closing__photo img { aspect-ratio: 16/7; }

  .site-footer { background: #fff !important; color: var(--muted) !important; padding: 4mm 8mm !important; }
  .site-footer a { color: var(--gold-ink) !important; }

  img { break-inside: avoid; }
}