/* dev.mm/assets/css/houseboats.css -- de houseboatspagina.
   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 ligplaatsen- en camperpagina
   (#11354d / #3498db / #1f964d), maar een eigen bestand: een
   wijziging aan de ene pagina hoort de andere niet stil te veranderen. */

.hb-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;
}
.hb-h2-links { text-align: left; }
/* Nederlandse samenstellingen breken niet vanzelf; op een telefoon
   loopt zo'n kop op 1.9rem het scherm uit. */
@media (max-width: 575.98px) { .hb-h2 { font-size: 1.5rem !important; } }
.hb-h2, .hb-h3 { overflow-wrap: break-word; }
.hb-h3 { font-weight: 700 !important; font-size: 1.2rem !important; color: #11354d !important; margin: 0 0 .6rem !important; }
.hb-lead { text-align: center; max-width: 46rem; margin: 0 auto 2rem; color: #5f7183 !important; }

/* ---------- hero --------------------------------------------------- */
#houseboats-banner h1 { word-break: normal; overflow-wrap: break-word; }
@media (max-width: 575.98px) {
  #houseboats-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. */
.hb-feiten { background: #11354d; padding: 1.1rem 0; margin-top: 4.5rem; }
@media (max-width: 767.98px) { .hb-feiten { margin-top: 3rem; } }
.hb-feiten ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 2rem; }
.hb-feiten li { display: flex; align-items: center; gap: .5rem; color: #fff !important; font-weight: 600; font-size: .95rem; }
.hb-feiten i { color: #4db2e8 !important; }

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

.hb-btn-green, .hb-btn-green:visited { background-color: #1f964d !important; border-color: #1f964d !important; color: #fff !important; }
.hb-btn-green:hover, .hb-btn-green:focus { background-color: #166835 !important; border-color: #166835 !important; color: #fff !important; }

.hb-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) { .hb-foto { height: 240px; } }

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

.hb-boten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
@media (min-width: 768px) { .hb-boten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } }

.hb-boot { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid #e2e8ef; border-radius: .7rem; box-shadow: 0 6px 20px rgba(15,27,45,.07); }
.hb-boot-fotos { position: relative; }
.hb-boot-cover { display: block; position: relative; }
.hb-boot-foto { width: 100%; height: 220px; object-fit: cover; display: block; background: #eef3f7; transition: transform .35s ease; }
.hb-boot-cover:hover .hb-boot-foto { transform: scale(1.03); }

/* Het aantal foto's als teken dat er meer achter zit; zonder dat weet
   niemand dat die kaart iets doet als je erop klikt. */
.hb-boot-badge {
  position: absolute; right: .7rem; bottom: .7rem;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .7rem; border-radius: 999px;
  background: rgba(9, 28, 44, .78); color: #fff !important;
  font-size: .8rem; font-weight: 600; backdrop-filter: blur(2px);
}
.hb-boot-cover:focus-visible { outline: 3px solid #154f7d; outline-offset: -3px; }

.hb-boot-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 1.2rem 1.3rem 1.3rem; }
.hb-boot h3 { font-size: 1.15rem !important; font-weight: 700 !important; color: #11354d !important; margin: 0 0 .2rem !important; }
.hb-pax { display: inline-flex; align-items: center; gap: .4rem; align-self: flex-start; font-size: .85rem; font-weight: 600; color: #17567f !important; margin-bottom: .7rem; }
.hb-boot-sfeer { font-size: .95rem; line-height: 1.5; color: #46586a !important; margin: 0 0 .8rem; }

/* Het is een knop, geen link: hem laten lijken op de rest. */
.hb-boot-link { background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; align-self: flex-start; margin-top: auto; padding-top: 1rem; font-weight: 700; font-size: .9rem; color: #17567f !important; text-decoration: none !important; }
.hb-boot-link i { transition: transform .22s; }
.hb-boot-link:focus-visible { outline: 3px solid #154f7d; outline-offset: 3px; }
.hb-boot:hover .hb-boot-link i { transform: scale(1.12); }

/* ---------- pluspunten per boot ------------------------------------ */
.hb-check { list-style: none; padding: 0; margin: 0; }
.hb-check li { position: relative; padding-left: 1.5rem; margin: .4rem 0; font-size: .89rem; line-height: 1.45; color: #11354d !important; }
.hb-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;
}

/* ---------- kaartenraster (voorzieningen en omgeving) -------------- */
.hb-kaarten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 576px) { .hb-kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .hb-kaarten { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
.hb-kaart { background: #fff; border: 1px solid #e2e8ef; border-radius: .7rem; padding: 1.4rem; box-shadow: 0 6px 20px rgba(15,27,45,.06); }
.hb-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; }
.hb-kaart h3 { font-size: 1.05rem !important; font-weight: 700 !important; color: #11354d !important; margin: 0 0 .35rem !important; }
.hb-kaart p { font-size: .9rem; line-height: 1.45; color: #5f7183 !important; margin: 0; }

/* ---------- voorzieningenlijst ------------------------------------- */
/* Komt rechtstreeks uit het dashboard, dus de lijst groeit vanzelf
   mee.  Daarom compacte chips en geen kaarten. */
.hb-vz-kop { text-align: center; margin: 2.6rem 0 1rem !important; }
.hb-vzlijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
@media (min-width: 768px) { .hb-vzlijst { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .hb-vzlijst { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hb-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; }
.hb-vzlijst i { flex: 0 0 1.1rem; text-align: center; color: #17567f !important; font-size: .95rem; }

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

/* ---------- goed om te weten --------------------------------------- */
.hb-prak { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 768px) { .hb-prak { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } }
.hb-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); }
.hb-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 dit duwt een lange term de kaart
   buiten het scherm op mobiel. */
.hb-prak-kaart > div { min-width: 0; overflow-wrap: anywhere; }
.hb-prak-kaart h3 { font-size: 1.02rem !important; font-weight: 700 !important; color: #11354d !important; margin: 0 0 .3rem !important; }
.hb-prak-kaart p { font-size: .89rem; line-height: 1.5; color: #5f7183 !important; margin: 0; }

/* ---------- afsluitende oproep ------------------------------------- */
.hb-bellen { margin: 1rem 0 0; }
.hb-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. */
.hb-merk { display: block; width: 42px; height: 42px; margin: 0 0 .9rem; border-radius: .4rem; }
.hb-merk-midden { margin: 0 auto .9rem; }