/* ============================================================
 * The Real Barista — Koffiecatering-pagina styles
 * Geport van _src/koffiecatering.php regel 39-97 + sticky nav
 * (139-142) + responsive 120-136.
 * ============================================================ */

/* PAGE HERO */
.page-hero { padding: 170px 8vw 100px; background: var(--white); position: relative; overflow: hidden; }
.page-hero::after {
    content: ''; position: absolute; top: 0; right: 0; bottom: 0;
    width: 45%; background: var(--cream);
    clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%);
}
.page-hero-inner {
    max-width: 1280px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 80px; align-items: center;
    position: relative; z-index: 1;
}
.page-hero-photo { border-radius: 10px; overflow: hidden; height: 520px; position: relative; }
.page-hero-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; filter: brightness(.88) saturate(1.1); }
.photo-caption {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 28px 28px 20px;
    background: linear-gradient(0deg, rgba(26,26,24,.7), transparent);
    font-size: .65rem; letter-spacing: .18em; text-transform: uppercase;
    color: rgba(247,244,238,.75);
}

/* ANCHOR NAV */
.catering-nav {
    background: var(--white); border-bottom: 1px solid var(--cream-mid);
    position: sticky; top: 70px; z-index: 100; overflow-x: auto;
}
.catering-nav-inner { max-width: 1280px; margin: 0 auto; padding: 0 8vw; display: flex; gap: 0; justify-content: center; }
.ctn-link {
    flex-shrink: 0; padding: 16px 20px;
    font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--mid);
    transition: color .2s, border-color .2s;
    border-bottom: 2px solid transparent;
    font-weight: 400; white-space: nowrap;
}
.ctn-link:hover, .ctn-link.active { color: var(--charcoal); border-bottom-color: var(--sage-dark); }

/* INBEGREPEN */
.s-includes { padding: 100px 8vw; background: var(--charcoal-2); position: relative; overflow: hidden; }
.s-includes::before {
    content: ''; position: absolute; top: -120px; right: -120px;
    width: 600px; height: 600px; border-radius: 50%;
    background: radial-gradient(ellipse, rgba(138,158,126,.08) 0%, transparent 70%);
    pointer-events: none;
}
.includes-inner { max-width: 1280px; margin: 0 auto; }
.includes-top { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; margin-bottom: 64px; }
.includes-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 1px; background: rgba(255,255,255,.06);
    border-radius: 10px; overflow: hidden;
}
.inc-item { background: rgba(255,255,255,.03); padding: 36px 30px; transition: background .25s; }
.inc-item:hover { background: rgba(138,158,126,.1); }
.inc-icon { font-size: 1.5rem; margin-bottom: 16px; display: block; color: var(--sage-light); }
.inc-title { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--white); font-weight: 500; margin-bottom: 8px; }
.inc-body { font-size: .8rem; color: rgba(247,244,238,.45); line-height: 1.65; font-weight: 300; }

/* TOEPASSINGEN GRID */
.s-toepassingen { padding: 120px 8vw; background: var(--cream); position: relative; }
.s-toepassingen::before {
    content: 'Catering'; position: absolute; left: -1%; top: 50%;
    transform: translateY(-50%);
    font-family: var(--serif); font-size: clamp(80px, 12vw, 160px);
    font-weight: 300; color: rgba(138,158,126,.06);
    pointer-events: none; white-space: nowrap;
}
.toep-inner { max-width: 1280px; margin: 0 auto; }
.toep-header { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; margin-bottom: 64px; }
.toep-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.toep-card {
    background: var(--white); border-radius: 10px; overflow: hidden;
    border: 1px solid rgba(138,158,126,.14);
    display: grid; grid-template-columns: 1fr 1fr;
    transition: box-shadow .3s;
}
.toep-card:hover { box-shadow: 0 20px 60px rgba(28,28,24,.08); }
.toep-photo { overflow: hidden; min-height: 260px; }
.toep-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.toep-card:hover .toep-photo img { transform: scale(1.05); }
.toep-body { padding: 36px 32px; display: flex; flex-direction: column; justify-content: center; }
.toep-tag { font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; color: var(--sage-dark); margin-bottom: 10px; }
.toep-title { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; color: var(--charcoal); margin-bottom: 12px; line-height: 1.2; }
.toep-desc { font-size: .82rem; color: var(--mid); line-height: 1.7; font-weight: 300; margin-bottom: 20px; }
.toep-bullets { display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; }
.tb { display: flex; align-items: center; gap: 10px; font-size: .8rem; color: var(--charcoal); font-weight: 300; }
.tb::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--sage); flex-shrink: 0; }
.toep-link {
    font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--charcoal); border-bottom: 1px solid rgba(28,28,24,.25);
    padding-bottom: 2px; display: inline-block;
    transition: color .2s, border-color .2s;
    align-self: flex-start; margin-top: auto;
}
.toep-link:hover { color: var(--sage-dark); border-color: var(--sage-dark); }

/* CAPACITEIT */
.s-capaciteit { padding: 100px 8vw; background: var(--white); }
.cap-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.cap-visual { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cap-photo-main { border-radius: 10px; overflow: hidden; height: 300px; grid-column: span 2; }
.cap-photo-sub { border-radius: 10px; overflow: hidden; height: 180px; }
.cap-visual img { width: 100%; height: 100%; object-fit: cover; }
.cap-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 32px 0; }
.cap-stat { padding: 24px; background: var(--cream); border-radius: 8px; border: 1px solid var(--cream-mid); }
.cap-stat-num { font-family: var(--serif); font-size: 2.2rem; font-weight: 300; color: var(--charcoal); line-height: 1; margin-bottom: 4px; }
.cap-stat-label { font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--light); }

/* AANPAK */
.s-aanpak { padding: 120px 8vw; background: var(--charcoal); }
.aanpak-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: start; }
.steps { display: flex; flex-direction: column; gap: 0; }
.step { display: grid; grid-template-columns: 60px 1fr; gap: 24px; align-items: start; padding: 32px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.step:last-child { border-bottom: none; padding-bottom: 0; }
.step-n { font-family: var(--serif); font-size: 3rem; font-weight: 300; color: rgba(153,160,152,.25); line-height: 1; text-align: right; margin-top: -4px; }
.step-c h3 { font-family: var(--sans); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: var(--white); margin-bottom: 6px; }
.step-c p { font-size: .87rem; color: rgba(247,244,238,.5); line-height: 1.7; font-weight: 300; }

@media (max-width: 1024px) {
    .page-hero-inner, .includes-top, .toep-header, .cap-inner, .aanpak-inner { grid-template-columns: 1fr; gap: 48px; }
    .page-hero::after { display: none; }
    .page-hero { padding: 130px 6vw 80px; }
    .includes-grid { grid-template-columns: repeat(2, 1fr); }
    .toep-grid { grid-template-columns: 1fr; }
    .toep-card { grid-template-columns: 1fr; }
    .toep-photo { min-height: 220px; }
}

@media (max-width: 640px) {
    .includes-grid { grid-template-columns: 1fr; }
    .cap-visual { grid-template-columns: 1fr; }
    .cap-photo-main { grid-column: span 1; }
}