/* =============================================================================
   Building blocks

   Recurring patterns from the draft. Content elements arrive in phase C; this
   file holds what header, footer and body text already need.
   ========================================================================== */

/* ── Subheader: uppercase, letter-spaced, accent colour ─────────────────────── */

.svr-subheader {
    display: block;
    margin-block-end: var(--svr-space-xs);
    font-size: var(--svr-size-small);
    font-weight: 600;
    letter-spacing: var(--svr-tracking-wide);
    text-transform: uppercase;
    color: var(--svr-accent);
}

/* ── Section header: subheader + headline, shared by all content elements ──── */

.svr-section-header {
    margin-block-end: var(--svr-space-md);
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */

.svr-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: var(--svr-tap);
    padding: 0.875rem 1.375rem;
    border: 1px solid transparent;
    border-radius: var(--svr-radius);
    font-family: var(--svr-font-body);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--svr-transition), border-color var(--svr-transition), color var(--svr-transition);
}

.svr-button--primary {
    background: var(--svr-accent);
    color: var(--svr-accent-text);
}

.svr-button--primary:hover {
    background: var(--svr-accent-hover);
    color: var(--svr-accent-text);
}

.svr-button--secondary {
    border-color: var(--svr-border-strong);
    color: var(--svr-text-strong);
}

.svr-button--secondary:hover {
    border-color: var(--svr-accent);
    color: var(--svr-accent);
}

.svr-button--pill {
    border-radius: var(--svr-radius-pill);
}

/* ── Stage: large-area page entry with a background image ──────────────────── */

.svr-stage {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(20rem, 60vw, 32rem);
    background: var(--svr-surface-header);
    padding-block: var(--svr-space-section);
    overflow: clip;
}

.svr-stage__image {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Gradient rather than a flat tint: readability must hold at the text end
   even when the image itself is bright, without hoping for dark source
   material (see task 05). Stronger toward the left, where the text sits. */
.svr-stage__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, var(--svr-scrim) 0%, var(--svr-scrim) 45%, transparent 100%);
}

.svr-stage__body {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: calc(var(--svr-shell-max) + var(--svr-gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--svr-gutter);
}

.svr-stage__headline {
    max-width: 40rem;
    font-size: var(--svr-size-display);
    margin-block-start: var(--svr-space-xs);
}

.svr-stage__text {
    max-width: 40rem;
    margin-block-start: var(--svr-space-md);
    font-size: var(--svr-size-lead);
    color: var(--svr-text);
}

.svr-stage__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--svr-space-md);
    margin-block-start: var(--svr-space-lg);
}

/* ── Cards: a section of tiles in three arrangements ───────────────────────── */

.svr-cards-section__text {
    margin-block-end: var(--svr-space-lg);
    font-size: var(--svr-size-lead);
}

.svr-cards {
    display: grid;
    gap: var(--svr-space-md);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Grids: auto-fit carries three, four or six tiles at every width without a
   media query — only the smallest a column may become differs between the two
   grid variants. */
.svr-cards--grid {
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.svr-cards--grid-compact {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

/* Row: one line of tiles that scrolls sideways as soon as it no longer fits.
   The same rule carries every width — where everything fits, there is nothing
   to scroll. The scrollbar stays visible on purpose: for an audience of 60+ it
   is the most reliable hint that something is off to the right. */
.svr-cards--row {
    grid-auto-flow: column;
    grid-auto-columns: minmax(15rem, 1fr);
    overflow-x: auto;
    padding-block-end: var(--svr-space-sm);
    scroll-snap-type: inline mandatory;
}

.svr-cards--row > .svr-card {
    scroll-snap-align: start;
    min-height: 15rem;
    justify-content: flex-end;
}

.svr-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: var(--svr-space-lg);
    border-radius: var(--svr-radius-lg);
    background: var(--svr-surface-card);
    overflow: clip;
}

.svr-card__image {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Without knowing the photo, light text on it is not safe — so the tile dims
   its own image rather than hoping for dark source material. In the grids the
   text sits on top of the whole tile, so the cover is even; in the row the
   image is the point and only the bottom, where the text is, gets darkened. */
.svr-card__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--svr-scrim-card);
}

.svr-cards--row .svr-card__scrim {
    background: linear-gradient(180deg, transparent 30%, var(--svr-scrim) 100%);
}

.svr-card__body {
    position: relative;
    z-index: 2;
}

.svr-card__title {
    font-size: var(--svr-size-h3);
}

.svr-card__text {
    margin-block: var(--svr-space-sm) 0;
    color: var(--svr-text);
}

/* Stretches the title link across the whole tile: one tab stop, one link text,
   and the entire area clickable — without a second, empty link around it. */
.svr-card__link {
    color: inherit;
    text-decoration: none;
}

.svr-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
}

.svr-card__link:hover {
    color: var(--svr-accent);
}