/* ArtsPro Post List Block */
.ap-plb {
    --ap-plb-border: #0a3b7a;
    margin: 2rem 0;
}

/* Section heading: small editorial label, all caps. We pin font-family,
   weight and size explicitly (with `.ap-plb` as a specificity boost) so
   that themes which style every h2 in the entry content can't override
   it. The diamond size uses `em` so it scales with whatever heading
   font-size is in force — halve the font-size and the diamond halves
   with it automatically. */
.ap-plb .ap-plb__heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.25rem;
    font-family: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-weight: 800;
    font-size: 1.25rem;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: inherit;
}

/* Inner text span: inherit everything the heading set, defeating any
   theme rule that targets inline elements inside h2s. */
.ap-plb .ap-plb__heading .ap-plb__heading-text {
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
}

.ap-plb .ap-plb__diamond {
    display: inline-block;
    width: 0.425em;
    height: 0.425em;
    background: var(--ap-plb-border);
    transform: rotate(45deg);
    flex: 0 0 auto;
}

/* Grid layout */
.ap-plb__grid {
    display: grid;
    gap: 1.75rem;
    grid-template-columns: 1fr;
}

.ap-plb--cols-2 .ap-plb__grid { grid-template-columns: 1fr; }
.ap-plb--cols-3 .ap-plb__grid { grid-template-columns: 1fr; }
.ap-plb--cols-4 .ap-plb__grid { grid-template-columns: 1fr; }

@media (min-width: 600px) {
    .ap-plb--cols-2 .ap-plb__grid,
    .ap-plb--cols-3 .ap-plb__grid,
    .ap-plb--cols-4 .ap-plb__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
    .ap-plb--cols-3 .ap-plb__grid { grid-template-columns: repeat(3, 1fr); }
    .ap-plb--cols-4 .ap-plb__grid { grid-template-columns: repeat(4, 1fr); }
}

/* "List" layout:
   One story per row. Featured image on the left, headline + content
   on the right. Good for long feeds where you want every story to
   get real image prominence rather than competing in a grid. */
