/* ==========================================================================
   Widget: Posts Grid
   BEM root: .gtea-posts-grid
   ========================================================================== */

/* ── Root ─────────────────────────────────────────────────────────── */
.gtea-posts-grid {
    width: 100%;
    box-sizing: border-box;
}

/* ── Wrapper — flex grid container ───────────────────────────────── */
.gtea-posts-grid__wrapper {
    display: flex;
    flex-wrap: wrap;
    column-gap: 24px;
    row-gap: 32px;
    box-sizing: border-box;
}

/* ── Card ─────────────────────────────────────────────────────────── */
.gtea-posts-grid__card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
}

/* ── Full-card clickable overlay ──────────────────────────────────── */
/*
 * An aria-hidden, non-focusable <a> stretched to cover the full card.
 * Mouse users click anywhere → post. Keyboard/SR users navigate via
 * the visible title link and CTA link which sit above (z-index: 1).
 */
.gtea-posts-grid__card-link {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
}

/* ── Elements that must sit above the card-link overlay ──────────── */
.gtea-posts-grid__meta-row,
.gtea-posts-grid__title,
.gtea-posts-grid__excerpt,
.gtea-posts-grid__cta-container {
    position: relative;
    z-index: 1;
}

.gtea-posts-grid__category {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
}

/* ── Meta row ─────────────────────────────────────────────────────── */
.gtea-posts-grid__meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    box-sizing: border-box;
}

/* Inline layouts: category and date on the same horizontal line */
.gtea-posts-grid__meta-row--inline-cat-date,
.gtea-posts-grid__meta-row--inline-date-cat {
    flex-direction: row;
    align-items: center;
}

/* Stacked layouts: category and date on separate lines */
.gtea-posts-grid__meta-row--stacked-cat-date,
.gtea-posts-grid__meta-row--stacked-date-cat {
    flex-direction: column;
}

/* ── Category ─────────────────────────────────────────────────────── */
.gtea-posts-grid__category a {
    text-decoration: none;
    color: inherit;
}

/* ── Date ─────────────────────────────────────────────────────────── */
.gtea-posts-grid__date {
    display: inline-block;
    box-sizing: border-box;
}

/* ── Title ────────────────────────────────────────────────────────── */
.gtea-posts-grid__title {
    margin: 0;
    box-sizing: border-box;
}

.gtea-posts-grid__title-link {
    text-decoration: none;
    color: inherit;
}

/* ── Excerpt ──────────────────────────────────────────────────────── */
.gtea-posts-grid__excerpt {
    margin: 0;
    box-sizing: border-box;
}

/* ── Thumbnail container — absorbs vertical extra space in stretch ─ */
/* When the grid uses align-items: stretch and a sibling card is      */
/* taller, this container grows so the image fills the remaining gap  */
/* instead of leaving white space below the thumbnail.                */
.gtea-posts-grid__thumbnail-container {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    min-height: 0;
    box-sizing: border-box;
}

/* ── Thumbnail wrapper — clips the image during hover scale ──────── */
/* flex-basis: auto preserves the user-set height as the minimum,    */
/* flex-grow: 1 lets it expand inside the container.                  */
.gtea-posts-grid__thumbnail-wrapper {
    flex: 1 0 auto;
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
}

/* ── Thumbnail ────────────────────────────────────────────────────── */
.gtea-posts-grid__thumbnail {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-sizing: border-box;
}

/* ── CTA container (in-flow default) ─────────────────────────────── */
.gtea-posts-grid__cta-container {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
}

/* ── CTA container (absolute mode) ───────────────────────────────── */
.gtea-posts-grid__cta-container--absolute {
    position: absolute;
    z-index: 2;
}

/* ── CTA — base + icon animation (rendered by GteaHelperCta) ─────── */
/* Mirrors widget-cta.css scoped to this widget's CTA block so the    */
/* icon hover/focus slide animation works here too.                   */
.gtea-posts-grid__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
}

.gtea-posts-grid__cta__icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.gtea-posts-grid__cta__icon-wrap svg {
    width: 16px;
    height: 16px;
}

.gtea-posts-grid__cta__icon-clip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

.gtea-posts-grid__cta__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.gtea-posts-grid__cta__icon--clone {
    position: absolute;
    inset: 0;
    transform: translateX(-110%);
}

/* Animation: slide */
.gtea-posts-grid__cta__icon-wrap--anim-slide .gtea-posts-grid__cta__icon-clip {
    overflow: hidden;
}

.gtea-posts-grid__cta__icon-wrap--anim-slide .gtea-posts-grid__cta__icon:not(.gtea-posts-grid__cta__icon--clone),
.gtea-posts-grid__cta__icon-wrap--anim-slide .gtea-posts-grid__cta__icon--clone {
    transition: transform var(--gtea-icon-anim-duration, 300ms) cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover trigger */
.gtea-posts-grid__cta:hover .gtea-posts-grid__cta__icon-wrap--anim-slide.gtea-posts-grid__cta__icon-wrap--on-hover .gtea-posts-grid__cta__icon:not(.gtea-posts-grid__cta__icon--clone) {
    transform: translateX(110%);
}

.gtea-posts-grid__cta:hover .gtea-posts-grid__cta__icon-wrap--anim-slide.gtea-posts-grid__cta__icon-wrap--on-hover .gtea-posts-grid__cta__icon--clone {
    transform: translateX(0);
}

/* Focus trigger */
.gtea-posts-grid__cta:focus .gtea-posts-grid__cta__icon-wrap--anim-slide.gtea-posts-grid__cta__icon-wrap--on-focus .gtea-posts-grid__cta__icon:not(.gtea-posts-grid__cta__icon--clone) {
    transform: translateX(110%);
}

.gtea-posts-grid__cta:focus .gtea-posts-grid__cta__icon-wrap--anim-slide.gtea-posts-grid__cta__icon-wrap--on-focus .gtea-posts-grid__cta__icon--clone {
    transform: translateX(0);
}

/* ── Pagination ───────────────────────────────────────────────────── */
.gtea-posts-grid__pagination {
    width: 100%;
    box-sizing: border-box;
}