/*!
 * =============================================================================
 * GPS HEADER
 * =============================================================================
 * PURPOSE      : Sprint 4 — homepage redesign: hero-zoek-toggle met tokens
 *                (vervangt inline-styled hardcoded kleuren), trust-strip onder
 *                de hero, en polish op city-/keten-/advies-grids. Scoped onder
 *                body.home.
 *
 *                Losse CSS-file omdat deze stijlen alleen op de voorpagina
 *                van toepassing zijn (geen overhead op sub-pagina's).
 *
 * PATH         : wp-content/themes/sportlist/css/homepage.css
 *
 * DEPENDENCIES : css/tokens.css, style.css.
 *
 * =============================================================================
 * CSS-VARIABELEN (tokens uit tokens.css)
 * =============================================================================
 *   Kleur:    --color-brand, --color-brand-hover, --color-brand-on,
 *             --color-accent, --color-text, --color-text-muted,
 *             --color-heading, --color-surface, --color-surface-sunken,
 *             --color-border-default, --color-focus-ring,
 *             --color-overlay-strong
 *   Space:    --space-1..--space-10
 *   Radius:   --radius-sm, --radius-md, --radius-lg, --radius-pill
 *   Shadow:   --shadow-xs, --shadow-sm, --shadow-card, --shadow-focus
 *   Type:     --fs-caption, --fs-body-sm, --fs-body, --fs-h3, --fw-medium,
 *             --fw-semibold, --fw-bold
 *   Motion:   --transition-hover, --duration-fast, --ease-out
 *
 * =============================================================================
 * SECTIONOVERZICHT
 * =============================================================================
 *    1.  HERO-TOGGLE (sportschool / abonnement pill-knoppen)
 *    2.  TRUST-STRIP
 *    3.  INFO-BLOCK + VIEW-ALL LINK
 *    4.  CITY- / KETEN- / ADVIES-GRIDS
 *    5.  RESPONSIVE
 *
 * @package Sportlist
 */

/* ============================================================
   1. HERO-TOGGLE
   Pill-knoppen voor "sportschool" / "abonnement". Gebruikt de
   tokens-laag; hardcoded kleuren zijn uit front-page.php
   verwijderd. Actieve state = brand-blauw gevuld, inactief =
   witte pill met brand-rand.
   ============================================================ */

body.home .sl-hero-toggle {
    padding: var(--space-2) var(--space-5);
    border: 1px solid var(--neutral-0);
    background: var(--neutral-0);
    color: var(--color-text);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: var(--transition-hover);
    letter-spacing: 0;
    box-shadow: var(--shadow-xs);
    text-transform: capitalize;
}

body.home .sl-hero-toggle:hover {
    background: var(--color-brand-subtle);
    color: var(--color-brand);
    border-color: var(--color-brand-subtle);
}

body.home .sl-hero-toggle.is-active {
    background: var(--color-brand);
    color: var(--color-brand-on);
    border-color: var(--color-brand);
    box-shadow: var(--shadow-sm);
}

body.home .sl-hero-toggle:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus), var(--shadow-xs);
}

/* ============================================================
   2. TRUST-STRIP
   Horizontale rij van kwalitatieve trust-signalen onder de hero.
   Subtiele surface-sunken achtergrond scheidt visueel van hero.
   ============================================================ */

.sl-trust-strip {
    background: var(--color-surface-sunken);
    border-bottom: 1px solid var(--color-border-subtle);
    padding: var(--space-4) var(--space-5);
}

.sl-trust-strip__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
}

.sl-trust-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-medium);
    color: var(--color-text-muted);
    line-height: var(--lh-snug);
}

.sl-trust-item__icon {
    font-size: 20px;
    color: var(--color-brand);
    flex-shrink: 0;
}

/* ============================================================
   3. INFO-BLOCK + VIEW-ALL LINK
   Polish op de bestaande info-blocks en de "Bekijk alle"-link
   bovenaan de city/keten-secties.
   ============================================================ */

body.home .info-block,
body.home .info-block-1 {
    cursor: pointer;
    transition: var(--transition-hover);
    border-radius: var(--radius-lg);
}

body.home .info-block:hover,
body.home .info-block-1:hover {
    background: var(--color-surface-sunken);
}

body.home .info-block:focus-visible,
body.home .info-block-1:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

body.home .eigenaar-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: var(--color-brand);
    color: var(--color-brand-on);
    border-radius: var(--radius-pill);
    text-decoration: none;
    font-weight: var(--fw-semibold);
    font-size: var(--fs-body-sm);
    box-shadow: var(--shadow-xs);
    transition: var(--transition-hover);
}

body.home .eigenaar-button:hover {
    background: var(--color-brand-hover);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

body.home .eigenaar-button .material-icons {
    font-size: 18px;
}

body.home .view-all-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-4);
    padding: var(--space-2) var(--space-4);
    color: var(--color-brand);
    text-decoration: none;
    font-weight: var(--fw-semibold);
    font-size: var(--fs-body-sm);
    border-radius: var(--radius-pill);
    transition: background-color var(--duration-fast) var(--ease-out);
}

body.home .view-all-link:hover {
    background: var(--color-brand-subtle);
    text-decoration: none;
}

body.home .view-all-link .material-icons {
    font-size: 18px;
    transition: transform var(--duration-fast) var(--ease-out);
}

body.home .view-all-link:hover .material-icons {
    transform: translateX(2px);
}

/* ============================================================
   4. CITY- / KETEN- / ADVIES-GRIDS
   Bestaande .city-item / .fitnessketen-item / .advies-item
   krijgen moderne card-stijl: ronder, nette shadow, smooth hover.
   ============================================================ */

body.home .city-item,
body.home .fitnessketen-item {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    transition: var(--transition-hover);
    overflow: hidden;
}

body.home .city-item:hover,
body.home .fitnessketen-item:hover {
    box-shadow: var(--shadow-card);
    transform: translateY(-2px);
}

body.home .city-item-overlay {
    background: linear-gradient(
        to bottom,
        transparent 40%,
        var(--color-overlay-strong) 100%
    );
    transition: background-color var(--duration-fast) var(--ease-out);
}

body.home .city-item:hover .city-item-overlay {
    background: linear-gradient(
        to bottom,
        rgba(0, 74, 173, 0.25) 0%,
        var(--color-overlay-strong) 100%
    );
}

body.home .city-name,
body.home .fitnessketen-item p {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    letter-spacing: 0;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

body.home .city-title,
body.home .fitnessketen-title,
body.home .advies-title,
body.home .gerelateerde-affiliate-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    color: var(--color-heading);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-tight);
}

body.home .icon-container .material-icons {
    color: var(--color-brand);
    font-size: 24px;
}

body.home .advies-item,
body.home .affiliate-item,
body.home .product-gerelateerd-item {
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    transition: var(--transition-hover);
}

body.home .advies-item:hover,
body.home .affiliate-item:hover,
body.home .product-gerelateerd-item:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-card);
    transform: translateY(-2px);
}

/* ============================================================
   5. RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
    .sl-trust-strip {
        padding: var(--space-3) var(--space-4);
    }

    .sl-trust-strip__inner {
        gap: var(--space-3);
        justify-content: center;
    }

    .sl-trust-item {
        flex: 1 1 calc(50% - var(--space-3));
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 600px) {
    body.home .sl-hero-toggle {
        padding: var(--space-2) var(--space-3);
        font-size: var(--fs-caption);
    }

    .sl-trust-item {
        flex: 1 1 100%;
        justify-content: flex-start;
    }
}