/*
 * Print styles for species pages and learning pods.
 *
 * Loaded from layouts/_header.html.erb with media="print", so nothing here
 * ever touches the screen. The @media wrapper is belt-and-braces.
 *
 * The screen design is built for a wide monitor: a section heading floats in
 * an absolutely-positioned left column, sections are separated by ~120px of
 * air, and photos run the full width of a 1400px canvas. On A4 that reads as
 * a series of half-empty pages with headings stranded at the bottom. What
 * follows turns it back into a document.
 */

@media print {
  @page {
    size: A4;
    margin: 14mm 15mm;
  }

  /* The page sizes type in fixed pixels (text-[44px], text-[18px] and so on),
     so there is no base size to turn down — zoom scales type, spacing and
     photos together, which is what we want on paper. */
  html {
    zoom: 0.78;
  }

  /* Screen furniture: navigation, footer, floating buttons, the sign-in
     prompt, and the "keep exploring" strip of other species. */
  #keep-exploring,
  [data-guest-list-prompt-target="modal"],
  .glightbox-container,
  .toastify {
    display: none !important;
  }

  /* Paper is white. Drop the background wash, the card shadows and the
     rounded corners that make sense on screen but read as clutter in print. */
  html,
  body,
  main,
  [id^="container_"] {
    background: #fff !important;
  }

  .rounded-3xl,
  .rounded-t-3xl,
  .rounded-b-3xl,
  .rounded-25 {
    border-radius: 0 !important;
  }

  /* Tailwind's .container picks a max-width from the viewport, which on A4
     leaves a wide empty gutter. Use the full text block instead. */
  .container {
    max-width: 100% !important;
  }

  /* Collapse the screen rhythm. These are the arbitrary values used across
     species/_container, articles/_container and the two show templates. */
  .pt-\[124px\] { padding-top: 0 !important; }
  .pb-\[110px\] { padding-bottom: 20px !important; }
  .mt-\[130px\] { margin-top: 0 !important; }
  .mt-\[100px\] { margin-top: 18px !important; }
  .mt-\[60px\] { margin-top: 16px !important; }
  .mb-\[60px\] { margin-bottom: 16px !important; }
  .mt-\[39px\] { margin-top: 14px !important; }
  .mb-\[28px\] { margin-bottom: 12px !important; }
  .mt-\[33px\] { margin-top: 14px !important; }
  .py-\[30px\] { padding-top: 10px !important; padding-bottom: 10px !important; }

  /* Each section starts a fresh page. Without this the heading — which is
     the first thing in the section once it stops being absolutely positioned
     — strands at the foot of the previous page, away from its own text. */
  [id^="container_"] {
    break-before: page;
    page-break-before: always;
  }

  /* The heading column itself (it carries print:mb-8 in both container
     partials) must never be split, nor left dangling above a break. */
  .print\:mb-8 {
    break-after: avoid !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    margin-bottom: 14px !important;
  }

  h1, h2, h3,
  .font-clearface {
    break-after: avoid;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  p {
    orphans: 3;
    widows: 3;
  }

  /* Photos stay whole, and are capped short enough that the caption and the
     paragraph beneath them can still share the page. */
  .image-edge-crop,
  [data-image-scale] {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  img {
    max-height: 58vh;
    object-fit: contain;
  }

  /* The 1.5% overscale that hides razor lines on screen is not needed here,
     and it bleeds past the crop box at print resolution. */
  .image-edge-crop img {
    transform: none;
  }
}