/* =====================================================================
   HilfBuddy — layout refinements
   ---------------------------------------------------------------------
   Redesign mode: PRESERVE. This is a live bilingual site with an
   established brand (gold/copper, Poppins/Open Sans, EN + DE, light +
   dark). Nothing here touches copy, information architecture, page
   slugs, nav labels, or brand colour. It is layout and rhythm only.

   Separate file so it can be dropped in one move, and so it does not
   collide with concurrent edits to styles.css.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Hero headline: three lines to two
   `max-width: 22ch` was forcing the headline onto 3 lines at every
   desktop width in both languages. A hero headline over 2 lines is a
   font-scale/measure error, not a copy-length one, so the fix is the
   measure: 30ch fits "Your business software - building blocks that fit
   together." and the slightly longer German equivalent on two lines,
   and still reads as a controlled column rather than full-bleed text.

   Mobile keeps the narrow measure: 2 lines is not achievable there and
   a tight column reads better than a wide one on a phone.
   --------------------------------------------------------------------- */
@media (min-width: 900px) {
  .hero h1,
  .price-hero h1 {
    max-width: 30ch;
  }
}

/* ---------------------------------------------------------------------
   2. Card-grid rhythm
   The home page leads three consecutive sections with the same
   three-equal-columns card row. Three identical grids in a row is the
   most recognisable generated-layout signature there is, and the
   content does not actually want equal weight: the first card in each
   row is the headline idea and the other two support it.

   So the second of the repeated rows gets a lead card. Same markup,
   same order, same content - only the column weights change, and only
   above 900px where there is room for it. One variation is enough;
   varying all of them would just be a different kind of pattern.
   --------------------------------------------------------------------- */
@media (min-width: 900px) {
  main > section:nth-of-type(4) > .grid {
    grid-template-columns: 1.45fr 1fr 1fr;
  }

  main > section:nth-of-type(4) > .grid > .card.col-4 {
    grid-column: auto;
  }
}

/* ---------------------------------------------------------------------
   3. Vertical rhythm
   Sections sat at a uniform 1.5rem apart, which reads as a stack of
   boxes rather than a sequence of ideas. Widening the gap between
   sections while leaving the gap *inside* a section alone is the
   cheapest way to make a page feel considered - the grouping does the
   work, not the decoration.
   --------------------------------------------------------------------- */
@media (min-width: 900px) {
  main > section {
    margin-bottom: 3.5rem;
  }

  main > section:last-child {
    margin-bottom: 0;
  }

  .hero {
    padding-bottom: 1.25rem;
  }
}