/* Review version · layout additions (to merge into tsa.css after approval) */

/* hero: same tagline, less height, so offer, photo and try-out button share the first screen */
.hero-compact{padding-top:clamp(20px, 3.2vw, 44px)}
.hero-compact .hero-grid{grid-template-columns:1.15fr .85fr; gap:clamp(24px, 4vw, 56px)}
.hero-compact h1{font-size:clamp(2.3rem, 1.5rem + 2.7vw, 3.75rem); line-height:1.04}
.hero-compact .hero-copy{gap:1.05rem}
.hero-compact .lede{max-width:52ch}
.hero-compact .hero-photo{aspect-ratio:4/4.6; max-height:min(620px, calc(100vh - 150px)); width:100%}
.hero-compact .hero-waves{height:clamp(36px, 5vw, 70px); margin-top:clamp(10px, 2vw, 20px)}
.hero-compact .routes{margin-top:.35rem}
.cta-note{font-size:.88rem; color:var(--muted); margin:-.25rem 0 0; max-width:52ch}
@media (max-width: 860px){
  .hero-compact .hero-grid{grid-template-columns:1fr}
  .hero-compact .hero-photo{aspect-ratio:16/10; max-height:none; border-radius:120px 120px var(--radius) var(--radius)}
}

/* early proof */
.proof{padding-block:clamp(24px, 4vw, 44px) 0}
.proof-grid{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:clamp(20px, 4vw, 56px); align-items:center;
  border-top:1.5px solid var(--tsa); border-bottom:1px solid var(--line); padding-block:clamp(20px, 3vw, 32px)}
.proof-quote{margin:0; display:grid; gap:.75rem}
.proof-quote blockquote{margin:0}
.proof-quote blockquote p{margin:0; font:italic 400 clamp(1.15rem, 1rem + .6vw, 1.45rem)/1.4 var(--display); max-width:60ch}
.proof-quote figcaption{font-size:.9rem; color:var(--muted)}
.ratings{list-style:none; margin:0; padding:0; display:grid; gap:.6rem}
.ratings a{display:grid; grid-template-columns:auto auto 1fr; grid-template-areas:"n s l" "n c c"; column-gap:.6rem; align-items:center;
  text-decoration:none; padding:.7rem .9rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface)}
.ratings a:hover{border-color:var(--tsa)}
.ratings b{grid-area:n; font:400 2rem/1 var(--display); color:var(--tsa)}
.ratings .stars{grid-area:s; color:var(--sand); letter-spacing:.06em; font-size:.9rem}
.ratings .r-l{grid-area:l; font-weight:600; font-size:.95rem}
.ratings .r-c{grid-area:c; font-size:.85rem; color:var(--muted)}
.ratings .r-note{font-size:.78rem; color:var(--muted)}
@media (max-width: 760px){ .proof-grid{grid-template-columns:1fr} }

#start{padding-top:clamp(36px, 5vw, 64px)}

/* route panels: photo + route video */
.j-media{display:grid; gap:1.25rem; align-content:start; min-width:0}
.journey .j-media .ph{position:static; aspect-ratio:4/3.4}
.vslot{margin:0; min-width:0}
.vslot .video-meta{margin-top:.6rem}

/* quoted Google reviews in context */
.gquote{margin:0; padding:1.1rem 1.25rem; border-left:2px solid var(--aqua); background:var(--surface); border-radius:0 var(--radius) var(--radius) 0; display:grid; gap:.5rem}
.gquote blockquote{margin:0}
.gquote blockquote p{margin:0; font:italic 400 1.15rem/1.45 var(--display)}
.gquote figcaption{font-size:.86rem; color:var(--muted)}
.gquote.wide{margin-top:clamp(28px, 4vw, 40px); max-width:880px}
.method-note{margin-top:1rem}
.story blockquote p{margin:0}
.story{margin:0}

/* availability chips */
.status-list{list-style:none; margin:0; padding:0; display:grid; gap:.55rem}
.status-list li{display:flex; flex-wrap:wrap; gap:.4rem .7rem; align-items:center; font-size:.96rem}

