/* ==========================================================================
   Szekely Design
   Loaded last (wp_enqueue_scripts priority 999).

   Rules:
   - every spacing / size / radius / font size is a Fibonacci token below;
   - colours come from the theme tokens --color-one … --color-four;
   - only transform and opacity animate; prefers-reduced-motion turns
     motion off.
   ========================================================================== */

:root {
    --sd-3: 3px;
    --sd-5: 5px;
    --sd-8: 8px;
    --sd-13: 13px;
    --sd-21: 21px;
    --sd-34: 34px;
    --sd-55: 55px;
    --sd-89: 89px;
    --sd-144: 144px;

    /* Card column minimum: 144 + 144 + 89 = 377 (next Fibonacci number). */
    --sd-card-min: calc(var(--sd-144) * 2 + var(--sd-89));

    --sd-text-muted: #555;
    --sd-shadow: 0 var(--sd-3) var(--sd-8) rgba(0, 0, 0, 0.06);
    --sd-shadow-raised: 0 var(--sd-8) var(--sd-21) rgba(0, 0, 0, 0.1);
    --sd-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --sd-fast: 233ms;
    --sd-slow: 377ms;
}

/* --------------------------------------------------------------------------
   Sticky header background
   The header lives in a sticky Group (is-position-sticky) at the top of
   .wp-site-blocks. Only some templates give that Group the child theme's
   ._sticky_header class (which carries the white background); on others
   (e.g. the author archive) the sticky header is transparent, so its icons
   float over post images and the grey logo vanishes against them.
   -------------------------------------------------------------------------- */

.wp-site-blocks > .is-position-sticky:first-child {
    z-index: 100;
    background-color: var(--color-one, #fff);
    box-shadow: 0 var(--sd-3) var(--sd-13) rgba(0, 0, 0, 0.06);
}

/* Frosted glass where supported. The blur sits on a ::before layer, not
   on the header itself: backdrop-filter on the header would turn it into
   the containing block for position:fixed descendants and trap the mobile
   navigation overlay inside the header box. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .wp-site-blocks > .is-position-sticky:first-child {
        background-color: transparent;
    }

    .wp-site-blocks > .is-position-sticky:first-child::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background-color: rgba(255, 255, 255, 0.86);
        background-color: color-mix(in srgb, var(--color-one, #fff) 86%, transparent);
        -webkit-backdrop-filter: blur(var(--sd-13)) saturate(1.618);
        backdrop-filter: blur(var(--sd-13)) saturate(1.618);
    }
}

/* --------------------------------------------------------------------------
   Archive cards (category + author) — markup: includes/archive-cards.php
   -------------------------------------------------------------------------- */

.sd-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--sd-card-min)), 1fr));
    gap: var(--sd-21);
    /* Cards keep their natural height: no stretched, half-empty cards. */
    align-items: start;
}

.sd-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sd-13);
    margin: 0;
    padding: var(--sd-21);
    background: var(--color-one, #fff);
    border-radius: var(--sd-21);
    box-shadow: var(--sd-shadow);
    transition:
        transform var(--sd-fast) var(--sd-ease),
        opacity var(--sd-slow) var(--sd-ease);
}

/* Raised shadow on its own layer, faded in with opacity (no animated
   box-shadow). */
.sd-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: var(--sd-shadow-raised);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--sd-fast) var(--sd-ease);
}

