/* ============================================================
   Grandela Surf Club — Surf Spots (the hub and the sixteen spot pages)
   on the redesign system. Loaded after system.css, only on these pages:
   <body class="gs gs-spots"> (the hub) and <body class="gs gs-spots gs-spot">.

   Markup: tools/build-spots.py. Behaviour: assets/js/spots.js.
   New pieces carry the gs- prefix; the classes without it (.spot-card,
   .cmp-btn, .sc-wind, .quiz-opt, .coast-map, .dial…) are the hooks the
   script has always used.

   The three colours of a wind — offshore, cross, onshore — are the system's
   state colours (ok, atenção, perigo); the four gradings are told apart by
   their SHAPE (● ■ ◆ ◆◆) first and their tint second.
   ============================================================ */

/* ---------- shared: tags, picks, rows ---------- */
/* What the forecast fills in is `hidden` until it answers, and stays hidden if it never does. A class
   that sets `display` (.gs-tag) would show it as an empty pill, and an SVG group ignores the attribute. */
.gs-spots [hidden] { display: none !important; }
.cp-wind[hidden] { display: none; }
.gs-tag-agua { background: var(--gs-agua); color: var(--gs-mar); }
.gs-chip-line { background: transparent; box-shadow: inset 0 0 0 1.5px var(--gs-linha); }
.gs-hz { gap: .4em; white-space: nowrap; }
.gs-hz > span:first-child { font-size: .8em; letter-spacing: 0; }
.gs-hz-gentle { background: var(--gs-espuma); color: var(--gs-rocha); box-shadow: inset 0 0 0 1.5px var(--gs-linha); }
.gs-hz-moderate { background: var(--gs-rocha-2); color: var(--gs-espuma); }
.gs-hz-serious { background: var(--gs-rocha); color: var(--gs-espuma); }
.gs-hz-extreme { background: var(--gs-perigo); color: var(--gs-espuma); }
[data-wind="off"].gs-tag { background: var(--gs-ok); color: var(--gs-espuma); }
[data-wind="cross"].gs-tag { background: var(--gs-atencao); color: var(--gs-espuma); }
[data-wind="on"].gs-tag { background: var(--gs-perigo); color: var(--gs-espuma); }
i.w-off, i.w-cross, i.w-on { display: inline-block; flex: none; width: .7rem; height: .7rem; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--gs-espuma); }
i.w-off { background: var(--gs-ok); }
i.w-cross { background: var(--gs-atencao); }
i.w-on { background: var(--gs-perigo); }

/* a choice (filters, the dial's shortcuts): drawn in line; chosen = Rocha, never the accent */
.gs-picks { display: flex; flex-wrap: wrap; gap: var(--gs-s-2); }
.gs-pick {
  display: inline-flex; align-items: center; gap: .45em; min-height: 2.75rem; padding: .2em 1.05em 0; border: 0; border-radius: var(--gs-r-ctl);
  background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; cursor: pointer;
  font: 700 var(--gs-fs-label)/1 var(--gs-f-display); letter-spacing: .06em; text-transform: uppercase;
}
.gs-pick.is-on { background: var(--gs-rocha); color: var(--gs-espuma); box-shadow: none; }
@media (hover: hover) { .gs-pick:not(.is-on):hover { box-shadow: inset 0 0 0 2.5px currentColor; } }
.gs-pick b[hidden] { display: none; }
.gs-pick b { display: inline-grid; place-items: center; min-width: 1.4em; height: 1.4em; margin-top: -.15em; border-radius: 50%; background: var(--gs-rocha); color: var(--gs-espuma); font-size: .8em; }

/* label and value, one under the other; two across where there is room */
.gs-rows { display: grid; gap: 0 var(--gs-s-6); margin: 0; }
.gs-rows > div { min-width: 0; padding: var(--gs-s-3) 0; border-top: 1px solid var(--gs-linha); }
.gs-rows dt { font: 400 var(--gs-fs-caption)/1.2 var(--gs-f-text); color: var(--gs-rocha-2); }
.gs-rows dd { margin: .2rem 0 0; font: 500 var(--gs-fs-body)/1.35 var(--gs-f-text); overflow-wrap: break-word; }
.gs-on-mar .gs-rows > div { border-color: var(--gs-linha-clara); }
.gs-on-mar .gs-rows dt { color: var(--gs-suave-escuro); }

/* ---------- the live conditions ---------- */
.gs-live { display: grid; gap: var(--gs-s-2); min-width: 0; }
.gs-live-head { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem var(--gs-s-3); margin: 0; }
.gs-live-off { font: 500 var(--gs-fs-small)/1.2 var(--gs-f-text); }
.gs-live-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--gs-s-4); margin: 0; }
.gs-live-grid > div { min-width: 0; }
.gs-live-grid dt { font: 400 var(--gs-fs-caption)/1.2 var(--gs-f-text); color: var(--gs-suave-escuro); }
.gs-live-grid dd { display: grid; gap: .15rem; margin: .15rem 0 0; }
.gs-live-grid b { font: 900 var(--gs-fs-figure-sm)/.9 var(--gs-f-display); text-transform: uppercase; color: var(--gs-agua); white-space: nowrap; }
.gs-live-grid dd span { font: 400 var(--gs-fs-caption)/1.25 var(--gs-f-text); overflow-wrap: anywhere; }
.gs-live-foot { margin: 0; font-size: var(--gs-fs-caption); line-height: 1.4; color: var(--gs-suave-escuro); max-width: 52ch; }
.gs-live[data-state="down"] .gs-live-grid b { color: var(--gs-suave-escuro); }

