/*
  Print-only "Key Information" brochure.
  Hidden on screen; shown only when the page is printed / saved as PDF via the
  "Download Key Info PDF" button (window.print()). Everything with [data-print-hide]
  or outside #key-info is suppressed so the printed output is a condensed 2-page
  brochure, not the full scrolling site. Two <section class="ki-page"> blocks map to
  one printed page each via break-after: page.
*/

.key-info-sheet { display: none; }

@media print {
  @page { margin: 0; size: A4; }

  /* Remove every other top-level element from layout (not just hide visually) so the
     printed output is only the brochure, not the full site with trailing blanks. */
  body > *:not(#key-info) { display: none !important; }

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

  #key-info {
    display: block !important;
    color: #1a0e1c;
    font-family: "Lato", Arial, sans-serif;
  }

  .ki-page {
    position: relative;
    width: 210mm;
    min-height: 297mm;
    padding: 16mm 16mm 14mm;
    box-sizing: border-box;
    break-after: page;
    overflow: hidden;
  }
  .ki-page:last-child { break-after: auto; }

  /* ---- Page 1 hero band ---- */
  .ki-hero {
    background: linear-gradient(135deg, #4a0150 0%, #76027d 55%, #8a1090 100%);
    color: #fff;
    margin: -16mm -16mm 6mm;
    padding: 14mm 16mm 10mm;
  }
  .ki-hero .ki-logo {
    height: 22px;
    margin-bottom: 6mm;
    filter: brightness(0) invert(1);
  }
  .ki-hero h1 {
    font-family: "Catamaran", Arial, sans-serif;
    font-weight: 900;
    font-size: 24pt;
    color: #fff;
    margin: 0 0 2mm;
  }
  .ki-hero .ki-subtitle {
    font-size: 11pt;
    color: #f0d9ef;
    margin: 0 0 1.5mm;
    max-width: 130mm;
  }
  .ki-hero .ki-presenter {
    font-size: 9pt;
    color: #d7bad6;
    margin: 0 0 2mm;
  }
  .ki-hero .ki-vision {
    font-size: 8pt;
    font-style: italic;
    color: #f0d9ef;
    max-width: 150mm;
    margin: 0;
    line-height: 1.35;
  }

  /* ---- Page 2 band (shorter) ---- */
  .ki-band {
    background: #76027d;
    color: #fff;
    margin: -16mm -16mm 6mm;
    padding: 10mm 16mm;
  }
  .ki-band h1 {
    font-family: "Catamaran", Arial, sans-serif;
    font-weight: 900;
    font-size: 18pt;
    color: #fff;
    margin: 0;
  }

  /* ---- Stat strip ---- */
  .ki-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3mm;
    margin: 0 0 6mm;
  }
  .ki-stats div {
    background: #f5eef5;
    border-top: 1.2mm solid #76027d;
    text-align: center;
    padding: 4mm 2mm;
  }
  .ki-stats .num {
    display: block;
    font-family: "Catamaran", Arial, sans-serif;
    font-weight: 900;
    color: #76027d;
    font-size: 15pt;
    line-height: 1.1;
  }
  .ki-stats .lbl { font-size: 7.5pt; color: #4a3a4c; }

  /* ---- Headings & body copy ---- */
  h2 {
    font-family: "Catamaran", Arial, sans-serif;
    font-weight: 800;
    font-size: 12.5pt;
    color: #76027d;
    border-bottom: 0.5mm solid #d7bad6;
    padding-bottom: 1mm;
    margin: 0 0 2.5mm;
  }
  h3 {
    font-family: "Catamaran", Arial, sans-serif;
    font-weight: 800;
    font-size: 10.5pt;
    color: #76027d;
    margin: 0 0 1.5mm;
  }
  p, li { font-size: 9.5pt; line-height: 1.42; }
  ul { margin: 0 0 3mm; padding-left: 4mm; }
  li { margin-bottom: 1mm; }

  /* ---- Two-column body with photos (page 1) ---- */
  .ki-body {
    display: grid;
    grid-template-columns: 1fr 62mm;
    gap: 8mm;
    align-items: start;
  }
  .ki-col-photos { display: flex; flex-direction: column; gap: 5mm; }
  .ki-col-photos figure, .ki-col-photo-single figure { margin: 0; }
  .ki-col-photos img, .ki-col-photo-single img {
    width: 100%;
    display: block;
    border-radius: 1mm;
    border: 0.4mm solid #d7bad6;
  }
  .ki-col-photos figcaption, .ki-col-photo-single figcaption {
    font-size: 7.5pt;
    color: #6b5a6d;
    margin-top: 1.5mm;
    line-height: 1.3;
  }

  .ki-body-tool { grid-template-columns: 1fr 70mm; margin-bottom: 6mm; }

  /* ---- USG audience tiles (page 2) ----
     A full border + rounded corners is the structural cue (borders always print);
     the left accent stripe and tint fill are bonuses layered on top for browsers
     that do print background colors ("Background graphics" in the print dialog). */
  .ki-audience {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3mm;
    margin: 0 0 5mm;
  }
  .ki-audience div {
    background: #fbf8fb;
    border: 0.3mm solid #c9a3c8;
    border-left: 1mm solid #76027d;
    border-radius: 1.5mm;
    padding: 3mm 4mm;
    font-size: 8.5pt;
    line-height: 1.4;
  }

  /* ---- Data hub / CNI pillar cards (page 1 & 2) ----
     Same reasoning: a full border + radius so each item reads as a bounded card
     even if the background tint doesn't print. Title sits in its own header
     strip separated by a rule, rather than relying on a filled color band. */
  .ki-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4mm;
    margin-top: 2mm;
  }
  .ki-pillars > div {
    background: #fbf8fb;
    border: 0.3mm solid #c9a3c8;
    border-radius: 1.5mm;
    overflow: hidden;
  }
  .ki-pillars h3 {
    margin: 0;
    padding: 3mm 4mm 2mm;
    border-bottom: 0.3mm solid #d7bad6;
  }
  .ki-pillars p { font-size: 8.5pt; margin: 0; padding: 3mm 4mm 4mm; }

  /* ---- Footer band (page 2) ---- */
  .ki-footer {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: #170318;
    color: rgba(255,255,255,0.75);
    padding: 6mm 16mm;
    display: flex;
    align-items: center;
    gap: 6mm;
  }
  .ki-footer-logo { height: 16px; filter: brightness(0) invert(1); opacity: 0.9; }
  .ki-footer p { font-size: 7.5pt; margin: 0; line-height: 1.35; }

  .ki-pagenum {
    position: absolute;
    right: 16mm;
    bottom: 6mm;
    font-size: 7.5pt;
    color: #9a8a9c;
  }
  .ki-page:last-child .ki-pagenum { color: rgba(255,255,255,0.6); bottom: 8mm; }

  [data-print-hide] { display: none !important; }
}