/* =========================================================================
   BEFELLO — ESSAY CARD
   -------------------------------------------------------------------------
   The one Essay card, and the list that holds it. Loaded wherever essays are
   listed: the [befello_essays] shortcode, the single-essay related rail, and
   the archive and filter views to come.

   WHY THIS FILE EXISTS. These rules used to live in essay-single.css, which
   is enqueued only on is_singular('essay'). The card component was already
   reusable — template-parts/essay/card.php — but its styling was not: render
   the same card on the homepage and it arrived with no styles at all. The
   markup was portable and the CSS was not, which is the kind of split that
   is invisible until the day something reuses the component.

   Same treatment the Opportunity card already has (assets/css/
   opportunity-card.css), for the same reason.

   The rules below are moved verbatim, not rewritten. essay-single.css now
   declares this file as a dependency, so the related rail still gets both.

   .essay-related__arrow rides along because it is the SAME glyph as the
   card's arrow, drawn from the same two pseudo-elements; splitting the pair
   would mean two copies of the geometry.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Tokens

   The card's rules reference --bfe-* custom properties. Those are declared
   on .befello-essay-page — the single-essay wrapper — which is the third and
   least obvious half of the portability problem this file exists to fix:
   the MARKUP was reusable, the RULES were in the wrong stylesheet, and the
   VALUES were scoped to a wrapper that only exists on one template.

   Measured before this block was added: a card rendered on a homepage had
   `border: 0px` and `border-radius: 0px`, because every var() fell through
   to its initial value. It looked almost right, which is worse than looking
   broken.

   So the card declares its own, aliasing the same global --befello-* tokens
   that .befello-essay-page aliases. Declared on the list AND the card so a
   card is self-sufficient wherever it is dropped. Inside a single essay both
   blocks resolve to identical values, so nothing there changes.
   ------------------------------------------------------------------------- */

