/* Shared components (docs/FRONTEND.md §3). Tokens only; no cards inside cards, no thick borders. */

/* ---------- Header / footer ---------- */
.sj-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--sj-header-h);
    background: var(--sj-header-bg);
    border-bottom: 1px solid var(--sj-border);
    backdrop-filter: saturate(180%) blur(8px);
}

.sj-header__inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sj-space-4);
}

.sj-wordmark {
    font-family: var(--sj-font-display);
    font-size: var(--sj-fs-xl);
    font-weight: var(--sj-fw-bold);
    letter-spacing: -0.02em;
    color: var(--sj-text);
    text-decoration: none;
}

.sj-wordmark span {
    color: var(--sj-brand);
}

/* Brand logo (config/packages/brand.yaml): fixed height, intrinsic aspect ratio (width/height attributes), no layout
   shift. For white and light surfaces (the artwork keeps its white antialiasing fringe). */
.sj-wordmark--logo { display: inline-flex; align-items: center; flex-shrink: 0; min-height: var(--sj-tap); }
.sj-wordmark--logo img { display: block; width: auto; height: 36px; }
.sj-wordmark--footer img { height: 32px; }
@media (min-width: 768px) {
    .sj-wordmark--header img { height: 40px; }
}

.sj-footer {
    margin-top: var(--sj-space-8);
    padding-block: var(--sj-space-7) var(--sj-space-5);
    background: var(--sj-bg-subtle);
    border-top: 1px solid var(--sj-border);
    font-size: var(--sj-fs-sm);
    color: var(--sj-text-muted);
}

.sj-footer a { color: var(--sj-text-muted); text-decoration: none; }
.sj-footer a:hover { color: var(--sj-text); text-decoration: underline; }
.sj-footer__grid { display: grid; gap: var(--sj-space-6) var(--sj-space-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sj-footer__about { grid-column: 1 / -1; max-width: 22rem; }
.sj-footer__about p { margin: 0; }
.sj-footer__brand { margin-bottom: var(--sj-space-3); }
.sj-footer__title { margin: 0 0 var(--sj-space-3); font-weight: var(--sj-fw-semibold); color: var(--sj-text); }
.sj-footer__col ul { display: grid; gap: var(--sj-space-2); margin: 0; padding: 0; list-style: none; }
.sj-footer__col a { display: inline-block; padding-block: 2px; }
.sj-footer__bottom { margin: var(--sj-space-6) 0 0; padding-top: var(--sj-space-4); border-top: 1px solid var(--sj-border); }

@media (min-width: 768px) {
    .sj-footer__grid { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }
    .sj-footer__about { grid-column: auto; }
}

/* ---------- Main navigation (home V2) ----------
   Desktop: inline links and two <details> menus; small screens: search + favourites icons and a menu panel. */
.sj-nav { display: none; }
.sj-nav__list { display: flex; align-items: center; gap: var(--sj-space-1); margin: 0; padding: 0; list-style: none; }
.sj-nav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--sj-space-2);
    min-height: var(--sj-tap);
    padding: 0 var(--sj-space-3);
    font-size: 0.9375rem;
    font-weight: var(--sj-fw-medium);
    color: var(--sj-text);
    text-decoration: none;
    border-radius: var(--sj-radius-pill);
    cursor: pointer;
    list-style: none;
}
.sj-nav__link::-webkit-details-marker { display: none; }
.sj-nav__link:hover, .sj-nav__menu[open] > .sj-nav__link { background: var(--sj-bg-subtle); color: var(--sj-text); }
.sj-nav__chevron { font-size: 0.75em; transition: transform var(--sj-duration) var(--sj-ease); }
.sj-nav__menu[open] .sj-nav__chevron { transform: rotate(180deg); }
.sj-nav__menu { position: relative; }
.sj-nav__panel {
    position: absolute;
    top: calc(100% + var(--sj-space-2));
    right: 0;
    z-index: 120;
    width: 19rem;
    max-height: calc(100vh - var(--sj-header-h) - var(--sj-space-6));
    overflow: auto;
    padding: var(--sj-space-3);
    background: var(--sj-surface);
    border: 1px solid var(--sj-border);
    border-radius: var(--sj-radius-lg);
    box-shadow: var(--sj-shadow-lg);
}
.sj-nav__panel-title { margin: var(--sj-space-2) var(--sj-space-2) var(--sj-space-1); font-size: var(--sj-fs-xs); font-weight: var(--sj-fw-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--sj-text-muted); }
.sj-nav__sub { margin: 0; padding: 0; list-style: none; }
.sj-nav__sub a { display: flex; justify-content: space-between; gap: var(--sj-space-3); padding: var(--sj-space-2); color: var(--sj-text); text-decoration: none; border-radius: var(--sj-radius-sm); }
.sj-nav__sub a:hover { background: var(--sj-bg-subtle); }