/* ---------- the hub's hero ---------- */
/* a longer title than the Lessons': a scale of its own, so it is two lines on the sky */
@media (min-width: 44.01rem) { body.gs-spots { --gs-fs-display: clamp(4rem, 6.6vw, 9.5rem); } }
@media (max-width: 44rem) {
  body.gs-spots { --gs-fs-display: clamp(2.25rem, 14.2vw, 4.25rem); }
  @supports (height: 1svh) { body.gs-spots { --gs-fs-display: clamp(2.25rem, min(14.2vw, calc((100svh - var(--gs-consent-h)) * .085)), 4.25rem); } }
}
.gs-spots-hero .gs-hero-frame > picture > img { object-position: 50% 0; }
.gs-spots-dock { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) auto; align-items: center; }
.gs-spots-dock .gs-dock-what { max-width: 34ch; }
.gs-spots-dock .gs-dock-act { min-width: 13rem; }
.gs-spots-dock .gs-cta { cursor: pointer; }

/* ---------- the finder ---------- */
.gs-finder .gs-head { margin-bottom: var(--gs-s-5); }
.gs-filters { display: flex; flex-wrap: wrap; gap: var(--gs-s-3) var(--gs-s-6); color: var(--gs-rocha); }
.gs-filters-more { display: contents; }
.gs-fgroup { display: grid; gap: .35rem; min-width: 0; }
.gs-flabel { font: 400 var(--gs-fs-caption)/1.2 var(--gs-f-text); color: var(--gs-rocha-2); }
.gs-pick-more { display: none; }
.gs-fbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--gs-s-5); margin: var(--gs-s-4) 0 var(--gs-s-4); color: var(--gs-mar); }
.gs-fcount { font: 900 var(--gs-fs-heading)/1 var(--gs-f-display); text-transform: uppercase; }
body.gs .gs-fcount:focus-visible { outline-offset: 4px; border-radius: var(--gs-r-sm); }
.gs-fclear { border: 0; background: none; cursor: pointer; font-size: var(--gs-fs-label); }
.gs-nomatch { padding: var(--gs-s-5); border-radius: var(--gs-r-card); background: var(--gs-espuma); }
.gs-nomatch p { margin: 0; max-width: 60ch; }
.gs-finder .gs-after { margin-top: var(--gs-s-6); }

/* the system's spot card: six rows shared by every card of a row (subgrid), so names, facts and
   wind tags line up across the grid whatever the text above them runs to */
.gs-spotgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gs-s-5) var(--gs-s-4); }
.gs-spotgrid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* the zones: on a wide screen they dissolve into the one grid; on a phone each is a strip */
.gs-zone, .gs-zone-strip { display: contents; }
.gs-zone-name { display: none; }
.gs-scard {
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: var(--gs-espuma); color: var(--gs-rocha); border-radius: var(--gs-r-card);
  transition: transform .18s ease, box-shadow .18s ease;
}
@supports (grid-template-rows: subgrid) { .gs-scard { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; } }
.gs-scard[hidden] { display: none; }
.gs-scard > :not(.gs-scard-media) { margin: 0; padding-inline: var(--gs-s-4); }
.gs-scard-media { position: relative; margin: 0; aspect-ratio: 3 / 2; background: var(--gs-areia); overflow: hidden; }
.gs-scard-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100% !important; object-fit: cover; }
.gs-scard-media .gs-tag { position: absolute; left: var(--gs-s-3); top: var(--gs-s-3); }
.gs-nophoto { position: absolute; inset: 0; display: grid; place-items: center; padding: 8%; }
.gs-nophoto .fp { max-height: 100%; width: auto; }
.gs-scard-area { padding-top: var(--gs-s-3); font: 400 var(--gs-fs-caption)/1.2 var(--gs-f-text); color: var(--gs-rocha-2); }
.gs-scard .gs-heading { padding-top: .2rem; color: var(--gs-mar); -webkit-hyphens: manual; hyphens: manual; }
.gs-scard .gs-heading a { color: inherit; text-decoration: none; }
/* the whole card is the link */
.gs-scard .gs-heading a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.gs-scard-facts { display: flex; flex-wrap: wrap; align-content: flex-start; gap: .3rem; padding-block: var(--gs-s-2) 0; list-style: none; }
.gs-scard-facts .gs-chip { min-height: 1.625rem; padding-inline: .65em; background: var(--gs-areia); font-size: var(--gs-fs-caption); }
.gs-scard-facts .gs-chip-line { background: transparent; }
.gs-scard-note { padding-top: .4rem; font: 500 var(--gs-fs-caption)/1.25 var(--gs-f-text); color: var(--gs-mar); }
.gs-scard-note:empty { padding-top: 0; }
.gs-scard-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem var(--gs-s-2); min-height: 2.25rem; padding-block: var(--gs-s-2) var(--gs-s-2); }
.sc-wind::before { content: ""; width: .45em; height: .45em; margin: -.15em .45em 0 0; border-radius: 50%; background: currentColor; }
.cmp-btn {
  position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 2.75rem; margin: -.25rem 0 -.25rem auto; padding: 0; border: 0; background: none; color: var(--gs-rocha); cursor: pointer;
  font: 700 var(--gs-fs-tag)/1 var(--gs-f-display); letter-spacing: .06em; text-transform: uppercase; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .28em;
}
.cmp-btn.is-on { text-decoration: none; }
.cmp-btn.is-on::before { content: "✓"; margin-right: .35em; }
@media (hover: hover) { .gs-scard:hover { transform: translateY(-4px); box-shadow: var(--gs-sombra); z-index: 1; } }
body.gs .gs-scard :focus-visible { outline-color: var(--gs-mar); }

