/* ==========================================================================
   Archive grid (tag and author pages)
   Replaces Headline's stacked archive layout (every card spanning both
   columns, first card of each batch enlarged) with a uniform grid of
   image-on-top cards. Loaded from default.hbs on tag and author pages only,
   outside the Gulp build. tag.hbs and author.hbs pass has_large_post=false
   so no card receives the "large" class, including batches appended by
   infinite scroll.

   Selectors are written as body.tag-template .gh-topic-grid .gh-card:not(.large) ... so
   they outrank the theme's body:not(.home-template) and .gh-card:not(.large)
   rules.
   ========================================================================== */

/* Grid
   ------------------------------------------------------------------------ */

body.tag-template .gh-topic-grid .gh-topic-content,
body.author-template .gh-topic-grid .gh-topic-content {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 56px 40px;
    row-gap: 56px !important; /* the theme sets row-gap with !important */
    justify-items: stretch;
    align-items: start;
}

@media (max-width: 991px) {
    body.tag-template .gh-topic-grid .gh-topic-content,
    body.author-template .gh-topic-grid .gh-topic-content {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 48px 32px;
        row-gap: 48px !important;
    }
}

@media (max-width: 575px) {
    body.tag-template .gh-topic-grid .gh-topic-content,
    body.author-template .gh-topic-grid .gh-topic-content {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
        row-gap: 40px !important;
    }
}

/* Cards
   ------------------------------------------------------------------------ */

body.tag-template .gh-topic-grid .gh-card,
body.author-template .gh-topic-grid .gh-card {
    grid-column: auto;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
}

body.tag-template .gh-topic-grid .gh-card:not(.large) .gh-card-link,
body.author-template .gh-topic-grid .gh-card:not(.large) .gh-card-link {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

body.tag-template .gh-topic-grid .gh-card:not(.large) .gh-card-image,
body.author-template .gh-topic-grid .gh-card:not(.large) .gh-card-image {
    width: 100%;
    height: auto;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 2px;
}

body.tag-template .gh-topic-grid .gh-card:not(.large) .gh-card-image::before,
body.author-template .gh-topic-grid .gh-card:not(.large) .gh-card-image::before {
    padding-bottom: 62.5%; /* 16:10 */
}

body.tag-template .gh-topic-grid .gh-card:not(.large) .gh-card-wrapper,
body.author-template .gh-topic-grid .gh-card:not(.large) .gh-card-wrapper {
    margin-top: 0;
}

body.tag-template .gh-topic-grid .gh-card:not(.large) .gh-card-title,
body.author-template .gh-topic-grid .gh-card:not(.large) .gh-card-title {
    font-size: 2.2rem;
    line-height: 1.3;
    letter-spacing: -0.015em;
}

body.tag-template .gh-topic-grid .gh-card:not(.large) .gh-card-excerpt,
body.author-template .gh-topic-grid .gh-card:not(.large) .gh-card-excerpt {
    display: -webkit-box;
    margin-top: 8px;
    overflow-y: hidden;
    font-size: 1.6rem;
    line-height: 1.5;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

body.tag-template .gh-topic-grid .gh-card:not(.large) .gh-card-footer,
body.author-template .gh-topic-grid .gh-card:not(.large) .gh-card-footer {
    margin-top: 12px;
}

/* Cards without a feature image: keep the top edge aligned with a thin rule */
body.tag-template .gh-topic-grid .gh-card.no-image .gh-card-link,
body.author-template .gh-topic-grid .gh-card.no-image .gh-card-link {
    padding-top: 18px;
    border-top: 1px solid var(--color-light-gray);
}

/* The theme hides the author on phones for small cards and leaves a stray
   separator dot before the date; the grid cards have room, so show it. */
@media (max-width: 767px) {
    body.tag-template .gh-topic-grid .gh-card:not(.large) .gh-card-author,
    body.author-template .gh-topic-grid .gh-card:not(.large) .gh-card-author {
        display: inline-block;
    }
}