/* ==========================================================================
   Szekely Design — cards (archive cards, image cards)
   Loaded only off the front page (see szekely-design.php); tokens
   (--sd-*) come from szekely-design.css. The reaction row and comment
   preview rules also cover the single post, so both look the same.
   ========================================================================== */

/* --------------------------------------------------------------------------
   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,
body.sd-single .content_sajat_frame .emoji-rating {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--sd-8) var(--sd-13);
    margin: 0;
}

.sd-card .emoji-container,
body.sd-single .content_sajat_frame .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 and the single post (same look in both), not changed at the
   source, because other contexts (e.g. homepage bubbles) rely on white. */
.sd-card .emoji-rating i,
.sd-card .emoji-vote-count,
body.sd-single .content_sajat_frame .emoji-rating i,
body.sd-single .content_sajat_frame .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,
body.sd-single .content_sajat_frame .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,
body.sd-single .content_sajat_frame .floating-comments {
    width: 100%;
    max-height: var(--sd-144);
}

.sd-card .floating-info-box ul,
body.sd-single .content_sajat_frame .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,
body.sd-single .content_sajat_frame .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,
body.sd-single .content_sajat_frame .floating-info-box .comment-item::before {
    content: 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;
    }
}