/*
 * Brovad Sands Lodge — inner page templates.
 *
 * Scoped additions only. Every selector here is either a `.bsl-` class owned by
 * this file, or a modifier on `.page-hero` (`.has-crumbs`). style.css is not
 * touched and none of its rules are overridden wholesale.
 *
 * Palette tokens come from style.css :root — the client's five Lagoon colours
 * (--cobalt #0080A8, --lagoon #00A8B8, --aqua #40C8CC, --seafoam #90E0DA,
 * --whitecap #D8F5F2) plus two derived tones: --ink #07303C for text and dark
 * surfaces, and --cobalt-deep #00607D for UI. Nothing puts white on --lagoon,
 * --aqua, --seafoam or --whitecap: they are 2.88:1 and below.
 *
 * Stacking contract: the fixed header is z-index 100 and the mobile nav drawer
 * is z-index 200. Nothing in this file goes above 90.
 */

/* ==========================================================================
   1. Breadcrumbs
   ========================================================================== */

.bsl-crumbs {
  background: var(--light);
  padding: 118px 0 0;
}

.bsl-crumbs-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--head);
  font-weight: 300;
  font-size: 13px;
  letter-spacing: .3px;
  color: var(--grey);
}

.bsl-crumb {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.bsl-crumb a {
  color: var(--grey);
  border-bottom: 1px solid transparent;
  transition: .25s;
}

.bsl-crumb a:hover,
.bsl-crumb a:focus-visible {
  color: var(--ocean-deep);
  border-bottom-color: var(--ocean-deep);
}

.bsl-crumb-sep {
  color: var(--sand);
}

.bsl-crumb.is-current span {
  color: var(--dark);
}

/* The hero already clears the fixed header on its own. When breadcrumbs are
   printed above it, they do the clearing instead. */
.page-hero.has-crumbs {
  padding-top: 26px;
}

/* ==========================================================================
   2. Shared section furniture
   ========================================================================== */

.bsl-section-title {
  font-family: var(--head);
  font-weight: 200;
  font-size: 34px;
  line-height: 1.25;
  color: var(--dark);
  margin: 0 0 34px;
}

.bsl-cards-section,
.bsl-specs,
.bsl-points,
.bsl-inclusions,
.bsl-routes,
.bsl-faq {
  padding: 70px 0;
}

.bsl-cards-section + .bsl-cards-section,
.bsl-specs + .bsl-cards-section {
  padding-top: 0;
}

.bsl-related {
  background: var(--ivory);
}

.bsl-back {
  margin: 38px 0 0;
  font-family: var(--head);
  font-weight: 300;
  font-size: 14px;
}

.bsl-back a {
  color: var(--ocean-deep);
  border-bottom: 1px solid var(--ocean-deep);
  padding-bottom: 2px;
}

.bsl-back a:hover {
  opacity: .75;
}

/* ==========================================================================
   3. Cards
   ========================================================================== */

.bsl-cards {
  display: grid;
  gap: 34px;
}

.bsl-cards-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bsl-cards-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bsl-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(41, 39, 35, .07);
  transition: box-shadow .3s ease, transform .3s ease;
}

.bsl-card:hover {
  box-shadow: 0 8px 26px rgba(41, 39, 35, .13);
  transform: translateY(-3px);
}

.bsl-card-flat {
  background: transparent;
  box-shadow: none;
}

.bsl-card-flat:hover {
  box-shadow: none;
  transform: none;
}

.bsl-card-media {
  display: block;
  overflow: hidden;
  background: var(--ivory);
}

.bsl-card-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .35s ease;
}

.bsl-card:hover .bsl-card-media img {
  transform: scale(1.04);
}

.bsl-card-media-empty {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--ivory);
  border: 1px solid var(--line);
}

.bsl-card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 24px 28px;
}

.bsl-card-flat .bsl-card-body {
  padding: 22px 0 0;
}

.bsl-card-title {
  font-family: var(--head);
  font-weight: 300;
  font-size: 21px;
  line-height: 1.35;
  color: var(--dark);
  margin: 0;
}

.bsl-card-title a:hover {
  color: var(--ocean-deep);
}

.bsl-card-body p {
  font-size: 14.5px;
  line-height: 1.7;
  color: #45413A;
  font-weight: 300;
  margin: 0;
}

.bsl-card-meta {
  font-family: var(--head);
  font-size: 13px !important;
  letter-spacing: .4px;
  color: var(--grey) !important;
}

.bsl-card-link {
  margin-top: auto;
  align-self: flex-start;
  font-family: var(--head);
  font-weight: 300;
  font-size: 13.5px;
  letter-spacing: .6px;
  color: var(--ocean-deep);
  border-bottom: 1px solid var(--ocean-deep);
  padding-bottom: 2px;
  transition: .25s;
}

.bsl-card-link:hover {
  opacity: .75;
}

/* ==========================================================================
   4. Room specification rows
   ========================================================================== */

.bsl-specs {
  background: var(--ivory);
}

.bsl-spec-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--line);
}

.bsl-spec-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 30px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

.bsl-spec-row:first-child {
  border-left: 1px solid var(--line);
}

.bsl-spec-row dt {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--head);
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--grey);
}

.bsl-spec-ico svg {
  width: 30px;
  height: 30px;
  stroke: var(--ocean-deep);
  fill: none;
  stroke-width: 1.1;
  display: block;
}

.bsl-spec-row dd {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  font-weight: 300;
  color: var(--dark);
}

/* ==========================================================================
   5. Occasion highlight points
   ========================================================================== */

.bsl-points-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 34px;
}

.bsl-point {
  padding: 30px 30px 32px;
  background: var(--ivory);
  border-radius: 6px;
  border-left: 3px solid var(--coral);
}

.bsl-point h3 {
  font-family: var(--head);
  font-weight: 300;
  font-size: 19px;
  line-height: 1.35;
  color: var(--dark);
  margin: 0 0 10px;
}

.bsl-point p {
  font-size: 15px;
  line-height: 1.7;
  color: #45413A;
  font-weight: 300;
  margin: 0;
}

/* ==========================================================================
   6. Offer inclusions
   ========================================================================== */

.bsl-inclusion-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px 40px;
  max-width: 960px;
}

.bsl-inclusion-list li {
  position: relative;
  padding-left: 28px;
  font-size: 16px;
  line-height: 1.7;
  font-weight: 300;
  color: #45413A;
}

.bsl-inclusion-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 11px;
  width: 8px;
  height: 8px;
  background: var(--ocean-deep);
  transform: rotate(45deg);
}

.bsl-inclusion-list li.is-todo {
  color: var(--grey);
  font-style: italic;
}

/* ==========================================================================
   7. Getting here — routes
   ========================================================================== */

.bsl-routes-note {
  max-width: 860px;
  margin: 0 0 36px;
  padding: 26px 30px;
  background: var(--ivory);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
}

.bsl-routes-note p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.75;
  font-weight: 300;
  color: #45413A;
}

.bsl-route-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 40px;
}

.bsl-route-chip {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 10px 22px;
  font-family: var(--head);
  font-weight: 300;
  font-size: 13.5px;
  letter-spacing: .4px;
  color: var(--dark);
  background: #fff;
  transition: .25s;
}

.bsl-route-chip:hover,
.bsl-route-chip:focus-visible {
  background: var(--ocean);
  border-color: var(--ocean);
  color: var(--dark);
}

.bsl-route-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 26px;
}

.bsl-route-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px 32px 30px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  scroll-margin-top: 110px;
}

.bsl-route-title {
  font-family: var(--head);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.3;
  color: var(--dark);
  margin: 0;
}

