/* =======================================================================
   Post list - editorial card layer
   Following the gold/cream/espresso design system (DESIGN.md):
     accent:  #B86B0B       accent-soft: #C9A573
     ink:     #231508       ink-soft:    #6b5b4a
     cream:   #FFFCF2       line:        #e9ddc9

   The --bi-* tokens below mirror --sa-* in single-article.css value for
   value, on purpose: this stylesheet dresses the screen that leads into a
   single post, and the two surfaces should read as one design. If a token
   changes there, change it here.

   Scoped to `.amulet-post-list` (posts index, category, tag, author, date,
   search - see inc/archive-enhancements.php), so every post-list screen gets
   the same cards. Rules that only make sense on the posts index itself are
   scoped to `.amulet-blog-index` instead.

   No `font-family` is declared anywhere in this file - cards inherit the
   parent Blocksy Customizer's role-based assignment, so no html[lang="th"]
   guard is required. Keep it that way; if a rule below ever needs its own
   font, pair it with the guard (see DESIGN.md).

   Companion: inc/blog-index-enhancements.php rebuilds the card's layer order
   through Blocksy's own filters. The two files are a pair - neither is
   meaningful alone.
   ======================================================================= */

body.amulet-post-list {
    --bi-accent:     #B86B0B;
    --bi-accent-2:   #C9A573;
    --bi-ink:        #231508;
    --bi-ink-soft:   #6b5b4a;
    --bi-cream:      #FFFCF2;
    --bi-line:       #e9ddc9;
    --bi-muted:      #a89a86;

    --bi-radius:     12px;
    --bi-radius-sm:  8px;

    /* Standard card elevation from DESIGN.md */
    --bi-shadow:       0 1px 2px rgba(15,23,42,.04), 0 10px 24px rgba(15,23,42,.06);
    --bi-shadow-hover: 0 12px 28px rgba(35,21,8,.14);
}


/* ------------------------------------------------------------------ */
/*  1. GRID                                                           */
/* ------------------------------------------------------------------ */

/* inc/blog-index-enhancements.php switches the listing from Blocksy's
   "enhanced-grid" (a 6-column grid with 3/3/2/2/2 spans, which produced
   rows of two then three cards at inconsistent widths) to a plain grid.
   Plain grid consumes --grid-template-columns, declared here rather than
   left to Blocksy's dynamic CSS so the column count is version-controlled
   alongside the card design and survives a dynamic-styles cache flush. */
body.amulet-post-list .entries[data-layout="grid"] {
    --grid-template-columns: repeat(3, minmax(0, 1fr));
    --grid-columns-gap: 28px;
    align-items: stretch;
}

@media (max-width: 999.98px) {
    body.amulet-post-list .entries[data-layout="grid"] {
        --grid-template-columns: repeat(2, minmax(0, 1fr));
        --grid-columns-gap: 20px;
    }
}

@media (max-width: 689.98px) {
    body.amulet-post-list .entries[data-layout="grid"] {
        --grid-template-columns: repeat(1, minmax(0, 1fr));
        --grid-columns-gap: 18px;
    }
}


/* ------------------------------------------------------------------ */
/*  2. CARD SHELL                                                     */
/* ------------------------------------------------------------------ */

/* `position: relative` is load-bearing: it is the containing block for the
   stretched title link in section 5 that makes the whole card clickable.

   `scroll-margin-top` clears the 49px fixed site header when assets/js/
   blog-index.js scrolls a freshly loaded card into view. It is set here rather
   than measured in JS because the header carries no stable class or id to
   query - it renders as a bare <div> - so a hardcoded offset with one obvious
   place to tune it beats a fragile selector. */
