/* Guide-specific print overrides only
   All shared styles live in ../guide.css */

/* Overlay wrappers track the image's effective width so SVG callouts stay aligned */
.illustration-wrapper--with-overlay { max-width: 180px; }

@media print {
  .guide-page__content { gap: 0.35rem; }
  .guide-section { padding-top: 0.25rem; }
  .guide-page__tagline { padding-top: 0.25rem; font-size: 0.78rem; }
  .guide-section__intro { font-size: 0.72rem; margin-bottom: 0.28rem; line-height: 1.32; }
  .guide-section__list { margin: 0.15rem 0 0.15rem 0.85rem; gap: 0.1rem; }
  .guide-section__list li { font-size: 0.72rem; line-height: 1.32; }
  .text-columns--2 { gap: 0.6rem; }

  .flower-grid { gap: 0.4rem; }
  .flower-tip { font-size: 0.72rem; line-height: 1.32; }
  .flower-care { padding-top: 0.3rem; }

  .step-grid { gap: 0.7rem; }
  .step__text { font-size: 0.72rem; line-height: 1.32; }

  .tips-callout { padding: 0.25rem 0.45rem; gap: 0.28rem; }
  .tips-callout__text { font-size: 0.65rem; line-height: 1.28; }
  .tips-callout__label { font-size: 0.53rem; }
  .tips-callout__icon { width: 0.75rem; height: 0.75rem; }

  /* This guide is all informational cards (no Quick Guide/Materials/steps in
     the usual sense) — every plain .flower-tip needs to become a flex column
     itself (unlike .flower-tip--numbered, it isn't by default) so its image
     can flex-fill the row's height, matching the maximization technique used
     across the other 3 guides (see feedback_guide_page2_maximization memory). */
  .flower-grid > .flower-tip,
  .text-columns > div {
    display: flex;
    flex-direction: column;
  }

  .illustration-wrapper {
    flex: 1 1 0;
    min-height: 0;
    aspect-ratio: 1 / 1;
    height: 100%;
    width: auto;
    max-width: 220px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .illustration-wrapper .illustration {
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  /* Must come after the general .illustration-wrapper rule above — same
     specificity (single class each), so source order decides the winner
     for max-width. */
  .illustration-wrapper--with-overlay { max-width: 150px; }

  /* Row sizing, tuned per section to the max that still holds 2 pages.
     Fixed `height` (not just min-height) — with an image in the row, flex:1
     will happily grow past a min-height floor to whatever the max-width cap
     allows, so a hard height is needed to keep each row bounded.
     "3 Types of Stems" felt squished next to Branching Stems/Removing Leaves'
     excess white space below their short 2-paragraph blurbs — grew this row
     and shrank those two to rebalance the page. */
  #types-title ~ .flower-grid > .flower-tip { height: 185px; }

  /* text-columns images aren't inside a flex parent, so flex:1/height on
     .flower-tip don't apply — it's the wrapper's own max-width/height (via
     1:1 aspect-ratio) that determines how big they render. Fixed height
     (not just max-width) keeps them from stretching to fill leftover row
     space next to their short text blurbs. */
  #branch-title ~ .text-columns .illustration-wrapper,
  #leaves-title ~ .text-columns .illustration-wrapper { max-width: 120px; height: 120px; }

  #bent-title ~ .step-grid > .step { height: 215px; }

  .flower-grid--roses-bloom > .flower-tip { height: 120px; }
  .flower-grid--roses-reflex > .flower-tip { height: 200px; }
  #hollow-title ~ .flower-grid--2col > .flower-tip { height: 150px; }

  /* Carnations & Hydrangeas: both columns carry an image + a paragraph of
     similar weight — the 2fr/1fr split (built for a text-column +
     image-only-column pairing) doesn't fit here, use equal columns instead */
  #cf-title ~ .flower-grid--2col { grid-template-columns: 1fr 1fr; }
  #cf-title ~ .flower-grid--2col > .flower-tip { height: 190px; }
  #cf-title ~ .flower-grid--2col > .flower-tip:last-child {
    border-left: 1.5px solid var(--clr-border);
    padding-left: 0.9rem;
  }
}