.bsl-route-lead {
  margin: 0;
  font-family: var(--head);
  font-weight: 300;
  font-size: 13.5px;
  letter-spacing: .4px;
  color: var(--ocean-deep);
}

.bsl-route-body {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.75;
  font-weight: 300;
  color: #45413A;
}

.bsl-route-verified {
  margin: 8px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--head);
  font-weight: 300;
  font-size: 12.5px;
  letter-spacing: .4px;
  color: var(--grey);
}

.bsl-route-verified-label {
  text-transform: uppercase;
  letter-spacing: 1px;
}

.bsl-route-card.is-unconfirmed .bsl-route-verified-value {
  color: var(--coral-ink);
}

.bsl-route-ask {
  margin-top: auto;
  padding-top: 16px;
  align-self: flex-start;
  font-family: var(--head);
  font-weight: 300;
  font-size: 13.5px;
  letter-spacing: .6px;
  color: var(--ocean-deep);
}

.bsl-route-ask:hover {
  opacity: .75;
}

/* ==========================================================================
   8. Page FAQ accordion
   (reuses .faq-item / .faq-q / .faq-a from style.css so main.js drives it)
   ========================================================================== */

.bsl-faq {
  background: var(--ivory);
}

.bsl-faq-list {
  max-width: 860px;
}

/* ==========================================================================
   9. Contextual CTA band
   ========================================================================== */

/* Palm Green rather than a third ocean surface: this band often sits a screen below
   the ocean header. White on palm is 5.27:1. */
.bsl-cta {
  background: var(--palm);
  padding: 74px 0;
  color: #fff;
}

.bsl-cta-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.bsl-cta-copy {
  max-width: 660px;
}

.bsl-cta h2 {
  font-family: var(--head);
  font-weight: 200;
  font-size: 34px;
  line-height: 1.25;
  color: #fff;
  margin: 0 0 12px;
}

.bsl-cta p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  font-weight: 300;
  color: rgba(255, 255, 255, .92);
}

.bsl-cta-btn {
  flex-shrink: 0;
}

/* ==========================================================================
   10. Sticky enquiry bar
   ========================================================================== */

.bsl-bookbar {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 90;
  /* Deep lake water at dusk. The charcoal this replaces was a leftover from
     the donor template and belonged to no part of the palette: it read as a
     browser chrome bar sitting under the header rather than as part of the
     lodge. The gradient runs --ink into --cobalt-deep, so the right-hand end
     meets the inner-page header (--ocean-deep) exactly while the left sinks
     deeper, and the seafoam hairline along the bottom edge catches light the
     way a waterline does. Alpha plus a saturating blur keeps the page moving
     underneath it instead of being blocked out. */
  background: linear-gradient(103deg, rgba(7, 48, 60, .96) 0%, rgba(0, 96, 125, .96) 100%);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid rgba(144, 224, 218, .34);
  box-shadow: 0 12px 34px rgba(7, 48, 60, .26);
  color: #fff;
  transform: translateY(-100%);
  transition: transform .35s ease, opacity .35s ease;
  opacity: 0;
  pointer-events: none;
}

.bsl-bookbar[hidden] {
  display: none;
}

.bsl-bookbar.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* The mobile nav drawer is z-index 200 and covers the whole viewport. While it
   is open the bar must not sit under it, over it, or anywhere near it. */
body.nav-open .bsl-bookbar,
html.nav-open .bsl-bookbar {
  display: none !important;
}

.bsl-bookbar-in {
  max-width: 1260px;
  margin: 0 auto;
  padding: 12px 40px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
}

.bsl-bookbar-text {
  font-family: var(--head);
  font-weight: 300;
  font-size: 14px;
  letter-spacing: .4px;
  color: rgba(255, 255, 255, .9);
}

.bsl-bookbar-btn {
  display: inline-block;
  background: var(--coral);
  color: var(--dark);
  border-radius: 24px;
  padding: 11px 30px;
  font-family: var(--head);
  font-weight: 300;
  font-size: 14px;
  letter-spacing: .6px;
  white-space: nowrap;
  transition: background .3s ease;
}

.bsl-bookbar-btn:hover,
.bsl-bookbar-btn:focus-visible {
  background: var(--coral-d);
}

/* The fixed header owns the top of the viewport on desktop, so the bar sits
   directly beneath it. */
.bsl-bookbar {
  top: 78px;
}

body.admin-bar .bsl-bookbar {
  top: 110px;
}

/* ==========================================================================
   11. Responsive
   ========================================================================== */

@media (max-width: 1024px) {

  .bsl-cards-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bsl-spec-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {

  .page-hero.has-crumbs {
    padding-top: 20px;
  }

  .bsl-cta-in {
    align-items: flex-start;
  }
}

@media (max-width: 768px) {

  .bsl-crumbs {
    padding-top: 100px;
  }

  .bsl-crumbs-list {
    font-size: 12.5px;
  }

  .bsl-cards-2,
  .bsl-cards-3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .bsl-spec-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .bsl-spec-row,
  .bsl-spec-row:first-child {
    border-left: 1px solid var(--line);
  }

  .bsl-section-title,
  .bsl-cta h2 {
    font-size: 28px;
  }

  .bsl-cards-section,
  .bsl-specs,
  .bsl-points,
  .bsl-inclusions,
  .bsl-routes,
  .bsl-faq {
    padding: 50px 0;
  }

  .bsl-route-card {
    padding: 26px 24px 24px;
  }

  /* Bottom-stuck on mobile: the header is out of the way and the thumb is not. */
  .bsl-bookbar,
  body.admin-bar .bsl-bookbar {
    top: auto;
    bottom: 0;
    transform: translateY(100%);
    /* Bar rises from the bottom here, so the waterline hairline and the lift
       shadow both flip with it. */
    border-bottom: 0;
    border-top: 1px solid rgba(144, 224, 218, .34);
    box-shadow: 0 -12px 34px rgba(7, 48, 60, .26);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .bsl-bookbar.is-visible {
    transform: translateY(0);
  }

  .bsl-bookbar-in {
    padding: 10px 20px;
    justify-content: space-between;
    gap: 14px;
  }

  .bsl-bookbar-text {
    display: none;
  }

  .bsl-bookbar-btn {
    width: 100%;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {

  .bsl-bookbar,
  .bsl-card,
  .bsl-card-media img {
    transition: none !important;
  }

  .bsl-card:hover {
    transform: none;
  }

  .bsl-card:hover .bsl-card-media img {
    transform: none;
  }
}

/* Kicker on the light hero band: --ocean-deep measures 4.64:1 there and --ocean-ink
   6.88:1, so the inner-page hero keeps the darker of the two. */
.page-hero .kicker,.bsl-hero .kicker{color:var(--ocean-ink)}

/* ==========================================================================
   12. Page media bands  (template-parts/page-media.php)

   A band is injected at the top of `.page-content` by the `the_content`
   filter, so it lives inside the 820px reading column. It widens itself back
   out to the column's full box with a negative margin equal to the column's
   own padding — a fixed pixel value, never a vw unit, because a viewport-width
   breakout inside a scrolled page is exactly how horizontal overflow gets
   reintroduced.
   ========================================================================== */

.bsl-page-media {
  margin: 0 -40px 40px;
}

.bsl-page-media-lead {
  margin-top: -12px;
}

.bsl-page-media-figure {
  margin: 0;
}

.bsl-page-media-img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 460px;
  object-fit: cover;
  border-radius: 4px;
}

.bsl-page-media-caption {
  font-family: var(--body);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.6;
  color: var(--grey);
  padding-top: 10px;
}

.bsl-page-media-duo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.bsl-page-media-duo .bsl-page-media-img {
  aspect-ratio: 4 / 3;
  max-height: none;
}

/* The journal band sits in `.post-grid`, or on its own in `.wrap` when there
   are no posts yet. `grid-column` is inert in the second case. */
.bsl-page-media-journal {
  grid-column: 1 / -1;
  margin: 0 0 20px;
}

/* ==========================================================================
   13. Gallery  (template-gallery.php)

   Multi-column rather than a fixed grid: photographs here run portrait and
   landscape and letterboxed, and a uniform cell would crop the tall ones to
   nothing. Columns keep every frame whole at its own aspect ratio.
   ========================================================================== */

.bsl-gal-nav {
  padding: 0 0 10px;
}

.bsl-gal-nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  list-style: none;
  margin: 0;
  padding: 0 0 26px;
  border-bottom: 1px solid var(--line);
  font-family: var(--head);
  font-weight: 300;
  font-size: 14px;
  letter-spacing: .3px;
}

.bsl-gal-nav-list a {
  color: var(--grey);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: .25s;
}

.bsl-gal-nav-list a:hover,
.bsl-gal-nav-list a:focus-visible {
  color: var(--ocean-deep);
  border-bottom-color: var(--ocean-deep);
}

.bsl-gal-section {
  padding: 54px 0 0;
}

.bsl-gal-section:last-of-type {
  padding-bottom: 20px;
}

.bsl-gal-section .bsl-section-title {
  margin-bottom: 26px;
  scroll-margin-top: 100px;
}

.bsl-gal-grid {
  columns: 4;
  column-gap: 14px;
}

.bsl-gal-item {
  display: block;
  width: 100%;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 4px;
  overflow: hidden;
  cursor: zoom-in;
  position: relative;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}

.bsl-gal-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  transition: transform .5s ease, opacity .3s ease;
}

.bsl-gal-item:hover .bsl-gal-img {
  transform: scale(1.04);
  opacity: .92;
}

.bsl-gal-item:focus-visible {
  outline: 2px solid var(--ocean-deep);
  outline-offset: 3px;
}

/* ---- Lightbox --------------------------------------------------------- */

/* z-index 300 is a deliberate exception to this file's "nothing above 90"
   rule. A modal that the fixed header (100) or the mobile drawer (200) can
   paint over is not a modal. Nothing else added here goes above 2. */
.bsl-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  opacity: 0;
  transition: opacity .25s ease;
}

