/* ===== Brekken kleuren ===== */
:root{
  --brek-primary:#0f5e7a; /* waterblauw */
  --brek-accent:#51d095;  /* groen accent */
  --brek-ink:#0b1220;     /* tekst donker */
  --brek-mute:#64748b;    /* secundaire tekst */
  --brek-soft:#f1f5f9;    /* zachte bg */
  --brek-card:#ffffff;    /* panel bg */
}

/* Scope op body class van template */
body.page-template-page-prijzen-charter-php .prz,
body.page-template-page-prijzen-charter .prz{ color:var(--brek-ink); }

body.page-template-page-prijzen-charter-php .prz .container,
body.page-template-page-prijzen-charter .prz .container{ max-width:1400px; margin:0 auto; overflow: visible;}

/* Hero */
body.page-template-page-prijzen-charter-php .prz__hero,
body.page-template-page-prijzen-charter .prz__hero{     position: relative;
    padding: 72px 0;
    background-size: cover;
    background-image: none !important;
    background: #007cc3; }
body.page-template-page-prijzen-charter-php .prz__hero__overlay,
body.page-template-page-prijzen-charter .prz__hero__overlay{ position:absolute; inset:0; background: linear-gradient(180deg, rgb(0 119 190), rgb(194 211 238 / 24%)); }
body.page-template-page-prijzen-charter-php .prz__hero .eyebrow,
body.page-template-page-prijzen-charter .prz__hero .eyebrow{ color:#e2e8f0; letter-spacing:.06em; text-transform:uppercase; font-weight:600; margin:0 0 .5rem; }
body.page-template-page-prijzen-charter-php .prz__hero .title,
body.page-template-page-prijzen-charter .prz__hero .title{ color:#fff; font-size:clamp(1.8rem,3vw,2.6rem); margin:.25rem 0 .5rem; }
body.page-template-page-prijzen-charter-php .prz__hero .lead,
body.page-template-page-prijzen-charter .prz__hero .lead{ color:#e2e8f0; max-width:720px; }
body.page-template-page-prijzen-charter-php .prz__hero .cta,
body.page-template-page-prijzen-charter .prz__hero .cta{ display:flex; gap:12px; margin-top:16px; }
body.page-template-page-prijzen-charter-php .btn,
body.page-template-page-prijzen-charter .btn{ display:inline-block; padding:10px 16px; border-radius:12px; text-decoration:none; font-weight:600; }
body.page-template-page-prijzen-charter-php .btn--primary,
body.page-template-page-prijzen-charter .btn--primary{     background: #3fc044;
    border: none !important;
    color: white !important; }
body.page-template-page-prijzen-charter-php .btn--ghost,
body.page-template-page-prijzen-charter .btn--ghost{ border:1px solid rgba(255,255,255,.7); color:#fff; }

/* Card */
body.page-template-page-prijzen-charter-php .prz__card,
body.page-template-page-prijzen-charter .prz__card{ background:var(--brek-card); border-radius:18px; box-shadow:0 8px 24px rgba(2,6,23,.08); margin-top:40px; padding:24px; margin-bottom: 40px;}
body.page-template-page-prijzen-charter-php .prz__card__head h2,
body.page-template-page-prijzen-charter .prz__card__head h2{ margin:0 0 .25rem; font-size:1.4rem; }
body.page-template-page-prijzen-charter-php .muted,
body.page-template-page-prijzen-charter .muted{ color:var(--brek-mute); }

/* Table */
body.page-template-page-prijzen-charter-php .prz__tablewrap,
body.page-template-page-prijzen-charter .prz__tablewrap{ overflow:auto; margin-top:12px; }
body.page-template-page-prijzen-charter-php .prz__table,
body.page-template-page-prijzen-charter .prz__table{ width:100%; border-collapse:collapse; }
body.page-template-page-prijzen-charter-php .prz__table thead th,
body.page-template-page-prijzen-charter .prz__table thead th{ position:sticky; top:0; background:#f8fafc; z-index:1; text-align:left; font-size:.95rem; color:#0b1220; padding:12px; border-bottom:1px solid #e2e8f0; }
body.page-template-page-prijzen-charter-php .prz__table tbody td,
body.page-template-page-prijzen-charter .prz__table tbody td{ padding:12px; border-bottom:1px solid #eef2f7; }
body.page-template-page-prijzen-charter-php .prz__table tbody tr:nth-child(odd),
body.page-template-page-prijzen-charter .prz__table tbody tr:nth-child(odd){ background:#fcfdff; }
body.page-template-page-prijzen-charter-php .tag,
body.page-template-page-prijzen-charter .tag{ margin-left:8px; background:var(--brek-soft); color:#0f172a; padding:2px 8px; border-radius:999px; font-size:.8rem; }

/* Legend */
body.page-template-page-prijzen-charter-php .prz__legend,
body.page-template-page-prijzen-charter .prz__legend{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:8px; margin-top:12px; }
body.page-template-page-prijzen-charter-php .legend__item,
body.page-template-page-prijzen-charter .legend__item{ background:#f8fafc; border:1px dashed #e2e8f0; border-radius:12px; padding:10px 12px; }

/* Grid */
body.page-template-page-prijzen-charter-php .prz__grid,
body.page-template-page-prijzen-charter .prz__grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:20px; margin:20px 0 48px; }
body.page-template-page-prijzen-charter-php .prz__panel,
body.page-template-page-prijzen-charter .prz__panel{ background:var(--brek-card); border:1px solid #e2e8f0; border-radius:16px; padding:20px; }
body.page-template-page-prijzen-charter-php .features,
body.page-template-page-prijzen-charter .features{ list-style:none; padding:0; margin:0; display:grid; gap:12px; }
body.page-template-page-prijzen-charter-php .features li,
body.page-template-page-prijzen-charter .features li{ display:flex; gap:12px; }
body.page-template-page-prijzen-charter-php .features .icn,
body.page-template-page-prijzen-charter .features .icn{ font-size:1.2rem; }

/* Responsive */
@media (max-width:960px){
  body.page-template-page-prijzen-charter-php .prz__grid,
  body.page-template-page-prijzen-charter .prz__grid{ grid-template-columns:1fr; }
}

/* ===== Info-tegels ===== */
body.page-template-page-prijzen-charter-php .prz__info,
body.page-template-page-prijzen-charter .prz__info{
  margin-top: 28px;
}

body.page-template-page-prijzen-charter-php .prz__info__head h3,
body.page-template-page-prijzen-charter .prz__info__head h3{
  margin: 0 0 12px;
  font-size: 1.2rem;
}

body.page-template-page-prijzen-charter-php .prz__tiles,
body.page-template-page-prijzen-charter .prz__tiles{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 1100px){
  body.page-template-page-prijzen-charter-php .prz__tiles,
  body.page-template-page-prijzen-charter .prz__tiles{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 900px){
  body.page-template-page-prijzen-charter-php .prz__tiles,
  body.page-template-page-prijzen-charter .prz__tiles{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px){
  body.page-template-page-prijzen-charter-php .prz__tiles,
  body.page-template-page-prijzen-charter .prz__tiles{
    grid-template-columns: 1fr;
  }
}

body.page-template-page-prijzen-charter-php .prz__tile,
body.page-template-page-prijzen-charter .prz__tile{
  background: var(--brek-card);
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 6px 16px rgba(2,6,23,.06);
  display: flex;
  flex-direction: column;
  min-height: 160px; /* gelijkmatige hoogte */
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

body.page-template-page-prijzen-charter-php .prz__tile:hover,
body.page-template-page-prijzen-charter .prz__tile:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(2,6,23,.1);
  border-color: rgba(15,94,122,.25); /* hint naar primary */
}

body.page-template-page-prijzen-charter-php .prz__tile__icon,
body.page-template-page-prijzen-charter .prz__tile__icon{
  width: 40px; height: 40px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--brek-accent) 22%, white);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  color: #083b2a;
  margin-bottom: 8px;
}

body.page-template-page-prijzen-charter-php .prz__tile__title,
body.page-template-page-prijzen-charter .prz__tile__title{
  margin: 0 0 6px;
  font-size: 1.05rem;
  color: var(--brek-ink);
}

body.page-template-page-prijzen-charter-php .prz__tile__text,
body.page-template-page-prijzen-charter .prz__tile__text{
  margin: 0;
  color: var(--brek-mute);
  line-height: 1.45;
}

/* ===== Full-bleed blauwe band voor info-tiles ===== */
:root{
  /* optioneel: lichte bandkleur; pas aan naar je exacte Brekken-blauw */
  --brek-band: color-mix(in srgb, var(--brek-primary) 10%, white);
}

/* scope op het page template */
body.page-template-page-prijzen-charter-php .prz__info,
body.page-template-page-prijzen-charter .prz__info{
    position: relative;
    padding: 40px 0;       /* los van vorige sectie */
}

/* full-bleed achtergrond (breekt uit de .container) */
body.page-template-page-prijzen-charter-php .prz__info::before,
body.page-template-page-prijzen-charter .prz__info::before{
content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    bottom: 0;
    width: 100vw;
    z-index: -1;
    background: #f6f8fb;
}

/* optioneel: tiles iets subtieler op blauw */
body.page-template-page-prijzen-charter-php .prz__info .prz__tile,
body.page-template-page-prijzen-charter .prz__info .prz__tile{
  background: #fff;
  border-color: rgba(15,94,122,.18);
  box-shadow: 0 6px 16px rgba(2,6,23,.05);
}

/* icoonbadge iets frisser op blauw */
body.page-template-page-prijzen-charter-php .prz__info .prz__tile__icon,
body.page-template-page-prijzen-charter .prz__info .prz__tile__icon{
    background: none;
    border: 1px solid #e7e7e7;
}

/* heading spacing in de band */
body.page-template-page-prijzen-charter-php .prz__info__head h3,
body.page-template-page-prijzen-charter .prz__info__head h3{
font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    color: var(--fg);
    margin-bottom: 20px;
    margin: 0 0 .75rem;
}

/* ===== Huidig seizoen highlight ===== */
body.page-template-page-prijzen-charter-php .prz__table th.is-current,
body.page-template-page-prijzen-charter .prz__table th.is-current{
  background: color-mix(in srgb, var(--brek-accent) 22%, #f8fafc);
  color: #083b2a;
}

body.page-template-page-prijzen-charter-php .prz__table td.is-current,
body.page-template-page-prijzen-charter .prz__table td.is-current{
  background: color-mix(in srgb, var(--brek-accent) 12%, #ffffff);
  font-weight: 600;
  border-bottom-color: rgba(15,94,122,.25);
}

body.page-template-page-prijzen-charter-php .prz__legend .legend__item.is-current,
body.page-template-page-prijzen-charter .prz__legend .legend__item.is-current{
  background: color-mix(in srgb, var(--brek-primary) 10%, #f8fafc);
  border-color: rgba(15,94,122,.35);
  box-shadow: 0 4px 12px rgba(2,6,23,.06);
}