/*
 * Hero: a photo with a white card of copy sitting over it.
 *
 * The image is a background in effect but stays an <img> so it can be
 * fetchpriority="high" and responsive; the card is positioned over it by grid
 * rather than absolute positioning, so the section is as tall as whichever of
 * the two is taller and nothing has to be told a height.
 */

/* On a phone the photo is a band the card overlaps; --hero-band is how tall the
   band is and --hero-overlap how much of it the card covers. The ground behind
   the card below the band is tinted, so the card still reads as a card once it
   has left the photograph - on white it was a box with odd margins. */
.shop-hero {
    --hero-band: 136px;
    --hero-overlap: 40px;
    position: relative;
    padding-block-end: var(--shop-space-5);
    background: var(--shop-surface-subtle);
}

/* The photo is a backdrop, not content: taken out of flow so the section is as
   tall as its copy needs and no taller. Left in flow it sized the section from
   its own 928x522 proportions instead, which at 1440 made the hero twice the
   height it should be and at 1920 a full screen of photograph. This is the one
   place absolute positioning is the right tool rather than a layout shortcut.

   On a phone it is a band across the top that the card overlaps, rather than a
   backdrop behind it: a card as wide as the screen left only 15px slivers of
   photograph at its sides - noise, not a picture. */
.shop-hero__image {
    position: absolute;
    inset: 0 0 auto;
    width: 100%;
    height: var(--hero-band);
    object-fit: cover;
}

/* Carries .shop-container in the markup for its width and gutters; this only
   adds what the hero itself needs. On a phone the top padding is the visible
   part of the band; the card covers the rest of it. */
.shop-hero__inner {
    position: relative;
    display: flex;
    align-items: center;
    padding-block: calc(var(--hero-band) - var(--hero-overlap)) 0;
}

/* The full width of the container on a phone - the cap only bites above about
   470px. Capped at 320px it was a narrow card floating over a sliver of
   photograph, and the copy ran a line longer than it needed to at every step;
   uncapped, a 600px-wide phone layout ran the copy to a hundred characters. */
.shop-hero__content {
    max-width: 440px;
    padding: var(--shop-space-5);
    background: var(--shop-surface);
    box-shadow: 0 2px 16px rgb(0 0 0 / 6%);
}

/* Fluid on a phone, from the stock header's 22px at 320 to 26px by 400: at a
   flat 26 the smallest screens spent the whole first screen on the hero, and
   at a flat 22 the page's h1 only tied the h2 below it. */
.shop-hero__title {
    color: var(--shop-ink);
    font-size: clamp(var(--shop-text-xl), 0.375rem + 5vw, var(--shop-text-2xl));
    font-weight: var(--shop-weight-bold);
    line-height: var(--shop-leading-display);
}

/* The reference sets this to weight 300. Source Sans Pro is served in 400/600/
   700 only and adding Light to the request would lighten legacy text on every
   unmigrated page, so the softer text colour carries the hierarchy instead. */
/* The subtitle is CMS copy and routinely contains its own block markup. A <p>
   inside it closes the <p> it was put in, so the rest arrives as a *sibling* of
   the subtitle, not a child - which is why this addresses the content wrapper's
   paragraphs rather than the subtitle's. */
.shop-hero__content > p {
    margin-block-start: var(--shop-space-3);
    color: var(--shop-text-soft);
    font-size: var(--shop-text-body);
    line-height: var(--shop-leading-body);
}

.shop-hero__content strong {
    color: var(--shop-ink);
}

/* The call-to-action is excluded by name: it is also an <a> in here, and a
   descendant selector would outrank its own single class and repaint its label. */
.shop-hero__content a:not(.shop-hero__cta),
.shop-hero__content a:not(.shop-hero__cta):hover,
.shop-hero__content a:not(.shop-hero__cta):focus {
    color: var(--shop-accent);
    font-weight: var(--shop-weight-bold);
    text-decoration: none;
}

/* The editors wrap the sample-order link in <strong>, and the rule above would
   otherwise paint it the same ink as the bold line above it - leaving the only
   link in the hero indistinguishable from plain bold text. */
.shop-hero__content a:not(.shop-hero__cta) strong {
    color: inherit;
}

.shop-hero__content a:not(.shop-hero__cta):hover {
    text-decoration: underline;
}

/* CMS copy often ends in an empty paragraph. */
.shop-hero__content > p:empty {
    display: none;
}

/* The width of the card on a phone, so the one action on the first screen ends
   the card rather than trailing off its left edge. */
.shop-hero__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--shop-space-2);
    min-height: 48px;
    margin-block-start: var(--shop-space-5);
    padding: 12px 22px;
    border-radius: var(--shop-radius-md);
    background: var(--shop-brand-orange);
    color: #fff;
    font-size: var(--shop-text-md);
    font-weight: var(--shop-weight-bold);
    letter-spacing: var(--shop-tracking-caps);
    text-decoration: none;
    transition: background-color var(--shop-duration) var(--shop-ease);
}

.shop-hero__cta:hover,
.shop-hero__cta:focus {
    background: var(--shop-brand-orange-hover);
    color: #fff;
    text-decoration: none;
}

.shop-hero__cta svg {
    flex: none;
    width: 12px;
    height: 12px;
}

@media (min-width: 640px) {
    .shop-hero {
        padding-block-end: 0;
        background: var(--shop-surface);
    }

    .shop-hero__title {
        font-size: var(--shop-text-2xl);
    }

    .shop-hero__image {
        inset: 0;
        height: 100%;
    }

    .shop-hero__inner {
        min-height: 280px;
        padding-block: 28px;
    }

    .shop-hero__content {
        padding: var(--shop-space-6) 28px;
    }

    /* Beside the photo there is a column's measure, not a phone's, and the
       design sets the copy a size down. */
    .shop-hero__content > p {
        font-size: var(--shop-text-md);
    }

    .shop-hero__cta {
        display: inline-flex;
        min-height: var(--shop-tap);
        margin-block-start: var(--shop-space-4);
    }
}

@media (min-width: 1024px) {
    .shop-hero__inner {
        min-height: 320px;
        padding-block: var(--shop-space-8);
    }

    .shop-hero__content {
        max-width: 520px;
        padding: 28px var(--shop-space-8);
    }

    .shop-hero__title {
        font-size: 32px;
    }

    .shop-hero__content > p {
        font-size: var(--shop-text-control);
    }
}