body.amulet-post-list article.entry-card.card-content {
    position: relative;
    scroll-margin-top: 68px;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0 0 22px;
    overflow: hidden;
    background: var(--bi-cream);
    border: 1px solid var(--bi-line);
    border-radius: var(--bi-radius);
    box-shadow: var(--bi-shadow);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

body.amulet-post-list article.entry-card.card-content:hover {
    transform: translateY(-4px);
    border-color: var(--bi-accent-2);
    box-shadow: var(--bi-shadow-hover);
}

/* Keyboard parity with :hover - the card is a link target, so it has to show
   the same affordance when the title link inside it takes focus. */
body.amulet-post-list article.entry-card.card-content:focus-within {
    border-color: var(--bi-accent);
    box-shadow: var(--bi-shadow-hover);
}

/* Everything except the image is padded; the image runs to the card edge. */
body.amulet-post-list article.entry-card.card-content > *:not(.ct-media-container) {
    padding-inline: 20px;
}

/* Blocksy centres card text. That works for a one-line title and a byline, but
   these titles are clamped to three lines of Thai and sit above a two-line
   excerpt - centred, both blocks come out ragged on every edge and the eye has
   no consistent left margin to run down. Left-aligned, the card reads as a
   headline, which is what it is. */
body.amulet-post-list article.entry-card.card-content {
    text-align: start;
}

body.amulet-post-list article.entry-card.card-content .entry-meta {
    justify-content: flex-start;
}


/* ------------------------------------------------------------------ */
/*  3. THUMBNAIL                                                      */
/* ------------------------------------------------------------------ */

/* Ratio is set to 5/3 in the archive-order filter, matching the 768x461 source
   banners exactly; this only squares off the corners against the card's own
   radius and removes the rounded inset the previous design used. */
body.amulet-post-list article.entry-card.card-content .ct-media-container {
    margin: 0 0 16px;
    border-radius: 0;
    overflow: hidden;
}

body.amulet-post-list article.entry-card.card-content .ct-media-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Posts with no featured image (class added by amulet_blog_no_thumb_class()).
   The card's top padding normally comes from the image, so without one the
   meta row sat against the card's top border. A thin gold rule stands in for
   the missing artwork, which reads as intentional beside a row of cards that
   do have one. */
body.amulet-post-list article.entry-card.card-content.abi-no-thumb {
    padding-top: 22px;
    border-top: 3px solid var(--bi-accent-2);
}


/* ------------------------------------------------------------------ */
/*  4. META ROW                                                       */
/* ------------------------------------------------------------------ */

body.amulet-post-list article.entry-card.card-content .entry-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin: 0 0 10px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--bi-ink-soft);
}

/* Blocksy renders each meta item as an inline-block <li> with a margin rule of
   its own; flex handles the spacing here, so both are reset. */
body.amulet-post-list article.entry-card.card-content .entry-meta li {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

body.amulet-post-list article.entry-card.card-content .entry-meta li svg {
    fill: none;
    margin-inline-end: 5px;
    opacity: .75;
}

/* Category reads as the eyebrow pill from DESIGN.md rather than as another
   line of grey meta text - it is the only piece of the row worth scanning. */
body.amulet-post-list article.entry-card.card-content .entry-meta .meta-categories a {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    background: var(--bi-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .18s ease;
}

body.amulet-post-list article.entry-card.card-content .entry-meta .meta-categories a:hover {
    background: var(--bi-ink);
    color: var(--bi-cream);
}

/* Separated from the date with a middot rather than another gap, so the two
   text items read as one meta phrase instead of two stray labels. */
body.amulet-post-list article.entry-card.card-content .entry-meta .meta-reading-time {
    color: var(--bi-muted);
}

body.amulet-post-list article.entry-card.card-content .entry-meta .meta-reading-time::before {
    content: "·";
    margin-inline-end: 6px;
    opacity: .6;
}


/* ------------------------------------------------------------------ */
/*  5. TITLE                                                          */
/* ------------------------------------------------------------------ */

body.amulet-post-list article.entry-card.card-content .entry-title {
    margin: 0 0 10px;
    font-size: 17px;
    line-height: 1.45;
    color: var(--bi-ink);

    /* Thai headlines on this site run 60-100 characters. Unclamped they turned
       every card into a wall of title text at a different height from its
       neighbours; three lines is enough to identify an article. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* The Customizer applies `text-transform: uppercase` to h1/h2 globally. On a
   100-character Thai headline that is unreadable - the same override
   single-article.css makes for the article's own H1, for the same reason. */
body.amulet-post-list article.entry-card.card-content .entry-title,
body.amulet-post-list article.entry-card.card-content .entry-title a {
    --theme-text-transform: none;
    text-transform: none;
}

body.amulet-post-list article.entry-card.card-content .entry-title a {
    color: inherit;
    text-decoration: none;
    transition: color .18s ease;
}

body.amulet-post-list article.entry-card.card-content:hover .entry-title a {
    color: var(--bi-accent);
}

/* Whole-card click target. The title anchor is stretched over the card rather
   than the card being wrapped in a link, so the markup keeps exactly one link
   per card for assistive tech and the category pill underneath stays
   independently clickable (section 4 raises it back above this layer). */
body.amulet-post-list article.entry-card.card-content .entry-title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

body.amulet-post-list article.entry-card.card-content .entry-meta,
body.amulet-post-list article.entry-card.card-content .ct-media-container {
    position: relative;
    z-index: 2;
}

/* The thumbnail is its own <a> to the same post. It sits above the stretched
   link, so it still works; the cursor is what tells the user the whole card is
   live. */
body.amulet-post-list article.entry-card.card-content .entry-title a:focus-visible::after {
    outline: 2px solid var(--bi-accent);
    outline-offset: -3px;
    border-radius: var(--bi-radius);
}


/* ------------------------------------------------------------------ */
/*  6. EXCERPT                                                        */
/* ------------------------------------------------------------------ */

/* Content is supplied by amulet_blog_card_excerpt(): the manual excerpt when
   it says something the headline does not, otherwise the opening of the post
   body. `margin-top: auto` is what keeps the excerpt block bottom-aligned so
   cards with two-line and three-line titles still line up. */
body.amulet-post-list article.entry-card.card-content .entry-excerpt {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--bi-ink-soft);
}

body.amulet-post-list article.entry-card.card-content .entry-excerpt p {
    margin: 0;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ------------------------------------------------------------------ */
/*  7. REDUCED MOTION                                                 */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    body.amulet-post-list article.entry-card.card-content,
    body.amulet-post-list article.entry-card.card-content .entry-title a,
    body.amulet-post-list article.entry-card.card-content .entry-meta .meta-categories a {
        transition: none;
    }

    body.amulet-post-list article.entry-card.card-content:hover {
        transform: none;
    }
}


/* ------------------------------------------------------------------ */
/*  8. INDEX HEAD - standfirst + topic chips                          */
/* ------------------------------------------------------------------ */

body.amulet-post-list .abi-index-head {
    margin: 0 0 28px;
}

body.amulet-post-list .abi-subtitle {
    max-width: 58ch;
    margin: -8px 0 22px;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--bi-ink-soft);
}

/* The gold rule that closes the H1 on single posts, reused here so the index
   and the article it opens share the same header gesture (DESIGN.md). */
body.amulet-post-list .abi-subtitle::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    margin-top: 18px;
    background: var(--bi-accent);
}

