/* Franklin Hugh Money — Backdrop bands
 * ============================================================================
 * The desk header: a landscape photograph carrying mood behind a desk title.
 *
 * Backdrops are the second class of image in design/brand/IMAGERY_BRIEF.md.
 * A plate is a document and teaches something; a backdrop carries weather and
 * nothing else, so it sits behind type at low opacity and never asks to be
 * looked at directly.
 *
 * This deliberately reuses the Ledger Band's treatment (dark inverse surface,
 * duotoned photograph at low opacity, light type on top) rather than inventing
 * a second imagery language. If the Ledger Band's look changes, this should
 * change with it.
 *
 * Layout is driven by CONTAINER queries, not viewport media queries, for the
 * same reason assets/js/audio-player.js does it: the band has to work at full
 * bleed and inside a narrow column, and a viewport query cannot tell those
 * apart. That is why the markup has a wrapper. An element cannot query its own
 * container, and the band's own height and flex direction both have to change,
 * so the container has to sit one level up.
 *
 * Requires the #fh-duotone / #fh-duotone-night SVG filters inlined on the page,
 * and the markup emitted by scripts/render-backdrop.py.
 * Contrast in both ramps and both layouts is proven by
 * scripts/verify-backdrops.py — run it after touching anything here.
 *
 * No hex in this file. Tokens only — see assets/css/main.css :root.
 * ========================================================================= */

.fh-backdrop-wrap {
    container-type: inline-size;
    container-name: backdrop;
}

.fh-backdrop {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--fh-radius);
    background: var(--fh-surface-inverse);
    color: var(--fh-on-inverse);

    /* Dark by design in both modes, exactly like .ed-band. The night override of
       --fh-surface-inverse is lighter than the day value, which makes night the
       tighter contrast case rather than the safer one. */
    display: flex;
    align-items: center;

    /* Height comes from a floor, never from aspect-ratio alone. The band clips
       its overflow, so a fixed ratio plus a long dek silently cuts the text off
       at the narrow end. A min-height lets the band grow instead. */
    min-height: clamp(14rem, 34cqi, 22rem);
}

/* The photograph. Absolutely positioned rather than a background-image so it
   can carry width/height, lazy loading and a WebP source with a JPEG fallback,
   none of which a CSS background gets. */
.fh-backdrop__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* Framing lives in the markup as --backdrop-focus, written by
       scripts/cut-backdrops.py from the placement's focal point, so the crop
       decision stays in one place instead of being baked into the pixels. */
    object-position: var(--backdrop-focus, 50% 50%);

    opacity: var(--backdrop-opacity, 0.42);
    filter: url(#fh-duotone) contrast(0.75) brightness(1.08);
    pointer-events: none;
    z-index: 0;
}

html[data-theme="night"] .fh-backdrop__img {
    filter: url(#fh-duotone-night) contrast(0.75) brightness(1.08);
}

/* A scrim under the text only. At 42% opacity a bright sky can still climb to
   within a couple of points of the on-inverse text, and the day duotone's
   highlight stop is near paper white by design. The gradient guarantees the
   contrast floor on the text side without flattening the open side. */
.fh-backdrop::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        to right,
        var(--fh-surface-inverse) 0%,
        color-mix(in srgb, var(--fh-surface-inverse) 72%, transparent) 42%,
        transparent 78%
    );
}

.fh-backdrop__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--ed-max-width, 1120px);
    margin: 0 auto;
    padding: var(--fh-space-xl) var(--fh-space-lg);
}

.fh-backdrop__text {
    max-width: 58%;
}

.fh-backdrop__kicker {
    display: block;
    font-family: var(--fh-font-mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: color-mix(in srgb, var(--fh-on-inverse) 72%, transparent);
    margin-bottom: var(--fh-space-sm);
}

/* cqi, not vw. The type has to scale with the band, not with the window, or a
   band in a narrow column gets window-sized headlines. */
.fh-backdrop__title {
    font-family: var(--fh-font-display);
    font-weight: 700;
    /* The lower bound and the slope are set so the title does not shrink as the
       band gets wider across the 700px breakpoint. The narrow rule's cap and
       this clamp are a pair; changing one without the other reintroduces that
       jump. scripts/shoot-backdrops.mjs measures it. */
    font-size: clamp(1.75rem, 4.2cqi, 3rem);
    line-height: 1.04;
    letter-spacing: -0.025em;
    margin: 0 0 var(--fh-space-sm);
    color: var(--fh-on-inverse);
}

.fh-backdrop__dek {
    margin: 0;
    font-size: clamp(0.85rem, 1.05cqi, 1.05rem);
    line-height: 1.5;
    color: color-mix(in srgb, var(--fh-on-inverse) 84%, transparent);
    max-width: 46ch;
}

/* Credit. Required by CC BY and CC BY-SA, and the brief asks for Plex Mono caps
   on every image regardless of licence. Kept quiet, never hidden: a credit that
   only appears on hover is not a credit.
   Absolute here so it stays out of the flex flow; the narrow layout puts it
   back in flow deliberately, and switches the band to a column to match. */
.fh-backdrop__credit {
    position: absolute;
    right: var(--fh-space-md);
    bottom: var(--fh-space-sm);
    z-index: 2;
    margin: 0;
    font-family: var(--fh-font-mono);
    font-size: 0.56rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--fh-on-inverse) 52%, transparent);
    max-width: 42%;
    text-align: right;
}