.bsl-lightbox[hidden] {
  display: none;
}

.bsl-lightbox.is-open {
  opacity: 1;
}

.bsl-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(41, 39, 35, .92);
  cursor: zoom-out;
}

.bsl-lightbox-panel {
  position: relative;
  z-index: 1;
  max-width: 1024px;
  width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bsl-lightbox-figure {
  margin: 0;
  max-width: 100%;
  text-align: center;
}

.bsl-lightbox-img {
  max-width: 100%;
  max-height: 74vh;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 4px;
  opacity: 0;
  transition: opacity .3s ease;
}

.bsl-lightbox-img.is-loaded {
  opacity: 1;
}

.bsl-lightbox-caption {
  font-family: var(--body);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ivory);
  max-width: 760px;
  margin: 16px auto 0;
  padding: 0 4px;
}

.bsl-lightbox-close,
.bsl-lightbox-nav {
  position: absolute;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(246, 238, 223, .3);
  border-radius: 50%;
  background: rgba(41, 39, 35, .6);
  color: var(--ivory);
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease;
}

.bsl-lightbox-close:hover,
.bsl-lightbox-nav:hover {
  background: var(--ocean-deep);
  border-color: var(--ocean-deep);
}

.bsl-lightbox-close:focus-visible,
.bsl-lightbox-nav:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.bsl-lightbox-close svg,
.bsl-lightbox-nav svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bsl-lightbox-close {
  top: -52px;
  right: 0;
}

.bsl-lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
}

.bsl-lightbox-nav[hidden] {
  display: none;
}

.bsl-lightbox-prev {
  left: -56px;
}

.bsl-lightbox-next {
  right: -56px;
}

body.bsl-lightbox-open {
  overflow: hidden;
}

/* ==========================================================================
   14. Responsive — media bands and gallery
   ========================================================================== */

@media (max-width: 1180px) {

  .bsl-gal-grid {
    columns: 3;
  }

  .bsl-lightbox-prev {
    left: 8px;
  }

  .bsl-lightbox-next {
    right: 8px;
  }
}

/* 820px, not 768px: a media query is evaluated against the viewport including
   its scrollbar, so a 768px tablet reports 768 here while `clientWidth` reads
   758. A breakpoint set at 760 would leave that tablet on three columns. */
@media (max-width: 820px) {

  .bsl-gal-grid {
    columns: 2;
    column-gap: 10px;
  }

  .bsl-gal-item {
    margin-bottom: 10px;
  }

  .bsl-gal-section {
    padding-top: 40px;
  }

  .bsl-gal-nav-list {
    gap: 8px 18px;
    font-size: 13px;
    padding-bottom: 20px;
  }

  .bsl-lightbox {
    padding: 64px 16px 24px;
  }

  .bsl-lightbox-close {
    top: -50px;
    right: 0;
  }

  .bsl-lightbox-img {
    max-height: 62vh;
  }

  .bsl-lightbox-caption {
    font-size: 13px;
  }
}

/* style.css drops `.page-content` and `.wrap` to 20px side padding at exactly
   700px, so the band's negative-margin breakout has to change at the same
   breakpoint — a wider one would push the page 20px past the viewport, which
   is precisely how horizontal overflow keeps getting reintroduced here. The
   two-up stacks at the same point: half of a 350px column is not a picture. */
