/* ---------------------------------------------------------------------------
   Alvamar — brand layer.

   Register: sun-bleached, warm and human. Salt, sand and Atlantic light. A surf
   school sells a morning, not a product, so the page is written and coloured
   like someone talking to you in a car park at seven in the morning.

   Layout DNA kept deliberately clear of the other four concepts:
     · Voltgrove  — dark, industrial, conversion-first
     · Ashgrain   — centred header, full-bleed food editorial
     · Solvane    — pale, airy, weekly timetable
     · Casa Andrela — serif editorial rows, overlapping booking bar
   Alvamar's own signature is the SEASON TABLE, the swell meter, asymmetric
   "pebble" media corners, and deep ocean bands that break a warm sand page.

   The season table is the piece most worth promoting into shared/patterns.css:
   any seasonal operator — dive school, ski hire, campsite, boat trips — needs a
   month-by-month honesty table, and it is the component that most reliably
   answers the question a booking-led site actually gets asked.
   --------------------------------------------------------------------------- */

:root {
  --bg:          #faf7f2;   /* bleached paper-sand */
  --bg-alt:      #e7f0f0;   /* sea glass */
  --surface:     #ffffff;
  --ink:         #22333b;   /* wet rock, never true black */
  --ink-soft:    #4b5f68;
  --ink-mute:    #6e858d;   /* darkened off the obvious mid-grey: 3.7:1 on --bg */
  --line:        #ded6c9;   /* warm hairline — the sand keeps showing through */
  --accent:      #0e6f92;   /* Atlantic blue */
  --accent-ink:  #ffffff;
  --accent-soft: #dcecf1;
  --focus:       #0e6f92;

  --sun:      #e7973c;      /* bleached apricot, the second voice */
  --sun-soft: #fbe8cf;
  --sand:     #f3e7d1;
  --deep:     #0a3446;      /* night ocean, for the inverted bands */
  --foam:     #f2faf9;

  --font-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --font-body:    "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --display-weight: 700;
  --display-tracking: -0.032em;
  --display-leading: 0.98;

  --btn-radius: var(--radius-pill);
  --card-radius: 22px;
  --input-radius: 14px;

  --header-h: 76px;
  --container: 1180px;
  --section-y: clamp(3.5rem, 8vw, 6rem);
}

h2 { font-size: clamp(1.95rem, 4.4vw, 3.1rem); }
h3 { font-weight: 700; }

.eyebrow { color: var(--accent); font-weight: 700; letter-spacing: 0.18em; }

.lede { color: var(--ink-soft); }

.btn { letter-spacing: -0.005em; }

/* --- Header --------------------------------------------------------------- */
/* Translucent sand rather than a solid bar: the hero wash carries on behind it
   as you scroll, which keeps a sticky header from feeling bolted on. */

.site-header {
  --header-bg: rgb(250 247 242 / 0.9);
  --header-line: var(--line);
  backdrop-filter: blur(10px);
}

.brandmark { font-size: var(--step-2); letter-spacing: -0.04em; }
.brandmark small { letter-spacing: 0.2em; opacity: 0.55; }

.site-nav a { font-weight: 500; color: var(--ink-soft); }
.site-nav a:hover { color: var(--ink); }

.lang-switch { border-color: var(--line); }

/* On a phone the language switch matters more than the desktop nav order —
   a Portuguese visitor should reach PT without opening the burger first. */
@media (max-width: 860px) {
  .lang-switch { order: 1; margin-inline-start: auto; }
  .nav-toggle__label { order: 2; }
}

/* At 390px the brandmark, the language switch and the burger together are wider
   than the viewport, and .brandmark is nowrap by design. The descriptor is the
   part a visitor already knows by then, so it is the part that goes. */
@media (max-width: 560px) {
  .brandmark { font-size: var(--step-1); }
  .brandmark small { display: none; }
}

/* --- Media ---------------------------------------------------------------- */
/* Two opposite corners cut long and two left square. It reads as a board
   outline at a glance and it is the single cheapest way to stop a photo grid
   looking like every other template. */

