/* ==========================================================================
   STORIES & VOICES — editorial hub (home.php) and single post (single.php)
   Rendered by inc/stories.php. Tokens come from theme.json presets.
   ========================================================================== */

/* ----- Shared: meta line, eyebrow ----- */
.sv-eyebrow {
    margin: 0;
}

.sv-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin: 0;
    font-size: var(--wp--preset--font-size--tiny);
    font-weight: 600;
    color: var(--wp--custom--color--mute);
}

.sv-meta > * {
    display: inline-flex;
    align-items: center;
}

.sv-meta > * + *::before {
    content: "·";
    margin-right: 12px;
    opacity: 0.6;
}

.sv-meta__topic {
    position: relative;
    z-index: 2;
    gap: 8px;
    color: var(--wp--preset--color--black);
    font-size: var(--wp--preset--font-size--min);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
}

.sv-meta__topic::before {
    content: "";
    flex: none;
    width: 10px;
    height: 10px;
    background: var(--wp--preset--color--primary);
}

.sv-meta__topic:hover,
.sv-meta__topic:focus-visible {
    color: var(--wp--preset--color--primary);
}

/* ----- Pills (topic filter, share row) ----- */
.sv-pill {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 16px;
    border: 1.5px solid var(--wp--preset--color--ink);
    border-radius: var(--wp--custom--border--radius--pill);
    background: transparent;
    color: var(--wp--preset--color--ink);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sv-pill:hover,
.sv-pill:focus-visible {
    background: var(--wp--preset--color--light-grey);
    color: var(--wp--preset--color--ink);
}

.sv-pill.is-active {
    background: var(--wp--preset--color--ink);
    color: var(--wp--preset--color--white);
}

/* ----- Hero ----- */
.sv-hero {
    padding-top: var(--wp--preset--spacing--x-large);
    padding-bottom: var(--wp--preset--spacing--x-large);
    background: var(--wp--preset--color--white);
}

.sv-hero__inner {
    display: grid;
    gap: 20px;
}

.sv-hero__title {
    margin: 0;
    font-size: var(--wp--preset--font-size--massive);
}

.sv-hero__standfirst {
    max-width: 560px;
    font-size: var(--wp--preset--font-size--large);
    color: var(--wp--preset--color--charcoal);
}

.sv-hero__standfirst > :first-child {
    margin-top: 0;
}

.sv-hero__standfirst > :last-child {
    margin-bottom: 0;
}

@media (min-width: 900px) {
    .sv-hero__inner {
        grid-template-columns: 1fr minmax(0, 520px);
        column-gap: var(--wp--preset--spacing--xx-large);
        align-items: end;
    }

    .sv-hero__eyebrow {
        grid-column: 1 / -1;
    }
}

/* ----- Toolbar: pills + search ----- */
.sv-toolbar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 32px;
    padding: 18px 0;
    border-top: 1.5px solid var(--wp--preset--color--ink);
    border-bottom: 1.5px solid var(--wp--preset--color--ink);
}

.sv-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sv-search {
    display: flex;
    align-items: center;
    flex: 1 1 240px;
    max-width: 360px;
    border-bottom: 2px solid var(--wp--preset--color--ink);
    transition: border-color 0.15s ease;
}

.sv-search:focus-within {
    border-color: var(--wp--preset--color--primary);
}

.sv-search .sv-search__input {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 10px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font: inherit;
    font-size: var(--wp--preset--font-size--normal);
    color: var(--wp--preset--color--ink);
}

.sv-search .sv-search__input:focus {
    outline: none;
    box-shadow: none;
}

.sv-search .sv-search__input::-webkit-search-decoration {
    -webkit-appearance: none;
}

.sv-search .sv-search__button {
    display: grid;
    place-items: center;
    margin: 0;
    padding: 6px;
    border: 0;
    background: transparent;
    color: var(--wp--preset--color--ink);
    cursor: pointer;
}