.sj-mnav { display: flex; align-items: center; gap: var(--sj-space-1); }
.sj-mnav__icon {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: var(--sj-tap);
    height: var(--sj-tap);
    font-size: 1.25rem;
    color: var(--sj-text);
    border-radius: var(--sj-radius-pill);
    cursor: pointer;
    list-style: none;
}
.sj-mnav__icon::-webkit-details-marker { display: none; }
.sj-mnav__icon:hover { background: var(--sj-bg-subtle); color: var(--sj-text); }
.sj-mnav__icon .sj-count { position: absolute; top: 2px; right: 0; }
.sj-mnav__close, .sj-mnav__menu[open] .sj-mnav__open { display: none; }
.sj-mnav__menu[open] .sj-mnav__close { display: inline; }
.sj-mnav__panel {
    position: fixed;
    top: var(--sj-header-h);
    right: 0;
    left: 0;
    z-index: 120;
    max-height: calc(100vh - var(--sj-header-h));
    overflow: auto;
    padding: var(--sj-space-3) var(--sj-gutter) var(--sj-space-6);
    background: var(--sj-surface);
    border-top: 1px solid var(--sj-border);
    box-shadow: var(--sj-shadow-lg);
}
.sj-mnav__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sj-space-3); margin: 0 0 var(--sj-space-3); padding: 0; list-style: none; }
.sj-mnav__list a { display: flex; align-items: center; gap: var(--sj-space-2); min-height: var(--sj-tap); color: var(--sj-text); text-decoration: none; }
.sj-mnav__list--main { grid-template-columns: 1fr; padding-top: var(--sj-space-3); border-top: 1px solid var(--sj-border); }

@media (min-width: 992px) {
    .sj-nav { display: block; }
    .sj-mnav { display: none; }
}

/* ---------- Buttons ---------- */
.sj-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sj-space-2);
    min-height: var(--sj-tap);
    padding: 0 var(--sj-space-5);
    font: inherit;
    font-weight: var(--sj-fw-semibold);
    line-height: 1;
    border: 1px solid transparent;
    border-radius: var(--sj-radius);
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--sj-duration) var(--sj-ease), border-color var(--sj-duration) var(--sj-ease), box-shadow var(--sj-duration) var(--sj-ease);
}

.sj-btn:focus-visible {
    outline: none;
    box-shadow: var(--sj-focus-ring);
}

.sj-btn--primary {
    background: var(--sj-brand);
    color: var(--sj-brand-contrast);
}

.sj-btn--primary:hover { background: var(--sj-brand-hover); color: var(--sj-brand-contrast); }
.sj-btn--primary:active { background: var(--sj-brand-active); }

.sj-btn--secondary {
    background: var(--sj-surface);
    color: var(--sj-text);
    border-color: var(--sj-border-strong);
}

.sj-btn--secondary:hover { border-color: var(--sj-text); color: var(--sj-text); }

.sj-btn--ghost {
    background: transparent;
    color: var(--sj-brand);
    padding-inline: var(--sj-space-3);
}

.sj-btn--ghost:hover { background: var(--sj-brand-subtle); }

.sj-btn--sm {
    min-height: 36px;
    padding-inline: var(--sj-space-4);
    font-size: var(--sj-fs-sm);
}

.sj-btn[disabled], .sj-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---------- Chips (filters, small enumerations) ---------- */
.sj-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sj-space-2);
    padding: 0;
    margin: 0;
    list-style: none;
}