@media (max-width: 700px) {

  .bsl-page-media {
    margin: 0 -20px 30px;
  }

  .bsl-page-media-duo {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .bsl-page-media-duo .bsl-page-media-img {
    aspect-ratio: 16 / 10;
  }

  .bsl-page-media-img {
    border-radius: 0;
    max-height: 300px;
  }

  .bsl-page-media-caption {
    padding: 10px 20px 0;
  }

  .bsl-page-media-journal {
    margin: 0 0 16px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .bsl-lightbox,
  .bsl-lightbox-img,
  .bsl-lightbox-close,
  .bsl-lightbox-nav,
  .bsl-gal-img {
    transition: none !important;
  }

  .bsl-lightbox-img {
    opacity: 1;
  }

  .bsl-gal-item:hover .bsl-gal-img {
    transform: none;
  }
}

/* ==========================================================================
   14. FRONT PAGE — section layout for the restructured homepage
   ==========================================================================

   Ownership note. This block is LAYOUT for the front-page sections only:
   boxes, grids, type and colour. The motion system (.reveal, .reveal-mask,
   .reveal-stagger, .parallax, .zoom-in, .pin-section/.pin-track, .hscroll,
   .kb-hero/.kb-slide) is implemented in assets/css/motion.css and nothing
   here re-implements any of it.

   Two deliberate exceptions, both explained where they appear:
     - the .kb-slide / .pin-track / .hscroll structural fallbacks below are
       written with :where(), which has ZERO specificity, so any rule in
       motion.css overrides them without a fight. They exist so the hero,
       the pinned rooms and the sideways gallery are still laid out and
       still usable if the motion layer is absent — never so they win.
     - .bsl-fp-route draws itself on scroll. The class contract has no
       line-draw hook and element 7 requires one, so it lives here, scoped
       to this one selector, driven by a CSS view timeline (no JS, no scroll
       listener) and switched off entirely under reduced motion.

   Everything new is prefixed .bsl-fp- so it cannot collide with the gallery
   page's .bsl-gal-* rules above.
   ========================================================================== */

/* --------------------------------------------------------------------------
   14.1 Hero — Ken Burns still sequence
   -------------------------------------------------------------------------- */

/* Zero-specificity fallback: motion.css owns .kb-slide. Without these the
   hero would have no full-bleed media layer at all if motion.css failed to
   load; with them, the first still shows and the rest stay behind it. */
:where(.kb-hero) {
  position: relative;
  overflow: hidden;
}

:where(.kb-hero) :where(.kb-slide) {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
}

:where(.kb-hero) :where(.kb-slide.on) {
  opacity: 1;
}

/* Drop-in slot for real footage later — see the comment in front-page.php. */
:where(.kb-hero) :where(.kb-video) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bsl-fp-hero-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px 40px 190px;
  pointer-events: none;
  /*
   * Vignette the type, free the picture.
   *
   * This was a flat BLACK wash — .3 across the whole top, .45 across the
   * bottom. Black does not merely darken a photograph, it pulls the colour
   * out of it, and these frames are a coral sunrise over a blue pool: the
   * most colour the site owns. Two things changed. The wash is now --ink, so
   * it deepens in the lake's own hue instead of greying. And a flat scrim has
   * to be dark enough for the worst pixel behind the headline, which makes
   * the whole frame pay for one small area — so the depth is now radial and
   * sits only where the words are. The linear beneath still carries the top
   * band the nav reads against and the bottom band that hands off to the
   * booking bar.
   */
  background:
    radial-gradient(ellipse 72% 56% at 50% 42%,
      rgba(7, 48, 60, .58) 0%,
      rgba(7, 48, 60, .30) 46%,
      rgba(7, 48, 60, 0) 78%),
    linear-gradient(180deg,
      rgba(7, 48, 60, .32) 0%,
      rgba(7, 48, 60, 0) 30%,
      rgba(7, 48, 60, 0) 60%,
      rgba(7, 48, 60, .55) 100%);
}

.bsl-fp-hero-in {
  max-width: 860px;
  text-align: center;
  color: #fff;
}

.bsl-fp-hero-kicker {
  font-family: var(--head);
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: #fff;
  font-weight: 400;
  margin: 0 0 18px;
  text-shadow: 0 1px 12px rgba(7, 48, 60, .6);
}

/*
 * Outfit is already loaded across 200..700, so 700 costs no extra request —
 * changing family would have. Bold display type wants its tracking pulled in,
 * hence the negative letter-spacing, in em so it holds at every breakpoint.
 * The shadow is teal rather than black for the same reason as the wash above.
 */
.bsl-fp-hero-line {
  font-family: var(--head);
  font-weight: 700;
  font-size: 72px;
  line-height: 1.02;
  letter-spacing: -.018em;
  margin: 0;
  color: #fff;
  text-shadow: 0 2px 30px rgba(7, 48, 60, .55), 0 1px 4px rgba(7, 48, 60, .4);
}

.bsl-fp-hero-sub {
  font-size: 16.5px;
  line-height: 1.7;
  font-weight: 300;
  margin: 20px auto 0;
  max-width: 520px;
  color: #F2EADB;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
}

/* The enquiry bar is one cell plus one link, not four form controls. */
.bsl-fp-bb-note {
  border-right: none;
  cursor: default;
}

.bookbar-in .bb-btn {
  display: inline-block;
  text-align: center;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   14.2 Full-bleed parallax photography bands
   --------------------------------------------------------------------------
   The frame is the only element in the flow and it clips. The media layer is
   inset by -14% top and bottom, so .parallax can move it by any sane amount
   without ever exposing an edge, and the band can never widen the document. */

.bsl-fp-band {
  position: relative;
  height: 52vh;
  min-height: 320px;
  max-height: 560px;
  overflow: hidden;
  background: var(--dark);
}

.bsl-fp-band-media {
  position: absolute;
  inset: -14% 0;
  background-size: cover;
  background-position: center;
  will-change: transform;
}

/* --------------------------------------------------------------------------
   14.3 Accommodation — pinned room showcase
   --------------------------------------------------------------------------
   Structural fallback only, at zero specificity: motion.css owns .pin-section
   and .pin-track. If the motion layer never arrives, the track is a native
   scroll-snap row — which is why overflow-x is `auto` and not `hidden`. A
   four-times-100% flex row inside a clipped box with nothing to move it would
   strand three of the four rooms; a scroller never can. */

:where(.bsl-fp-room-track) {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

:where(.bsl-fp-room-track) > :where(.bsl-fp-room-step) {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.bsl-fp-rooms {
  padding-bottom: 0;
}

.bsl-fp-rooms > .wrap {
  text-align: center;
}

.bsl-fp-room-track {
  margin-top: 50px;
}

.bsl-fp-room-step {
  position: relative;
  min-width: 0;
  min-height: 640px;
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
}

.bsl-fp-room-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* The same left-to-right scrim the donor slide used, rebuilt as its own layer
   so it sits over an <img> rather than over a background. */
.bsl-fp-room-step::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .78) 26%, rgba(255, 255, 255, 0) 58%);
}

.bsl-fp-room-card {
  position: relative;
  z-index: 2;
  max-width: 460px;
  padding: 70px 0 70px 70px;
  align-self: center;
  text-align: left;
}

.bsl-fp-room-name {
  font-family: var(--head);
  font-weight: 300;
  font-size: 34px;
  line-height: 1.2;
  color: var(--dark);
  margin: 0 0 26px;
}

.bsl-fp-room-card p {
  font-size: 14.5px;
  line-height: 1.7;
  color: #45413A;
  font-weight: 300;
  margin: 8px 0 30px;
}

.bsl-fp-room-card .rose-btn {
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   14.4 Experiences — horizontal gallery
   -------------------------------------------------------------------------- */

/* Palm-led, and deeper than plain --palm: the sand-toned item copy below measures
   White copy clears 8.92:1 at the lightest stop. */
.bsl-fp-exp {
  background: linear-gradient(160deg, #00506A, #07303C);
  color: #fff;
  padding: 100px 0 80px;
  overflow: hidden;
}

.bsl-fp-exp-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
  margin-bottom: 46px;
}

.bsl-fp-exp .kicker {
  color: #fff;
}

.bsl-fp-exp .kicker::before {
  background: var(--ocean);
}

.bsl-fp-exp h2 {
  color: #fff;
  font-size: 50px;
  line-height: 1.15;
  margin: 14px 0 0;
}

.bsl-fp-exp-head p {
  font-size: 15px;
  line-height: 1.75;
  font-weight: 300;
  margin: 0 0 26px;
}

.bsl-fp-exp-head .rose-btn {
  text-decoration: none;
}

/* Structural fallback at zero specificity — motion.css owns .hscroll. Native
   scroll-snap means this is touch-swipeable and keyboard-scrollable with no
   script at all; the section keeps overflow:hidden so the row can never
   widen the page. */
:where(.hscroll) {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

:where(.hscroll) > :where(.hscroll-item) {
  scroll-snap-align: start;
  flex: 0 0 auto;
}

.bsl-fp-exp-scroll {
  gap: 26px;
  padding: 4px 40px 26px;
  max-width: 1260px;
  margin: 0 auto;
  scroll-padding-left: 40px;
}

.bsl-fp-exp-scroll:focus-visible {
  outline: 2px solid var(--sand);
  outline-offset: 4px;
}

.bsl-fp-exp-item {
  width: 336px;
  max-width: 78vw;
}

.bsl-fp-exp-media {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  aspect-ratio: 4 / 3;
  background: rgba(255, 255, 255, .08);
}

.bsl-fp-exp-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bsl-fp-exp-item h3 {
  color: #fff;
  font-family: var(--head);
  font-weight: 300;
  font-size: 21px;
  margin: 20px 0 10px;
}

.bsl-fp-exp-item p {
  font-size: 14px;
  line-height: 1.65;
  font-weight: 300;
  color: #E3D8C2;
  margin: 0;
}

.bsl-fp-exp-hint {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 40px;
  font-family: var(--head);
  font-weight: 300;
  font-size: 12.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .86);
}

/* --------------------------------------------------------------------------
   14.5 Card media — offers, dining
   --------------------------------------------------------------------------
   The cards used to be CSS backgrounds. They now hold a real <img>, which
   carries alt text and gives .zoom-in something to scale that is not the card
   itself. The tint pseudo-elements are lifted one layer so the photograph sits
   beneath them; both cards already clip, so a scaled image stays inside. */

.bsl-fp-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}

.off-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.off-card::after {
  z-index: 1;
}

.off-card > .bsl-fp-media {
  position: absolute;
  z-index: 0;
}

/* `.din-card *` in style.css is position:relative;z-index:2 — the media layer
   has to opt back out of it, which two classes of specificity does. */
.din-card {
  text-decoration: none;
  color: inherit;
}

.din-card::before {
  z-index: 1;
}

.din-card > .bsl-fp-media {
  position: absolute;
  z-index: 0;
}

/* --------------------------------------------------------------------------
   14.6 Gallery band — full-bleed taster linking to /gallery/
   -------------------------------------------------------------------------- */

.bsl-fp-gal {
  padding-bottom: 0;
}

.bsl-fp-gal-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 0 8px 8px;
}