.sv-search .sv-search__button:hover,
.sv-search .sv-search__button:focus-visible {
    color: var(--wp--preset--color--primary);
}

/* ----- Results region ----- */
.sv-results {
    transition: opacity 0.2s ease;
}

.sv-index.is-loading .sv-results {
    opacity: 0.45;
    pointer-events: none;
}

.sv-status {
    margin: 0 0 var(--wp--preset--spacing--large);
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--charcoal);
}

.sv-status strong {
    color: var(--wp--preset--color--ink);
}

.sv-status a {
    margin-left: 10px;
    font-weight: 700;
}

.sv-empty {
    max-width: 560px;
    padding: var(--wp--preset--spacing--x-large) 0;
}

.sv-empty h2 {
    margin: 0 0 12px;
    font-size: var(--wp--preset--font-size--huge);
}

/* ----- Featured story ----- */
.sv-featured {
    padding-top: var(--wp--preset--spacing--xx-large);
    padding-bottom: var(--wp--preset--spacing--xx-large);
    background: var(--wp--preset--color--white);
}

.sv-featured__inner {
    position: relative;
    display: grid;
    gap: var(--wp--preset--spacing--large);
    align-items: center;
}

@media (min-width: 900px) {
    .sv-featured__inner {
        grid-template-columns: 7fr 5fr;
        column-gap: var(--wp--preset--spacing--xx-large);
    }
}

.sv-featured__media {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--wp--preset--color--light-grey);
    box-shadow: var(--wp--preset--shadow--offset-ink-lg);
}

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

.sv-featured__body {
    display: grid;
    gap: 18px;
}

.sv-featured__title {
    margin: 0;
    font-size: var(--wp--preset--font-size--jumbo);
}

.sv-featured__title a {
    color: inherit;
    text-decoration: none;
}

.sv-featured__title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.sv-featured__inner:hover .sv-featured__title a {
    color: var(--wp--preset--color--primary);
}

.sv-featured__excerpt {
    margin: 0;
    font-size: var(--wp--preset--font-size--large);
    color: var(--wp--preset--color--charcoal);
}

.sv-featured__cta {
    position: relative;
    z-index: 2;
    margin: 0;
}

/* ----- Grid + cards ----- */
.sv-grid-section {
    padding-top: var(--wp--preset--spacing--xx-large);
    padding-bottom: var(--wp--preset--spacing--xx-large);
    background: var(--wp--preset--color--light-grey);
}

.sv-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--medium);
}

@media (min-width: 640px) {
    .sv-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .sv-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.sv-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--wp--preset--color--white);
    transition: box-shadow 0.15s ease;
}

.sv-card:hover,
.sv-card:focus-within {
    box-shadow: var(--wp--preset--shadow--offset-orange);
}

.sv-card__media {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--wp--preset--color--grey);
}

.sv-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sv-card:hover .sv-card__media img {
    transform: scale(1.03);
}

.sv-card__media--empty,
.sv-featured__media--empty {
    display: grid;
    place-items: center;
    background: var(--wp--preset--color--ink);
}

.sv-card__media--empty::after,
.sv-featured__media--empty::after {
    content: "";
    width: 18%;
    aspect-ratio: 1;
    background: var(--wp--preset--color--primary);
}

.sv-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 14px;
    padding: var(--wp--preset--spacing--medium);
}

.sv-card__title {
    margin: 0;
    font-size: var(--wp--preset--font-size--big);
    line-height: 1;
}

.sv-card__title a {
    color: inherit;
    text-decoration: none;
}

.sv-card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.sv-card:hover .sv-card__title a {
    color: var(--wp--preset--color--primary);
}

.sv-card__excerpt {
    margin: 0;
    font-size: var(--wp--preset--font-size--small);
    line-height: var(--wp--custom--line-height--normal);
    color: var(--wp--preset--color--charcoal);
}

.sv-card__more {
    margin-top: auto;
    padding-top: 6px;
    font-size: var(--wp--preset--font-size--tiny);
    font-weight: 700;
}