body.amulet-post-list .abi-topics ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.amulet-post-list .abi-chip {
    display: inline-block;
    padding: 7px 15px;
    border: 1px solid var(--bi-line);
    border-radius: 999px;
    background: var(--bi-cream);
    color: var(--bi-ink-soft);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

body.amulet-post-list .abi-chip:hover {
    border-color: var(--bi-accent-2);
    color: var(--bi-ink);
}

body.amulet-post-list .abi-chip.is-current {
    background: var(--bi-ink);
    border-color: var(--bi-ink);
    color: var(--bi-cream);
}

/* Below the 2-column breakpoint the row becomes a single swipeable line rather
   than wrapping to three stacked rows of chips above the first card. */
@media (max-width: 689.98px) {
    body.amulet-post-list .abi-topics {
        margin-inline: -20px;
        padding-inline: 20px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    body.amulet-post-list .abi-topics::-webkit-scrollbar {
        display: none;
    }

    body.amulet-post-list .abi-topics ul {
        flex-wrap: nowrap;
        width: max-content;
        padding-block: 2px;
    }
}


/* ------------------------------------------------------------------ */
/*  9. LEAD STORY                                                     */
/* ------------------------------------------------------------------ */

/* Page one of the posts index promotes its first card to a full-width
   horizontal feature. WordPress already sorts sticky posts first, so the
   editorially chosen lead is whatever is pinned in wp-admin - no second query,
   no post__not_in surgery, and the pagination maths is untouched.

   Scoped to .amulet-blog-index (posts index) and :not(.paged), so page 7 of
   the archive and the category screens keep an even grid. */
@media (min-width: 690px) {
    /* Grid, not flex-direction: row. Blocksy emits the meta row, title and
       excerpt as direct children of <article> with no wrapper around them, so
       turning the card into a horizontal flex container laid all three out as
       columns beside the image instead of stacking them next to it. Grid lets
       the image claim the full height of column 1 while the text stays stacked
       in column 2 without inventing a wrapper element.

       The empty 1fr rows top and bottom are what centre the text block
       vertically against a tall image. */
    body.amulet-blog-index:not(.paged) .entries[data-layout="grid"] > article:first-child {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: 52% 1fr;
        grid-template-rows: 1fr auto auto auto 1fr;
        padding: 0;
    }

    body.amulet-blog-index:not(.paged) .entries > article:first-child .ct-media-container {
        grid-column: 1;
        grid-row: 1 / -1;
        margin: 0;
    }

    /* The 5/3 ratio is what shapes every other thumbnail; here the image has to
       fill a column of unknown height instead, so the ratio is released and
       object-fit does the work. */
    body.amulet-blog-index:not(.paged) .entries > article:first-child .ct-media-container img {
        aspect-ratio: auto !important;
        height: 100%;
        min-height: 300px;
    }

    body.amulet-blog-index:not(.paged) .entries > article:first-child .entry-meta {
        grid-column: 2;
        grid-row: 2;
        margin-bottom: 14px;
    }

    body.amulet-blog-index:not(.paged) .entries > article:first-child .entry-title {
        grid-column: 2;
        grid-row: 3;
    }

    body.amulet-blog-index:not(.paged) .entries > article:first-child .entry-excerpt {
        grid-column: 2;
        grid-row: 4;
    }

    body.amulet-blog-index:not(.paged) .entries > article:first-child > *:not(.ct-media-container) {
        padding-inline: 36px;
    }

    body.amulet-blog-index:not(.paged) .entries > article:first-child .entry-title {
        font-size: 24px;
        -webkit-line-clamp: 3;
    }

    body.amulet-blog-index:not(.paged) .entries > article:first-child .entry-excerpt {
        margin-bottom: 0;
        font-size: 15px;
    }

    body.amulet-blog-index:not(.paged) .entries > article:first-child .entry-excerpt p {
        -webkit-line-clamp: 4;
    }
}


/* ------------------------------------------------------------------ */
/*  10. IN-FEED SHOP BAND                                             */
/* ------------------------------------------------------------------ */

/* The dark-section treatment from DESIGN.md, matching the .sa-cta block that
   closes every single post - so a reader meets the same commercial surface
   whether they leave from the index or from an article. */
body.amulet-blog-index .abi-shop-band {
    position: relative;
    margin: 40px 0 8px;
    padding: 38px 32px 34px;
    border-radius: 16px;
    background: var(--bi-ink);
    overflow: hidden;
}

body.amulet-blog-index .abi-shop-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 50% 0%, rgba(184,107,11,.30), rgba(35,21,8,0) 62%);
    pointer-events: none;
}