.sj-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sj-space-2);
    min-height: 40px;
    padding: 0 var(--sj-space-4);
    font: inherit;
    font-size: var(--sj-fs-sm);
    font-weight: var(--sj-fw-medium);
    color: var(--sj-text);
    background: var(--sj-surface);
    border: 1px solid var(--sj-border-strong);
    border-radius: var(--sj-radius-pill);
    cursor: pointer;
    transition: background-color var(--sj-duration) var(--sj-ease), border-color var(--sj-duration) var(--sj-ease);
}

.sj-chip:hover { border-color: var(--sj-text); }

.sj-chip[aria-pressed="true"] {
    background: var(--sj-brand-subtle);
    border-color: var(--sj-brand);
    color: var(--sj-brand-active);
}

.sj-chip:focus-visible {
    outline: none;
    box-shadow: var(--sj-focus-ring);
}

.sj-chip[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ---------- Form controls ---------- */
.sj-field {
    display: grid;
    gap: var(--sj-space-1);
    margin-bottom: var(--sj-space-4);
}

.sj-label {
    font-size: var(--sj-fs-sm);
    font-weight: var(--sj-fw-semibold);
}

.sj-input, .sj-select {
    width: 100%;
    min-height: var(--sj-tap);
    padding: 0 var(--sj-space-3);
    font: inherit;
    color: var(--sj-text);
    background: var(--sj-surface);
    border: 1px solid var(--sj-border-strong);
    border-radius: var(--sj-radius);
    transition: border-color var(--sj-duration) var(--sj-ease), box-shadow var(--sj-duration) var(--sj-ease);
}

.sj-input::placeholder { color: var(--sj-text-muted); opacity: 1; }

.sj-input:focus, .sj-select:focus {
    outline: none;
    border-color: var(--sj-brand);
    box-shadow: var(--sj-focus-ring);
}

.sj-input[aria-invalid="true"] { border-color: var(--sj-danger); }

.sj-help { font-size: var(--sj-fs-sm); color: var(--sj-text-muted); }
.sj-error { font-size: var(--sj-fs-sm); color: var(--sj-danger); }

/* ---------- Cards and media ---------- */
.sj-card {
    display: flex;
    flex-direction: column;
    background: var(--sj-surface);
    border-radius: var(--sj-radius-lg);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: box-shadow var(--sj-duration) var(--sj-ease), transform var(--sj-duration) var(--sj-ease);
}

.sj-card:hover { box-shadow: var(--sj-shadow); }

.sj-card__body {
    display: grid;
    gap: var(--sj-space-1);
    padding: var(--sj-space-3) var(--sj-space-1) var(--sj-space-4);
}

.sj-card__title {
    font-size: var(--sj-fs-md);
    font-weight: var(--sj-fw-semibold);
    margin: 0;
}

/* Image boxes: the aspect ratio of each usage (App\Media\ImageUsage) reserves the space before the image loads. */
.sj-media {
    position: relative;
    margin: 0;
    overflow: hidden;
    background: var(--sj-bg-subtle);
    border-radius: var(--sj-radius-lg);
}

.sj-media--card, .sj-media--gallery, .sj-media--thumb, .sj-media--lead, .sj-media--lightbox { aspect-ratio: 4 / 3; }
.sj-media--hero { aspect-ratio: 16 / 9; }
.sj-media--thumb { border-radius: var(--sj-radius-sm); }

.sj-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sj-media__credit {
    position: absolute;
    right: var(--sj-space-2);
    bottom: var(--sj-space-2);
    padding: 0 var(--sj-space-2);
    font-size: var(--sj-fs-xs);
    color: var(--sj-text-inverse);
    background: var(--sj-overlay);
    border-radius: var(--sj-radius-sm);
}

/* ---------- Alerts / notices ---------- */
.sj-alert {
    display: flex;
    gap: var(--sj-space-3);
    align-items: flex-start;
    padding: var(--sj-space-3) var(--sj-space-4);
    border-radius: var(--sj-radius);
    font-size: var(--sj-fs-sm);
    background: var(--sj-info-subtle);
    color: var(--sj-text);
}

.sj-alert > .sj-icon { margin-top: 0.2em; color: var(--sj-info); }
.sj-alert--success { background: var(--sj-success-subtle); }
.sj-alert--success > .sj-icon { color: var(--sj-success); }
.sj-alert--warning { background: var(--sj-warning-subtle); }
.sj-alert--warning > .sj-icon { color: var(--sj-warning); }
.sj-alert--danger { background: var(--sj-danger-subtle); }
.sj-alert--danger > .sj-icon { color: var(--sj-danger); }

/* Content awaiting business/legal validation: impossible to miss, impossible to mistake for final text. */
.sj-pending {
    display: block;
    padding: var(--sj-space-2) var(--sj-space-3);
    margin-block: var(--sj-space-2);
    background: var(--sj-warning-subtle);
    border-left: 4px solid var(--sj-warning);
    color: var(--sj-warning);
    font-size: var(--sj-fs-sm);
    font-weight: var(--sj-fw-semibold);
}

/* ---------- Badge ---------- */
.sj-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sj-space-1);
    padding: 0.125rem var(--sj-space-2);
    font-size: var(--sj-fs-xs);
    font-weight: var(--sj-fw-semibold);
    border-radius: var(--sj-radius-sm);
    background: var(--sj-bg-subtle);
    color: var(--sj-text);
}

