/* ============================================================
   ew-testimonials.css
   Subscriber testimonials (_Testimonials.cshtml).

   Built on the shared --box-* tokens so the cards match the stock
   page boxes and flip with the theme, including OS dark mode.
   ============================================================ */

.ewq {
    margin: 2rem 0 2.5rem;
}

.ewq-title {
    margin: 0 0 1.25rem;
    text-align: center;
    font-size: var(--fs-xl);
}

.ewq-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.ewq-card {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 1.5rem 1.4rem 1.25rem;
    background: var(--box-bg);
    border: 1px solid var(--box-border);
    border-radius: var(--radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
}

    /* Oversized opening quote in the brand color, sitting behind the text. */
    .ewq-card::before {
        content: "\201C";
        position: absolute;
        top: -0.35rem;
        left: 0.75rem;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 5rem;
        line-height: 1;
        color: var(--ew-brand);
        opacity: 0.35;
        pointer-events: none;
    }

.ewq-quote {
    position: relative; /* above the quote mark */
    flex: 1 1 auto; /* attribution sits on the same line across cards */
    margin: 0 0 1rem;
}

    .ewq-quote p {
        margin: 0;
        color: var(--box-value);
        font-size: var(--fs-base);
        line-height: var(--lh-loose);
    }

.ewq-who {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--box-divider);
    font-size: var(--fs-sm);
}

.ewq-initials {
    color: var(--box-value);
    font-weight: 700;
}

.ewq-place {
    color: var(--box-sub);
}

    .ewq-place::before {
        content: "\00B7";
        margin-right: 0.4rem;
    }

.ewq-note {
    margin: 0.75rem 0 0;
    text-align: center;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

/* Tablets and phones: one column. Two-up leaves the third card alone on its
   own row, which reads as a mistake. */
@media (max-width: 760px) {
    .ewq-grid {
        grid-template-columns: 1fr;
    }

    .ewq-card {
        padding: 1.25rem 1.15rem 1rem;
    }
}