/* the choice for the comparison: a plate of deep water over the foot of the screen */
.gs-tray {
  position: fixed; z-index: 44; left: 50%; bottom: 1rem; display: flex; align-items: center; gap: var(--gs-s-3); max-width: calc(100vw - 2rem);
  padding: var(--gs-s-2) var(--gs-s-2) var(--gs-s-2) var(--gs-s-4); border-radius: var(--gs-r-card); background: var(--gs-mar); color: var(--gs-espuma); box-shadow: var(--gs-sombra);
  translate: -50% 160%; visibility: hidden; transition: translate .2s ease, visibility 0s .2s;
}
.gs-tray.is-up { translate: -50% 0; visibility: visible; transition: translate .2s ease; }
.gs-tray-names { display: flex; flex-wrap: wrap; gap: .2rem var(--gs-s-3); min-width: 0; font: 500 var(--gs-fs-small)/1.2 var(--gs-f-text); }
.gs-tray .gs-cta { background: var(--gs-acento-inv); color: var(--gs-acento-inv-tinta); white-space: nowrap; cursor: pointer; }
.gs-tray .gs-tray-x { display: inline-flex; flex: none; white-space: nowrap; }
body.gs .gs-tray :focus-visible { outline-color: var(--gs-espuma); }
.gs-sheet-wide { width: min(64rem, calc(100vw - 2rem)); }
.cmp-scroll { overflow-x: auto; }
.cmp-table { width: 100%; border-collapse: collapse; font-size: var(--gs-fs-small); line-height: 1.35; }
.cmp-table th, .cmp-table td { padding: var(--gs-s-2) var(--gs-s-3) var(--gs-s-2) 0; text-align: left; vertical-align: top; border-top: 1px solid var(--gs-linha); min-width: 9rem; }
.cmp-table thead td, .cmp-table thead th { border-top: 0; }
.cmp-table th { min-width: 7rem; font: 400 var(--gs-fs-caption)/1.3 var(--gs-f-text); color: var(--gs-rocha-2); }
.cmp-table thead strong { display: block; font: 800 var(--gs-fs-heading)/.95 var(--gs-f-display); text-transform: uppercase; color: var(--gs-mar); }
.cmp-fp { width: 6rem; margin-top: var(--gs-s-2); }

/* a browser that does not know <dialog> would lay the three sheets out at the foot of the page */
dialog.gs-sheet:not([open]) { display: none; }
.gs-no-dialog .cmp-btn, .gs-no-dialog .gs-tray, .gs-no-dialog .gs-pick-more, .gs-no-dialog .gs-bar-btn, .gs-no-dialog [data-quiz-open] { display: none !important; }
.gs-no-dialog .gs-filters > .gs-filters-more { display: contents !important; }

/* the three questions */
.gs-quiz-step { margin-left: .5em; font-size: var(--gs-fs-label); letter-spacing: .08em; color: var(--gs-rocha-2); white-space: nowrap; }
.quiz-q { display: none; }
.quiz-q.is-on { display: block; }
.quiz-q h3 { margin: 0 0 var(--gs-s-4); font: 500 var(--gs-fs-sub-lg)/1.2 var(--gs-f-text); }
.quiz-opts { display: grid; gap: var(--gs-s-2); }
.quiz-opt {
  display: grid; gap: .25rem; width: 100%; padding: var(--gs-s-4) var(--gs-s-5); border: 0; border-radius: var(--gs-r-card); background: var(--gs-areia); color: var(--gs-rocha);
  text-align: left; cursor: pointer; font: inherit;
}
.qo-t { font: 800 var(--gs-fs-heading)/.95 var(--gs-f-display); text-transform: uppercase; color: var(--gs-mar); }
.qo-s { font-size: var(--gs-fs-small); line-height: 1.4; color: var(--gs-rocha-2); }
@media (hover: hover) { .quiz-opt:hover { box-shadow: inset 0 0 0 2px var(--gs-mar); } }
.gs-quiz .gs-sheet-foot { display: flex; justify-content: center; }
.gs-quiz .gs-sheet-foot .gs-link { border: 0; background: none; cursor: pointer; font-size: var(--gs-fs-label); }
#filters-body .gs-filters-more { display: grid; gap: var(--gs-s-4); }

