/*
 * Homepage Patterns — Rule 3 Interaction States
 * Rebuilt 2026-05-27 per specs/homepage/*.dev.md
 * Layout and typography come from tbr-design-system.css.
 */

/* ── Hero ── */
.btn--primary:focus-visible {
    outline: 2px solid var(--primary-400);
    outline-offset: 2px;
}
.btn--primary:active {
    transform: scale(0.98);
}

/* ── Challenges ── */
.challenge {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.challenge:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.12);
}
.challenge:focus-visible {
    outline: 2px solid var(--primary-400);
    outline-offset: 2px;
}

/* ── Offer cards ── */
.offer-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.offer-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px -4px rgba(0, 0, 0, 0.10);
}
.offer-card__link:hover {
    color: var(--primary-700);
}

/* ── Articles ── */
.article-featured {
    transition: box-shadow 0.15s ease;
}
.article-featured:hover .article-featured__title {
    color: var(--primary-700);
}
.article-item:hover .article-item__title {
    color: var(--primary-700);
}
.articles__view:hover {
    color: var(--primary-800);
}

/* ── Products ── */
.product {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.product:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px -4px rgba(0, 0, 0, 0.10);
}
.product__cta:hover {
    color: var(--primary-700);
}

/* ── Quote ── */
.quote__link:hover {
    color: var(--primary-200);
    text-decoration-color: var(--primary-200);
}

/* ── Testimonials ── */
.testimonial {
    transition: box-shadow 0.15s ease;
}
.testimonial:hover {
    box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.08);
}

/* ── Video ── */
.video__play {
    transition: transform 0.15s ease, background 0.15s ease;
}
.video__play:hover {
    transform: scale(1.08);
    background: var(--primary-600);
}

/* ── Newsletter ── */
.newsletter__input:focus {
    outline: none;
    border-color: var(--primary-400);
}
.newsletter__btn {
    transition: background 0.15s ease, transform 0.15s ease;
}
.newsletter__btn:hover {
    background: var(--accent-yellow-hover);
}
.newsletter__btn:active {
    transform: scale(0.98);
}

/* ── Articles grid — query loop first-child featured treatment ── */
.articles__grid .wp-block-post:first-child .article-featured {
    grid-column: 1 / -1;
}