.essay-cards,
.essay-card {
    --bfe-card: var(--befello-surface, #fffcec);
    --bfe-ink: var(--befello-text, #000);
    --bfe-muted: var(--befello-text-secondary, #696969);
    --bfe-line: var(--befello-border, #e0ded0);
    --bfe-blue-soft: var(--befello-blue-soft, #ffeff2);
    --bfe-blue-on-tint: var(--befello-accent-on-tint, #3139fb);
    --bfe-radius-md: var(--bf-radius-card, 8px);
    --bfe-radius-lg: var(--bf-radius-card, 8px);
    --bfe-text-caption: 12px;
    --bfe-text-base: 17px;
}

/* Both arrows are drawn from the same two pseudo-elements; only the box
   they sit in differs, so only the glyph is shared. */
.essay-related__arrow,
.essay-card__go {
    width: 14px;
    height: 10px;
    flex: 0 0 auto;
}

/* Inline, after the link text. */
.essay-related__arrow {
    position: relative;
}

.essay-related__arrow::before,
.essay-card__go::before {
    content: "";
    position: absolute;
    top: 50%;
    inset-inline-start: 0;
    width: 100%;
    height: 1.5px;
    background: currentColor;
    transform: translateY(-50%);
}

.essay-related__arrow::after,
.essay-card__go::after {
    content: "";
    position: absolute;
    top: 50%;
    inset-inline-end: 0;
    width: 6px;
    height: 6px;
    border: 1.5px solid currentColor;
    border-block-end: 0;
    border-inline-start: 0;
    transform: translateY(-50%) rotate(45deg);
}

.essay-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 16px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

/* One card per row on a phone. The same 640px line the Opportunity grid
   uses, and for the same reason: how many readable cards fit is a container
   question, but whether this is a phone is a device question. */
@media (max-width: 640px) {
    .essay-cards {
        grid-template-columns: minmax(0, 1fr);
    }
}

.essay-card {
    min-width: 0;
}

.essay-card__link {
    display: grid;
    /* Stretch to the tallest card in the row, and pin the meta line to the
       bottom so those lines align across cards whose titles differ. */
    grid-template-rows: auto auto auto 1fr;
    gap: 10px;
    height: 100%;
    /* Containing block for the arrow, and room on the end so a long meta
       line never runs under it. */
    position: relative;
    padding: 18px 44px 18px 18px;
    background: var(--bfe-card);
    border: 1px solid var(--bfe-line);
    border-radius: var(--bfe-radius-lg);   /* 14px card (DESIGN.md) */
    text-decoration: none;
}

.essay-card__programme {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-self: start;
    max-width: 100%;
    padding: 3px 8px;
    border: 1px solid var(--bfe-line);
    border-radius: var(--bfe-radius-md);
    background: var(--bfe-card);
    color: var(--bfe-muted);
    font-size: var(--bfe-text-caption);
    font-weight: 600;
    line-height: 18px;
    overflow-wrap: anywhere;
}

.essay-card__programme.is-successful {
    background: var(--befello-success-soft);
    border-color: transparent;
    color: var(--befello-success-text);
}

.essay-card__tick {
    position: relative;
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
}

.essay-card__tick::before {
    content: "";
    position: absolute;
    inset-inline-start: 2px;
    top: 0;
    width: 4px;
    height: 8px;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.essay-card__title {
    color: var(--bfe-ink);
    font-size: var(--bfe-text-base);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.01em;
    overflow-wrap: break-word;
    text-wrap: pretty;
}

.essay-card__topics {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.essay-card__topic {
    padding: 2px 8px;
    border-radius: var(--bfe-radius-md);
    background: var(--bfe-blue-soft);
    color: var(--bfe-blue-on-tint);
    font-size: var(--bfe-text-caption);
    font-weight: 500;
    line-height: 18px;
}

.essay-card__meta {
    align-self: end;
    color: var(--bfe-muted);
    font-size: var(--bfe-text-caption);
    line-height: 18px;
}

/* The affordance: one small arrow, bottom right, saying the card goes
   somewhere. No hover effect — the card is a link and looks like one. */
.essay-card__go {
    position: absolute;
    inset-block-end: 18px;
    inset-inline-end: 18px;
    color: var(--bfe-muted);
}

/* -------------------------------------------------------------------------
   Column count

   The shortcode writes --befello-grid-columns as an inline custom property,
   which is what lets one rule serve every count instead of a rule per
   number. The auto-fill track above stays as the floor: the property is a
   CEILING, so a grid asked for four columns still drops to three, then two,
   as the container narrows. A card never goes below 260px.

   Absent the property — the related rail, which sets no count — the fallback
   keeps the original behaviour exactly.
   ------------------------------------------------------------------------- */

/* Inside a min-width query on purpose, and this cost a bug to learn.

   The one-card-per-row rule below 640px is a plain `.essay-cards` selector,
   specificity (0,1,0). This one is `.essay-cards[style*=...]`, specificity
   (0,2,0) — and a media query adds NO specificity. So while this rule was
   unguarded it beat the mobile rule at every width, and a 3-column grid
   still showed two cards per row on a 640px phone.

   Bounding it to the range above the mobile breakpoint means the two rules
   can never both apply, so their specificity stops mattering. 640.02px
   rather than 641px to match the fractional breakpoints used elsewhere in
   this theme, which leave no gap for a fractional viewport width. */
@media (min-width: 640.02px) {
    .essay-cards[style*="--befello-grid-columns"] {
        grid-template-columns: repeat(
            auto-fill,
            minmax(
                min(100%, max(260px, calc((100% - (var(--befello-grid-columns) - 1) * 16px) / var(--befello-grid-columns)))),
                1fr
            )
        );
    }
}

/* The empty state. Same muted caption as the rest of the listing chrome. */
.essay-cards__empty {
    margin: 20px 0 0;
    color: var(--befello-text-secondary);
    font-size: 14px;
}