/* blog-index.css: the blog index and tag-page sheet (2026-10-26). Linked
   only by /blog and /blog/tag/<tag> (SiteLayout blogIndexCSS), AFTER
   marketing.css and blog.css, whose tokens and tile rules it builds on.

   Rules for this file are blog.css's: tokens only (no colour literal), and
   nothing hides content (no display none, no opacity 0, no visibility
   hidden). The tiles line-clamp the title and summary; the full text stays
   in the markup, the accessible name and the post page.

   marketing.css is hashed into every blog cover (BlogCoverPage.inputHash),
   so the index width overrides it here instead of being edited there. */

/* The index: centred heading, intro and chips above the featured post and
   a three-column grid (two on tablets, one on phones). */
.theme-marketing .blog-index {
    max-width: 72rem;
}

.theme-marketing .blog-index > .mk-kicker,
.theme-marketing .blog-index > h1 {
    text-align: center;
}

.theme-marketing .blog-index > .section-sub {
    margin-inline: auto;
    text-align: center;
}

.theme-marketing .blog-index .blog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem 1.75rem;
    /* Every row as tall as the tallest: all tiles one size. */
    grid-auto-rows: 1fr;
}

@media (max-width: 64rem) {
    .theme-marketing .blog-index .blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 40rem) {
    .theme-marketing .blog-index .blog-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Equal tiles: every card fills its row (and every row is one height), the
   title holds up to three lines and the summary three, as on FeedbackKit. The full
   text stays in the markup and on the post page. */
.theme-marketing .blog-index .blog-grid > li {
    display: flex;
}

.theme-marketing .blog-index .blog-grid .blog-card {
    flex: 1;
}

.theme-marketing .blog-index .blog-grid .blog-card h2 {
    display: -webkit-box;
    overflow: hidden;
    font-size: 1.2rem;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.theme-marketing .blog-index .blog-grid .blog-card h2 + p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

/* The featured post: cover beside the text, stacked on narrow screens. */
.theme-marketing .blog-featured {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
    margin: 2.5rem 0 0;
}

.theme-marketing .blog-featured-cover {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 630;
    border: 1px solid var(--mk-border);
    border-radius: var(--radius-l);
    background: var(--mk-bg-sunken);
    box-shadow: var(--mk-shadow-1);
}

.theme-marketing .blog-featured-text h2 {
    margin: 0.5rem 0 0.8rem;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    line-height: 1.15;
}

.theme-marketing .blog-featured-text h2 a {
    color: var(--mk-text);
    text-decoration: none;
}

.theme-marketing .blog-featured-text h2 a:hover {
    color: var(--mk-accent);
}

.theme-marketing .blog-featured-text p {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--mk-text-muted);
}

@media (max-width: 52rem) {
    .theme-marketing .blog-featured {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The tile meta line's topic, then " · " before the day. */
.theme-marketing .blog-card-tag {
    font-weight: 600;
    color: var(--mk-text);
}

.theme-marketing .blog-card-tag::after {
    content: " · ";
    font-weight: 400;
    color: var(--mk-text-muted);
}

/* The featured post is one link too (blog.css "Tiles"). */
.theme-marketing .blog-featured {
    position: relative;
}

.theme-marketing .blog-featured h2 a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.theme-marketing .blog-featured:hover h2 a {
    color: var(--mk-accent);
}

.theme-marketing .blog-featured:has(a:focus-visible) {
    outline: 2px solid var(--mk-accent);
    outline-offset: 3px;
}

.theme-marketing .blog-featured h2 a:focus-visible {
    outline: none;
}

/* Topic chips: real links, wrapping, 44 px tall, each with its count. */
.theme-marketing .blog-chips ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}

.theme-marketing .blog-chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1rem;
    border: 1px solid var(--mk-border);
    border-radius: var(--radius-pill);
    background: var(--mk-bg-raised);
    color: var(--mk-text);
    text-decoration: none;
}

.theme-marketing .blog-chip-count {
    margin-left: 0.5rem;
    font-variant-numeric: tabular-nums;
    color: var(--mk-text-muted);
}

.theme-marketing .blog-chip[aria-current="page"] .blog-chip-count {
    color: inherit;
}

.theme-marketing .blog-chip:hover,
.theme-marketing .blog-chip[aria-current="page"] {
    border-color: var(--mk-accent);
    color: var(--mk-accent);
}