/* tt360/card-feature-link and tt360/card-post, ported from the prototype's own
   components/insight-cards.css. Not a reuse of .module-card: the image sits at
   the top of the card here (module-card's thumbnail sits at the bottom), and
   it ends in a full button or category badge instead of a "Learn more" link.
   Same card recipe otherwise (white, 1px terra-green border at 15%, 6px — no,
   4px — radius), and reuses .media-placeholder for the image, stripped of its
   own dashed border and radius since it's the top of a card now, not a
   standalone box.

   .feature-link-card is a tt360/card-grid child, so its own grid/columns come
   from card-layouts.css (tt360/card-grid's own render.php adds a cards-type-*
   and cards-cols-* class); this file only owns gap and the cards' own look.
   .post-card is never a card-grid child (tt360/card-post lives inside a Query
   Loop's own Post Template instead, docs/PLAN.md §13) — see the
   .wp-block-post-template rule below for its own, separate grid. */

/* Shared missing-photo/missing-image fallback: a plain branded box, no
   visible text (a screen reader still gets the real aria-label on the
   element itself), the same cream-plus-ring motif already used behind
   every hero/closing section (components/hero.css, components/closing-band.css),
   at the same reduced opacity. Replaces an earlier, editor-only-sounding
   text treatment Elisa asked to remove — real visitors can land on this
   state (an article with no featured image, a feature-link card with no
   image picked yet), so it needs to look intentional, not like a dev
   placeholder or an error message. */
.media-placeholder {
    position: relative;
    background-color: rgba(var(--cream), 1);
    overflow: hidden;
}

.media-placeholder::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('../../images/ring-arc.svg') no-repeat 50% 50%;
    background-size: 70% auto;
    opacity: 0.3;
    pointer-events: none;
}

.feature-link-cards {
    gap: 24px;
}

.feature-link-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: rgba(var(--white), 1);
    border: 1px solid rgba(var(--terra-green), 0.15);
    border-radius: 4px;
}

.feature-link-card .media-placeholder {
    margin: 0;
    padding: 0;
    aspect-ratio: 19 / 8;
    border: 0;
    border-radius: 0;
}

.feature-link-card .card-body {
    padding: 28px;
}

.feature-link-card .title {
    margin: 0;
    font-size: 32px;
    color: rgba(var(--dark-green), 1);
}

.feature-link-card .description {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.6;
}

.feature-link-card .cta-button {
    margin-top: 16px;
}

/* .post-card is always a real link to the article (tt360/card-post's own
   render.php), unlike the prototype's own thought-leadership.html copies,
   which stayed plain unlinked divs — so this reset is part of the block's
   own CSS now, not a page-specific override. */
a.post-card {
    color: inherit;
    text-decoration: none;
}

.post-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: rgba(var(--white), 1);
    border: 1px solid rgba(var(--terra-green), 0.15);
    border-radius: 4px;
}

.post-card .media-placeholder {
    margin: 0;
    padding: 0;
    aspect-ratio: 557 / 300;
    border: 0;
    border-radius: 0;
}

/* The real image (feature-link-card/card-post's own render.php, when a
   photo exists) is a plain <img>, no wrapper — same aspect-ratio/object-fit
   as its own placeholder above, so a real photo and the empty state take
   up the exact same footprint in the card. */
.feature-link-card > img {
    display: block;
    width: 100%;
    aspect-ratio: 19 / 8;
    object-fit: cover;
}

.post-card > img {
    display: block;
    width: 100%;
    aspect-ratio: 557 / 300;
    object-fit: cover;
}

.post-card .card-body {
    padding: 28px;
}

.post-card .category {
    display: inline-block;
    padding: 4px 12px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: rgba(var(--charcoal), 1);
    background-color: rgba(var(--light-gold), 1);
    border-radius: 999px;
}

.post-card .title {
    margin: 12px 0 0;
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 500;
    color: rgba(var(--dark-green), 1);
}

.post-card .excerpt {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.5;
}

.post-card .meta {
    margin: 12px 0 0;
    font-size: 13px;
    color: rgba(var(--warm-gray), 1);
}

/* sm */
@media (max-width: 575.98px) {
    .feature-link-card .card-body,
    .post-card .card-body {
        padding: 16px;
    }

    .feature-link-card .cta-button {
        width: 100%;
    }
}

/* tt360/card-post's own grid: 3 columns desktop, 2 at md, 1 at sm, same
   mechanism as card-layouts.css's cards-type-tile (flex, centers a short
   last row) but hardcoded here rather than reusing that generic system —
   unlike every tt360/card-grid child, this one is never a card-grid child
   at all (it lives inside a Query Loop's own Post Template instead,
   docs/PLAN.md §13), and it only ever needs this one fixed recipe, so a
   configurable column system would be unused flexibility.

   core/post-template renders as <ul class="wp-block-post-template">, each
   post wrapped in its own <li class="wp-block-post ...">, confirmed by
   reading the real editor canvas DOM directly rather than assumed — the
   flex item is that <li>, not .post-card itself, which only fills it. */
.wp-block-post-template:has(> li .post-card) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin: 55px 0 0;
    padding: 0;
    list-style: none;
}

/* Each <li> stretches to the row's tallest sibling by default (flex's own
   align-items: stretch), but a plain block child inside it doesn't grow to
   fill that extra height on its own — found by measuring real rendered
   card heights in a row with mixed title-wrap lengths, not assumed fixed
   once the layout looked right at a glance. Making the <li> itself a flex
   container (one child, .post-card) lets that same stretch behavior reach
   the card, so every card in a row ends at the same bottom edge regardless
   of how many lines its own title wraps to. */
.wp-block-post-template:has(> li .post-card) > li {
    display: flex;
    min-width: 0;
    flex: 0 1 calc((100% - 48px) / 3);
}

.wp-block-post-template:has(> li .post-card) > li > .post-card {
    width: 100%;
}

@media (max-width: 767.98px) {
    .wp-block-post-template:has(> li .post-card) > li {
        flex-basis: calc((100% - 24px) / 2);
    }
}

@media (max-width: 575.98px) {
    .wp-block-post-template:has(> li .post-card) {
        gap: 8px;
    }
    .wp-block-post-template:has(> li .post-card) > li {
        flex-basis: 100%;
    }
}