@media (hover: hover) {
    .sd-card:hover {
        transform: translateY(calc(var(--sd-3) * -1));
    }

    .sd-card:hover::after {
        opacity: 1;
    }

    .sd-card:hover .sd-card__title {
        color: var(--color-four, #0285BA);
    }
}

/* Image — golden ratio, zooms gently inside its own rounded frame */
.sd-card__media {
    margin: 0;
    aspect-ratio: 1.618 / 1;
    overflow: hidden;
    border-radius: var(--sd-21);
    background: var(--color-three, #E3E3E3);
    /* Keeps the rounded clip during the zoom in Safari. */
    isolation: isolate;
}

.sd-card__image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    object-fit: cover;
    transition: transform var(--sd-slow) var(--sd-ease);
}

@media (hover: hover) {
    .sd-card:hover .sd-card__image {
        transform: scale(1.03);
    }
}

/* Category pill */
.sd-card__pill {
    position: relative;
    z-index: 1;
    align-self: flex-start;
    padding: var(--sd-3) var(--sd-13);
    border-radius: var(--sd-13);
    background: var(--color-three, #E3E3E3);
    color: var(--color-four, #0285BA);
    font-size: var(--sd-13);
    font-weight: 600;
    line-height: 1.618;
    text-decoration: none;
}

.sd-card__pill:hover,
.sd-card__pill:focus-visible {
    text-decoration: underline;
}

/* Title — the link covers the whole card (stretched link), so the card is
   clickable without JS; pill, rating and author sit above it. */
.sd-card__title {
    margin: 0;
    font-size: var(--sd-21);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-two, #013A63);
}

.sd-card__link {
    color: inherit;
    text-decoration: none;
}

/* Title repeated by the text (quotes, slogans): kept for screen readers.
   The empty heading still sits in the flex column, so its gap is taken
   back. */
.sd-card__title--hidden {
    margin-top: calc(var(--sd-13) * -1);
}

.sd-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sd-card__link::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.sd-card__link:focus-visible {
    outline: none;
}

.sd-card__link:focus-visible::before {
    outline: var(--sd-3) solid var(--color-four, #0285BA);
    outline-offset: var(--sd-3);
}

/* Text */
.sd-card__text {
    margin: 0;
    font-size: var(--sd-13);
    line-height: 1.618;
    color: var(--sd-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Rating bar (emoji-rating shortcode) */
.sd-card__rating {
    position: relative;
    z-index: 1;
}

.sd-card__rating:empty {
    display: none;
}

/* Reaction row: left edge on the card's text column (emoji-rating.css
   centres it and spaces icons with 7px side margins, so the first icon
   sat indented). */
.sd-card .emoji-rating {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--sd-8) var(--sd-13);
    margin: 0;
}

.sd-card .emoji-container {
    margin: 0;
}

/* emoji-rating.css forces these icons to --color-one (white) with
   !important sitewide; on a white card they would be invisible. Scoped to
   cards only, because the same source rule also colours the single-post
   rating bar. */
.sd-card .emoji-rating i,
.sd-card .emoji-vote-count {
    color: var(--sd-text-muted) !important;
}

/* Comment preview (inserted by emoji-rating.js after the rating bar).
   emoji-rating.css centres it at max-width 600px, the list keeps the
   browser's default left padding, and each comment is a 70%-wide bubble
   with a tail — together an odd left offset. In cards it runs the full
   width of the text column instead. */
.sd-card .floating-info-box {
    width: 100%;
    max-width: none;
    margin: var(--sd-8) 0 0;
    padding: 0;
    align-items: stretch;
    color: inherit;
    font-size: var(--sd-13);
}

.sd-card .floating-comments {
    width: 100%;
    max-height: var(--sd-144);
}

.sd-card .floating-info-box ul {
    display: flex;
    flex-direction: column;
    gap: var(--sd-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sd-card .floating-info-box .comment-item {
    align-self: stretch;
    max-width: none;
    margin: 0;
    padding: var(--sd-8) var(--sd-13);
    border-radius: var(--sd-13);
    background: rgba(0, 0, 0, 0.04);
    color: var(--sd-text-muted);
}

.sd-card .floating-info-box .comment-item::before {
    content: none;
}

/* Homepage lists never showed the comment preview; keep it that way. */
.random-posts-container .sd-card .floating-info-box {
    display: none;
}

/* Author row */
.sd-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sd-8);
    padding-top: var(--sd-8);
    font-size: var(--sd-13);
}

.sd-card__author {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: var(--sd-8);
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.sd-card__author span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sd-card__author:hover span,
.sd-card__author:focus-visible span {
    text-decoration: underline;
}

/* Targets the <img> itself, not just .sd-card__avatar: szekely-membership
   used to rebuild custom profile pictures without the class, leaving the
   89×89 width/height attributes in charge. CSS sizes beat those
   attributes, and max-width stops theme img rules from stretching it. */
.sd-card__author img {
    flex: none;
    display: block;
    width: var(--sd-34);
    height: var(--sd-34);
    max-width: none;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    object-fit: cover;
}

.sd-card__date {
    flex: none;
    color: var(--sd-text-muted);
}

/* Fade-up on appear. Only active when szekely-design.js has set
   html.sd-motion (JS on, IntersectionObserver available, motion allowed),
   so without JS every card is simply visible. */
.sd-motion .sd-card:not(.sd-is-visible) {
    opacity: 0;
    transform: translateY(var(--sd-13));
}

@media (prefers-reduced-motion: reduce) {
    .sd-card,
    .sd-card::after {
        transition: none;
    }

    .sd-card:hover {
        transform: none;
    }

    .sd-card__image {
        transition: none;
    }

    .sd-card:hover .sd-card__image {
        transform: none;
    }

    .sd-motion .sd-card:not(.sd-is-visible) {
        opacity: 1;
        transform: none;
    }
}