.bsl-fp-gal-tile {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--ivory);
  border-radius: 2px;
}

.bsl-fp-gal-tile .bsl-fp-media {
  position: absolute;
}

.bsl-fp-gal-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 114, 122, 0);
  transition: background .35s ease;
}

.bsl-fp-gal-tile:hover::after,
.bsl-fp-gal-tile:focus-visible::after {
  background: rgba(0, 114, 122, .28);
}

.gal-head .pill {
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   14.7 Location — the crossing
   -------------------------------------------------------------------------- */

.bsl-fp-points {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 34px;
}

.bsl-fp-point {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--head);
  font-weight: 300;
  font-size: 17px;
  color: #fff;
}

.bsl-fp-point-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--coral);
  flex-shrink: 0;
  align-self: center;
}

.bsl-fp-point-place {
  font-family: var(--body);
  font-size: 13.5px;
  color: rgba(255, 255, 255, .9);
}

.bsl-fp-source {
  font-size: 13.5px !important;
  line-height: 1.7;
  color: rgba(255, 255, 255, .9);
  max-width: 460px;
  margin-bottom: 28px !important;
}

.bsl-fp-location .contact-btn {
  text-decoration: none;
}

.bsl-fp-map-svg {
  width: 100%;
  height: auto;
  max-width: 620px;
  display: block;
  margin: 0 auto;
  overflow: visible;
}

