/* Surf page: page-scoped rules, linked after css/style.css.
   .services is the one class this page adds: the three confirmed
   services (coaching, guiding, board hire) as a plain three-column
   list with hairline rules. Promote to style.css if another page
   needs the same thing. */
.services { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-bottom: clamp(28px, 4vw, 48px); }
.services li { padding-top: 16px; border-top: 1px solid var(--line); }
.services h3 { font-size: var(--t-h4); margin-bottom: 8px; }
.services p { font-size: var(--t-small); margin: 0; max-width: 44ch; }
@media (max-width: 860px) {
  .services { grid-template-columns: 1fr; gap: 0; }
  .services li { padding: 14px 0; }
  .services li:last-child { border-bottom: 1px solid var(--line); }
}

/* Hero. surf/surfer-shoreline-bw-wide.jpg is 2000px, so the hero is full
   bleed like every other page. The surfer stands low in the frame:
   object-position 50% 56% keeps her whole, feet included, in the 4:1 band
   at 2560px, the 21:9 band at 1440px and the 4:5 crop on phones. */
.hero__media img { object-position: 50% 56%; }

/* Coast map on phones. Below 560px the SVG is about 350px wide, a third of
   its 1200 unit viewBox, so its labels would render at 6 to 9px.
   The road label, "Weligama Bay" and the 1 km scale are hidden (with the
   scale bar they belong to), and the five labels that stay are enlarged
   in viewBox units so they render at about 11 to 13px. At that size
   "Surf Club Midigama" and "Weligama" would touch the coastline, so they
   are moved clear of it (transforms on SVG text are in viewBox units).
   Order follows assets/img/surf/midigama-coast.svg: text 1 road,
   2 Surf Club Midigama, 3 Lazy Left, 4 Ahangama, 5 Weligama, 6 bay,
   7 N, 8 scale; g 1 north arrow, g 2 scale. */
@media (max-width: 560px) {
  .coastmap svg > text:nth-of-type(1),
  .coastmap svg > text:nth-of-type(6),
  .coastmap svg > text:nth-of-type(8),
  .coastmap svg > g:nth-of-type(2) { display: none; }
  .coastmap svg > text:nth-of-type(2),
  .coastmap svg > text:nth-of-type(3) { font-size: 44px; }
  .coastmap svg > text:nth-of-type(2) { transform: translateY(-16px); }
  .coastmap svg > text:nth-of-type(5) { transform: translateX(-64px); }
  .coastmap svg > text:nth-of-type(4),
  .coastmap svg > text:nth-of-type(5) { font-size: 40px; }
  .coastmap svg > text:nth-of-type(7) { font-size: 36px; }
}