/* ---------- the coast and the wind ---------- */
.gs-coast-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gs-s-6); align-items: center; }
.gs-map { min-width: 0; }
.coast-map { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--gs-r-photo); overflow: hidden; background: var(--gs-mar); isolation: isolate; }
.map-fallback { margin: var(--gs-s-3) 0 0; }
.gs-map-touch { display: none; margin: var(--gs-s-2) 0 0; font-size: var(--gs-fs-caption); }
.map-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem var(--gs-s-4); margin: var(--gs-s-3) 0 0; font-size: var(--gs-fs-caption); line-height: 1.3; }
.map-legend > span { display: inline-flex; align-items: center; gap: .45rem; }
.spot-pin { cursor: pointer; }
body.gs .leaflet-container { font-family: var(--gs-f-text); background: var(--gs-mar); }
body.gs .leaflet-bar a, body.gs .leaflet-bar a:hover { width: 2.75rem; height: 2.75rem; line-height: 2.75rem; background: var(--gs-espuma); color: var(--gs-rocha); }
body.gs .leaflet-control-attribution { background: rgb(250 246 236 / .88); color: var(--gs-rocha); font-size: .6875rem; }
body.gs .leaflet-control-attribution a { color: var(--gs-rocha); }
body.gs .leaflet-popup-content-wrapper { background: var(--gs-espuma); color: var(--gs-rocha); border-radius: var(--gs-r-card); box-shadow: var(--gs-sombra); }
body.gs .leaflet-popup-tip { background: var(--gs-espuma); }
body.gs .leaflet-popup-content { margin: var(--gs-s-4) var(--gs-s-5); font-size: var(--gs-fs-small); line-height: 1.45; }
body.gs .leaflet-popup-content > span { display: block; }
.pop-area { font-size: var(--gs-fs-caption); color: var(--gs-rocha-2); }
.pop-name { font: 800 var(--gs-fs-heading)/1 var(--gs-f-display); text-transform: uppercase; color: var(--gs-mar); }
.pop-wind { margin-top: .4rem; }
body.gs .leaflet-popup-content a.pop-link { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--gs-mar); font: 700 var(--gs-fs-label)/1 var(--gs-f-display); letter-spacing: .05em; text-transform: uppercase; text-underline-offset: .28em; }
body.gs .map-tip { padding: .3rem .6rem; border: 0; border-radius: var(--gs-r-sm); background: var(--gs-mar); color: var(--gs-espuma); font: 500 var(--gs-fs-caption)/1.2 var(--gs-f-text); box-shadow: none; }
body.gs .map-tip::before { display: none; }

.gs-dial { display: grid; gap: var(--gs-s-4); justify-items: center; min-width: 0; padding: var(--gs-s-5); border-radius: var(--gs-r-card); background: var(--gs-espuma); color: var(--gs-rocha); }
.dial-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--gs-s-3) var(--gs-s-5); }
.dial { display: block; width: 11.5rem; height: 11.5rem; overflow: visible; touch-action: none; cursor: grab; border-radius: 50%; }
.dial:active { cursor: grabbing; }
body.gs .dial:focus-visible { outline-color: var(--gs-mar); outline-offset: 4px; }
.dial-ring { fill: var(--gs-areia); stroke: var(--gs-linha); stroke-width: 1; }
.dial-tick { stroke: var(--gs-rocha-2); stroke-width: 1; }
.dial-arrow, .dial-hub { fill: var(--gs-mar); }
.dial-read { text-align: center; }
.d-dir { font: 900 var(--gs-fs-figure)/.82 var(--gs-f-display); color: var(--gs-mar); }
.d-deg { margin-top: .3rem; font: 700 var(--gs-fs-ui-lg)/1 var(--gs-f-display); color: var(--gs-rocha-2); }
.dial-hint { margin: 0; max-width: 38ch; text-align: center; font-size: var(--gs-fs-small); line-height: 1.4; color: var(--gs-rocha-2); }
.dial-presets { justify-content: center; }
.dial-presets .gs-pick { min-width: 2.75rem; justify-content: center; padding-inline: .8em; }
.dial-tally { display: grid; gap: .35rem; width: 100%; padding-top: var(--gs-s-4); border-top: 1px solid var(--gs-linha); font-size: var(--gs-fs-small); line-height: 1.3; }
.dial-tally > div { display: flex; align-items: center; gap: .55rem; }
.dial-tally b { min-width: 1.4em; font: 900 var(--gs-fs-ui-lg)/1 var(--gs-f-display); color: var(--gs-mar); }
.dial-tally i { box-shadow: none; }

/* ---------- reading the page: the gradings, and one fingerprint with its axes named ---------- */
.gs-grades { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gs-s-4); margin: 0; }
.gs-grade { display: grid; gap: var(--gs-s-3); align-content: start; min-width: 0; padding: var(--gs-s-4) var(--gs-s-5) var(--gs-s-5); border-radius: var(--gs-r-card); background: var(--gs-espuma); }
.gs-grade dt { justify-self: start; }
.gs-grade dd { margin: 0; font-size: var(--gs-fs-small); line-height: 1.45; }
.gs-fpkey { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--gs-s-6); align-items: center; margin-top: var(--gs-s-7); }
.gs-fpkey-fig { margin: 0; text-align: center; }
.gs-fpkey-fig figcaption { margin-top: var(--gs-s-2); font: 800 var(--gs-fs-ui-lg)/1 var(--gs-f-display); letter-spacing: .04em; text-transform: uppercase; color: var(--gs-mar); }
.gs-fpkey-text { display: grid; gap: var(--gs-s-3); justify-items: start; }
.gs-fpkey-text p { margin: 0; max-width: 56ch; }

