/* dev.mm/assets/css/camperplaats.css -- de camperplaatsenpagina.
   Wordt NA _incl_css_js.php geladen; style.css wint anders het
   gelijkspel op koppen, knoppen en tekstkleuren.  Daarom staan
   kleuren en groottes hier met !important.

   Zelfde merkkleuren als de ligplaatsenpagina (#11354d / #3498db /
   #1f964d), maar een eigen bestand: een wijziging aan de ene pagina
   hoort de andere niet stil te veranderen. */

.cp-h2 {
  text-align: center; font-weight: 600 !important;
  font-size: 1.9rem !important; line-height: 1.2 !important;
  color: #11354d !important; margin: 0 0 .6rem !important;
}
.cp-h2-links { text-align: left; }
/* Nederlandse samenstellingen ("reserveringsinformatie") zijn een woord
   en breken dus niet.  Op een telefoon loopt zo'n kop op 1.9rem het
   scherm uit; kleiner zetten en desnoods afbreken lost dat op. */
@media (max-width: 575.98px) { .cp-h2 { font-size: 1.5rem !important; } }
.cp-h2, .cp-h3 { overflow-wrap: break-word; }
.cp-h3 { font-weight: 700 !important; font-size: 1.2rem !important; color: #11354d !important; margin: 0 0 .6rem !important; }
.cp-lead { text-align: center; max-width: 46rem; margin: 0 auto 2rem; color: #5f7183 !important; }

/* ---------- hero ------------------------------------------------- */
/* maastrichtmarina.css zet h1 op word-break: break-all, en dan breekt
   "Camperplaatsen" midden in het woord af.  Normaal afbreken herstelt
   dat; op een telefoon staat hij daarnaast wat kleiner zodat het woord
   op een regel past. */
#camperplaatsen-banner h1 { word-break: normal; overflow-wrap: break-word; }
@media (max-width: 575.98px) {
  #camperplaatsen-banner h1 { font-size: 1.8rem !important; line-height: 1.25 !important; }
}

/* ---------- feitenstrip ------------------------------------------- */
/* De hero eindigt met margin-bottom:-20px; zonder eigen marge plakt
   deze balk daar tegenaan. */
.cp-feiten { background: #11354d; padding: 1.1rem 0; margin-top: 4.5rem; }
@media (max-width: 767.98px) { .cp-feiten { margin-top: 3rem; } }
.cp-feiten ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 2rem; }
.cp-feiten li { display: flex; align-items: center; gap: .5rem; color: #fff !important; font-weight: 600; font-size: .95rem; }
.cp-feiten i { color: #4db2e8 !important; }

/* ---------- introductie ------------------------------------------- */
.cp-intro-p { font-size: 1.02rem; line-height: 1.6; color: #46586a !important; margin-bottom: 1rem; }
.cp-knoppen { display: flex; flex-wrap: wrap; gap: .6rem; }
.cp-knoppen .btn { padding: .65rem 1.3rem; font-weight: 700; }
@media (max-width: 420px) { .cp-knoppen .btn { flex: 1 1 100%; text-align: center; } }

.cp-btn-green, .cp-btn-green:visited { background-color: #1f964d !important; border-color: #1f964d !important; color: #fff !important; }
.cp-btn-green:hover, .cp-btn-green:focus { background-color: #166835 !important; border-color: #166835 !important; color: #fff !important; }
.cp-btn-blue, .cp-btn-blue:visited { background-color: #154f7d !important; border-color: #154f7d !important; color: #fff !important; padding: .65rem 1.3rem; font-weight: 700; }
.cp-btn-blue:hover, .cp-btn-blue:focus { background-color: #0e3a5c !important; border-color: #0e3a5c !important; color: #fff !important; }

.cp-foto { width: 100%; height: 340px; object-fit: cover; border-radius: .7rem; box-shadow: 0 10px 28px rgba(15,27,45,.14); }
@media (max-width: 991.98px) { .cp-foto { height: 240px; } }

/* ---------- tarieven direct onder de introductie ------------------ */
/* Ze horen bij hetzelfde verhaal, dus geen eigen sectie met eigen
   achtergrond -- alleen lucht en een dunne scheiding. */
.cp-tar-blok { margin-top: 2.8rem; padding-top: 2.4rem; border-top: 1px solid #e6ecf2; }

/* ---------- kaartenraster (voorzieningen en omgeving) ------------- */
.cp-kaarten { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 576px) { .cp-kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .cp-kaarten { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
.cp-kaart { background: #fff; border: 1px solid #e2e8ef; border-radius: .7rem; padding: 1.4rem; box-shadow: 0 6px 20px rgba(15,27,45,.06); }
.cp-kaart-ic { display: inline-flex; width: 2.6rem; height: 2.6rem; border-radius: .6rem; align-items: center; justify-content: center; background: #eaf4fb; color: #17567f !important; font-size: 1.05rem; margin-bottom: .8rem; }
.cp-kaart h3 { font-size: 1.05rem !important; font-weight: 700 !important; color: #11354d !important; margin: 0 0 .35rem !important; }
.cp-kaart p { font-size: .9rem; line-height: 1.45; color: #5f7183 !important; margin: 0; }

/* ---------- banner ------------------------------------------------ */
.cp-banner { background-size: cover; background-position: center; background-attachment: fixed; height: 340px; margin: 0; }
@media (max-width: 767.98px) { .cp-banner { background-attachment: scroll; height: 240px; } }

/* ---------- goed om te weten -------------------------------------- */
.cp-prak { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .cp-prak { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } }
.cp-prak-kaart { display: flex; gap: 1rem; align-items: flex-start; background: #fff; border: 1px solid #e2e8ef; border-radius: .7rem; padding: 1.3rem 1.4rem; box-shadow: 0 6px 20px rgba(15,27,45,.06); }
.cp-prak-ic { flex: 0 0 2.4rem; height: 2.4rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #eaf4fb; color: #17567f !important; font-size: 1rem; }
/* Een flex-kind mag standaard niet kleiner worden dan zijn langste
   woord (min-width: auto).  Zonder deze regel duwt een lange term de
   kaart een paar pixels buiten het scherm op mobiel. */
.cp-prak-kaart > div { min-width: 0; overflow-wrap: anywhere; }
.cp-prak-kaart h3 { font-size: 1.02rem !important; font-weight: 700 !important; color: #11354d !important; margin: 0 0 .3rem !important; }
.cp-prak-kaart p { font-size: .89rem; line-height: 1.5; color: #5f7183 !important; margin: 0; }

/* ---------- tarieven ---------------------------------------------- */
.cp-tar { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 992px) { .cp-tar { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; } }

.cp-tar-kaart { background: #fff; border: 1px solid #e2e8ef; border-radius: .7rem; padding: 1.4rem; box-shadow: 0 6px 20px rgba(15,27,45,.07); }
.cp-tar-rij { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; padding: .85rem 0; border-bottom: 1px solid #eef2f6; }
.cp-tar-rij:last-child { border-bottom: 0; padding-bottom: 0; }
.cp-tar-rij:first-of-type { padding-top: 0; }
.cp-tar-per { color: #46586a !important; font-size: .95rem; font-weight: 600; }
.cp-tar-per small { display: block; font-weight: 400; font-size: .8rem; color: #7b8a99 !important; margin-top: .1rem; }
.cp-tar-bedrag { color: #11354d !important; font-size: 1.55rem; font-weight: 700; line-height: 1; white-space: nowrap; }
.cp-tar-bedrag small { font-size: .78rem; font-weight: 400; color: #6b7d8e !important; margin-left: .25rem; }

.cp-vanaf { display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; margin: 0 0 1rem; }
.cp-vanaf span { color: #5f7183 !important; font-size: .85rem; }
.cp-vanaf strong { color: #11354d !important; font-size: 2rem; font-weight: 700; line-height: 1; }

.cp-check { list-style: none; padding: 0; margin: 0; }
.cp-check li { position: relative; padding-left: 1.5rem; margin: .45rem 0; font-size: .92rem; line-height: 1.45; color: #11354d !important; }
.cp-check li:before {
  content: "\f00c"; font-family: "Font Awesome 6 Free", "Font Awesome 5 Free"; font-weight: 900;
  position: absolute; left: 0; top: .18rem; color: #1f964d !important; font-size: .75rem;
}

/* Toeslag voor de lange campers: hoort visueel aan de tarievenkaart
   vast, zodat niemand hem als losse voetnoot mist. */
.cp-balk {
  display: flex; gap: .6rem; align-items: flex-start;
  margin: 0 !important; padding: .85rem 1.3rem !important;
  border: 1px solid #cfe1ee; border-top: 0; border-radius: 0 0 .7rem .7rem;
  background: #e4f0f8; box-shadow: 0 6px 20px rgba(15,27,45,.07);
  font-size: .88rem; line-height: 1.45; color: #29506d !important;
}
.cp-balk i { margin-top: .2rem; color: #3498db !important; }
.cp-tar-kaart.heeft-balk { border-radius: .7rem .7rem 0 0; }

/* ---------- afsluitende oproep ------------------------------------ */
.cp-cta-in { margin-top: 2.5rem; padding-top: 2.2rem; border-top: 1px solid #dfe7ee; }
.cp-cta-in .cp-merk { margin: 0 auto .9rem; }
.cp-bellen { margin: 1rem 0 0; }
.cp-bellen a { color: #17567f !important; font-weight: 600; }

/* ---------- merkteken --------------------------------------------- */
/* Het vierkant uit het logo, zodat deze pagina zichtbaar bij de rest
   hoort.  Klein en rustig: het is een accent, geen tweede logo. */
.cp-merk { display: block; width: 42px; height: 42px; margin: 0 0 .9rem; border-radius: .4rem; }
.cp-merk-midden { margin: 0 auto .9rem; }

/* .cp-h3 zet margin met !important en wint daarmee van Bootstrap's
   mt-5; deze tussenkop heeft de ruimte boven de lijst dus zelf nodig. */
.cp-vz-kop { text-align: center; margin: 2.6rem 0 1rem !important; }

/* ---------- voorzieningenlijst ------------------------------------ */
/* Komt rechtstreeks uit het dashboard (zone_amenity), dus de lijst
   groeit vanzelf mee.  Daarom compacte chips en geen kaarten: bij
   twintig voorzieningen worden kaarten een tweede pagina. */
.cp-vzlijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
@media (min-width: 768px) { .cp-vzlijst { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .cp-vzlijst { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cp-vzlijst li { display: flex; align-items: center; gap: .6rem; min-width: 0; overflow-wrap: anywhere; padding: .6rem .8rem; background: #fff; border: 1px solid #e2e8ef; border-radius: .5rem; font-size: .88rem; line-height: 1.3; color: #11354d !important; }
.cp-vzlijst i { flex: 0 0 1.1rem; text-align: center; color: #17567f !important; font-size: .95rem; }

/* ---------- kleine noot onder de tarieven ------------------------- */
.cp-tar-note { font-size: .85rem; line-height: 1.5; color: #6b7d8e !important; }