/* price at first exposure */
.pfirst{display:grid; gap:.2rem; padding-top:.9rem; border-top:1px solid var(--line); margin-top:auto}
.pf-main{margin:0; font-size:.95rem; color:var(--muted)}
.pf-main b{font:400 2rem/1 var(--display); color:var(--ink); margin-right:.15rem}
.pf-cond{margin:0; font-size:.88rem; font-weight:600; color:var(--tsa)}
.pf-more{margin:0; font-size:.84rem; color:var(--muted)}
.format{display:flex; flex-direction:column}
.format-body{display:flex; flex-direction:column; gap:.6rem; flex:1}
.fmt .pf-cond{margin-top:-.4rem}

/* membership essentials, visible before booking */
.before-book{margin-top:clamp(28px, 4vw, 44px); padding:clamp(18px, 3vw, 28px); border:1px solid var(--line); border-radius:var(--radius); background:var(--surface)}
.before-book h3{font-size:1.45rem; margin-bottom:1rem}
.bb-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1rem 1.5rem}
.bb-list li{display:grid; gap:.3rem; font-size:.94rem; color:var(--muted); align-content:start}
.bb-list b{color:var(--ink); font-weight:600}
@media (max-width: 900px){ .bb-list{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width: 520px){ .bb-list{grid-template-columns:1fr} }

/* expandable detail */
.more-d{border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:clamp(20px, 3vw, 32px)}
.j-body .more-d{margin-top:0}
.more-d > summary{cursor:pointer; list-style:none; padding:1rem 2.25rem 1rem 0; position:relative; font:400 1.18rem/1.3 var(--display); color:var(--ink)}
.more-d > summary::-webkit-details-marker{display:none}
.more-d > summary::after{content:""; position:absolute; right:.4rem; top:50%; width:11px; height:11px; border-right:1.5px solid var(--tsa); border-bottom:1.5px solid var(--tsa); transform:translateY(-70%) rotate(45deg); transition:transform .2s}
.more-d[open] > summary::after{transform:translateY(-30%) rotate(-135deg)}
.more-d > :not(summary){margin-bottom:1.25rem}
.more-d > p{color:var(--muted); max-width:68ch}
.price-details > summary{font-size:1.3rem}
.price-details .pricing{margin-top:.5rem}
#prices{scroll-margin-top:96px}

.loc-rating{margin:0; font-size:.92rem}
.loc-body .btn{justify-self:start}
#reviews .stories{margin-top:0}

/* sticky mobile actions: never cover the end of the page */
@media (max-width: 760px){ body{padding-bottom:calc(72px + env(safe-area-inset-bottom, 0px))} }

/* small round reviewer photos (or initials) */
.gquote figcaption.rv, .proof-quote figcaption.rv{display:flex; align-items:center; gap:.65rem}
.rv .avatar, .story .who .avatar{width:40px; height:40px; border-radius:50%; flex:none; object-fit:cover; aspect-ratio:1}
.rv .avatar.mono, .story .who .avatar.mono{display:grid; place-items:center; font-size:.7rem}

/* ---------- try-out calendars only (#bsport-widget-172362 Amstelveen, #bsport-widget-626697 Amsterdam) ---------- */
/* 3 · hide search + filters (Activity, Level, Teacher, Establishment); the widget config still filters */
.bsport-mount.tsa-tryout[id] .cleanslate .bs-marketplace-filters__list{display:none!important}
.bsport-mount.tsa-tryout[id] .cleanslate .bs-calendar{min-height:0!important;height:auto!important;margin-top:0!important;gap:14px!important}
.bsport-mount.tsa-tryout[id] .cleanslate .bs-week-list{margin-top:0!important}
/* 2 · clear Book button; Waitlist stays a quieter outline button */
.bsport-mount.tsa-tryout[id] .cleanslate .bs-offer-list-item{padding-block:10px!important;border-bottom:1px solid rgba(52,85,100,.14)!important;align-items:center!important}
.bsport-mount.tsa-tryout[id] .cleanslate .bs-offer-list-item__content__offer{align-items:center!important;gap:12px!important}
.bsport-mount.tsa-tryout[id] .cleanslate .bs-book-button-card{height:auto!important;width:auto!important}
.bsport-mount.tsa-tryout[id] .cleanslate .bs-book-button-card .bs-book-button-card__inner{
  height:auto!important;width:auto!important;min-height:48px!important;min-width:132px!important;box-sizing:border-box!important;
  justify-content:center!important;padding:12px 22px!important;border-radius:999px!important;cursor:pointer!important;
  font-family:Figtree,"Segoe UI",system-ui,sans-serif!important;font-size:16px!important;font-weight:600!important;letter-spacing:.04em!important;line-height:1.2!important}
.bsport-mount.tsa-tryout[id] .cleanslate .bs-book-button-card .bs-book-button-card__inner__text{height:auto!important;width:auto!important;font:inherit!important;color:inherit!important;letter-spacing:inherit!important}
.bsport-mount.tsa-tryout[id] .cleanslate .bs-book-button-card.tsa-book .bs-book-button-card__inner{background:#345564!important;color:#fff!important;border:2px solid #345564!important;box-shadow:0 2px 6px rgba(28,47,55,.18)!important}
.bsport-mount.tsa-tryout[id] .cleanslate .bs-offer-list-item.tsa-item-book:hover .bs-book-button-card__inner,
.bsport-mount.tsa-tryout[id] .cleanslate .bs-offer-list-item.tsa-item-book:focus-visible .bs-book-button-card__inner{background:#24404c!important;border-color:#24404c!important}
.bsport-mount.tsa-tryout[id] .cleanslate .bs-book-button-card.tsa-wait .bs-book-button-card__inner{background:#fff!important;color:#345564!important;border:2px dashed rgba(52,85,100,.55)!important;font-weight:500!important;min-height:42px!important;padding:9px 18px!important}
.bsport-mount.tsa-tryout[id] .cleanslate .bs-book-button-card.tsa-off .bs-book-button-card__inner{color:#52666e!important}
.bsport-mount.tsa-tryout[id] .cleanslate .bs-offer-list-item:focus-visible{outline:2px solid #b98a52!important;outline-offset:2px!important}
.bsport-mount.tsa-tryout.tsa-searching{opacity:.35;pointer-events:none;transition:opacity .2s}
.tsa-tryout-status{margin:0 0 .75rem;padding:.7rem .9rem;border-radius:var(--radius);background:#f3f6f5;color:#1c2f37;font-size:.92rem}
@media (max-width: 520px){
  .bsport-mount.tsa-tryout[id] .cleanslate .bs-book-button-card .bs-book-button-card__inner{min-width:104px!important;padding:12px 14px!important;font-size:15px!important}
  .bsport-mount.tsa-tryout[id] .cleanslate .bs-book-button-card.tsa-wait .bs-book-button-card__inner{padding:9px 12px!important}
}

/* ---------- v2 preview (21 Oct 2026) ---------- */
/* membership value next to the introduction */
.hero-value{margin:0; padding:.7rem 1rem; border-left:2px solid var(--aqua); background:var(--surface); border-radius:0 var(--radius) var(--radius) 0; font-size:.92rem; line-height:1.45; color:var(--muted); max-width:56ch}
.hero-value b{display:block; color:var(--ink); font-weight:600; margin-bottom:.15rem}
/* mobile hero: headline, introduction, one photo, then the try-out action; route choices after */
@media (max-width: 860px){
  .hero-compact .hero-grid{display:flex; flex-direction:column; align-items:stretch; gap:1rem}
  .hero-compact .hero-copy{display:contents}
  .hero-compact .hero-copy > .eyebrow{order:1}
  .hero-compact .hero-copy > h1{order:2}
  .hero-compact .hero-copy > .lede{order:3}
  .hero-compact .hero-photo{order:4; aspect-ratio:4/3; border-radius:72px 72px var(--radius) var(--radius); margin-block:.25rem}
  .hero-compact .hero-photo img{object-position:28% 45% !important}
  .hero-compact .hero-copy > .cta-row{order:5}
  .hero-compact .hero-copy > .cta-note{order:6; margin-top:-.4rem}
  .hero-compact .hero-copy > .hero-value{order:7}
  .hero-compact .hero-copy > .routes{order:8; margin-top:.5rem}
}
/* three membership points instead of four (all-inclusive has its own block below) */
.bb-list.bb-3{grid-template-columns:repeat(3, minmax(0,1fr))}
@media (max-width: 900px){ .bb-list.bb-3{grid-template-columns:1fr} }
/* booking handoff steps next to the try-out calendar */
.bk-steps{margin:0; padding-left:1.2rem; display:grid; gap:.45rem; font-size:.92rem; color:var(--muted)}
.bk-steps b{color:var(--ink)}
/* slots inside the 72-hour deadline: visibly unavailable, not hidden */
.bsport-mount.tsa-tryout[id] .cleanslate .bs-offer-list-item.tsa-item-soon{opacity:.55!important; cursor:not-allowed!important}

/* ---------- (21 Oct 2026) try-out calendars + group timetables ---------- */
/* no level ("All levels") or price ("1 credit") labels: confusing for new swimmers. By ID, so they never flash. */
#bsport-widget-172362 .cleanslate .bs-level, #bsport-widget-626697 .cleanslate .bs-level,
#bsport-widget-287816 .cleanslate .bs-level, #bsport-widget-319733 .cleanslate .bs-level,
#bsport-widget-172362 .cleanslate .bs-offer-price-tag, #bsport-widget-626697 .cleanslate .bs-offer-price-tag,
#bsport-widget-287816 .cleanslate .bs-offer-price-tag, #bsport-widget-319733 .cleanslate .bs-offer-price-tag{display:none!important}
/* group timetables: no search bar or filters either (the widget config still decides what is shown) */
#bsport-widget-287816 .cleanslate .bs-marketplace-filters__list, #bsport-widget-319733 .cleanslate .bs-marketplace-filters__list,
#bsport-widget-287816 .cleanslate .bs-calendar-search__container, #bsport-widget-319733 .cleanslate .bs-calendar-search__container{display:none!important}
/* private and duo: the location blocks on the left switch the calendar as well */
.terms > .terms-pick{position:relative}
.terms .terms-loc{all:unset; display:block; font-weight:600; cursor:pointer; color:var(--ink)}
.terms .terms-loc::after{content:""; position:absolute; inset:0; border-radius:var(--radius)}
.terms .terms-loc::before{content:"›"; float:right; margin-left:.5rem; color:var(--muted); font-weight:400}
.terms > .terms-pick:hover dt .terms-loc, .terms .terms-loc:focus-visible{text-decoration:underline; text-underline-offset:3px}
.terms .terms-loc:focus-visible::after{outline:2px solid #b98a52; outline-offset:-2px}
.terms .terms-loc[aria-pressed="true"]{color:var(--tsa)}
/* private widgets: hide the service list for the moment it takes to open "Personal Training" */
.bsport-mount.tsa-private-opening{opacity:.35; transition:opacity .2s}

/* ---------- (23 Oct 2026) route-aware homepage ---------- */
/* the method shows one example, for the chosen route: image beside the text on wider screens */
.examples.examples-route{grid-template-columns:minmax(0,1fr)}
@media (min-width: 701px){
  .examples-route .example{grid-template-columns:minmax(0,5fr) minmax(0,6fr); column-gap:clamp(20px, 3vw, 40px); align-content:center}
  .examples-route .example > .ex-ph{grid-column:1; grid-row:1 / span 3; margin:0; align-self:center}
  .examples-route .example > :not(.ex-ph){grid-column:2}
  .examples-route .example > .eyebrow{align-self:end}
}
/* freestyle panel: the try-out first, the freestyle page as a quieter text link */
.journey .cta-row .textlink{font-weight:500}

/* ---------- (23 Oct 2026) hero: one understated line instead of the all-inclusive block ---------- */
.hero-value.hero-value-line{padding:0; border:0; background:none; border-radius:0; font-size:.92rem; color:var(--muted)}