.sv-card__more span {
    display: inline-block;
    transition: transform 0.15s ease;
}

.sv-card:hover .sv-card__more span {
    transform: translateX(4px);
}

/* Pagination inside the hub sits on light grey: ink outline, orange current. */
.sv-results .archive-pagination {
    padding: var(--wp--preset--spacing--x-large) 0 0;
}

.sv-results .archive-pagination li a {
    border: 1.5px solid var(--wp--preset--color--ink);
    background: var(--wp--preset--color--white);
}

/* Bands rendered with do_blocks() outside the entry-content wrapper. */
.sv-band > .alignfull {
    margin-top: 0;
    margin-bottom: 0;
}

/* ----- Single post ----- */
.single-post .entry-header {
    padding-top: var(--wp--preset--spacing--large);
    padding-bottom: var(--wp--preset--spacing--x-large);
}

.single-post .entry-header > .sv-post-header {
    display: grid;
    gap: 20px;
    max-width: var(--wp--custom--layout--small-content);
}

.sv-post-back {
    margin: 0;
    font-size: var(--wp--preset--font-size--tiny);
    font-weight: 700;
}

.sv-post-back a {
    color: var(--wp--preset--color--ink);
    text-decoration: none;
}

.sv-post-back a:hover,
.sv-post-back a:focus-visible {
    color: var(--wp--preset--color--primary);
}

.sv-post-title {
    margin: 0;
    font-size: var(--wp--preset--font-size--gigantic);
}

.sv-post-standfirst {
    margin: 0;
    font-size: var(--wp--preset--font-size--large);
    line-height: var(--wp--custom--line-height--medium);
    color: var(--wp--preset--color--charcoal);
}

.sv-post-figure {
    margin: 0 auto var(--wp--preset--spacing--xx-large);
}

.sv-post-figure img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    box-shadow: var(--wp--preset--shadow--offset-ink-lg);
}

.sv-post-figure figcaption {
    margin-top: 16px;
    font-size: var(--wp--preset--font-size--tiny);
    color: var(--wp--custom--color--mute);
}

/* Reading measure: body copy at 760px, wide/full blocks keep their width. */
.single-post .entry-content {
    font-size: var(--wp--preset--font-size--medium);
    line-height: var(--wp--custom--line-height--loose);
}

.single-post .entry-content > :where(:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright)) {
    max-width: var(--wp--custom--layout--small-content);
}

.single-post .entry-content h2 {
    margin-top: var(--wp--preset--spacing--x-large);
    font-size: var(--wp--preset--font-size--huge);
}

.single-post .entry-content h3 {
    margin-top: var(--wp--preset--spacing--large);
    font-size: var(--wp--preset--font-size--big);
}

.single-post .entry-content .wp-block-image {
    margin-top: var(--wp--preset--spacing--x-large);
    margin-bottom: var(--wp--preset--spacing--x-large);
}

.sv-post-footer {
    margin-top: var(--wp--preset--spacing--x-large);
    padding-top: var(--wp--preset--spacing--large);
    border-top: 1.5px solid var(--wp--preset--color--ink);
}

.sv-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.sv-share__label {
    margin-right: 8px;
    font-size: var(--wp--preset--font-size--min);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* ----- Related ----- */
.sv-related {
    padding-top: var(--wp--preset--spacing--section);
    padding-bottom: var(--wp--preset--spacing--section);
    background: var(--wp--preset--color--light-grey);
}

.sv-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: var(--wp--preset--spacing--large);
}

.sv-section-head p {
    margin: 0;
}

.sv-section-title {
    margin: 0;
    font-size: var(--wp--preset--font-size--huge);
}

@media (prefers-reduced-motion: reduce) {
    .sv-card,
    .sv-card__media img,
    .sv-card__more span,
    .sv-pill,
    .sv-results {
        transition: none;
    }

    .sv-card:hover .sv-card__media img,
    .sv-card:hover .sv-card__more span {
        transform: none;
    }
}