/**
 * Temporary asset placeholders.
 *
 * Every image or video the site still needs is a <figure class="temp-asset">
 * that says what belongs there. They are meant to be seen: amber stripes, a
 * TEMP tag, the asset's purpose and its spec. `scripts/list-temp-assets.mjs`
 * collects them into TEMP-ASSETS.md, so the list of what to produce stays in
 * step with the pages.
 *
 * Markup:
 *   <figure class="temp-asset" data-temp-asset="home-hero-footage"
 *           data-temp-kind="video" data-temp-spec="2560×1440 · 10–14 s loop"
 *           style="aspect-ratio: 16 / 9">
 *     <span class="temp-asset__tag">TEMP · Video</span>
 *     <figcaption class="temp-asset__title">What goes here</figcaption>
 *     <span class="temp-asset__spec">2560×1440 · 10–14 s loop</span>
 *   </figure>
 */

.temp-asset {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.35rem;
    width: 100%;
    max-width: 100%;
    min-height: 8rem;
    margin: 0;
    padding: 1rem 1.1rem;
    overflow: hidden;
    border: 1.5px dashed rgba(245, 180, 80, 0.75);
    border-radius: 0.9rem;
    background:
        repeating-linear-gradient(135deg, rgba(245, 180, 80, 0.07) 0 14px, rgba(245, 180, 80, 0.02) 14px 28px),
        rgba(11, 29, 40, 0.85);
    color: #f5d08a;
    text-align: left;
}

.temp-asset__tag {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgba(245, 180, 80, 0.18);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.temp-asset__title {
    max-width: 36rem;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
    color: #fbe3b5;
}

.temp-asset__spec {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.75rem;
    color: rgba(245, 208, 138, 0.8);
}

/* Logo slot in a trust row: the size of a logo, tag and name only. */
.temp-asset--logo {
    width: 8rem;
    min-height: 0;
    height: 3rem;
    padding: 0.35rem 0.6rem;
    gap: 0.15rem;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 0.5rem;
}

.temp-asset--logo .temp-asset__tag {
    position: static;
    padding: 0;
    background: none;
    font-size: 0.5625rem;
}

.temp-asset--logo .temp-asset__title {
    font-size: 0.75rem;
}

/* Full-bleed backgrounds (hero footage): the label sits top-right, clear of the copy and the chip. */
.temp-asset--bleed {
    position: absolute;
    inset: 0;
    min-height: 0;
    border-radius: 0;
    border-width: 0;
    justify-content: flex-start;
    align-items: flex-end;
    text-align: right;
    padding: 9rem max(1.5rem, env(safe-area-inset-right, 0px)) 2rem 45%;
}

.temp-asset--bleed .temp-asset__tag {
    position: static;
    margin-bottom: 0.5rem;
}

@media (max-width: 767.98px) {
    .temp-asset--bleed {
        padding: 6rem 1rem 1rem;
        justify-content: flex-end;
        opacity: 0.6;
    }
}