.bsl-fp-water {
  fill: none;
  stroke: rgba(255, 255, 255, .3);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.bsl-fp-shore {
  fill: rgba(255, 255, 255, .5);
}

.bsl-fp-island > path {
  fill: rgba(255, 255, 255, .92);
}

.bsl-fp-pin {
  fill: var(--coral);
}

.bsl-fp-pin-core {
  fill: #fff;
}

.bsl-fp-port {
  fill: var(--coral);
  stroke: #fff;
  stroke-width: 2;
}

.bsl-fp-route {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  /* Default is DRAWN. The undrawn state below only ever exists where the
     animation can actually run, so no route line can be left invisible. */
  stroke-dashoffset: 0;
}

.bsl-fp-lbl-lake {
  fill: #fff;
  font-family: var(--head), sans-serif;
  font-weight: 300;
  font-size: 19px;
  letter-spacing: .5px;
}

.bsl-fp-lbl-port {
  fill: #fff;
  font-family: var(--head), sans-serif;
  font-weight: 300;
  font-size: 17px;
}

.bsl-fp-lbl-island {
  fill: #fff;
  font-family: var(--head), sans-serif;
  font-weight: 300;
  font-size: 19px;
}

.bsl-fp-lbl-sub {
  fill: rgba(255, 255, 255, .9);
  font-family: var(--body), sans-serif;
  font-weight: 300;
  font-size: 13px;
}

/* The one motion rule in this file, and the only one the class contract has
   no hook for: the crossing lines draw themselves as the section scrolls in.
   A native view timeline does it — no script, no scroll listener, nothing for
   motion.js to own. Browsers without view timelines skip the @supports block
   entirely and simply show the lines drawn. */
@supports (animation-timeline: view()) {

  .bsl-fp-route {
    animation: bsl-fp-draw linear both;
    animation-timeline: view();
    animation-range: entry 30% cover 40%;
  }
}

@keyframes bsl-fp-draw {

  from {
    stroke-dashoffset: 1;
  }

  to {
    stroke-dashoffset: 0;
  }
}

/* --------------------------------------------------------------------------
   14.8 Reduced motion
   --------------------------------------------------------------------------
   style.css already flattens every duration to .01ms globally. This kills the
   two effects that are animations rather than transitions, and makes certain
   nothing this file introduced is left in a pre-animation state. */
@media (prefers-reduced-motion: reduce) {

  .bsl-fp-route {
    animation: none !important;
    stroke-dashoffset: 0 !important;
  }

  .bsl-fp-band-media {
    transform: none !important;
    will-change: auto;
  }

  .bsl-fp-gal-tile::after {
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   14.9 Responsive
   --------------------------------------------------------------------------
   1024px is where .pin-section is required to give up and stack. The room
   track stops being a row at exactly that width so the two never disagree. */
@media (max-width: 1100px) {

  .bsl-fp-hero-line {
    font-size: 52px;
  }

  .bsl-fp-exp-head {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .bsl-fp-exp h2 {
    font-size: 36px;
  }

  .bsl-fp-gal-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1024px) {

  :where(.bsl-fp-room-track) {
    display: block;
    overflow: visible;
    scroll-snap-type: none;
  }

  :where(.bsl-fp-room-track) > :where(.bsl-fp-room-step) {
    flex: none;
  }

  .bsl-fp-room-step {
    min-height: 0;
  }

  .bsl-fp-room-step + .bsl-fp-room-step {
    margin-top: 2px;
  }

  .bsl-fp-room-img {
    position: relative;
    height: 260px;
  }

  .bsl-fp-room-step::before {
    display: none;
  }

  .bsl-fp-room-card {
    max-width: 100%;
    padding: 34px 40px 46px;
    background: var(--ivory);
  }
}

@media (max-width: 700px) {

  .bsl-fp-hero-overlay {
    padding: 100px 20px 210px;
  }

  .bsl-fp-hero-line {
    font-size: 38px;
  }

  /* Narrow screens put more of the frame behind the words, so the centre
     vignette tightens and deepens to hold the headline up. */
  .bsl-fp-hero-overlay {
    background:
      radial-gradient(ellipse 100% 46% at 50% 40%,
        rgba(7, 48, 60, .62) 0%,
        rgba(7, 48, 60, .34) 50%,
        rgba(7, 48, 60, 0) 82%),
      linear-gradient(180deg,
        rgba(7, 48, 60, .36) 0%,
        rgba(7, 48, 60, 0) 32%,
        rgba(7, 48, 60, 0) 58%,
        rgba(7, 48, 60, .58) 100%);
  }

  .bsl-fp-hero-kicker {
    font-size: 12px;
    letter-spacing: 1.8px;
  }

  .bsl-fp-hero-sub {
    font-size: 15px;
  }

  .bsl-fp-bb-note .val {
    font-size: 15px;
  }

  .bsl-fp-band {
    height: 40vh;
    min-height: 240px;
  }

  .bsl-fp-room-card {
    padding: 28px 20px 40px;
  }

  .bsl-fp-room-name {
    font-size: 26px;
  }

  .bsl-fp-exp {
    padding: 70px 0 60px;
  }

  .bsl-fp-exp h2 {
    font-size: 32px;
  }

  .bsl-fp-exp-scroll {
    gap: 16px;
    padding: 4px 20px 20px;
    scroll-padding-left: 20px;
  }

  .bsl-fp-exp-item {
    width: 268px;
    max-width: 76vw;
  }

  .bsl-fp-exp-hint {
    padding: 0 20px;
  }

  .bsl-fp-gal-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding: 0 6px 6px;
  }

  .bsl-fp-points {
    gap: 10px 20px;
  }

  .bsl-fp-point {
    font-size: 15.5px;
  }
}

/* ==========================================================================
   15. Article callouts
   The imported articles use 39 different wrapper class names across 195 divs
   (faq_item x90, practical_note / local_note / weather_note x15 each,
   bookingcta x14, then a long tail of one-offs: routebox, weekendrule,
   activitypace, lakeplan...). Rather than 39 rules, they are matched on the
   naming pattern each one follows. All of them were rendering as unstyled
   plain blocks, indistinguishable from body copy.
   ========================================================================== */

/* The general callout: a note, box, plan, rule or judgement call set aside
   from the flow. Seafoam rule on the left, faint wash behind. */
.page-content div[class$="note"],
.page-content div[class$="box"],
.page-content div[class$="plan"],
.page-content div[class$="rule"],
.page-content div[class$="choice"],
.page-content div[class$="shape"],
.page-content div[class$="pace"]{
  background:var(--wash);
  border-left:3px solid var(--aqua);
  border-radius:0 4px 4px 0;
  padding:20px 24px;
  margin:30px 0;
}
.page-content div[class$="note"] p:last-child,
.page-content div[class$="box"] p:last-child,
.page-content div[class$="plan"] p:last-child,
.page-content div[class$="rule"] p:last-child,
.page-content div[class$="choice"] p:last-child,
.page-content div[class$="shape"] p:last-child,
.page-content div[class$="pace"] p:last-child{margin-bottom:0}
/* The lead-in ("Weather Note.", "Activity note:") reads as a label. */
.page-content div[class$="note"] strong:first-child,
.page-content div[class$="box"] strong:first-child,
.page-content div[class$="plan"] strong:first-child{
  font-family:var(--head);
  color:var(--cobalt-deep);
  letter-spacing:.02em;
}

/* Safety guidance carries more weight than a general aside. */
.page-content .safetynote,
.page-content .marinenote{border-left-color:var(--cobalt);background:var(--whitecap)}

/* FAQ entries: a question in bold followed by its answer, stacked as a list
   rather than boxed — 90 boxed panels would overwhelm the page. */
.page-content .faq_item{
  border-bottom:1px solid var(--line);
  padding:18px 0;
  margin:0;
}
.page-content .faq_item:first-of-type{border-top:1px solid var(--line)}
.page-content .faq_item p{margin-bottom:0}
.page-content .faq_item strong:first-child{
  display:block;
  font-family:var(--head);
  font-weight:500;
  font-size:1.05em;
  color:var(--ink);
  margin-bottom:8px;
}

/* Booking prompts are the one callout that should look like an action. */
.page-content .bookingcta{
  background:var(--seafoam);
  border:0;
  border-radius:6px;
  padding:24px 28px;
  margin:36px 0;
}
.page-content .bookingcta p:last-child{margin-bottom:0}
.page-content .bookingcta strong:first-child{
  font-family:var(--head);
  color:var(--ink);
}
.page-content .bookingcta a{
  color:var(--ink);
  border-bottom:1px solid var(--cobalt-deep);
  font-weight:500;
}

/* Related-reading line appended to the two arrival articles. */
.page-content .bsl-related{
  margin-top:36px;
  padding-top:18px;
  border-top:1px solid var(--line);
  font-size:.95em;
}

@media(max-width:700px){
  .page-content div[class$="note"],
  .page-content div[class$="box"],
  .page-content div[class$="plan"],
  .page-content .bookingcta{padding:16px 18px}
}

/* Homepage experience tiles now link to their full article. */
.bsl-fp-exp-item h3 .bsl-fp-exp-link{color:inherit;border-bottom:1px solid transparent;transition:border-color .25s}
.bsl-fp-exp-item h3 .bsl-fp-exp-link:hover,
.bsl-fp-exp-item h3 .bsl-fp-exp-link:focus-visible{border-bottom-color:currentColor}

/* Section headings that link to the full article on that subject. The global
   `a{color:inherit;text-decoration:none}` would otherwise make these
   indistinguishable from a plain heading, so they carry a soft seafoam rule at
   rest and take the brand tone on hover. Same border-bottom idiom as the
   homepage experience tiles above, one step louder because these sit in body
   copy where the reader is not expecting a heading to be clickable. */
.page-content h2 > a,
.page-content h3 > a{
  color:inherit;
  border-bottom:1px solid var(--seafoam);
  transition:color .25s,border-color .25s;
}
.page-content h2 > a:hover,
.page-content h2 > a:focus-visible,
.page-content h3 > a:hover,
.page-content h3 > a:focus-visible{
  color:var(--ocean-deep);
  border-bottom-color:currentColor;
}

/* ==========================================================================
   Enquiry form — what the three "Check Availability" controls land on
   ========================================================================== */

.bsl-enquiry{
  margin:56px 0 8px;
  padding:38px 40px 42px;
  background:var(--whitecap);
  border:1px solid var(--seafoam);
  border-radius:4px;
  scroll-margin-top:150px; /* clears the fixed header + sticky bar on #enquiry */
}

.bsl-enquiry h2{margin:0 0 10px}
.bsl-enquiry-lede{margin:0 0 26px;max-width:62ch}

.bsl-enquiry-note{
  margin:0 0 24px;
  padding:14px 18px;
  border-left:3px solid var(--cobalt-deep);
  background:#fff;
  font-size:.97em;
}
.bsl-enquiry-note.is-bad{border-left-color:#9E2B25}

.bsl-enquiry-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px 20px;
}
.bsl-f-half{grid-column:span 2}
.bsl-f-quarter{grid-column:span 1}
.bsl-f-full{grid-column:1 / -1}
.bsl-enquiry-grid p{margin:0}

.bsl-enquiry label{
  display:block;
  margin-bottom:6px;
  font-family:var(--head);
  font-weight:300;
  font-size:14px;
  letter-spacing:.4px;
  color:var(--ink);
}

.bsl-enquiry input,
.bsl-enquiry select,
.bsl-enquiry textarea{
  width:100%;
  padding:11px 13px;
  border:1px solid var(--seafoam);
  border-radius:3px;
  background:#fff;
  font-family:var(--body);
  font-size:15.5px;
  color:var(--ink);
  transition:border-color .25s,box-shadow .25s;
}
.bsl-enquiry textarea{resize:vertical}

/* Focus must be visible on its own, not only as a colour change. */
.bsl-enquiry input:focus,
.bsl-enquiry select:focus,
.bsl-enquiry textarea:focus{
  outline:none;
  border-color:var(--cobalt-deep);
  box-shadow:0 0 0 3px rgba(144,224,218,.55);
}

/* The honeypot. Not display:none — some bots skip what is display:none, and a
   real user never reaches it because it is aria-hidden and tabindex -1. */
.bsl-f-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.bsl-enquiry-btn{
  margin-top:26px;
  background:var(--coral);
  color:var(--ink);
  border:none;
  border-radius:26px;
  padding:14px 40px;
  font-family:var(--head);
  font-weight:300;
  font-size:15px;
  letter-spacing:.6px;
  cursor:pointer;
  transition:background .3s;
}
.bsl-enquiry-btn:hover,
.bsl-enquiry-btn:focus-visible{background:var(--coral-d)}

@media(max-width:700px){
  .bsl-enquiry{padding:26px 20px 30px;margin:40px 0 8px}
  .bsl-enquiry-grid{grid-template-columns:repeat(2,1fr);gap:14px 16px}
  .bsl-f-half{grid-column:1 / -1}
  .bsl-f-quarter{grid-column:span 1}
  .bsl-enquiry-btn{width:100%}
}

/* The frames themselves get a modest lift on the way in, now that a grey wash
   is no longer flattening them. */
.kb-hero .kb-slide,
.hero .hero-slide {
  filter: saturate(1.16) contrast(1.05);
}

/* The vervet band, taller and steadier than the rest.
   Two things are different here and they work together.
   HEIGHT: the standard band is 52vh capped at 560px, which is a letterbox. The
   pair are the subject rather than scenery, so this one runs to 720px.
   DRIFT: motion.js caps parallax travel at half the media layer's overhang, so
   the stock `inset:-14%` gives +/-14% of the frame height — over 100px at this
   size, which swings the crop far enough to clip the infant at one end. -6%
   keeps the movement without the swing.
   Neither would be enough on its own: the image itself is 17-band.jpg, cropped
   to 2.4:1 around the pair, and being wider in aspect than the band means
   `cover` fits it by HEIGHT — so the vertical framing no longer changes with
   the viewport width. Re-derive all three together if any one changes. */
.bsl-fp-band-tall {
  height: 68vh;
  min-height: 420px;
  max-height: 720px;
}

#bslBandVervets {
  inset: -6% 0;
  background-position: center;
}

@media (max-width: 700px) {
  /* Parallax is off below 768px anyway, so the band only has to be tall enough
     to hold the pair at a phone width. */
  .bsl-fp-band-tall {
    height: 44vh;
    min-height: 300px;
  }
}

/* Dining track with a short segment.
   The stock card is 372x450 because the donor had nine restaurants and three
   bars and needed three across a row. Brovad has one of each, so a segment was
   a single card marooned in a 1180px row — the gap read as a bug. With two
   cards per tab the row is still mostly air at 372px, so a non-overflowing
   track of two or fewer grows its cards to close it. Applied by PHP, which is
   the only place that knows how many cards a segment holds. */
.din-track-roomy .din-card {
  flex: 0 0 470px;
  height: 530px;
}

@media (max-width: 1100px) {
  .din-track-roomy .din-card {
    flex: 0 0 400px;
    height: 470px;
  }
}

@media (max-width: 700px) {
  /* Below 700px the stock rule already takes the card to 82vw; matching it here
     keeps one card per screen instead of two half-cards. */
  .din-track-roomy .din-card {
    flex: 0 0 82vw;
    height: 380px;
  }
}

/* Map labels that sit ON land rather than on water.
   The land is rgba(255,255,255,.5) over the section's teal gradient, so a white
   label vanishes on it. --ink measures 5.5:1 against that fill and far more
   against Bugala's brighter .92 white, so the on-land labels take ink and the
   on-water labels keep white. Every label position in the SVG was checked
   against a raster of the same geometry before it was placed. */
.bsl-fp-lbl-land {
  fill: var(--ink);
  font-family: var(--head), sans-serif;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .2px;
}

.bsl-fp-lbl-land-sub {
  fill: rgba(7, 48, 60, .78);
  font-family: var(--body), sans-serif;
  font-weight: 300;
  font-size: 12.5px;
}

/* The archipelago behind Bugala: present and correct, but not the subject. */
.bsl-fp-isles > path {
  fill: rgba(255, 255, 255, .5);
}

/* ODbL credit. Required by the licence — see the note in section-location.php. */
.bsl-fp-map-credit {
  margin: 10px 0 0;
  text-align: center;
  font-family: var(--body), sans-serif;
  font-size: 11.5px;
  font-weight: 300;
  color: rgba(255, 255, 255, .55);
  letter-spacing: .2px;
}
.bsl-fp-map-credit a { color: inherit; border-bottom: 1px solid rgba(255, 255, 255, .3); }
.bsl-fp-map-credit a:hover { color: #fff; }

/* Licence credit under a photograph. Quieter than the caption it follows, but
   it must stay legible — CC BY attribution that nobody can read is not
   attribution. See the note in template-parts/page-media.php. */
.bsl-page-media-credit {
  display: block;
  margin-top: 4px;
  font-size: .82em;
  opacity: .75;
}
.bsl-page-media-credit a { color: inherit; border-bottom: 1px solid currentColor; }
.bsl-page-media-credit a:hover { opacity: 1; }

/* ==========================================================================
   16. Responsive fixes — measured at 320 and 390
   ========================================================================== */

/* Tables: let them keep a readable minimum width and scroll inside their own
   box rather than collapsing to ~47px per column. The wrapper is focusable so
   the scroll region is reachable by keyboard, not mouse-only. */
.page-content .bsl-table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:30px 0;
  border:1px solid var(--line);
  border-radius:4px;
}
.page-content .bsl-table-wrap table{margin:0;min-width:560px;border:0}
.page-content .bsl-table-wrap:focus-visible{outline:2px solid var(--cobalt-deep);outline-offset:2px}
/* A hairline gradient on the right edge signals there is more to scroll. */
@media(max-width:700px){
  .page-content .bsl-table-wrap{
    background:linear-gradient(to left,rgba(0,96,125,.10),transparent 24px);
  }
}

/* Text under 14px measured on live pages — the client asked for larger type. */
.bsl-crumbs,.bsl-crumbs a,.bsl-crumb-sep{font-size:14px}
.bsl-fp-hero-kicker{font-size:14px}
.bsl-fp-point-place,.bsl-fp-source{font-size:14px}

/* Touch targets. The burger measured 38x25 — the single most important control
   on mobile, and under half the 44px guideline. Padding grows the hit area
   without moving the bars. The close button measured 18x43. */
.burger{padding:10px 0;box-sizing:content-box}
.m-close{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;line-height:1}
.bsl-fp-exp-item h3 .bsl-fp-exp-link,
.page-content .bsl-related a{display:inline-block;padding:4px 0}

/* Sub-14px text found by measuring the rendered pages, not by reading source.
   Higher specificity than the earlier pass, which was silently overridden. */
.bsl-crumbs .bsl-crumb,
.bsl-crumbs .bsl-crumb a,
.bsl-crumbs .bsl-crumb span{font-size:14px}
.bsl-fp-location-copy .bsl-fp-source,
.bsl-fp-location-copy .bsl-fp-point-place{font-size:14px}
.bsl-fp-exp .bsl-fp-exp-hint{font-size:14px}
.hscroll-ui button span,
.hscroll-prev span,.hscroll-next span{font-size:16px}
/* Inline SVG map labels: 12.5-13px is small for place names people must read. */
.bsl-fp-map text{font-size:14px}

/* Touch targets, measured at 390px. The footer was the worst offender:
   column links rendered 20px tall, legal links 19px, the contact email and
   phone 21px. Those are accurate-thumb-only targets. Padding grows the hit
   area on small screens without changing the desktop rhythm. */
@media(max-width:820px){
  .site-footer .f-col a,
  .site-footer .f-big a,
  .site-footer .f-links a{padding:11px 14px;line-height:1.3}
  .site-footer .f-contact a{display:inline-block;padding:10px 0}
  .site-footer .f-social a{width:44px;height:44px}
  /* Homepage experience tiles measured 35px; the heading link is the tap area. */
  .bsl-fp-exp-item h3 .bsl-fp-exp-link{display:inline-block;padding:6px 0}
  /* Carousel arrows were 42x42 — just under the guideline. */
  .hscroll-ui button{width:44px;height:44px}
}

/* Pillar page: each activity heading is the link to its own guide, with the
   featured image sitting between the heading and the copy. */
.page-content h2 .bsl-pillar-link{
  color:inherit;
  border-bottom:2px solid transparent;
  transition:border-color .25s,color .25s;
}
.page-content h2 .bsl-pillar-link:hover,
.page-content h2 .bsl-pillar-link:focus-visible{
  color:var(--cobalt-deep);
  border-bottom-color:var(--aqua);
}
.page-content .bsl-pillar-media{margin:18px 0 22px}
.page-content .bsl-pillar-media img{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:5px;
}
@media(max-width:700px){
  .page-content .bsl-pillar-media{margin:14px 0 18px}
  .page-content .bsl-pillar-media img{aspect-ratio:3/2}
}

/* Build credit. */
.site-footer .f-crafted{margin-top:6px}
.site-footer .f-crafted a{border-bottom:1px solid var(--line);padding-bottom:1px}
.site-footer .f-crafted a:hover{border-bottom-color:var(--cobalt-deep)}

/* ==========================================================================
   17. Vertical rhythm on small screens
   Every homepage section carried its desktop padding unchanged — 110-120px top
   AND bottom. On a 375px-wide screen that is ~220px of empty space between one
   block of content and the next, which reads as the page being mostly gaps.
   Roughly halved below 700px, and tightened again on very small screens.
   ========================================================================== */
@media(max-width:700px){
  .intro{padding:64px 0 56px}
  .why{padding:56px 0 40px}
  .accom{padding:40px 0 0}
  .offers{padding:56px 0 60px}
  .dining{padding:56px 0 48px}
  .gethere{padding:56px 0}
  .faq{padding:56px 0}
  .gal{padding:56px 0 0}
  .awards{padding:56px 0}
  .bsl-fp-exp{padding:48px 0 40px}
  .page-hero{padding:112px 0 40px}
  .page-content{padding:40px 20px 64px}
  .site-footer{padding-top:56px}
}
@media(max-width:400px){
  .intro{padding:52px 0 44px}
  .why,.offers,.dining,.gethere,.faq,.gal{padding-top:48px;padding-bottom:44px}
}

/* The intro heading sat flush against the copy below it once the reveal fired
   — the mask's negative inset eats the natural gap. */
.intro h2,.intro h1{margin-bottom:22px}
.intro .kicker{margin-bottom:10px}
@media(max-width:700px){
  .intro h2,.intro h1{margin-bottom:18px;line-height:1.25}
}

/* ==========================================================================
   18. Footer — social icons and the narrow-screen column count
   ========================================================================== */

/* The icons were a 36px ring around a 15px glyph — 42% fill, which reads as a
   large empty circle rather than an icon. On mobile the ring grew to 44px for
   the tap target while the glyph stayed 15px, making the imbalance worse (34%).
   A 20px glyph in a 46px ring is ~43% of the ring's diameter but reads far
   better because the glyph itself is legible. */
.site-footer .f-social{gap:12px;margin-top:22px}
.site-footer .f-social a{
  width:46px;height:46px;
  border:1px solid var(--cobalt-deep);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:background-color .25s,border-color .25s;
}
.site-footer .f-social svg{width:20px;height:20px;fill:var(--cobalt-deep);display:block}
.site-footer .f-social a:hover,
.site-footer .f-social a:focus-visible{background:var(--cobalt-deep);border-color:var(--cobalt-deep)}
.site-footer .f-social a:hover svg,
.site-footer .f-social a:focus-visible svg{fill:#fff}
/* Unlinked placeholder icons must not look clickable. */
.site-footer .f-social a[aria-hidden="true"]{opacity:.35}

/* THE REAL DEFECT: below 820px the footer grid was still two columns, so the
   contact column began at x=200 on a 375px screen and ran to x=418 — 43px past
   the viewport, silently clipped by .footer overflow:hidden. That is why the
   icons looked cut off and off-centre. One column below 700px, and this rule
   carries enough specificity to beat the 2-column rule above it. */
@media(max-width:700px){
  .site-footer .footer-in{grid-template-columns:1fr;gap:28px;text-align:center}
  .site-footer .f-social{justify-content:center}
  .site-footer .f-social a{width:50px;height:50px}
  .site-footer .f-social svg{width:22px;height:22px}
  .site-footer .f-big a,
  .site-footer .f-col a,
  .site-footer .f-links{text-align:center}
  .site-footer .f-links{justify-content:center}
  .site-footer .f-brand{text-align:center}
  .site-footer .f-brand img{margin:0 auto}
}

/* The legal links sit in a flex row with a divider between them; the earlier
   tap-target rule set padding:11px 0 and removed the horizontal gap, so
   "Privacy Policy" and "Cancellation Policy" ran together as one word. */
.site-footer .f-links{gap:0 4px}
.site-footer .f-links a:first-child{padding-left:0}
@media(max-width:700px){
  .site-footer .f-links a:first-child{padding-left:14px}
}

/* The footer photograph runs behind the closing lines. The mask fades it in,
   but the visible band of this frame is a bright wooden floor and coloured
   artwork, and the copyright and build credit were sitting straight on top of
   it. A soft scrim of the footer's own ground colour keeps that text readable
   without hiding the picture. */
.site-footer .f-bottom{position:relative}
.site-footer .f-bottom::before{
  content:"";
  position:absolute;
  /* Full-bleed: inset to the .wrap only left visible seams down each side. */
  top:-16px; bottom:0; left:50%; width:100vw; transform:translateX(-50%);
  background:linear-gradient(to bottom,rgba(246,238,223,.92),rgba(246,238,223,.72) 60%,rgba(246,238,223,0));
  z-index:-1;
  pointer-events:none;
}

@media(max-width:700px){
  /* Everything above these lines is centred on one column; leaving the
     copyright and build credit ranged left read as a mistake. */
  .site-footer .f-bottom{text-align:center}
  .site-footer .f-copy,.site-footer .f-crafted{text-align:center}
}

/* The in-content media band is now a single image, not a two-up, so it should
   read at the same weight as the hero image rather than as a thumbnail. */
.page-content .bsl-page-media:not(.bsl-page-media-duo){margin:36px 0}
.page-content .bsl-page-media:not(.bsl-page-media-duo) .bsl-page-media-figure{margin:0}
.page-content .bsl-page-media:not(.bsl-page-media-duo) .bsl-page-media-img{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:5px;
}
.page-content .bsl-page-media:not(.bsl-page-media-duo) .bsl-page-media-caption{
  margin-top:10px;
  text-align:center;
}
@media(max-width:700px){
  .page-content .bsl-page-media:not(.bsl-page-media-duo){margin:26px 0}
  .page-content .bsl-page-media:not(.bsl-page-media-duo) .bsl-page-media-img{aspect-ratio:3/2}
}