/**
 * Chef Speciaal — Content pages
 * (over-ons, fotos, contact, reviews, algemene-voorwaarden, privacy, retourbeleid)
 *
 * Page-specific additions only. Everything else (.page-hero, .breadcrumbs,
 * .feature-grid, .why-list, .why-section, .review-card, .demo-badge, .btn,
 * .eyebrow, .section-head, ...) is already covered by style.css.
 */

/* ---------- Legal content (algemene voorwaarden / privacy / retourbeleid) ---------- */
.legal-content {
    max-width: 760px;
    margin: 0 auto;
}
.legal-content .demo-badge { margin-bottom: var(--space-5); }
.legal-content h2 {
    font-size: 22px;
    margin: var(--space-6) 0 var(--space-3);
}
.legal-content section:first-of-type h2 { margin-top: 0; }
.legal-content p {
    color: var(--color-text-muted);
    line-height: 1.75;
    font-size: 16px;
    margin-bottom: var(--space-3);
}

/* ---------- Over ons — values recap ---------- */
.values-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin: var(--space-6) 0;
}
.values-list__item {
    background: var(--color-white);
    border-radius: var(--radius-md);
    padding: var(--space-5) var(--space-4);
    text-align: center;
    box-shadow: var(--shadow-sm);
}
.values-list__item .icon-circle {
    width: 52px; height: 52px; border-radius: 50%; background: var(--color-cream);
    display: flex; align-items: center; justify-content: center; font-size: 24px;
    margin: 0 auto var(--space-3);
}
.values-list__item h3 { font-size: 17px; margin-bottom: 6px; }
.values-list__item p { color: var(--color-text-muted); font-size: 14px; }

/* ---------- Gallery filter pills (fotos.php) ---------- */
.gallery-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}
.gallery-filter-btn {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 12px 22px;
    border-radius: var(--radius-pill);
    border: 2px solid var(--color-border);
    background: var(--color-white);
    color: var(--color-black);
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.gallery-filter-btn:hover { border-color: var(--color-gold); transform: translateY(-2px); }
.gallery-filter-btn.is-active { background: var(--color-black); border-color: var(--color-black); color: var(--color-cream); }

/* ---------- Gallery masonry ---------- */
.gallery-masonry {
    column-count: 4;
    column-gap: var(--space-4);
}
.gallery-item {
    display: block;
    width: 100%;
    border: 0;
    padding: 0;
    background: none;
    break-inside: avoid;
    margin-bottom: var(--space-4);
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
    cursor: zoom-in;
    box-shadow: var(--shadow-sm);
}
.gallery-item img {
    width: 100%;
    display: block;
    transition: transform var(--transition);
}
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item__label {
    position: absolute; left: var(--space-3); bottom: var(--space-3);
    background: rgba(11,11,11,0.72); color: var(--color-white);
    font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
    padding: 6px 12px; border-radius: var(--radius-pill);
}
.gallery-item.is-hidden { display: none; }

/* ---------- Lightbox ---------- */
.lightbox {
    position: fixed; inset: 0; z-index: 500;
    background: rgba(11, 11, 11, 0.95);
    display: flex; align-items: center; justify-content: center;
    padding: var(--space-5);
    opacity: 0; pointer-events: none;
    transition: opacity var(--transition);
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox__figure { max-width: 92vw; text-align: center; }
.lightbox__figure img {
    max-width: 92vw; max-height: 76vh; width: auto;
    border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
    display: block; margin: 0 auto;
}
.lightbox__caption { color: var(--color-text-on-dark-muted); margin-top: var(--space-4); font-size: 14px; }
.lightbox__close,
.lightbox__prev,
.lightbox__next {
    position: absolute;
    background: rgba(255, 248, 234, 0.1);
    color: var(--color-white);
    border: 1px solid var(--color-border-on-dark);
    border-radius: 50%;
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
}
.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover { background: var(--color-gold-bright); color: var(--color-black); }
.lightbox__close { top: var(--space-4); right: var(--space-4); }
.lightbox__prev { left: var(--space-4); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: var(--space-4); top: 50%; transform: translateY(-50%); }
.lightbox__prev:hover, .lightbox__next:hover { transform: translateY(-50%) scale(1.05); }

/* ---------- Contact page ---------- */
.contact-layout {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: var(--space-7);
    align-items: start;
}
.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    background: var(--color-white);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-weight: 700; font-size: 14px; }
.form-field input,
.form-field textarea {
    font-family: inherit;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    font-size: 15px;
    background: var(--color-cream);
}
.form-field input:focus,
.form-field textarea:focus { outline: 2px solid var(--color-gold); border-color: var(--color-gold); }
.form-field textarea { resize: vertical; min-height: 140px; }

.form-banner {
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-5);
    font-weight: 600;
}
.form-banner--success { background: rgba(34, 150, 80, 0.12); color: #1c6b3f; border: 1px solid rgba(34, 150, 80, 0.3); }
.form-banner--error { background: rgba(220, 60, 60, 0.1); color: #b3261e; border: 1px solid rgba(220, 60, 60, 0.3); }

.contact-info { display: flex; flex-direction: column; gap: var(--space-5); }
.contact-info-card {
    background: var(--color-cream);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}
.contact-info-card h3 { font-size: 18px; margin-bottom: var(--space-4); }
.contact-info-list { display: flex; flex-direction: column; gap: var(--space-3); }
.contact-info-list li { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 15px; }
.contact-info-list .icon-circle {
    width: 38px; height: 38px; border-radius: 50%; background: var(--color-white);
    display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0;
}
.contact-map { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.contact-map img { width: 100%; display: block; }
.contact-map__note { font-size: 12px; color: var(--color-text-muted); margin-top: var(--space-2); }

/* ---------- Reviews summary ---------- */
.reviews-summary {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}
.reviews-summary__score { font-family: var(--font-display); font-size: 56px; line-height: 1; color: var(--color-black); }
.reviews-summary__meta { display: flex; flex-direction: column; gap: 6px; }
.reviews-summary__count { color: var(--color-text-muted); font-size: 14px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1200px) {
    .gallery-masonry { column-count: 3; }
}

@media (max-width: 1024px) {
    .values-list { grid-template-columns: repeat(2, 1fr); }
    .contact-layout { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .gallery-masonry { column-count: 2; }
    .contact-form { padding: var(--space-5) var(--space-4); }
    .reviews-summary { text-align: center; justify-content: center; }
}

@media (max-width: 430px) {
    .values-list { grid-template-columns: 1fr; }
    .gallery-filter-btn { padding: 10px 16px; font-size: 12px; }
    .lightbox__prev, .lightbox__next, .lightbox__close { width: 40px; height: 40px; font-size: 16px; }
    .lightbox__prev { left: var(--space-2); }
    .lightbox__next { right: var(--space-2); }
    .lightbox__close { top: var(--space-2); right: var(--space-2); }
}