/* ============================================================
   Product template — page-level CSS (T3, all 17 products)
   Figma: Windscreen Insurance — desktop 1407:65430, tablet 1407:74910,
   mobile 1407:69016.

   The section classes carry their own look and gutters; this file holds
   the page's vertical rhythm (the neighbouring-background rule: --space-
   section when the neighbour's background matches, --space-section-alt
   when it differs) and the "What your policy covers" section, which only
   this template uses and so is built here, not as a class.
   ============================================================ */

/* ── Section spacing ──────────────────────────────────────── */
/* The overview follows the white hero and the frame gives it 40 above and below
   (the cream section after it pads itself) */
.product__section--overview {
    padding-top: var(--space-section);
    padding-bottom: var(--space-section-alt);
}
.product__section--cover,
.product__section--eligibility,
.product__section--why {
    padding-top: var(--space-section-alt);
    padding-bottom: var(--space-section-alt);
}
/* Full-bleed: the AI panel pads itself */
.product__section--ai { padding: 0; }
/* 80 above, 40 below: the carousel's own gutters are in card-carousel.css */
.product__section--related {
    padding-top: var(--space-section-alt);
    padding-bottom: var(--space-section);
}
/* 40 above, 80 below */
.product__section--faq {
    padding-top: var(--space-section);
    padding-bottom: var(--space-section-alt);
}
@media (max-width: 1024px) {
    /* Tablet (1407:74910) puts 32 above the overview and 48 below; the related
       carousel's 48 is the mobile frame's (1407:69180) */
    .product__section--overview { padding-top: 32px; padding-bottom: var(--space-section-alt); }
    .product__section--faq { padding-top: 48px; padding-bottom: 48px; }
}
@media (max-width: 767px) {
    /* Mobile (1407:69016): 48 above the overview text */
    .product__section--overview { padding-top: var(--space-section-alt); }
    .product__section--faq { padding-top: 32px; padding-bottom: 64px; }
}

/* ── What your policy covers ──────────────────────────────────
   Cream section, a header, then numbered white cards two to a row with
   the teal CTA card (CTA-005) in the next free slot. Moved here from
   classes/cover-list/ at B3 (single-template rule).
   ───────────────────────────────────────────────────────────── */
.cover-list {
    background: var(--color-surface-warm);
    padding-left: var(--space-gutter);
    padding-right: var(--space-gutter);
}
.cover-list__inner {
    max-width: var(--layout-content-max-w);
    margin: 0 auto;
}

/* ── Header ───────────────────────────────────────────────── */
.cover-list__head {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
}
.cover-list__head .eyebrow { margin: 0; }
/* H2 and Mobile/H2 are Title Case in the Figma ("TITLE" text case) */
.cover-list__heading {
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
    color: var(--color-secondary);
    text-transform: capitalize;
}

/* ── Grid ─────────────────────────────────────────────────────
   The list's cards and the CTA card share one grid; display:
   contents lets the <li>s be grid items and keeps the <ol>.
   ───────────────────────────────────────────────────────────── */
.cover-list__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}
.cover-list__items {
    display: contents;
    list-style: none;
}
/* A level's "Subheading above" (Breakdown 900:13731): across the grid, 24
   above and below from the grid gap. Futura 28/130% Medium, H3's values but
   no text style on the node, so raw (flagged) */
.cover-list__subheading {
    grid-column: 1 / -1;
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: 28px;
    line-height: 1.3;
    color: var(--color-secondary);
}

/* A card: a 56px gold number, 24px, then the title and description */
.cover-list__item {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 28px;
    border-radius: 16px;
    background: var(--color-surface);
}
.cover-list__number {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--color-accent);
    color: var(--color-secondary);
    font-family: var(--font-heading);   /* Inter 22 Medium in the frame (flagged) */
    font-weight: var(--weight-medium);
    font-size: 22px;
    line-height: 1;
}
.cover-list__text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.cover-list__title {
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
    color: var(--color-secondary);
}
.cover-list__body {
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: var(--color-secondary);
}

