/*!
 * =============================================================================
 * GPS HEADER
 * =============================================================================
 * PURPOSE      : Stijlt de nationale "Sportschool Prijsindex Nederland"
 *                (/sportschool-prijzen/). Bouwt voort op de altijd-geladen
 *                .sl-prijsindex-basis (style.css) en voegt de distributie-band
 *                (6 cellen), de steden-ranking-tabel, het citatie/embed-blok en
 *                de methodologie-sectie toe.
 *
 * PATH         : wp-content/themes/sportlist/css/price-index.css
 *
 * DEPENDENCIES : style.css (.sl-prijsindex basis + CSS-variabelen), conditioneel
 *                geladen via sportlist_price_index_enqueue() op sl_price_index=1.
 *
 * =============================================================================
 * CSS-VARIABELEN (gebruik uitsluitend deze)
 * =============================================================================
 *   --primary-color, --white-color, --text-color, --gray-color
 *   Semantische utility-kleuren (eenmalig): success #27ae60, error #c0392b
 *
 * =============================================================================
 * SECTIONOVERZICHT
 * =============================================================================
 *   1. LAYOUT (wrapper + lede + distributie-grid)
 *   2. RANKING-TABEL
 *   3. CITATIE / EMBED
 *   4. METHODOLOGIE
 *   5. RESPONSIVE
 *
 * @package Sportlist
 */

/* ============================================================
   1. LAYOUT
   ============================================================ */
.sl-price-index {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
}
.sl-price-index__lede {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-color, #333);
    max-width: 760px;
}
.sl-price-index__lede strong {
    color: var(--primary-color);
}

/* Distributie-band: zes cellen i.p.v. de standaard vier. */
.sl-price-index__grid {
    grid-template-columns: repeat(6, 1fr);
}

/* ============================================================
   2. RANKING-TABEL
   ============================================================ */
.sl-price-index__ranking {
    margin: 48px auto;
}
.sl-price-index__ranking h2 {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin: 0 0 8px;
}
.sl-price-index__ranking-intro {
    margin: 0 0 20px;
    color: #666;
    line-height: 1.5;
}
.sl-price-index__table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white-color);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07);
}
.sl-price-index__table thead th {
    text-align: left;
    padding: 14px 18px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #666;
    background: rgba(0, 74, 173, 0.05);
}
.sl-price-index__table tbody td {
    padding: 14px 18px;
    border-top: 1px solid #f0f0f1;
    font-size: 0.95rem;
}
.sl-price-index__table tbody tr:hover {
    background: rgba(0, 74, 173, 0.03);
}
.sl-price-index__city a {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
}
.sl-price-index__city a:hover {
    text-decoration: underline;
}
.sl-price-index__delta {
    font-weight: 700;
}
.sl-price-index__delta.is-above {
    color: #c0392b;
}
.sl-price-index__delta.is-below {
    color: #27ae60;
}
.sl-price-index__delta.is-equal {
    color: #777;
}

/* ============================================================
   3. CITATIE / EMBED
   ============================================================ */
.sl-price-index__cite {
    margin: 48px auto;
    padding: 28px 24px;
    background: rgba(0, 74, 173, 0.05);
    border-radius: 25px;
}
.sl-price-index__cite h2 {
    font-size: 1.35rem;
    color: var(--primary-color);
    margin: 0 0 10px;
}
.sl-price-index__embed {
    display: flex;
    gap: 10px;
    align-items: stretch;
    margin: 16px 0 10px;
}
.sl-price-index__embed-code {
    flex: 1;
    padding: 12px 14px;
    border: 1px solid var(--gray-color, #ccc);
    border-radius: 14px;
    background: var(--white-color);
    font-size: 0.85rem;
    font-family: inherit;
    resize: vertical;
    color: var(--text-color, #333);
}
.sl-price-index__copy {
    flex: 0 0 auto;
    padding: 0 22px;
    border: none;
    border-radius: 14px;
    background: var(--primary-color);
    color: var(--white-color);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.sl-price-index__copy:hover {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}
.sl-price-index__cite-preview {
    margin: 8px 0 0;
    font-size: 0.9rem;
    color: #555;
}
.sl-price-index__cite-label {
    font-weight: 600;
    color: var(--primary-color);
}

/* ============================================================
   4. METHODOLOGIE
   ============================================================ */
.sl-price-index__method {
    max-width: 760px;
    margin: 40px auto;
    color: var(--text-color, #333);
    line-height: 1.6;
}
.sl-price-index__method h2 {
    font-size: 1.35rem;
    color: var(--primary-color);
    margin: 0 0 10px;
}
.sl-price-index__method p {
    margin: 0 0 12px;
}

/* ============================================================
   5. RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
    .sl-price-index__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 600px) {
    .sl-price-index__table thead {
        display: none;
    }
    .sl-price-index__table,
    .sl-price-index__table tbody,
    .sl-price-index__table tr,
    .sl-price-index__table td {
        display: block;
        width: 100%;
    }
    .sl-price-index__table tr {
        margin-bottom: 14px;
        border: 1px solid #f0f0f1;
        border-radius: 14px;
        overflow: hidden;
    }
    .sl-price-index__table td {
        display: flex;
        justify-content: space-between;
        border-top: none;
    }
    .sl-price-index__table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #666;
    }
    .sl-price-index__embed {
        flex-direction: column;
    }
    .sl-price-index__copy {
        padding: 12px;
    }
}
@media (max-width: 480px) {
    .sl-price-index__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}