/* the radar with a name at each point (words beside the drawing, so they translate and wrap) */
.gs-fp { --gs-fp-r: 4.75rem; position: relative; display: grid; place-items: center; width: fit-content; margin-inline: auto; padding: 2.4rem 6rem 1.9rem; }
.gs-fp-svg { display: block; width: calc(var(--gs-fp-r) * 2 + 1.5rem); height: auto; overflow: visible; }
.fp { display: block; overflow: visible; }
.fp-ring, .fp-spoke { fill: none; stroke: var(--gs-rocha); stroke-opacity: .2; stroke-width: .7; }
.fp-shape { fill: var(--gs-agua); fill-opacity: .7; stroke: var(--gs-mar); stroke-width: 1.6; stroke-linejoin: round; }
.gs-fp-l { position: absolute; max-width: 5.6rem; font: 400 var(--gs-fs-caption)/1.15 var(--gs-f-text); color: var(--gs-rocha-2); overflow-wrap: anywhere; }
.gs-fp-l b { font: 800 var(--gs-fs-ui-lg)/1 var(--gs-f-display); color: var(--gs-mar); }
.gs-fp-l1 { top: .5rem; left: 50%; translate: -50% 0; max-width: none; white-space: nowrap; }
.gs-fp-l2 { left: calc(50% + var(--gs-fp-r) * .98 + .5rem); top: calc(50% - var(--gs-fp-r) * .3); translate: 0 -50%; }
.gs-fp-l3 { left: calc(50% + var(--gs-fp-r) * .62 + .5rem); top: calc(50% + var(--gs-fp-r) * .86); translate: 0 -30%; }
.gs-fp-l4 { right: calc(50% + var(--gs-fp-r) * .62 + .5rem); top: calc(50% + var(--gs-fp-r) * .86); translate: 0 -30%; text-align: right; }
.gs-fp-l5 { right: calc(50% + var(--gs-fp-r) * .98 + .5rem); top: calc(50% - var(--gs-fp-r) * .3); translate: 0 -50%; text-align: right; }

/* ---------- the last band (hub) and the way to the club (a spot page) ---------- */
.gs-also { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem var(--gs-s-4); margin: 0; }
.gs-also .gs-from b { font-size: var(--gs-fs-heading); }
.gs-also .gs-from small, .gs-also .gs-from > span { font-size: var(--gs-fs-tag); }
.gs-final .gs-acts { display: grid; gap: var(--gs-s-3); justify-items: start; }
.gs-final-rating [data-reviews="compact"] { margin: 0; }
.gs-final-rating .rv-sum { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .5rem; margin: 0; color: var(--gs-espuma); font: 500 var(--gs-fs-small)/1.2 var(--gs-f-text); }
body.gs .gs-final-rating .rv-stars { color: var(--gs-areia); }
.gs-final-rating .rv-compact-link { display: inline-flex; align-items: center; min-height: 2.75rem; margin-right: .5rem; color: inherit; font: 500 var(--gs-fs-caption)/1.2 var(--gs-f-text); letter-spacing: 0; text-transform: none; text-underline-offset: .2em; }
.gs-final-rating .rv-attr { display: inline-block; white-space: nowrap; margin: 0; color: var(--gs-suave-escuro); font: 400 var(--gs-fs-caption)/1.2 var(--gs-f-text); letter-spacing: 0; text-transform: none; opacity: 1; }
body.gs-spots .gs-final-photo img { object-position: 50% 42%; }

/* ---------- the bar on these pages ---------- */
.gs-bar-btn, .gs-bar-spot, .gs-bar-wa { display: none; }
.gs-bar-wa svg { width: 1.3rem; height: 1.3rem; }

/* ============================================================
   A SPOT PAGE
   ============================================================ */