.sj-badge--offer { background: var(--sj-accent-subtle); color: var(--sj-accent); }

/* ---------- Hero (home) ---------- */
.sj-hero {
    padding-block: var(--sj-space-8) var(--sj-space-7);
    background: var(--sj-bg-subtle);
}

.sj-hero__title {
    max-width: 18ch;
}

.sj-hero__lead {
    max-width: 52ch;
    font-size: var(--sj-fs-lg);
    color: var(--sj-text-muted);
}

/* ---------- Legal / prose ---------- */
.sj-prose {
    max-width: 72ch;
}

.sj-prose h2 {
    margin-top: var(--sj-space-6);
    font-size: var(--sj-fs-xl);
}

.sj-dl {
    display: grid;
    grid-template-columns: minmax(10rem, max-content) 1fr;
    gap: var(--sj-space-2) var(--sj-space-5);
}

.sj-dl dt { font-weight: var(--sj-fw-semibold); }
.sj-dl dd { margin: 0; }

@media (max-width: 575.98px) {
    .sj-dl { grid-template-columns: 1fr; }
    .sj-dl dd { margin-bottom: var(--sj-space-2); }
}

/* ---------- Styleguide (dev only) ---------- */
.sj-swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--sj-space-3);
}

.sj-swatch {
    border: 1px solid var(--sj-border);
    border-radius: var(--sj-radius);
    overflow: hidden;
    font-size: var(--sj-fs-xs);
}

.sj-swatch__color { height: 56px; }
.sj-swatch__label { padding: var(--sj-space-2); }
.sj-swatch__color--brand { background: var(--sj-brand); }
.sj-swatch__color--brand-hover { background: var(--sj-brand-hover); }
.sj-swatch__color--brand-subtle { background: var(--sj-brand-subtle); }
.sj-swatch__color--accent { background: var(--sj-accent); }
.sj-swatch__color--accent-subtle { background: var(--sj-accent-subtle); }
.sj-swatch__color--text { background: var(--sj-text); }
.sj-swatch__color--text-muted { background: var(--sj-text-muted); }
.sj-swatch__color--bg-subtle { background: var(--sj-bg-subtle); }
.sj-swatch__color--border { background: var(--sj-border); }
.sj-swatch__color--border-strong { background: var(--sj-border-strong); }
.sj-swatch__color--success { background: var(--sj-success); }
.sj-swatch__color--warning { background: var(--sj-warning); }
.sj-swatch__color--danger { background: var(--sj-danger); }

/* ---------- Consent banner (P6, only when an optional tool is configured) ---------- */
.sj-consent { position: fixed; inset: auto 0 0 0; z-index: 90; padding: var(--sj-space-3) 0; background: var(--sj-surface); border-top: 1px solid var(--sj-border); box-shadow: var(--sj-shadow-lg); }
.sj-consent__inner { display: flex; flex-wrap: wrap; gap: var(--sj-space-3); align-items: center; justify-content: space-between; }
.sj-consent__inner p { margin: 0; font-size: var(--sj-fs-sm); }
.sj-consent__form { display: flex; gap: var(--sj-space-2); }