body.amulet-blog-index .abi-shop-head {
    position: relative;
    margin-bottom: 26px;
    text-align: center;
}

body.amulet-blog-index .abi-shop-eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--bi-accent-2);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

body.amulet-blog-index .abi-shop-title {
    margin: 0;
    color: var(--bi-cream);
    font-size: 22px;
    line-height: 1.4;

    /* Same reasoning as the card titles: the Customizer uppercases h2 globally,
       which is unreadable in Thai. */
    --theme-text-transform: none;
    text-transform: none;
}

/* [amulet_featured_products] ships its own cream cards (featured-products.css,
   --afp-*); they sit on the dark band unchanged, which is the intended
   contrast. Only the grid gutter is tightened to match this container. */
body.amulet-blog-index .abi-shop-band .afp-wrap {
    position: relative;
}

body.amulet-blog-index .abi-shop-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 26px auto 0;
    padding: 12px 26px;
    border-radius: 8px;
    background: var(--bi-accent);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background .18s ease;
}

body.amulet-blog-index .abi-shop-band {
    text-align: center;
}

body.amulet-blog-index .abi-shop-band .afp-wrap {
    text-align: start;
}

body.amulet-blog-index .abi-shop-cta:hover {
    background: #a35f09;
    color: #fff;
}

@media (max-width: 689.98px) {
    body.amulet-blog-index .abi-shop-band {
        margin-inline: 0;
        padding: 30px 18px 28px;
    }

    body.amulet-blog-index .abi-shop-title {
        font-size: 19px;
    }
}


/* ------------------------------------------------------------------ */
/*  11. LOAD MORE                                                     */
/* ------------------------------------------------------------------ */

body.amulet-post-list .abi-load-more-wrap {
    margin: 34px 0 0;
    text-align: center;
}

body.amulet-post-list .abi-load-more {
    padding: 13px 34px;
    border: 1px solid var(--bi-accent);
    border-radius: 8px;
    background: transparent;
    color: var(--bi-accent);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}

body.amulet-post-list .abi-load-more:hover:not([disabled]) {
    background: var(--bi-accent);
    color: #fff;
}

body.amulet-post-list .abi-load-more[disabled] {
    opacity: .6;
    cursor: default;
}

body.amulet-post-list .abi-load-status:empty {
    display: none;
}

/* Only ever added by assets/js/blog-index.js, and removed again if a fetch
   fails - so the numbered pagination is the fallback in every case where the
   button cannot do its job (no JS, no network, unexpected markup). */
body.amulet-post-list .ct-pagination.abi-pagination-replaced {
    display: none;
}


/* ------------------------------------------------------------------ */
/*  12. REDUCED MOTION (furniture)                                    */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    body.amulet-post-list .abi-chip,
    body.amulet-post-list .abi-load-more,
    body.amulet-blog-index .abi-shop-cta {
        transition: none;
    }
}