/* ──────────────────────────────────────────────────────────
 * v4-fixes.css — client-2026-05-22 UI/CSS fixes from v4 PDF
 * Targets: home H1/sub line-breaks, surf-house H1 + bouton,
 * Île nav active state, reservation hero, card hover underline,
 * conditions-surf image, surf section split images.
 * Loaded after ngor-surfcamp.min.css + polish.css → wins specificity.
 * ────────────────────────────────────────────────────────── */

/* 1. Hero sub line-control — keep word-groups together */
.hero-sub .lh-line,
.main-hero-tagline .lh-line {
  display: block;
}

/* 2-3. Surf-house & home pillars H1/H2 multi-line + Teranga orange */
.text-brand-sunset,
.h1-teranga {
  color: #f59e42 !important;
  font-style: normal;
}
.main-hero-h1 .lh-line,
.s-title .lh-line {
  display: block;
}

/* 4. Surf-house hero CTA "RÉSERVER VOTRE SÉJOUR SURF" — reduce size */
.main-hero-actions .btn-fire.btn-lg {
  padding: 14px 28px !important;
  font-size: 14px !important;
  letter-spacing: .04em;
}

/* 5. Surf-house pool/échangez section button → orange (was navy) */
.sh2-split-right .btn-navy {
  background: var(--fire, #ff5a1f) !important;
  border-color: var(--fire, #ff5a1f) !important;
  color: #fff !important;
}
.sh2-split-right .btn-navy:hover {
  filter: brightness(1.07);
}

/* 6. Home pillar cards — kill legacy .btn shine/gradient inside <a.card> */
.grid-3:has(.card-h3) > a.card,
.grid-3:has(.card-h3) > a.card:hover {
  text-decoration: none !important;
}
.grid-3:has(.card-h3) > a.card .card-cta:not(.btn-fire),
.grid-3:has(.card-h3) > a.card .btn-deep,
.grid-3:has(.card-h3) > a.card .btn.btn-deep,
.grid-3:has(.card-h3) > a.card:hover .card-cta:not(.btn-fire),
.grid-3:has(.card-h3) > a.card:hover .btn-deep {
  background: transparent !important;
  background-image: none !important;
  color: var(--fire) !important;
  box-shadow: none !important;
  border: 0 !important;
  text-decoration: none !important;
  transform: none !important;
  overflow: visible !important;
  min-height: 0 !important;
}
.grid-3:has(.card-h3) > a.card .card-body {
  overflow: visible !important;
  padding-bottom: 22px !important;
}
.grid-3:has(.card-h3) > a.card .btn-deep::before,
.grid-3:has(.card-h3) > a.card:hover .btn-deep::before {
  display: none !important;
  content: none !important;
}

/* 7. Île nav header — ensure only ONE active link.
 * The legacy /fr/ile/ HTML had Home wrongly marked active.
 * Patch in build.py rewrites the nav. As a CSS belt-and-suspenders,
 * scope .active visual to last-matched link on island pages would
 * require JS — instead we just rebuild via patch_island_hub_nav_all(). */

/* 8. Reservation header — kill any tile/repeat artefact */
.booking-header,
.booking-header--bg {
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
}

/* 11. Comment-venir Leaflet map — make sure container has a min-height
 * even if Leaflet fails to init. */
#ngor-map {
  min-height: 380px;
  background: #eef2f6;
}

/* 12. Conditions-surf "Lire les conditions surf" section split */
.sc-info-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
.sc-info-split .sc-info-media img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(7, 25, 46, .12);
  display: block;
}
@media (max-width: 768px) {
  .sc-info-split { grid-template-columns: 1fr; gap: 28px; }
}

/* 14. Mobile nav must start CLOSED (bug #13).
 * The critical-CSS inline <style> block re-declares `.nav-links{display:flex}`
 * unconditionally and, being later in source order than ngor-surfcamp.css,
 * it beats the `@media(max-width:768px){.nav-links{display:none}}` rule —
 * so the menu rendered OPEN on load even with no `.open` class / aria-expanded
 * false. v4-fixes.css loads AFTER that inline block, so an ID-scoped
 * `!important` rule restores the intended hidden-by-default behaviour.
 * JS (initHeader / window.toggleMenu) keeps toggling `.open`, aria-expanded
 * and the body scroll lock. */
@media (max-width: 768px) {
  #nav-links { display: none !important; }
  #nav-links.open { display: flex !important; }
}

/* 13. Surf page — Abu/Djib + silence sections get image slot */
.surf-story-sec .surf-story-with-img {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
.surf-story-sec .surf-story-with-img img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(7, 25, 46, .12);
  display: block;
  object-fit: cover;
}
@media (max-width: 768px) {
  .surf-story-sec .surf-story-with-img { grid-template-columns: 1fr; gap: 28px; }
}

/* 14. Surf House — Instagram editorial strip: stop the horizontal auto-scroll
 *     ("plusieurs photos qui défilent"). On desktop, contain the 6 photos in a
 *     fixed 3-col grid (no overflow-x scroll). Mobile keeps a 2-col grid. */
@media (min-width: 768px) {
  .ig-grid--editorial {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-auto-rows: 300px !important;
    overflow-x: visible !important;
    flex-wrap: wrap !important;
    scroll-snap-type: none !important;
  }
  .ig-grid--editorial .ig-cell {
    flex: initial !important;
    width: auto !important;
    height: 300px !important;
  }
}
@media (max-width: 767px) {
  .ig-grid--editorial {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: 180px !important;
    overflow-x: visible !important;
    scroll-snap-type: none !important;
  }
  .ig-grid--editorial .ig-cell { flex: initial !important; width: auto !important; height: 180px !important; }
}