body.gs-spot { --gs-fs-display: clamp(3rem, 6vw, 6rem); }
body.gs-spot .gs-hero { display: block; min-height: 0; padding: var(--gs-s-3) var(--gs-s-3) var(--gs-s-7); }
.gs-spot-nav { padding: clamp(1rem, 2.2vw, 1.75rem) clamp(1.1rem, 3.3vw, 3rem) 0; }
.gs-spot-first { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; max-width: var(--gs-wrap); margin-inline: auto; padding: var(--gs-s-4) calc(var(--gs-gutter) - var(--gs-s-3)) 0; }
.gs-spot-text { display: grid; gap: var(--gs-s-3); justify-items: start; min-width: 0; color: var(--gs-rocha); }
.gs-spot-text > * { margin: 0; min-width: 0; }
.gs-crumb { font: 400 var(--gs-fs-small)/1.2 var(--gs-f-text); color: var(--gs-rocha-2); }
.gs-crumb a { display: inline-flex; align-items: center; min-height: 2.75rem; color: inherit; text-underline-offset: .2em; }
.gs-spot-text .gs-display { color: var(--gs-mar); line-height: .9; -webkit-hyphens: manual; hyphens: manual; }
.gs-spot-type { font: 500 var(--gs-fs-sub-lg)/1.25 var(--gs-f-text); }
.gs-spot-blurb { max-width: 46ch; }
.gs-spot-grade { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem var(--gs-s-3); font-size: var(--gs-fs-body); line-height: 1.35; }
.gs-spot-level { font: 500 var(--gs-fs-sub)/1.3 var(--gs-f-text); }
.gs-spot-k { display: block; font: 400 var(--gs-fs-caption)/1.2 var(--gs-f-text); color: var(--gs-rocha-2); }
/* what can hurt you: words, with a mark that says it is a warning (never colour alone) */
.gs-spot-warn { max-width: 52ch; padding: var(--gs-s-3) var(--gs-s-4); border-left: 4px solid var(--gs-perigo); border-radius: 0 var(--gs-r-sm) var(--gs-r-sm) 0; background: var(--gs-espuma); line-height: 1.5; }
.gs-spot-photo { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: var(--gs-r-photo); overflow: hidden; background: var(--gs-agua); }
.gs-spot-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100% !important; object-fit: cover; }
.gs-spot-photo .gs-nophoto { background: var(--gs-espuma); }

.gs-cond-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 1.1fr); gap: var(--gs-s-6) clamp(1.5rem, 4vw, 4rem); align-items: center; }
.gs-cond-cp { margin: 0; display: grid; justify-items: center; gap: var(--gs-s-2); }
.cp { display: block; width: 13rem; height: auto; overflow: visible; }
.cp-face-bg { fill: rgb(250 246 236 / .08); stroke: var(--gs-linha-clara); stroke-width: 1; }
.cp-off { fill: var(--gs-agua); fill-opacity: .45; }
.cp-tick { stroke: var(--gs-suave-escuro); stroke-width: 1; }
.cp-face { stroke: var(--gs-areia); stroke-width: 3; stroke-linecap: round; }
.cp-hub { fill: var(--gs-areia); }
.cp-lab { fill: var(--gs-espuma); text-anchor: middle; font: 700 12px/1 var(--gs-f-display); letter-spacing: .06em; }
.cp-wind path { fill: var(--gs-espuma); }
.cp-wind line { stroke: var(--gs-espuma); stroke-width: 2.5; stroke-linecap: round; }
.gs-cond-cp figcaption { font-style: normal; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .25rem .45rem; max-width: 15rem; font-size: var(--gs-fs-caption); line-height: 1.3; color: var(--gs-suave-escuro); }
.cp-k { display: inline-block; flex: none; width: 1rem; height: .25rem; margin-left: .5rem; border-radius: 2px; }
.cp-k:first-child { margin-left: 0; }
.cp-k-face { background: var(--gs-areia); }
.cp-k-off { height: .7rem; background: var(--gs-agua); opacity: .6; }
.cp-k-wind { background: var(--gs-espuma); }
.gs-cond .gs-live { align-self: center; padding: var(--gs-s-5); border-radius: var(--gs-r-card); background: var(--gs-mar-2); box-shadow: inset 0 0 0 1px var(--gs-linha-clara); }

.gs-bridge { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gs-s-5) clamp(1.5rem, 4vw, 4rem); align-items: center; margin-top: var(--gs-s-7); padding-top: var(--gs-s-6); border-top: 1px solid var(--gs-linha-clara); }
.gs-bridge-text { display: grid; gap: var(--gs-s-2); }
.gs-bridge-text .gs-heading { font-size: var(--gs-fs-title-sm); font-weight: 900; line-height: .9; color: var(--gs-areia); }
.gs-bridge-text p { margin: 0; max-width: 52ch; }
.gs-bridge-act { display: grid; gap: var(--gs-s-3); justify-items: start; }
.gs-bridge-act .gs-from { color: var(--gs-espuma); }

.gs-detail-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--gs-s-6) clamp(1.5rem, 4vw, 4rem); align-items: center; }
.gs-detail-fp { display: grid; gap: var(--gs-s-2); justify-items: center; padding: var(--gs-s-4) var(--gs-s-3) var(--gs-s-5); border-radius: var(--gs-r-card); background: var(--gs-espuma); }
.gs-detail-fp .gs-caption { margin: 0; max-width: 32ch; text-align: center; color: var(--gs-rocha-2); }
.gs-detail-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
.gs-nearby { margin-top: var(--gs-s-8); }
.gs-nearby > .gs-heading { margin-bottom: var(--gs-s-4); color: var(--gs-mar); }
.gs-detail-all { margin: var(--gs-s-6) 0 0; }

