.spots-page { background: var(--foam); }
.spots-intro { width: 100%; min-height: 520px; height: 520px; position: relative; display: flex; align-items: flex-end; padding: 0 8vw 3.5rem; overflow: hidden; color: var(--foam); background: url("assets/ride-spots-hero.jpg") center 55%/cover no-repeat; }
.spots-intro-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,30,39,.76), rgba(13,30,39,.29) 63%, rgba(13,30,39,.14)), linear-gradient(0deg, rgba(13,30,39,.42), transparent 48%); }
.spots-intro-content { position: relative; z-index: 1; max-width: 850px; animation: enter-up .85s .12s both; }
.spots-intro h1 { max-width: 850px; margin: 0 0 1.1rem; font-size: clamp(3.8rem, 7.2vw, 7.2rem); line-height: .83; letter-spacing: -.04em; }
.spots-intro-content > p:not(.eyebrow) { max-width: 440px; margin: 0 0 1.4rem; font-size: clamp(1rem, 1.4vw, 1.1rem); line-height: 1.48; }
.map-hero { margin-top: 0; background: var(--foam); overflow: hidden; }
.spot-map { position: relative; top: -60px; display: block; width: 100%; height: calc(min(73vh, 720px) + 60px); min-height: 570px; margin-bottom: -60px; border: none; border-bottom: 4px solid var(--glass); }
.map-tag { appearance: none; border: 1px solid rgba(18,42,46,.2); background: rgba(174,189,188,.2); padding: .72rem .82rem; color: var(--ink); text-align: left; font: 600 .8rem/1 var(--sans); cursor: pointer; transition: background .2s, color .2s, transform .2s; }
.map-tag small { display: block; margin-bottom: .35rem; color: rgba(18,42,46,.55); font: 9px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.map-tag-high { background: var(--harbor); border-color: var(--harbor); color: var(--foam); }
.map-tag-high small { color: rgba(241,243,239,.76); }
.map-tag-medium { background: rgba(19,169,165,.16); border-color: rgba(19,169,165,.7); color: var(--deep); }
.map-tag-medium small { color: rgba(18,42,46,.68); }
.map-tag-advanced { border-color: #9e6a2d; }
.map-tag-restricted, .map-tag-seasonal { border-color: #b36f37; background: #f1e2cf; color: var(--deep); }
.map-tag-high.map-tag-seasonal[data-spot-id="spot-03"],
.map-tag-high.map-tag-seasonal[data-spot-id="spot-13"] { border-color: var(--harbor); background: var(--harbor); color: var(--foam); }
.map-tag-do-not-kite { border-color: #8d3b33; background: #8d3b33; color: var(--foam); }
.map-tag-do-not-kite small { color: rgba(255,255,255,.78); }
.map-tag-unverified { border-style: dashed; border-color: rgba(18,42,46,.52); }
.map-tag-access { color: inherit !important; opacity: .78; }
.map-tag:hover, .map-tag.is-active { background: var(--glass); border-color: var(--glass); color: var(--deep); transform: translateY(-2px); }
.map-tag:hover small, .map-tag.is-active small { color: rgba(18,42,46,.68); }

.spot-directory { padding-top: clamp(5.5rem, 10vw, 10rem); padding-bottom: clamp(6rem, 10vw, 10rem); background: var(--foam); }
.directory-heading { display: grid; grid-template-columns: 1.25fr .5fr; gap: 8vw; align-items: end; padding-bottom: 4.2rem; }
.directory-heading > p, .directory-heading-aside > p { font-size: 1.02rem; line-height: 1.55; max-width: 380px; margin: 0; color: rgba(18,42,46,.78); }
.directory-heading-aside { display: grid; justify-items: start; gap: 1.35rem; }
.spot-legend { display: flex; flex-wrap: wrap; gap: .75rem 1.35rem; margin: -1.5rem 0 3rem; color: rgba(18,42,46,.7); font: 10px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.spot-legend span { display: inline-flex; align-items: center; gap: .5rem; }
.spot-legend i { width: .72rem; height: .72rem; border: 1px solid transparent; }
.spot-legend .legend-high { background: var(--harbor); border-color: var(--harbor); }
.spot-legend .legend-medium { background: rgba(19,169,165,.16); border-color: rgba(19,169,165,.7); }
.spot-legend .legend-restricted { background: #f1e2cf; border-color: #b36f37; }
.spot-layout { display: grid; grid-template-columns: 1fr 3fr; gap: 8vw; }
.region-rail { position: sticky; top: 2rem; align-self: start; border-top: 1px solid var(--line); }
.region-rail a { display: flex; justify-content: space-between; padding: .85rem 0; border-bottom: 1px solid var(--line); font-size: .88rem; transition: color .2s, padding-left .2s; }
.region-rail a:hover { padding-left: .3rem; color: var(--signal); }
.region-rail span, .region-title span { font: 10px/1.6 var(--mono); color: rgba(18,42,46,.58); }
.spot-group { padding: 0 0 3.6rem; margin-bottom: 3.5rem; border-bottom: 1px solid var(--line); scroll-margin-top: 2rem; }
.spot-group:last-child { margin-bottom: 0; }
.region-title { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1.6rem; }
.region-title p { margin: 0; font-size: clamp(1.5rem, 2.3vw, 2.25rem); font-weight: 600; letter-spacing: -.02em; color: var(--harbor); }
.beach-tags { display: flex; flex-wrap: wrap; gap: .6rem; }
.beach-tags .map-tag { min-width: 132px; }
.spots-noscript { padding: 1rem; border: 1px solid var(--line); }
.spot-dialog { width: min(1180px, calc(100% - 3rem)); max-width: none; max-height: min(88vh, 820px); padding: 0; border: 0; background: var(--foam); color: var(--ink); box-shadow: 0 30px 90px rgba(7,26,32,.38); overflow: hidden; }
.spot-dialog::backdrop { background: rgba(8,27,34,.72); backdrop-filter: blur(4px); }
.spot-dialog-shell { display: flex; flex-direction: column; max-height: min(88vh, 820px); }
.spot-dialog-header { display: flex; justify-content: space-between; align-items: start; gap: 2rem; padding: 1.7rem 2rem 1.45rem; border-bottom: 1px solid var(--line); background: #f8f7f1; }
.spot-dialog-header .eyebrow { margin-bottom: .65rem; }
.spot-dialog-header h2 { max-width: 760px; font-size: clamp(2.1rem, 4vw, 4.2rem); line-height: .92; }
.spot-dialog-close { flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); font: 300 1.8rem/1 var(--sans); cursor: pointer; transition: background .2s, color .2s; }
.spot-dialog-close:hover { background: var(--deep); color: var(--foam); }
.spot-dialog-layout { display: grid; grid-template-columns: minmax(0, .92fr) minmax(390px, 1.08fr); min-height: 0; overflow: hidden; }
.spot-dialog-copy { min-height: 0; padding: 2rem; overflow-y: auto; }
.spot-local-status { display: inline-block; margin: 0 0 1.6rem; padding: .45rem .55rem; background: rgba(19,169,165,.13); color: var(--deep); font: 9px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.spot-local-status[hidden] { display: none; }
.spot-reviewed { margin: -.6rem 0 1.5rem; color: rgba(18,42,46,.58); font: 9px/1.45 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.spot-description { display: grid; gap: 1.35rem; }
.spot-description section { display: grid; gap: .55rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.spot-description section:first-child { padding-top: 0; border-top: 0; }
.spot-description h3 { margin: 0; color: var(--harbor); font-size: 1rem; letter-spacing: 0; }
.spot-description p { margin: 0; white-space: pre-line; font-size: .94rem; line-height: 1.56; }
.spot-dialog-links { display: flex; flex-wrap: wrap; align-items: center; gap: 1.35rem; margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.spot-dialog-links .button { padding: .8rem .95rem; }
.spot-dialog-map { min-height: 510px; background: var(--fog); }
.spot-dialog-map iframe { display: block; width: 100%; height: 100%; min-height: 510px; border: 0; }
.spot-note { background: linear-gradient(116deg, var(--dune), #dfe1d4); padding-top: clamp(5rem, 9vw, 8rem); padding-bottom: clamp(5rem, 9vw, 8rem); border-top: 1px solid rgba(18,42,46,.1); }
.spot-note h2 { max-width: 850px; }
.note-grid { display: grid; grid-template-columns: 1fr .85fr; align-items: end; gap: 8vw; margin-top: 3rem; }
.note-grid p { max-width: 510px; font-size: 1.05rem; line-height: 1.55; margin: 0; }
.note-grid .button { justify-self: start; }

@media (max-width: 800px) {
  .spots-intro { min-height: 550px; height: 550px; padding: 0 7vw 4rem; }
  .spots-intro h1 { font-size: clamp(2.8rem, 11vw, 3.6rem); }
  .spot-map { height: calc(62vh + 60px); min-height: 480px; }
  .directory-heading, .spot-layout, .note-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .region-rail { display: grid; position: static; grid-template-columns: 1fr 1fr; border-top: 0; gap: 0 1rem; }
  .region-rail a { border-top: 1px solid var(--line); }
  .spot-group { padding-bottom: 2.7rem; margin-bottom: 2.7rem; }
  .spot-dialog { width: calc(100% - 1.2rem); max-height: 94vh; max-height: calc(100dvh - 1.2rem); }
  .spot-dialog-shell { max-height: 94vh; max-height: calc(100dvh - 1.2rem); }
  .spot-dialog-header { flex: 0 0 auto; padding: 1.25rem 1.2rem 1rem; }
  .spot-dialog-layout { display: block; flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .spot-dialog-copy { padding: 1.4rem 1.2rem 1.8rem; overflow: visible; }
  .spot-dialog-map { min-height: 300px; height: 300px; }
  .spot-dialog-map iframe { min-height: 300px; height: 300px; }
}

@media (max-width: 480px) {
  .spot-map { min-height: 430px; }
  .region-rail { grid-template-columns: 1fr; }
  .beach-tags .map-tag { min-width: auto; }
}