/* ═══════════════════════════════════════════════════════
    simpleSoundbank — shared product hero layout
    Where everything in a product page's hero sits: the columns, the
    padding, the logo height and the spacing between each piece. Every
    product page loads it after its own theme stylesheet, so these
    positions win; the theme decides only how things look (fonts,
    colours, buttons). A new plugin page that uses these class names gets
    the same layout as simpleSF2 and simpleSPU with nothing to tune.

    <section class="product-hero">
      <div class="product-hero__copy">
        .product-hero__logo     the product's logo or wordmark (44px tall)
        .product-hero__label    a small tag or eyebrow above the title
        .product-hero__title    the h1
        .product-hero__text     one or more paragraphs
        .product-hero__actions  download buttons, a form: the call to action
        .product-hero__note     small print after the actions (any number)
      </div>
      <div class="product-hero__visual"> screenshot, mascot, … </div>
    </section>
    ═══════════════════════════════════════════════════════ */

.product-hero {
    --product-hero-gutter: 16px;
    --product-hero-width: 1080px;
    --product-hero-logo-height: 44px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 48px;
    box-sizing: border-box;
    width: min(calc(100% - 2 * var(--product-hero-gutter)), var(--product-hero-width));
    max-width: none;
    margin: 0 auto;
    padding: 64px 0 56px;
}

/* The text column always starts at the top, so the logo and title sit at the
   same height on every product page whatever the visual beside them. */
.product-hero__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.product-hero__copy > * {
    margin: 0;
}

.product-hero__visual {
    align-self: center;
    min-width: 0;
    margin: 0;
}

/* ── One logo height, whether it's text or an SVG wordmark ── */
.product-hero__logo {
    display: flex;
    align-items: center;
    height: var(--product-hero-logo-height);
}

svg.product-hero__logo {
    width: auto;
    max-width: 100%;
}

/* Labels differ (a text eyebrow, a pixel ribbon) but take the same slot, so the
   title always starts at the same height. */
.product-hero__label {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
}

/* ── Spacing between the pieces, top to bottom ── */
.product-hero__logo + .product-hero__label {
    margin-top: 20px;
}

.product-hero__label + .product-hero__title {
    margin-top: 16px;
}

.product-hero__title + .product-hero__text {
    margin-top: 20px;
}

.product-hero__text + .product-hero__text {
    margin-top: 14px;
}

.product-hero__actions {
    margin-top: 28px;
}

.product-hero__note {
    margin-top: 14px;
}

/* ── Narrow screens: one column, text first ── */
@media (max-width: 860px) {
    .product-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
        padding: 40px 0 32px;
    }
}

@media (max-width: 640px) {
    .product-hero {
        --product-hero-logo-height: 36px;
    }
}

/* Shown above the download buttons on phones and tablets (main.js). */
.device-note {
    margin: 1rem 0;
}