/* ============================================================ */
@media (max-width: 64rem) {
  .gs-spots-dock { grid-template-columns: minmax(0, 1fr) auto; }
  .gs-spots-dock .gs-dock-what { grid-column: 1 / -1; max-width: none; }
  .gs-spotgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gs-grades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gs-coast-grid { grid-template-columns: minmax(0, 1fr); }
  .gs-cond-grid { grid-template-columns: minmax(0, 1fr) auto; }
  .gs-cond-grid .gs-live { grid-column: 1 / -1; }
  .gs-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .gs-bridge { grid-template-columns: minmax(0, 1fr); }
}
@media (hover: none) { .gs-map-touch { display: block; } .coast-map.is-awake + noscript + .gs-map-touch, .coast-map.is-awake ~ .gs-map-touch { display: none; } }
@media (max-width: 56rem) {
  .gs-spot-first { grid-template-columns: minmax(0, 1fr); gap: var(--gs-s-4); padding-inline: var(--gs-s-2); }
  /* the photograph first, the words under it */
  .gs-spot-photo { order: -1; aspect-ratio: 3 / 2; }
}
@media (max-width: 44rem) {
  /* the hub's dock on a phone: the three readings in a row, the action under them */
  .gs-spots-dock { grid-template-columns: minmax(0, 1fr); gap: var(--gs-s-3); }
  .gs-spots-dock .gs-live { gap: .4rem; }
  .gs-spots-dock .gs-live-grid { gap: var(--gs-s-3); }
  .gs-spots-dock .gs-live-grid b { font-size: var(--gs-fs-heading); }
  .gs-spots-dock .gs-live-foot { display: none; }
  .gs-spots-dock .gs-live-off { font-size: var(--gs-fs-caption); }
  .gs-spots-dock .gs-dock-act { min-width: 0; }
  .gs-spots-dock .gs-dock-act .gs-link { display: none; }
  /* a first visit on a phone: the banner is coming, so the dock keeps the three readings and gives up the lines around them */
  html.gs-first-visit .gs-spots-dock .gs-live-head, html.gs-first-visit .gs-spots-dock .gs-live-grid dd span { display: none; }
  html.gs-first-visit .gs-spots-dock { gap: var(--gs-s-2); }

  /* the filters: the four questions people ask first stay in sight, the rest open in a sheet */
  .gs-filters > .gs-filters-more { display: none; }
  .gs-pick-more { display: inline-flex; }
  .gs-pick { min-height: 2.75rem; padding-inline: .85em; font-size: var(--gs-fs-tag); }
  .gs-fbar { margin-block: var(--gs-s-3); }

  /* sixteen cards, two across */
  .gs-spotgrid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gs-s-3); }
  /* the hub on a phone: one strip per zone (owner, 2026-10-12). The next card peeks in, which is what says "this slides". */
  #spots-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gs-s-5); }
  .gs-zone { display: block; min-width: 0; }
  .gs-zone-name { display: block; margin: 0 0 var(--gs-s-2); font: 800 var(--gs-fs-heading)/1 var(--gs-f-display); text-transform: uppercase; color: var(--gs-mar); }
  .gs-zone-strip {
    display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: var(--gs-s-3); overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gs-gutter)); padding-inline: var(--gs-gutter); scroll-padding-inline: var(--gs-gutter); scrollbar-width: none;
  }
  .gs-zone-strip::-webkit-scrollbar { display: none; }
  .gs-zone-strip > * { scroll-snap-align: start; }
  #spots-grid .gs-scard { display: flex; flex-direction: column; }
  #spots-grid .gs-scard-foot { margin-top: auto; }
  .gs-zone .gal-dots { display: none; }
  /* the strip's title already names the zone */
  .gs-zone .gs-scard-area { display: none; }
  .gs-zone .gs-scard .gs-heading { padding-top: var(--gs-s-3); }
  .gs-scard > :not(.gs-scard-media) { padding-inline: var(--gs-s-3); }
  /* two across there is one line for facts: "Beginner-safe" says what the "Gentle" on the photograph already says */
  .gs-scard-facts .gs-chip-line { display: none; }
  .gs-scard-media .gs-tag { left: var(--gs-s-2); top: var(--gs-s-2); min-height: 1.5rem; font-size: .8125rem; }
  .gs-scard .gs-heading { font-size: 1.5rem; }
  .gs-scard-area { padding-top: var(--gs-s-2); }
  .gs-scard-foot { padding-block: var(--gs-s-1) var(--gs-s-1); }
  .sc-wind { min-height: 1.5rem; font-size: .8125rem; }
  @media (hover: hover) { .gs-scard:hover { transform: none; box-shadow: none; } }

  .gs-tray { left: var(--gs-s-3); right: var(--gs-s-3); bottom: calc(var(--gs-bar-h) + var(--gs-s-2) + env(safe-area-inset-bottom, 0px)); max-width: none; translate: 0 260%; justify-content: space-between; padding-left: var(--gs-s-3); }
  .gs-tray.is-up { translate: 0 0; }
  .gs-tray-names { font-size: var(--gs-fs-caption); }
  .gs-tray .gs-tray-x { display: none; }
  body.gs.cookie-open .gs-tray { bottom: calc(var(--gs-cookie-real, var(--cookie-h, 14.5rem)) + var(--gs-s-2)); }
  .gs-sheet-wide { width: 100vw; }
  .cmp-table th, .cmp-table td { min-width: 8rem; }
  .cmp-table th { min-width: 5.5rem; }

  .coast-map { aspect-ratio: auto; height: min(62vh, 24rem); height: min(62svh, 24rem); }
  .gs-dial { padding: var(--gs-s-4); }
  .gs-grades { grid-template-columns: minmax(0, 1fr); gap: var(--gs-s-2); }
  .gs-grade { grid-template-columns: 7.5rem minmax(0, 1fr); align-items: start; padding: var(--gs-s-3) var(--gs-s-4); }
  .gs-fpkey { grid-template-columns: minmax(0, 1fr); gap: var(--gs-s-4); margin-top: var(--gs-s-6); }
  .gs-fp { --gs-fp-r: 3.9rem; padding: 2.3rem 5.4rem 1.8rem; }
  .gs-fp-l { max-width: 5rem; }

  /* the bar under the thumb: the menu, what this page most needs at hand, WhatsApp */
  .gs-spots .gs-bar .gs-cta { display: none; }
  .gs-spots .gs-bar-wa { display: grid; place-content: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
  .gs-spots .gs-bar .gs-nav-tools { gap: var(--gs-s-2); }
  .gs-bar-btn { display: inline-flex; align-items: center; min-height: 2.75rem; margin-right: auto; padding: .2em 1.1em 0; border: 0; border-radius: var(--gs-r-ctl); background: var(--gs-acento-inv); color: var(--gs-acento-inv-tinta); cursor: pointer; font: 800 var(--gs-fs-label)/1 var(--gs-f-display); letter-spacing: .06em; text-transform: uppercase; }
  .gs-bar-spot { display: block; margin: 0 auto 0 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 900 var(--gs-fs-heading)/1 var(--gs-f-display); text-transform: uppercase; color: var(--gs-areia); }

  body.gs-spot .gs-hero { padding: var(--gs-s-2) var(--gs-s-2) var(--gs-s-6); }
  .gs-spot-nav { padding: var(--gs-s-2) var(--gs-s-3) 0; }
  .gs-spot-first { padding: var(--gs-s-3) var(--gs-s-2) 0; }
  .gs-spot-type { font-size: var(--gs-fs-sub); }
  .gs-cond-grid { grid-template-columns: minmax(0, 1fr); gap: var(--gs-s-5); }
  .gs-cond-cp { order: 2; }
  .gs-cond .gs-live { order: 1; padding: var(--gs-s-4); }
  .gs-live-grid { gap: var(--gs-s-3); }
  .gs-live-grid b { font-size: var(--gs-fs-heading); }
  /* two neighbours side by side are enough on a phone: the third is one tap away, under "All spots" */
  .gs-nearby .gs-spotgrid-3 > :nth-child(n + 3) { display: none; }
  .gs-cond-when { order: 3; }
  .cp { width: 11.5rem; }
  .gs-bridge { margin-top: var(--gs-s-6); padding-top: var(--gs-s-5); }
  .gs-detail-rows { grid-template-columns: minmax(0, 1fr); }
  .gs-nearby { margin-top: var(--gs-s-7); }
}
@media (max-width: 22.5rem) {
  .gs-scard .gs-heading { font-size: 1.3125rem; }
  .gs-live-grid b, .gs-spots-dock .gs-live-grid b { font-size: 1.5rem; }
  .gs-fp { --gs-fp-r: 3.3rem; padding-inline: 4.9rem; }
  .gs-fp-l { max-width: 4.5rem; }
  .gs-grade { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .gs-scard, .gs-tray, .gs-tray.is-up { transition: none; }
  .gs-scard:hover { transform: none; }
}
@media (forced-colors: active) {
  .gs-pick, .gs-scard, .quiz-opt, .gs-tray, .gs-grade, .gs-dial, .gs-detail-fp, .gs-bar-btn { border: 1px solid; }
  .gs-pick.is-on { outline: 2px solid; }
}

/* ================= READING THE OCEAN (moved from the Explore, 2026-10-15) =================
   Oliva, between the grading (Areia) and the last call (Mar). Three columns: a line drawing, what the
   swell / the tide / the wind does, and what it means for whoever surfs. No live figures here: those
   are in the dock at the top of the page (the link at the foot goes there). */
.gs-ocean-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gs-s-6) clamp(1.5rem, 3vw, 3rem); margin: 0; }
.gs-ocean-item { display: grid; gap: var(--gs-s-3); align-content: start; }
.gs-ocean-art { display: block; width: 100%; height: auto; max-width: 24rem; color: var(--gs-areia); }
.gs-ocean-label text { fill: var(--gs-espuma); stroke: none; font: 700 10px var(--gs-f-display); letter-spacing: .06em; text-transform: uppercase; }
.gs-ocean-item .gs-heading { color: var(--gs-areia); }
.gs-ocean-item p { margin: 0; max-width: 46ch; }
.gs-ocean-means strong { display: block; margin-bottom: .2rem; font: 700 var(--gs-fs-tag)/1.2 var(--gs-f-display); letter-spacing: .07em; text-transform: uppercase; color: var(--gs-espuma); }
.gs-ocean-out { margin: var(--gs-s-7) 0 0; }
.gs-ocean-out .gs-link { color: var(--gs-espuma); }
@media (max-width: 64rem) { .gs-ocean-cols { grid-template-columns: minmax(0, 1fr); } .gs-ocean-art { max-width: 22rem; } }