/* ── CTA card (CTA-005) ───────────────────────────────────── */
.cover-list__cta {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 28px;
    border-radius: 16px;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    text-decoration: none;
    transition: background-color var(--transition-base);
}
.cover-list__cta:hover { background: var(--color-primary-hover); }
.cover-list__cta:focus-visible {
    outline: none;
    box-shadow: var(--button-focus-ring);
}
.cover-list__cta-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.cover-list__cta-heading {
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
}
.cover-list__cta-body {   /* Inter 16 Medium in the frame, built as Body (flagged) */
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    line-height: var(--leading-body);
}
.cover-list__cta-arrow {   /* the frame's 36px "→", as the arrow icon */
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    transition: transform var(--transition-base);
}
.cover-list__cta:hover .cover-list__cta-arrow,
.cover-list__cta:focus-visible .cover-list__cta-arrow { transform: translateX(4px); }

/* ── Tablet and mobile (1407:69016) ───────────────────────────
   One column; the number sits in a 28px badge beside the title.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .cover-list__head {
        gap: 12px;
        margin-bottom: 24px;
    }
    .cover-list__heading {
        font-size: var(--text-mobile-h2);
        line-height: var(--leading-mobile-h2);
    }

    .cover-list__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .cover-list__item {
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr);
        column-gap: 12px;
        row-gap: 12px;
        padding: 20px;
    }
    .cover-list__text { display: contents; }
    .cover-list__subheading {   /* Mobile 1227:23626: 20/120%, no text style (flagged) */
        font-size: 20px;
        line-height: 1.2;
    }
    .cover-list__number {
        grid-column: 1;
        width: 28px;
        height: 28px;
        border-radius: 7px;
        font-size: 14px;
    }
    .cover-list__title {
        grid-column: 2;
        align-self: flex-start;
        font-size: var(--text-mobile-h4);
        line-height: var(--leading-mobile-h4);
    }
    .cover-list__body {
        grid-column: 1 / -1;
        font-family: var(--font-heading);   /* Mobile/Body small is set in Futura */
        font-size: var(--text-mobile-body-small);
        line-height: var(--leading-mobile-body-small);
    }

    .cover-list__cta-heading {
        font-size: var(--text-mobile-h4);
        line-height: var(--leading-mobile-h4);
    }
    .cover-list__cta-body {
        font-family: var(--font-heading);
        font-size: var(--text-mobile-body-small);
        line-height: var(--leading-mobile-body-small);
    }
}

/* ── Tablet (768–1024), Home Legal Protection 1407:74953 ──────
   The tablet frame keeps two columns (322 wide, 20 gaps); only the mobile
   frame stacks to one column. The CTA card's row is below.
   ───────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
    .cover-list__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* An even number of cards fills every row of two, so the CTA card would sit
   alone at the left of the last row: it takes the full width instead (Alex,
   7 Oct). With an odd number it stays beside the last card, at every width
   above mobile (the tablet frame, 1407:74953, has ten cards: a full-width CTA). */
@media (min-width: 768px) {
    .cover-list__grid--even .cover-list__cta { grid-column: 1 / -1; }
}

/* ── Three columns (the "Columns" field on the product) ───────
   For a long list. Desktop only is three across: the badge sits above the
   text, as a card 385 wide can't hold it beside a 56px badge. Tablet keeps
   the frame's two columns. Mobile is two columns too (Alex, 8 Oct): each card
   is about 170 wide, so its badge, title and text stack and the CTA card takes
   the full width below. The CTA card is also full width at desktop when the
   cards fill every row of three (--full), but not when --even alone (that is
   for two columns).
   ───────────────────────────────────────────────────────────── */
@media (min-width: 1025px) {
    .cover-list__grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cover-list__grid--three .cover-list__item {
    
        gap: 16px;
    }
    .cover-list__grid--three .cover-list__number {
        flex: 0 0 auto;   /* the row basis of 56 would otherwise be the height of a column */
        width: 56px;
    }
    .cover-list__grid--three.cover-list__grid--even .cover-list__cta { grid-column: auto; }
    .cover-list__grid--three.cover-list__grid--full .cover-list__cta { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
    .cover-list__grid--three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .cover-list__grid--three .cover-list__item {
        grid-template-columns: minmax(0, 1fr);
        align-content: start;   /* a shorter card in the row keeps its rows together, not spread */
        row-gap: 8px;
        padding: 16px;
    }
    .cover-list__grid--three .cover-list__title,
    .cover-list__grid--three .cover-list__body {
        grid-column: 1;
        align-self: auto;
    }
    .cover-list__grid--three .cover-list__cta { grid-column: 1 / -1; }
}