/* =========================================================================
   FREE SAILING — one organisation's own page.

   Deliberately thin. Every shape a person needs already exists: .phead for
   the hero (places have no photographs, so the photo-hero class.html uses is
   wrong here — the header that already carries no image is the right one),
   .sup-fact for the facts rows, .sup-near for proximity rows, .so-shelf/
   .so-quote/.so-doors for the supply-side patterns this page borrows for its
   own "claim this" ending. Everything below is the small remainder site.css
   and supply.css genuinely do not cover.

   Scoped: every rule is .o- prefixed or targets an #o- id, so nothing here
   can leak onto a page this stylesheet isn't loaded on.
   ========================================================================= */

/* --------------------------------------------------------------- the hero */
.o-hero-in{ position:relative; z-index:1; max-width:var(--wrap); margin:0 auto; padding:40px 22px 34px; }
.o-hero-meta{ margin-top:11px; font-size:clamp(15px,1.4vw,18px); color:#CDE3F6; max-width:60ch; }
.o-hero-cta{ margin-top:20px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.o-hero-cta .small{ color:#CDE3F6; }
.o-hero-cta a{ color:#8FE9FF; font-weight:700; }
.o-hero-cta a:hover{ color:#fff; }

/* -------------------------------------------------------------- the top row
   Facts card left, a small locator map right. Both sides share one height on
   desktop so neither looks like an afterthought next to the other; below the
   640px breakpoint .g2 already stacks them (site.css, untouched). */
.o-top{ align-items:stretch; }
#o-facts{ display:flex; flex-direction:column; justify-content:center; }
.o-mapwrap{
  position:relative; min-height:220px; border-radius:var(--r-l); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow-2); background:#0A2440;
}
#o-map{ position:absolute; inset:0; }
.o-mapwrap .leaflet-container{ background:#0A2440; }
/* No pointer needed: this map shows one fixed pin and is not for exploring.
   Scroll can still zoom on purpose (map-engine's own default), but drag is
   turned off in org.js so the page beneath it scrolls normally on a phone. */

/* --------------------------------------------------------- offer sample
   A smaller sibling of supply.css's own .so-shelf grid — three cards instead
   of a full shelf, because this page is about ONE place, not a catalogue. */
#o-offers .grid{ margin-top:2px; }
.o-offers-more{ margin-top:14px; font-size:13.5px; }
.o-offers-more a{ color:var(--cyan-text); font-weight:700; }

/* a plain action link with an arrow, the shape already used everywhere else
   on the site for "leave and go here" (classes.css .cl-do .go, supply/*.html
   card feet) -- neither of those stylesheets is loaded on this page, so the
   one rule is repeated here rather than pulling in a file for one class. */
.o-go{ margin-top:12px; font-size:13.5px; font-weight:700; color:var(--cyan-text); display:inline-block; }
.o-go:hover{ color:var(--navy); }

@media (max-width:640px){
  .o-hero-in{ padding:30px 20px 26px; }
  .o-mapwrap{ min-height:200px; }
}