/* =====================================================================
 * UIUX-008R editorial family: canonical story card
 * (template-parts/components/editorial/story-card.php)
 *
 * One card grammar for every article and Buying Guide card on customer
 * pages: media -> type -> title -> excerpt -> genuine metadata -> quiet
 * action. The whole card is one link. Loaded on every customer route
 * (after the UIUX-008R surfaces layer) because guide cards also appear on
 * the homepage, search results and product pages. The legacy .guide-card
 * hooks kept on the markup are neutralised here (coral stripe, lift,
 * double borders), never restyled per route.
 * ===================================================================== */

body:not(.aanya-admin) .story-card {
    position: relative;
    display: flex;
    height: 100%;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--u8r-rule);
    border-radius: var(--u8r-radius-card);
    background: #fff;
    box-shadow: none;
    transform: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

body:not(.aanya-admin) .story-card::before,
body:not(.aanya-admin) .story-card::after {
    content: none;
    display: none;
}

body:not(.aanya-admin) .story-card:hover {
    border-color: var(--u8r-rule-strong);
    box-shadow: 0 6px 18px rgb(24 26 25 / 7%);
    transform: none;
}

body:not(.aanya-admin) .story-card__link {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
    border-radius: inherit;
}

body:not(.aanya-admin) .story-card__link:focus-visible {
    outline: 3px solid var(--u8r-focus);
    outline-offset: -3px;
}

body:not(.aanya-admin) .story-card__media {
    display: block;
    flex: 0 0 auto;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--u8r-surface-muted);
}

body:not(.aanya-admin) .story-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: none;
}

/* Canonical neutral fallback: the content-type glyph on a quiet panel, never
   a logo or an unrelated photograph. */
body:not(.aanya-admin) .story-card__media--fallback {
    display: grid;
    place-items: center;
    color: var(--u8r-muted);
}

body:not(.aanya-admin) .story-card__fallback {
    display: inline-grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border: 1px solid var(--u8r-rule);
    border-radius: 50%;
    background: #fff;
}

body:not(.aanya-admin) .story-card__fallback :is(svg, .aanya-icon) {
    width: 1.25rem;
    height: 1.25rem;
}

body:not(.aanya-admin) .story-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .5rem;
    padding: 1.125rem 1.25rem 1.25rem;
}

body:not(.aanya-admin) .story-card__type {
    color: var(--u8r-muted);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.3;
    text-transform: uppercase;
}

body:not(.aanya-admin) .story-card__title {
    margin: 0;
    color: var(--u8r-ink);
    font-family: var(--font-body);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.3;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

body:not(.aanya-admin) .story-card__excerpt {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: var(--u8r-muted);
    font-size: .9375rem;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

body:not(.aanya-admin) .story-card__meta {
    display: block;
    margin-top: auto;
    padding-top: .25rem;
    color: var(--u8r-muted);
    font-size: .8125rem;
    line-height: 1.5;
}

/* Same metadata grammar as the long-form opening: items never break inside
   and the "·" separator stays at the end of the item before it. */
body:not(.aanya-admin) .story-card__meta > span {
    white-space: nowrap;
}

body:not(.aanya-admin) .story-card__meta > span:not(:last-child)::after {
    content: "\00B7";
    margin-inline: .45rem;
}

body:not(.aanya-admin) .story-card .story-card__action {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--u8r-ink);
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.3;
}

body:not(.aanya-admin) .story-card__action :is(svg, .aanya-icon) {
    width: 1rem;
    height: 1rem;
    transition: transform .18s ease;
}

body:not(.aanya-admin) .story-card:hover .story-card__action :is(svg, .aanya-icon) {
    transform: translateX(2px);
}

/* Feature variant: image | copy from 641px (tablet up); stacks on phones. */
@media (min-width: 641px) {
    body:not(.aanya-admin) .story-card--feature .story-card__link {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    }

    body:not(.aanya-admin) .story-card--feature .story-card__media {
        aspect-ratio: auto;
        min-height: 18rem;
        max-height: 26rem;
    }

    body:not(.aanya-admin) .story-card--feature .story-card__body {
        justify-content: center;
        gap: .75rem;
        padding: clamp(1.75rem, 3vw, 2.75rem);
    }
}

body:not(.aanya-admin) .story-card--feature .story-card__title {
    font-size: clamp(1.375rem, 1.1rem + .9vw, 1.875rem);
    line-height: 1.2;
}

body:not(.aanya-admin) .story-card--feature .story-card__excerpt {
    font-size: 1rem;
    -webkit-line-clamp: 4;
}

body:not(.aanya-admin) .story-card--feature .story-card__meta {
    margin-top: .25rem;
}

/* Row variant: a compact list row (thumbnail | copy) for long listings where
   most items have no image of their own, and for every grid card on phones,
   so a list never becomes a stack of tall blank panels. */
body:not(.aanya-admin) .story-card--row .story-card__link {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    align-items: start;
}

body:not(.aanya-admin) .story-card--row .story-card__media {
    aspect-ratio: 1 / 1;
    margin: 1rem 0 1rem 1rem;
    border-radius: var(--u8r-radius-tile);
}

body:not(.aanya-admin) .story-card--row .story-card__body {
    gap: .375rem;
    padding: 1rem 1.25rem 1.125rem;
}

body:not(.aanya-admin) .story-card--row .story-card__excerpt {
    -webkit-line-clamp: 2;
}

@media (max-width: 640px) {
    body:not(.aanya-admin) :is(.story-card--grid, .story-card--row) .story-card__link {
        display: grid;
        grid-template-columns: 5.5rem minmax(0, 1fr);
        align-items: start;
    }

    body:not(.aanya-admin) :is(.story-card--grid, .story-card--row) .story-card__media {
        aspect-ratio: 1 / 1;
        margin: .875rem 0 .875rem .875rem;
        border-radius: var(--u8r-radius-tile);
    }

    body:not(.aanya-admin) :is(.story-card--grid, .story-card--row) .story-card__body {
        gap: .3rem;
        padding: .875rem 1rem 1rem;
    }

    body:not(.aanya-admin) :is(.story-card--grid, .story-card--row) .story-card__fallback {
        width: 2.5rem;
        height: 2.5rem;
    }

    body:not(.aanya-admin) :is(.story-card--grid, .story-card--row) .story-card__title {
        font-size: 1rem;
    }

    body:not(.aanya-admin) :is(.story-card--grid, .story-card--row) .story-card__excerpt {
        font-size: .875rem;
        -webkit-line-clamp: 2;
    }
}

@media (prefers-reduced-motion: reduce) {
    body:not(.aanya-admin) .story-card,
    body:not(.aanya-admin) .story-card__action :is(svg, .aanya-icon) {
        transition: none;
    }

    body:not(.aanya-admin) .story-card:hover .story-card__action :is(svg, .aanya-icon) {
        transform: none;
    }
}