/* styles/print.css
 * PDF-first print styles (Save as PDF is the primary use case).
 * Loaded with media="print" from head.html:
 *   <link rel="stylesheet" href="/styles/print.css" media="print">
 * Paper/ink tuning is intentionally deferred.
 */

/* ---------- Utilities (usable by any block or author) ---------- */
.print-only { display: none; }

@media print {
  .hide-on-print { display: none !important; }
  .print-only { display: revert; }
  .print-avoid-break { break-inside: avoid; page-break-inside: avoid; }
  .print-break-before { break-before: page; page-break-before: always; }
}

@media print {
  @page {
    size: A4;
    margin: 22mm 12mm 18mm; /* space for the repeating branded header/footer */
  }

  /* Keep brand colours, gradients and backgrounds in the PDF */
  html,
  body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    background: #fff !important;
  }

  body { font-size: 10.5pt; line-height: 1.5; }

  /* ---------- 1. Hide site chrome and interactive/marketing UI ---------- */
  header,
  footer,
  .share-print,
  .share-print-wrapper,                          /* EDS wrapper, avoids an empty gap */
  .breadcrumbs,                                  /* verify class */
  .bottom-banner,
  main > .section:has(.bottom-banner),           /* newsletter signup */
  main > .section:has(.article-cards),           /* related insights */
  main > .section:has(.meet-the-experts),        /* authors already shown in hero panel; remove this line to keep bios */
  [id^='bigidcmp'],
  [class*='bigidcmp'],                           /* consent banner, verify */
  .back-to-top {                                 /* verify, add chat widgets etc. */
    display: none !important;
  }

  /* ---------- 2. Layout reset to single full-width column ---------- */
  main,
  main > .section,
  main > .section > div {
    max-width: 100% !important;
    width: 100% !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
  }

  main > .section { padding-block: 0 6mm !important; }

  /* ---------- 3. Typography and pagination ---------- */
  h1 { font-size: 24pt; }
  h2 { font-size: 16pt; margin-top: 8mm; }
  h3 { font-size: 12.5pt; }

  h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; }
  p, li { orphans: 3; widows: 3; }

  picture, img, figure, table, blockquote, tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  img { max-width: 100% !important; height: auto !important; }
  thead { display: table-header-group; }

  /* Keep a "FIGURE n:" heading attached to its image */
  h3 + p { break-before: avoid; }

  /* ---------- 4. Links: readable in a shared PDF, no URL clutter ---------- */
  a { color: inherit; text-decoration: underline; }

  /* ---------- 5. Article hero ---------- */
  /* `html body` prefix: article-hero.css is lazy-loaded after this file, so equal
     specificity would lose on source order. */

  /* article-hero.js (adjustArticleLayout) writes an inline margin-bottom to pull
     content under the floating panel. Only !important beats an inline style. */
  html body .article-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 70mm;
    margin-bottom: 6mm !important;
    overflow: hidden;
    break-inside: avoid;
  }

  /* <picture class="article-hero-image"> + gradient stay as a full-bleed backdrop */
  html body .article-hero .article-hero-image,
  html body .article-hero .article-hero-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  html body .article-hero .article-header {
    position: relative;
    z-index: 2;
    padding: 26mm 8mm 8mm;
    max-width: 100%;
    margin: 0;
  }

  html body .article-hero .article-header h1 {
    width: 100%;
    font-size: 24pt;
  }

  /* Author & tags panel: un-float it (it is absolute + top:95%/90%/75% on screen) */
  html body .article-hero.non-bio-authors-enabled .article-footer {
    position: relative;
    inset: auto;
    transform: none;
    z-index: 2;
    width: 100%;
    max-width: 100%;
    padding: 6mm 8mm;
    gap: 4mm;
    grid-template-columns: 1fr;
    break-inside: avoid;
  }

  /* The A4 content area is ~703px wide, so the <768px (mobile) author pill and
     tags-divider styles from article-hero.css apply as-is. Just set the columns. */
  html body .article-hero.non-bio-authors-enabled .article-footer .author-list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 5mm;
    row-gap: 3mm;
  }

  html body .article-hero .article-footer .author-list .plus-icon { display: none; }

  /* ---------- 5b. Testimonials: compact so the block fits on a page ---------- */
  /* Screen spacing is huge (8rem block padding + 6rem quote padding + 4.6rem gaps, 32-38px
     quote text). Several of testimonials.css's own padding rules are 5-class selectors,
     so the spacing overrides need !important. */
  html body .testimonials-wrapper { break-inside: avoid; page-break-inside: avoid; }

  html body .testimonials {
    padding-block: 3mm !important;
    padding-inline: 0 !important;
  }

  html body .testimonials .heading-content { padding-bottom: 4mm; gap: 2mm; }

  html body .testimonials-content .quote-content {
    padding-block: 5mm !important;
    gap: 4mm;
  }

  html body .testimonials-content blockquote {
    font-size: 15pt;
    line-height: 1.35;
  }

  html body .testimonials-content .quote::before,
  html body .testimonials-content .quote::after { font-size: 20pt; }

  html body .testimonials-content.author-image-top .author-image img {
    width: 18mm;
    height: 18mm;
    margin-top: 3mm !important;
  }

  html body .testimonials-content .author-content .info .name,
  html body .testimonials-content .author-content .info .job-title { font-size: 10.5pt; }

  html body .testimonials .divider { height: 1px; }

  /* CTA button is not actionable in a shared PDF */
  html body .testimonial-cta { display: none; }

  /* ---------- 6. Branded running header and footer (injected by print.js) ---------- */
  .print-header,
  .print-footer {
    display: flex !important;
    position: fixed;
    left: 0;
    right: 0;
    align-items: center;
    justify-content: space-between;
    gap: 8mm;
    font-size: 8pt;
    color: #555;
  }

  .print-header {
    top: -17mm;
    padding-bottom: 2.5mm;
    border-bottom: 1.5px solid #e5e5e5;
  }

  .print-header img { height: 7mm; width: auto; }

  .print-header .print-title {
    max-width: 60%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .print-footer {
    bottom: -14mm;
    padding-top: 2.5mm;
    border-top: 1px solid #e5e5e5;
  }

  .print-footer .print-url { word-break: break-all; }
}

/* Branded chrome never shows on screen */
.print-header,
.print-footer { display: none; }