.media--pebble {
  border-radius: clamp(1.75rem, 8vw, 5rem) var(--radius-l)
                 clamp(1.75rem, 8vw, 5rem) var(--radius-l);
}

/* An inline <svg> honours preserveAspectRatio, not object-fit, so a .media box
   whose ratio differs from the viewBox letterboxes the art against the slot
   background. Every ratio below is the artwork's own, exactly. */
.offer .media  { --media-ratio: 32 / 21; }   /* 640 x 420 */
.person .media { --media-ratio: 15 / 19; }   /* 300 x 380 */
.coast__art    { --media-ratio: 80 / 21; }   /* 1600 x 420 */

/* --- Hero ----------------------------------------------------------------- */

.hero {
  --hero-size: clamp(2.55rem, 6vw, 4.6rem);
  --hero-py: clamp(2.5rem, 6vw, 4.5rem);
  /* The bleached-light wash is scoped to this ONE section. A gradient on <body>
     is re-rasterised across the whole document height and stalls full-page
     capture — see scripts/capture.mjs. */
  background-image: linear-gradient(168deg, #f6e6cc 0%, #faf7f2 44%, #e9f2f1 100%);
}

.hero__grid {
  display: grid;
  gap: var(--s-xl);
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
}

.hero h1 { max-width: 15ch; }

.hero__note {
  font-size: var(--step--1);
  color: var(--ink-soft);
  padding-block-start: var(--s-xs);
  border-block-start: 1px solid var(--line);
  max-width: 46ch;
}

/* --- This morning's conditions -------------------------------------------- */
/* The chalkboard outside the shed, translated. A seasonal operator lives or
   dies on "is it worth coming down today", so it sits directly under the hero
   rather than in a sidebar nobody scrolls to. */

.conditions {
  background: var(--sand);
  border-block: 1px solid #e5d5b6;
  padding-block: var(--s-l);
}

/* Flex rather than auto-fit grid: an auto-fit track list would cut FOUR equal
   columns out of a wide container and then leave two of them empty, squeezing
   the title and the stats into a third of the width each. Flex weights let the
   stats take the room they deserve and still wrap cleanly on a phone. */
.conditions__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-s) var(--s-xl);
}

.conditions__title {
  flex: 1 1 12rem;
  font-size: var(--step-1);
  letter-spacing: -0.02em;
}

.conditions__grid {
  flex: 4 1 20rem;
  display: grid;
  gap: var(--s-s) var(--s-m);
  grid-template-columns: repeat(auto-fit, minmax(min(110px, 45%), 1fr));
  margin: 0;
}

.conditions__grid dt {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #927b52;
}

.conditions__grid dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: #2a3b33;
}

.conditions__note {
  flex: 1 1 100%;
  font-size: var(--step--1);
  color: #7d6a48;
  max-width: 62ch;
}

/* --- Values --------------------------------------------------------------- */

.values {
  display: grid;
  gap: var(--s-l);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  list-style: none;
  padding: 0;
}

.values li { display: grid; gap: var(--s-2xs); align-content: start; }

.values svg {
  width: 46px;
  height: 46px;
  padding: 10px;
  border-radius: 50%;
  background: var(--sun-soft);
  color: #a9601b;
  margin-block-end: var(--s-2xs);
}

.values h3 { font-size: var(--step-1); }
.values p { color: var(--ink-soft); font-size: var(--step--1); }

/* --- Offer cards ---------------------------------------------------------- */

.offer {
  --card-line: var(--line);
  border-start-start-radius: clamp(1.5rem, 5vw, 2.75rem);
  border-end-end-radius: clamp(1.5rem, 5vw, 2.75rem);
  border-start-end-radius: var(--radius);
  border-end-start-radius: var(--radius);
}

.offer .card__body { gap: var(--s-xs); }
.offer .card__title { font-size: var(--step-1); }
.offer p { color: var(--ink-soft); font-size: var(--step--1); }

.offer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3xs) var(--s-2xs);
  list-style: none;
  padding: 0;
  margin-block-start: auto;
  padding-block-start: var(--s-2xs);
}

