/*
 * Components — the reusable primitives, ported from
 * core/presentation/component/{Primitives,Sections,Glyphs}.kt.
 *
 * Each class is the CSS counterpart of one composable: `.pill` is Pill(),
 * `.content-band` is ContentBand(), and so on. Sections compose these the same
 * way the composables did, so the two implementations read alike.
 */

/* --- ContentBand -------------------------------------------------------- */
/* The centred 1280px column every band lays its content inside. */
.content-band {
    width: 100%;
    max-width: var(--content-width);
    margin-inline: auto;
}

/* --- Surface ------------------------------------------------------------
 * A floating panel: translucent, blurred, softly shadowed — the motif carried
 * over from TravelGlanceSP. It reads as a pane hovering above the page rather
 * than a region cut out of it, which is why the page background shows through.
 *
 * Every floating element on the site is this one class plus its own layout:
 * the header, the product cards and the contact cards.
 */
.surface {
    background: var(--surface-fill);
    border: 1px solid var(--surface-outline);
    border-radius: var(--surface-radius);
    backdrop-filter: saturate(150%) blur(var(--surface-blur));
    -webkit-backdrop-filter: saturate(150%) blur(var(--surface-blur));
    box-shadow: var(--surface-shadow);
}

/* Blur is expensive to composite. Where a surface is not over the background
   image it gains nothing, so only opt in where it reads. */
@media (prefers-reduced-transparency: reduce) {
    .surface {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--surface-fill-opaque);
    }
}

/* --- Hairline ----------------------------------------------------------- */
/* The divider that runs between every band of the page. */
.hairline {
    border: 0;
    border-top: 1px solid var(--divider);
    margin: 0;
}

/* --- Pill --------------------------------------------------------------- */
.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid transparent;
    border-radius: var(--pill-radius);
    padding: 15px 28px;
    background: transparent;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    /* Colour only: transforms on hover fight the native scroll compositor. */
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.pill--outlined {
    border-color: var(--outline-subtle);
    color: var(--text-muted);
}
.pill--outlined:hover {
    border-color: var(--chip-selected-outline);
    color: var(--text-primary);
}

.pill--solid {
    background: var(--chalk);
    color: var(--ink);
}
.pill--solid:hover {
    background: #ffffff;
}
.pill--solid:disabled {
    opacity: 0.6;
    cursor: default;
}

/* --- Checkbox (waitlist chip) ------------------------------------------- */
.checkbox {
    width: 15px;
    height: 15px;
    flex: none;
    display: grid;
    place-items: center;
    border: 1px solid var(--outline-checkbox);
    border-radius: 4px;
}
.checkbox svg { display: none; }

/* --- Media placeholder -------------------------------------------------- */
/* The diagonal hatch standing in for a screenshot that does not exist yet. */
.media-placeholder {
    display: grid;
    place-items: center;
    border: 1px solid var(--outline-media);
    border-radius: var(--media-radius);
    background: repeating-linear-gradient(
        135deg,
        var(--hatch) 0 8px,
        transparent 8px 16px
    );
    color: var(--text-placeholder);
}

/* --- Glyphs ------------------------------------------------------------- */
/* Drawn as vectors rather than typed, so no font has to carry these points. */
.glyph {
    width: 1em;
    height: 1em;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- Focus -------------------------------------------------------------- */
/* Keyboard-only, so pointer users never see a ring the design does not have. */
:where(a, button, input, [tabindex]):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* --- Visually hidden ---------------------------------------------------- */
/* Present for screen readers, absent visually — the canvas build could not do this. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}