/* ==========================================================================
   compare-align.css
   --------------------------------------------------------------------------
   Aligned row-by-row layout for the "Gutachtenarten im Vergleich"-Section
   on the homepage.  Both .compare-card elements (Kurzgutachten + Verkehrs-
   wertgutachten) share the same 7 visible blocks:

     1. .compare-label
     2. h3
     3. .compare-card-text
     4. .compare-list
     5. .price-table-title    <-- this row MUST be vertically identical
     6. .price-table
     7. .btn-secondary

   Because the bullet-lists differ in line count, the rows below the list
   would otherwise drift apart.  We force alignment with CSS subgrid: the
   parent .compare-grid declares 7 explicit rows, and each card is a sub-
   grid that spans them.  All rows align across siblings, which guarantees
   pixel-perfect alignment of the "Festpreis"-title and everything below.

   Loaded after styles.css / prices.css, so these rules override only what
   they need to and inherit the rest.
   ========================================================================== */

@supports (grid-template-rows: subgrid) {
    .compare-grid {
        /* Each row sized by the tallest sibling in that row. */
        grid-template-rows: repeat(7, auto);
        align-items: stretch;
    }

    .compare-grid > .compare-card {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: subgrid;
        grid-row: span 7;
        /* Reset stacking margins so subgrid handles spacing via row gaps. */
        row-gap: 0;
    }

    /* Each direct child of a card occupies exactly one row of the subgrid.
       The .compare-badge is absolutely positioned, so it has no row.      */
    .compare-grid > .compare-card > .compare-label    { grid-row: 1; }
    .compare-grid > .compare-card > h3                 { grid-row: 2; }
    .compare-grid > .compare-card > .compare-card-text { grid-row: 3; }
    .compare-grid > .compare-card > .compare-list      { grid-row: 4; }
    .compare-grid > .compare-card > .price-table-title { grid-row: 5; }
    .compare-grid > .compare-card > .price-table       { grid-row: 6; }
    .compare-grid > .compare-card > .btn               {
        grid-row: 7;
        /* Keep natural width (left-aligned), don't stretch to column. */
        justify-self: start;
        align-self: start;
    }
}

/* --------------------------------------------------------------------------
   Fallback (older engines without subgrid support, e.g. Safari < 16):
   give .compare-list a min-height that covers the tallest expected list
   (5 items, occasional 2-line wrap).  Not pixel-perfect but visually close.
   -------------------------------------------------------------------------- */
@supports not (grid-template-rows: subgrid) {
    .compare-grid > .compare-card > .compare-list {
        min-height: 360px;
    }
}

/* --------------------------------------------------------------------------
   On mobile the grid collapses to a single column; alignment between rows
   is no longer meaningful, so disable subgrid spans.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    /* Subgrid-Aufteilung auf Mobile komplett zuruecksetzen — sonst entstehen
       durch die 7 definierten Grid-Rows + Row-Gap am Ende leere Phantom-Rows. */
    .compare-grid {
        grid-template-rows: none;
    }
    .compare-grid > .compare-card {
        display: block;
        grid-row: auto;
    }
    .compare-grid > .compare-card > .compare-list {
        min-height: 0;
    }
}