.fh-backdrop__credit a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--fh-on-inverse) 24%, transparent);
}

.fh-backdrop__credit a:hover,
.fh-backdrop__credit a:focus-visible {
    color: var(--fh-on-inverse);
}

/* ----------------------------------------------------------------------------
   Narrow band (a phone, or the band dropped into a column).

   Three things change together, and they have to change together:
     - the band stacks, because a 58%-wide text column at 380px is four words
       per line;
     - the scrim turns vertical, because the type is now along the bottom edge
       rather than down the left;
     - the credit rejoins the flow, which is only safe once the band is a
       column. Left as a row it became a second flex item beside the text.
   ------------------------------------------------------------------------- */
@container backdrop (max-width: 700px) {
    .fh-backdrop {
        flex-direction: column;
        justify-content: flex-end;
        align-items: stretch;
        min-height: clamp(17rem, 78cqi, 20rem);
    }

    .fh-backdrop::before {
        background: linear-gradient(
            to top,
            var(--fh-surface-inverse) 0%,
            color-mix(in srgb, var(--fh-surface-inverse) 78%, transparent) 46%,
            color-mix(in srgb, var(--fh-surface-inverse) 30%, transparent) 72%,
            transparent 100%
        );
    }

    /* The narrow file is its own crop, so it gets its own focal point. */
    .fh-backdrop__img {
        object-position: var(--backdrop-focus-narrow, var(--backdrop-focus, 50% 50%));
    }

    .fh-backdrop__inner {
        padding: var(--fh-space-lg) var(--fh-space-md) var(--fh-space-sm);
    }

    .fh-backdrop__text {
        max-width: 100%;
    }

    .fh-backdrop__title {
        font-size: clamp(1.5rem, 8.5cqi, 2.1rem);
    }

    .fh-backdrop__dek {
        font-size: clamp(0.85rem, 3.4cqi, 1rem);
    }

    .fh-backdrop__credit {
        position: static;
        z-index: 2;
        max-width: 100%;
        text-align: left;
        padding: 0 var(--fh-space-md) var(--fh-space-md);
    }
}

/* Very narrow. The dek is the first thing to go: at this width it costs three
   lines of height to say what the desk title already says. */
@container backdrop (max-width: 380px) {
    .fh-backdrop__dek {
        display: none;
    }
}

/* Browsers without container query support get the wide layout at every width,
   which is legible but cramped. This keeps them stacked instead. */
@supports not (container-type: inline-size) {
    @media (max-width: 700px) {
        .fh-backdrop {
            flex-direction: column;
            justify-content: flex-end;
            align-items: stretch;
        }

        .fh-backdrop::before {
            background: linear-gradient(
                to top,
                var(--fh-surface-inverse) 0%,
                color-mix(in srgb, var(--fh-surface-inverse) 78%, transparent) 46%,
                transparent 100%
            );
        }

        .fh-backdrop__text {
            max-width: 100%;
        }

        .fh-backdrop__credit {
            position: static;
            max-width: 100%;
            text-align: left;
            padding: 0 var(--fh-space-md) var(--fh-space-md);
        }
    }
}

/* A backdrop is decoration. On paper the band still reads as a deliberate
   surface, which is exactly what .ed-band does with no portrait. */
@media print {
    .fh-backdrop__img,
    .fh-backdrop::before {
        display: none;
    }

    .fh-backdrop {
        min-height: 0;
        background: none;
        color: var(--fh-ink);
        border-bottom: 1px solid var(--fh-rule);
    }

    .fh-backdrop__title,
    .fh-backdrop__dek,
    .fh-backdrop__kicker,
    .fh-backdrop__credit {
        color: var(--fh-ink);
    }
}

@media (prefers-contrast: more) {
    .fh-backdrop__img {
        opacity: 0.22;
    }
}

/* ----------------------------------------------------------------------------
   Cascade guard. These pages carry .ed-page, and editorial.css colours text
   with two-part selectors (.ed-page h1, .ed-page p) that outrank the one-class
   rules above -- the same collision that once painted the Ledger Band
   navy-on-navy (design review, finding 01). Restate the band's colours at the
   same strength so they win regardless of load order.
   ------------------------------------------------------------------------- */
.ed-page .fh-backdrop__title { color: var(--fh-on-inverse); }
.ed-page .fh-backdrop__dek { color: color-mix(in srgb, var(--fh-on-inverse) 84%, transparent); }
.ed-page .fh-backdrop__credit { color: color-mix(in srgb, var(--fh-on-inverse) 66%, transparent); }
.ed-page .fh-backdrop__credit a:link,
.ed-page .fh-backdrop__credit a:visited { color: inherit; }
.ed-page .fh-backdrop__credit a:hover,
.ed-page .fh-backdrop__credit a:focus-visible { color: var(--fh-on-inverse); }