/* ============================================================
   Testimonials Archive — Bento Grid
   ============================================================ */

/* ── Page wrapper ─────────────────────────────────────────── */

.testimonials-archive {
    width: 100%;
    box-sizing: border-box;
}

.testimonials-archive.ta-boxed {
    max-width: calc(var(--maxWidth) + 300px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--defaultInterval);
    padding-right: var(--defaultInterval);
}

.testimonials-archive.ta-full {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* ── Archive header ───────────────────────────────────────── */

.ta-header {
    padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 60px);
    text-align: center;
}

.ta-heading {
    margin: 0 0 0.4em;
    font-size: clamp(2rem, 4vw, 3.2rem);
}

.ta-subheading {
    margin: 0 auto;
    max-width: 60ch;
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    opacity: 0.8;
}

/* ── Bento grid ───────────────────────────────────────────── */
/* 6 columns for both modes. All cards span exactly one row,  */
/* so patterns fill rows completely and gaps never occur.     */

.ta-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-auto-rows: minmax(120px, auto);
    grid-auto-flow: dense;
    gap: clamp(8px, 1.2vw, 16px);
    padding: clamp(8px, 1.2vw, 16px);
}

/* ── Cell column-span classes ─────────────────────────────── */

.ta-card.cell-2 { grid-column: span 2; }
.ta-card.cell-4 { grid-column: span 4; }
.ta-card.cell-6 { grid-column: span 6; }
.ta-card.cell-8 { grid-column: span 8; }

/* ── Cell row-span classes ────────────────────────────────── */

.ta-card.row-2 { grid-row: span 2; }

/* ── Row-2 card: top-cluster content + decorative fill ───── */

.ta-card.row-2 .ta-content {
    justify-content: flex-start;
    position: relative;
    z-index: 1;
}

.ta-card.row-2 .ta-bio {
    margin-top: clamp(16px, 2vw, 28px);
}

.ta-card.row-2 .ta-quote {
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
    line-height: 1.65;
}

.ta-card.row-2::after {
    content: '\201C';
    position: absolute;
    bottom: -0.15em;
    right: 0.05em;
    font-size: 20rem;
    line-height: 1;
    font-family: 'Trade Gothic', 'Trade Gothic LT Std', 'TradeGothic', sans-serif;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.07);
    pointer-events: none;
    z-index: 0;
}

/* ── Base card ────────────────────────────────────────────── */

.ta-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--defaultBorderRadius);
    display: flex;
    flex-direction: column;
    padding: clamp(20px, 2.5vw, 36px);
    box-sizing: border-box;
    min-height: 200px;
}

/* ── Card content ─────────────────────────────────────────── */

.ta-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
}

.ta-quote {
    margin: 0 0 clamp(12px, 1.5vw, 20px);
    padding: 0;
    border: none;
    font-size: clamp(0.95rem, 1.4vw, 1.1rem);
    line-height: 1.55;
    display: flow-root;
}

.ta-quote::before {
    content: '\201C';
    float: left;
    font-family: 'Trade Gothic', 'Trade Gothic LT Std', 'TradeGothic', sans-serif;
    font-weight: bold;
    font-style: normal;
    font-size: 3.5em;
    line-height: 0.85;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 0.05em 0.15em;
    border-radius: 3px;
    margin-right: 0.25em;
    margin-bottom: 0.1em;
}

.ta-bio {
    margin-top: auto;
}

/* ── Photo background variant ────────────────────────────── */

.ta-card.photo-bg {
    background-size: cover;
    background-position: center top;
    display: grid;
    grid-template-rows: minmax(160px, 1fr) auto;
    min-height: clamp(320px, 48vh, 520px);
    padding: 0; /* padding moves to ta-content */
}

/* gradient on card ::before no longer used — darkening is tied to content position */
.ta-card.photo-bg::before {
    display: none;
}

/* suppress the decorative watermark quote on photo cards */
.ta-card.photo-bg::after {
    display: none;
}

.ta-card.photo-bg .ta-content {
    grid-row: 2;
    position: relative;
    z-index: 1;
    color: white;
    padding: clamp(20px, 2.5vw, 36px);
    background: rgba(0, 0, 0, 0.72);
    /* two-column layout: quote left, bio right — each sized to content */
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: clamp(12px, 2vw, 28px);
}

/* gradient from transparent photo into the dark text area — tracks exactly where text starts */
.ta-card.photo-bg .ta-content::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.72));
    pointer-events: none;
}

.ta-card.photo-bg .ta-quote {
    color: white;
    margin-bottom: 0;
}

.ta-card.photo-bg .ta-quote::before {
    background-color: rgba(255, 255, 255, 0.2);
}

.ta-card.photo-bg .ta-bio {
    margin-top: 0;
    min-width: 140px;
    max-width: 220px;
}

.ta-card.photo-bg .ta-name {
    color: white;
}

.ta-card.photo-bg .ta-title,
.ta-card.photo-bg .ta-organization {
    color: white;
    opacity: 0.85;
}

@media only screen and (max-width: 600px) {
    .ta-card.photo-bg .ta-content {
        grid-template-columns: 1fr;
    }
}

/* ── Headshot variant ─────────────────────────────────────── */

.has-headshot .ta-bio {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ta-headshot {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.ta-name {
    font-weight: 700;
    margin: 0 0 2px;
    font-size: 0.95rem;
}

.ta-title,
.ta-organization {
    font-size: 0.85rem;
    opacity: 0.75;
}

.ta-title p,
.ta-organization p {
    margin: 0;
    padding: 0;
}

/* ── Scroll reveal — managed by scroll-effects.js ─────────── */

.ta-card.is-ready {
    opacity: 0;
    transform: translateY(var(--motion-distance-y, 30px));
    transition:
        opacity var(--motion-duration-opacity, 0.6s) var(--motion-ease, cubic-bezier(0.22, 1, 0.36, 1)) var(--motion-opacity-delay, 0ms),
        transform var(--motion-duration-transform, 0.6s) var(--motion-ease, cubic-bezier(0.22, 1, 0.36, 1)) var(--motion-transform-delay, 0ms);
}

.ta-card.is-in-view {
    opacity: 1;
    transform: translateY(0);
}

/* ── Responsive ───────────────────────────────────────────── */

@media only screen and (max-width: 900px) {
    .ta-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .ta-card.cell-6,
    .ta-card.cell-8 {
        grid-column: span 4;
    }
}

@media only screen and (max-width: 600px) {
    .ta-grid {
        grid-template-columns: repeat(2, 1fr);
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .ta-card.cell-2,
    .ta-card.cell-3,
    .ta-card.cell-4,
    .ta-card.cell-6,
    .ta-card.cell-8 {
        grid-column: span 2;
    }

    .ta-card.row-2 {
        grid-row: span 1;
    }
}