/* === TOUT.CSS CANARY (HIGH VISIBILITY) ===================== */
/* If you see this, tout.css is loading and selectors match */

/* .tout-card {
	background:
		repeating-linear-gradient(
			45deg,
			rgba(255, 0, 255, 0.15),
			rgba(255, 0, 255, 0.15) 10px,
			rgba(0, 255, 255, 0.15) 10px,
			rgba(0, 255, 255, 0.15) 20px
		);
	outline: 4px solid magenta;
} */

/* ========================================================== */

/* ============================================================
   TOUTS GRID LAYOUT (Homepage & Archive)
   Clean, modern, magazine-style layout
   ============================================================ */

.touts-grid {
    margin: 2.5rem auto 4rem;
    padding: 0 1.25rem;
    max-width: 1200px;
}

.touts-grid__inner {
    background-color: #f5f2eb;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
}

/* 2 columns on medium screens */
@media (min-width: 680px) {
    .touts-grid__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 3 columns on larger screens */
@media (min-width: 1080px) {
    .touts-grid__inner {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ============================================================
   TOUT CARD — Clean, lightweight article preview
   ============================================================ */

.tout-card {
    display: flex;
    flex-direction: column;
    background: #f5f2eb;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
    height: 100%;
    transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}

@media (hover: hover) {
    .tout-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.10);
    }
}

/* === LINK WRAPPER === */

.tout-card__link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Force title color to remain black in all link states */
.tout-card__link:link .tout-card__title,
.tout-card__link:visited .tout-card__title,
.tout-card__link:hover .tout-card__title,
.tout-card__link:active .tout-card__title {
    color: #000;
}

/* ============================================================
   IMAGE AREA — Shorter aspect ratio for compact vertical footprint
   ============================================================ */

.tout-card__image-wrapper {
    position: relative;
    padding-top: 42%;
    background: #111;
    overflow: hidden;
}

.tout-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================================
   BODY (Title + Excerpt)
   ============================================================ */

.tout-card__body {
    padding: 0.85rem 1rem 1.1rem;
}

.tout-card__title {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    line-height: 1.28;
    font-weight: 600;
    color: #000;
    /* explicit baseline */
}

.tout-card__excerpt {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.48;
    color: #555;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Optional: Limit excerpt lines */

.tout-card__excerpt {
    -webkit-line-clamp: 3;
}

/* === OPTIONAL: Image directional zoom affordance (legacy parity) === */

.tout-card__image {
    transition: transform 420ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

@media (hover: hover) {
    .tout-card:hover .tout-card__image {
        transform: scale(1.06) translateY(-1.5%);
    }
}
/* Preserve the complete owned branded fallback, including during hover. */
.tout-card__image-wrapper--fallback .tout-card__image {
    object-fit: contain;
}
.tout-card:hover .tout-card__image-wrapper--fallback .tout-card__image {
    transform: none;
}