.ap-plb--list .ap-plb__grid {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

@media (min-width: 700px) {
    .ap-plb--list .ap-plb__item.ap-plb-card.ap-plb-card {
        flex-direction: row;
    }

    .ap-plb--list .ap-plb__item .ap-card__media {
        flex: 0 0 17.5%;
        aspect-ratio: 3 / 2;
        align-self: stretch;
        min-height: 0;
    }

    .ap-plb--list .ap-plb__item .ap-card__body {
        flex: 1 1 auto;
        padding: 1rem 1.25rem;
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .ap-plb--list .ap-plb__item .ap-card__footer {
        margin-top: auto;
    }
}

/* "Has top story" layout:
   - Story 1 fills the left half top-to-bottom (image 2:1 above, body below).
   - Stories 2 & 3 stack on the right, each taking half of story 1's height.
   - Combined height of 2 + 3 equals story 1.
   Always exactly 3 posts. */
.ap-plb--top-story .ap-plb__grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 800px) {
    .ap-plb--top-story .ap-plb__grid {
        /* Lead card (story 1) takes 45% of the row (9fr), the right
           column of stacked secondaries takes 55% (11fr). Using fr
           units rather than literal percentages so the 1.25rem gap
           is honoured without overflowing the container.
           Rows are 1fr each so the right column splits equally. */
        grid-template-columns: 9fr 11fr;
        grid-template-rows: 1fr 1fr;
    }

    .ap-plb--top-story .ap-plb__item--top-story {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .ap-plb--top-story .ap-plb__item--secondary:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }

    .ap-plb--top-story .ap-plb__item--secondary:nth-child(3) {
        grid-column: 2;
        grid-row: 2;
    }

    /* Let the secondary cards actually fill their grid cells. */
    .ap-plb--top-story .ap-plb__item--secondary {
        height: 100%;
        min-height: 0; /* let flex children shrink inside the row */
    }
}

/* Lead card (story 1) — image 2:1 on top, body below. The image
   has a fixed aspect ratio so it stays in sensible proportions
   regardless of card stretch. */
.ap-plb__item--top-story .ap-card__media {
    aspect-ratio: 2 / 1;
}

/* Secondary cards (items 2 & 3): horizontal — image on the left
   (~40% of the card width, roughly 4:3 shape where possible),
   title + byline on the right. The card's height is driven by
   the grid row (half the lead), and the image stretches to fill
   it with object-fit: cover handling the crop. */
@media (min-width: 800px) {
    .ap-plb__item--secondary.ap-plb-card.ap-plb-card {
        flex-direction: row;
    }

    .ap-plb__item--secondary .ap-card__media {
        flex: 0 0 40%;
        aspect-ratio: auto; /* height follows the card, not a ratio */
        align-self: stretch;
        min-height: 0;
    }

    .ap-plb__item--secondary .ap-card__body {
        flex: 1 1 auto;
        padding: 0.9rem 1.1rem;
        display: flex;
        flex-direction: column;
        min-width: 0; /* allow title to wrap rather than blow out width */
    }

    .ap-plb__item--secondary .ap-card__title {
        margin-bottom: 0.5rem;
    }

    .ap-plb__item--secondary .ap-card__footer {
        margin-top: auto;
    }
}

/* Cards — the 10px bottom border is the defining feature.
   We double-stack the selector (.ap-plb-card.ap-plb-card) to win the
   specificity battle against any theme stylesheet that also styles
   .ap-card with a shorthand `border` shorthand rule (which would
   otherwise reset our border-bottom longhand). */
.ap-plb-card.ap-plb-card {
    background: #fff;
    border: 1px solid #e3e3e3;
    border-bottom: 10px solid var(--ap-plb-border);
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.ap-plb-card:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.ap-plb-card .ap-card__media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f7f7f5;
    display: block;
}

.ap-plb-card .ap-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ap-plb-card .ap-card__body {
    padding: 1rem 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.ap-plb-card .ap-card__meta {
    color: var(--ap-plb-border);
    margin-bottom: 0.5rem;
}

.ap-plb-card .ap-card__meta a { color: inherit; text-decoration: none; }
.ap-plb-card .ap-card__meta a:hover { text-decoration: underline; }

.ap-plb-card .ap-card__title {
    margin: 0 0 0.6rem;
}

.ap-plb-card .ap-card__title a { color: inherit; text-decoration: none; }
.ap-plb-card .ap-card__title a:hover { color: var(--ap-plb-border); }

.ap-plb-card .ap-card__excerpt {
    color: #5a5a5a;
    margin: 0 0 0.75rem;
    /* 10% smaller than the inherited body size, with line-height
       tightened by ~20% from a typical theme default of 1.7. */
    font-size: 0.9em;
    line-height: 1.35;
}

.ap-plb-tags {
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.8rem;
    line-height: 1.3;
}

.ap-plb-tags li a {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    background: #f2f2f2;
    color: #5a5a5a;
    text-decoration: none;
    border-radius: 2px;
    font-size: inherit;
    line-height: inherit;
}

.ap-plb-tags li a:hover { background: var(--ap-plb-border); color: #fff; }

/* Footer: byline on the left, date on the right.
   In narrow containers the row wraps so the date drops below the
   byline rather than getting squeezed into a one-character column.
   Font-size and line-height are pinned because some themes inherit
   the post-title styles (huge) into card footers, and word-break
   is reset because Astra and a few other themes set
   `word-break: break-all` on grid descendants — that's what was
   breaking the date letter-by-letter in narrow cards. */
.ap-plb-card .ap-card__footer {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem 0.75rem;
    color: #5a5a5a;
    font-size: 0.8rem;
    line-height: 1.3;
    word-break: normal;
    overflow-wrap: normal;
}

.ap-plb-card .ap-card__byline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 1 1 auto;
    font-size: inherit;
    line-height: inherit;
}

.ap-plb-card .ap-card__avatar {
    width: 24px;
    height: 24px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.ap-plb-card .ap-card__author-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: inherit;
    line-height: inherit;
}

.ap-plb-card .ap-card__footer time {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: inherit;
    line-height: inherit;
    word-break: normal;
    overflow-wrap: normal;
}

/* Spacing between co-authors in a byline */
.ap-plb-card .ap-card__byline-sep {
    margin: 0 0.15rem 0 -0.15rem;
    color: #5a5a5a;
    font-size: inherit;
    line-height: inherit;
}

/* Editor-only helpers */
.ap-plb-empty {
    padding: 1rem;
    border: 1px dashed #ccc;
    color: #666;
    text-align: center;
    font-style: italic;
}