.offer__meta li {
  padding: 0.3em 0.7em;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--ink-mute);
}

/* Typed as `p.offer__price`, not `.offer__price`: `.offer p` above is a class
   plus a type and would otherwise win the cascade and shrink the price to
   caption size. */
p.offer__price {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
}

.offer__price small {
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-mute);
}

/* --- Inverted ocean bands -------------------------------------------------- */
/* Two deep sections break a long warm page into thirds and give the sand
   somewhere to be bright against. Tokens are re-pointed rather than colours
   overwritten, so every shared component keeps working inside them. */

.section--deep {
  background: var(--deep);
  color: #eef6f6;
  --ink:         #f3f9f8;
  --ink-soft:    #c2d8dc;
  --ink-mute:    #93b1b8;
  --line:        #1c5063;
  --surface:     #0f4257;
  --accent-soft: #123f52;
}

.section--deep .eyebrow { color: var(--sun); }
.section--deep :focus-visible { outline-color: var(--sun); }

/* On the dark ground the blue primary loses its punch and the outline hover
   would paint light-on-light, so both are re-pointed. */
.section--deep .btn--primary { background: var(--sun); color: #10303f; }
.section--deep .btn--primary:hover { background: #f2ac57; }
.section--deep .btn--outline:hover { background: #f3f9f8; color: var(--deep); }

.coast__art { border-radius: var(--card-radius); background: var(--deep); }

.coves {
  display: grid;
  gap: var(--s-m) var(--s-l);
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  list-style: none;
  padding: 0;
}

.coves li {
  display: grid;
  gap: var(--s-3xs);
  padding-block-start: var(--s-xs);
  border-block-start: 2px solid var(--sun);
}

.coves b {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.coves p { font-size: var(--step--1); color: var(--ink-soft); }

/* --- Season table --------------------------------------------------------- */
/* Extends the shared .rows pattern rather than replacing it: same list markup,
   same hairline rhythm, but the row becomes a five-column grid.
   Below 760px the columns collapse and the per-cell labels — clipped from sight
   on wide screens but always present for screen readers — become visible, so
   the phone view needs no separate markup and the header strip can simply go. */

/* Tightened off the obvious numbers: the swell column only ever holds a 30px
   meter, and every rem it keeps is a rem the "what it is like" sentence loses
   at laptop widths, where that column is the one that has to wrap. */
.season { --season-cols: 8rem 4.5rem 4.5rem minmax(0, 1fr) 8.5rem; }

.season__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
  font-size: var(--step--1);
  color: var(--ink-mute);
}

.season__head {
  display: grid;
  grid-template-columns: var(--season-cols);
  gap: var(--s-s);
  padding-block-end: var(--s-2xs);
  border-block-end: 2px solid var(--ink);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.season__list > li {
  display: grid;
  grid-template-columns: var(--season-cols);
  gap: var(--s-s);
  align-items: center;
  padding-block: var(--s-s);
  padding-inline: var(--s-xs);
  margin-inline: calc(var(--s-xs) * -1);
  border-radius: 10px;
  transition: background var(--dur) var(--ease);
}

.season__list > li:hover { background: var(--foam); }

.season__month {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.season__cell { font-variant-numeric: tabular-nums; font-weight: 600; }

.season__note { color: var(--ink-soft); font-size: var(--step--1); }

/* Present for assistive tech at every width; only drawn once the grid stacks. */
.season__lab {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.season__foot { font-size: var(--step--1); max-width: 72ch; }

/* Phone layout: the month and who it suits pair up on the first line, water and
   swell share the second, the sentence takes the third. Three lines a month
   rather than five keeps twelve months scrollable rather than punishing. */
@media (max-width: 760px) {
  .season__head { display: none; }

  .season__list > li {
    grid-template-columns: 1fr auto;
    gap: var(--s-2xs) var(--s-s);
    align-items: center;
  }

  .season__month { grid-column: 1; grid-row: 1; }

  /* Children in source order: month, water, swell, note, suits. */
  .season__cell:nth-of-type(2) { grid-column: 1; grid-row: 2; }
  .season__cell:nth-of-type(3) { grid-column: 2; grid-row: 2; text-align: end; }
  .season__cell:nth-of-type(5) { grid-column: 2; grid-row: 1; justify-self: end; }
  .season__cell:nth-of-type(5) .season__lab { display: none; }  /* badge says it */

  .season__note { grid-column: 1 / -1; grid-row: 3; }

  .season__lab {
    position: static;
    display: block;
    width: auto; height: auto;
    clip-path: none;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-mute);
  }
}

/* --- Swell meter ---------------------------------------------------------- */
/* Bars rise in height as well as fill, so the shape alone carries the meaning
   for anyone who cannot separate the two colours. */

.meter {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  vertical-align: -3px;
  --fill: var(--accent);
}

.meter i { display: block; width: 5px; border-radius: 2px; background: #d9d2c6; }

.meter i:nth-child(1) { height: 6px; }
.meter i:nth-child(2) { height: 9px; }
.meter i:nth-child(3) { height: 12px; }
.meter i:nth-child(4) { height: 15px; }
.meter i:nth-child(5) { height: 18px; }

/* Four and above is the point where we stop taking beginners out, so it stops
   being ocean blue and starts being a warning colour. */
.meter--4, .meter--5 { --fill: #c2683a; }

.meter--1 i:nth-child(-n + 1),
.meter--2 i:nth-child(-n + 2),
.meter--3 i:nth-child(-n + 3),
.meter--4 i:nth-child(-n + 4),
.meter--5 i:nth-child(-n + 5) { background: var(--fill); }

/* --- Badges --------------------------------------------------------------- */

.badge { font-size: 0.72rem; letter-spacing: 0.02em; white-space: nowrap; }

.badge--beg { background: #e3efdb; color: #345629; }
.badge--all { background: var(--accent-soft); color: #0c4a61; }
.badge--imp { background: var(--sun-soft); color: #7c4a11; }
.badge--adv { background: #f7ddd1; color: #8a3a1c; }

/* --- Panels and packs ------------------------------------------------------ */

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  padding: clamp(1.25rem, 3.4vw, 2.25rem);
}

.panel__title {
  font-size: 0.72rem;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-block-end: var(--s-xs);
}

.rate-panel {
  display: grid;
  gap: var(--s-l) var(--s-2xl);
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

/* nowrap on the price, not the label: a rate that breaks as "€55 each / way"
   stops reading as a number at a glance, and the label has room to wrap. */
.rate-panel .rows__val {
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Rows whose value is a sentence rather than a figure. Side by side they leave
   the key three characters of width and it wraps mid-phrase, so on a phone the
   pair stacks instead. */
@media (max-width: 620px) {
  .rows--stack > li { display: grid; gap: 2px; }
  .rows--stack .rows__val { text-align: start; }
}

/* Flex column rather than grid so the CTA can take `margin-block-start: auto`
   and sit on the same baseline across all three packs however many lines the
   title above it wraps to. */
.pack {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-s);
  padding: clamp(1.4rem, 3.4vw, 2.1rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-start-start-radius: clamp(1.5rem, 5vw, 2.75rem);
  border-end-end-radius: clamp(1.5rem, 5vw, 2.75rem);
  border-start-end-radius: var(--radius);
  border-end-start-radius: var(--radius);
}

/* The flag is real markup, not a CSS ::after string — the Portuguese sibling
   page has to be able to translate it. */
.pack__flag {
  padding: 0.32em 0.8em;
  border-radius: var(--radius-pill);
  background: var(--sun);
  color: #10303f;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pack h3 { font-size: var(--step-1); }

.pack__price {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
}

.pack__price small {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-mute);
}

.pack ul {
  display: grid;
  gap: var(--s-2xs);
  list-style: none;
  padding: 0;
  width: 100%;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.pack li { display: flex; gap: 0.65em; align-items: baseline; }

/* A wave dash rather than a bullet or a tick. */
.pack li::before {
  content: "";
  flex: none;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--sun);
  transform: translateY(-0.35em);
}

.pack .btn { margin-block-start: auto; }

.pack--featured {
  background: var(--deep);
  color: #eef6f6;
  border-color: var(--deep);
  --ink:      #f3f9f8;
  --ink-soft: #c2d8dc;
  --ink-mute: #9ab6bc;
}

.pack--featured :focus-visible { outline-color: var(--sun); }
.pack--featured .btn--primary { background: var(--sun); color: #10303f; }
.pack--featured .btn--primary:hover { background: #f2ac57; }

/* --- Instructors ---------------------------------------------------------- */

.person { display: grid; gap: var(--s-2xs); align-content: start; }

.person .media {
  border-radius: clamp(1.5rem, 5vw, 2.5rem) clamp(1.5rem, 5vw, 2.5rem)
                 var(--radius) var(--radius);
  margin-block-end: var(--s-2xs);
}

.person__role {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.person h3 { font-size: var(--step-1); }
.person p { font-size: var(--step--1); color: var(--ink-soft); }

/* --- Kit lists ------------------------------------------------------------ */

.kit__list { display: grid; gap: var(--s-xs); list-style: none; padding: 0; }

.kit__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
  font-size: var(--step--1);
  color: var(--ink-soft);
  line-height: 1.5;
}

.kit__list svg { width: 20px; height: 20px; flex: none; margin-block-start: 0.15em; }

.kit__list--yes svg { color: #2f7d52; }
.kit__list--bring svg { color: var(--sun); }

/* --- Booking -------------------------------------------------------------- */

.book__grid {
  display: grid;
  gap: var(--s-xl);
  align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
}

.book__points {
  display: grid;
  gap: var(--s-2xs);
  list-style: none;
  padding: 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.book__points li { display: flex; gap: 0.65em; align-items: baseline; }

.book__points li::before {
  content: "";
  flex: none;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--sun);
  transform: translateY(-0.35em);
}

.book__call { font-size: var(--step--1); }
.book__call a { font-weight: 700; color: var(--sun); }

/* The form panel steps back out of the dark band. A dark form with dark inputs
   reads as disabled no matter how carefully it is coloured, and a booking form
   is the last place to spend goodwill on atmosphere. */
.book__form {
  --ink:      #22333b;
  --ink-soft: #4b5f68;
  --ink-mute: #6e858d;
  --line:     #ded6c9;
  --surface:  #ffffff;
  background: var(--surface);
  color: var(--ink);
}

.book__form .btn--primary { background: var(--accent); color: var(--accent-ink); }
.book__form .btn--primary:hover { background: #0b5a77; }
.book__form :focus-visible { outline-color: var(--accent); }

.field__opt { font-weight: 500; color: var(--ink-mute); }

.check {
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.check input {
  flex: none;
  width: 20px;
  height: 20px;
  margin-block-start: 0.15em;
  accent-color: var(--accent);
}

/* --- Accordion ------------------------------------------------------------ */

.accordion summary { font-size: var(--step-1); letter-spacing: -0.025em; }
.accordion summary::after { color: var(--sun); font-weight: 400; }

/* --- Closing panel -------------------------------------------------------- */

.closing {
  padding: clamp(1.75rem, 6vw, 3.5rem);
  background: var(--sun-soft);
  border-radius: clamp(1.75rem, 6vw, 3.5rem) var(--radius-l)
                 clamp(1.75rem, 6vw, 3.5rem) var(--radius-l);
  text-align: center;
}

.closing h2 { font-size: var(--step-3); }
.closing .lede { margin-inline: auto; }
.closing__actions { justify-content: center; }

/* --- Footer --------------------------------------------------------------- */

.site-footer { --footer-bg: var(--deep); --footer-ink: #e6f1f1; }

.site-footer .brandmark { color: #ffffff; }

.site-footer__blurb {
  margin-block-start: var(--s-xs);
  max-width: 34ch;
  font-size: var(--step--1);
  opacity: 0.75;
}

/* --- Mobile action bar ----------------------------------------------------- */
/* Half the enquiries arrive from a phone in a hire car. The booking link gets
   the warm colour because it is the one that costs us nothing to serve. */

.action-bar a.is-secondary { background: var(--sun); color: #10303f; }