/*
 * The static product sheets: /products/icom/m60 and /devices/thrane.
 * One set of components for both, inside <article class="product-sheet">:
 * a header (badge, kicker, <h1>, subtitle), sections under an <h2>,
 * features under an <h3>, prose, notes, a captioned figure, and a
 * download .btn. A sheet's accent (its section and feature rules) is
 * --sheet-accent: red for Icom, teal for Lars Thrane (.product-sheet--teal).
 */

@layer reset, tokens, base, layout, components, pages, utilities;

@layer pages {
    .product-sheet {
        --sheet-accent: var(--color-error);
        /* Room above the footer for what ends the sheet (the download button on phones). */
        padding-bottom: var(--space-5);
    }

    .product-sheet--teal {
        --sheet-accent: var(--teal-700);
    }

    /* The small line above the title ("New"): 6.8:1 on white. */
    .product-sheet__badge {
        color: var(--color-error);
        font-size: var(--text-xs);
        font-weight: 700;
    }

    .product-sheet__kicker {
        font-weight: 500;
    }

    .product-sheet__title {
        margin: var(--space-4) 0;
        font-size: var(--text-4xl);
        font-weight: 700;
        line-height: 1.2;
    }

    .product-sheet__subtitle {
        font-size: var(--text-3xl);
        font-weight: 500;
    }

    /* The line under a .title-bar heading (the Thrane sheet's). */
    .product-sheet__tagline {
        margin: var(--space-4) 0;
        color: var(--sheet-accent);
        font-size: var(--text-xl);
        line-height: 1.2;
    }

    /* A section of the sheet: "Four Operating Modes", "Key Features". */
    .product-sheet__section {
        margin-top: var(--space-4);
        border-bottom: 2px solid var(--sheet-accent);
        color: var(--sheet-accent);
        font-size: var(--text-xl);
        font-weight: 500;
    }

    /* One feature in a section. */
    .product-sheet__feature {
        margin-bottom: var(--space-4);
        padding-left: var(--space-4);
        border-left: 6px solid var(--sheet-accent);
        font-size: var(--text-lg);
        font-weight: normal;
    }

    .product-sheet__text {
        line-height: 1.8;
    }

    .product-sheet__text + .product-sheet__text {
        margin-top: var(--space-5);
    }

    .product-sheet__list {
        margin-top: var(--space-2);
    }

    /* 4.8:1 on white. */
    .product-sheet__note {
        margin-top: var(--space-2);
        color: var(--gray-5);
        font-size: var(--text-xs);
    }

    .product-sheet__aside {
        display: flex;
        flex-direction: column;
        align-items: center;
        row-gap: var(--space-6);
    }

    .product-sheet__figure {
        text-align: center;
    }

    .product-sheet__figure figcaption {
        margin-top: var(--space-4);
    }

    /*
     * From 768px the aside is a third of the column, only about 235px wide
     * at first: --text-lg and the .btn's padding would wrap the label until
     * about 950px, so the button is tighter until the desktop layout.
     */
    @media (768px <= width < 1024px) {
        .product-sheet__download {
            padding-inline: var(--space-4);
        }
    }

    @media (width >= 1024px) {
        .product-sheet__download {
            font-size: var(--text-lg);
        }
    }
}