/* ===========================================================================
   site.css — layout for sections beyond the base kit.css.
   Foundations + nav/hero/gallery-grid/lightbox base come from styles.css + kit.css.
   =========================================================================== */

/* ---------- Hero: parallax media wrapper ---------- */
.hero { overflow: hidden; }
.hero__media { position: absolute; left: 0; right: 0; top: -12%; height: 124%; z-index: 0; will-change: transform; }
.hero__media .hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__glow { will-change: transform, opacity; }
.hero__inner { will-change: transform, opacity; }

/* Hero variant — Centered */
.hero--centered { align-items: center; text-align: center; }
.hero--centered .hero__inner { display: flex; flex-direction: column; align-items: center; padding-bottom: 0; }
.hero--centered .hero__title { max-width: 20ch; }
.hero--centered .hero__sub { margin-left: auto; margin-right: auto; }
.hero--centered .hero__cta { justify-content: center; }
.hero--centered .jp-eyebrow-rule, .hero--centered .jp-eyebrow { justify-content: center; }

/* Hero variant — Split (solid panel left, image bleeds right) */
.hero--split { align-items: center; }
.hero--split .hero__media { left: 38%; top: 0; height: 100%; }
.hero--split .hero__scrim {
  background: linear-gradient(90deg, var(--surface-page) 26%, rgba(10,12,18,.78) 42%, rgba(10,12,18,.15) 64%, rgba(10,12,18,.5) 100%);
}
.hero--split .hero__inner { display: flex; flex-direction: column; }
.hero--split .hero__title { max-width: 11ch; }
.hero--split .hero__sub { max-width: 34ch; }
@media (max-width: 880px){
  .hero--split .hero__media { left: 0; top: -12%; height: 124%; }
  .hero--split .hero__scrim { background: linear-gradient(180deg, rgba(6,7,11,.55) 0%, rgba(6,7,11,.2) 35%, rgba(6,7,11,.78) 100%); }
}

/* ---------- Marquee ---------- */
.marquee {
  border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-base); overflow: hidden; padding: 14px 0;
}
.marquee__track { display: inline-flex; gap: 0; white-space: nowrap; animation: marquee-scroll 38s linear infinite; }
.marquee__item {
  display: inline-flex; align-items: center; gap: 16px; padding: 0 26px;
  font-family: var(--font-display); font-weight: var(--fw-bold); text-transform: uppercase;
  letter-spacing: .03em; font-size: 1.35rem; color: var(--text-faint);
}
.marquee__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee__track { animation: none; } }

/* ---------- Section lead / head extras ---------- */
.section__lead, .section__head .section__lead { max-width: 38ch; color: var(--text-muted); font-size: var(--text-md); margin: 0; align-self: flex-end; }

/* ---------- Gallery layout variants ---------- */
.gcell { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference){
  .reveal[data-rise] .gcell { animation: cell-in .6s var(--ease-out) both; animation-delay: var(--d, 0ms); }
}
@keyframes cell-in { from { transform: translateY(16px); } to { transform: none; } }

/* Uniform grid */
.gallery--uniform { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.gallery--uniform .gcell { height: auto; }
.gallery--uniform .jp-photo { aspect-ratio: 4/5 !important; }

/* ---------- Sport windows (gallery landing) ---------- */
.sportgrid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.sportcard__count {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.82); margin-top: 2px;
}
.sportcard__arrow { display: inline-flex; color: var(--accent-hover); transition: transform var(--dur-base) var(--ease-out); }
.sportgrid .jp-photo:hover .sportcard__arrow { transform: translateX(4px); }
.sportgrid .jp-photo__title { font-size: var(--text-display-s); }

/* Album photos carry no title — drop the protective scrim so images read clean */
.gallery--uniform:not(.sportgrid) .jp-photo__scrim { opacity: 0; }
.gallery--uniform:not(.sportgrid) .jp-photo:hover .jp-photo__scrim { opacity: .28; }

/* ---------- Album header ---------- */
.album__head { align-items: center; }
.album__back {
  display: inline-flex; align-items: center; gap: 7px; background: none; border: none; cursor: pointer;
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-muted); padding: 0; margin-bottom: 8px; transition: color var(--dur-fast) var(--ease-out);
}
.album__back:hover { color: #fff; }
.album__backicon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: var(--radius-sm); border: 1px solid var(--border-default); color: var(--accent-hover); transition: border-color var(--dur-fast) var(--ease-out); }
.album__back:hover .album__backicon { border-color: var(--accent); }
.album__count { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: .08em; color: var(--text-muted); align-self: flex-end; }

/* Cinematic rows */
.gallery--cinematic { display: grid; grid-template-columns: 1fr; gap: 22px; }
.gallery--cinematic .jp-photo { aspect-ratio: 21/9 !important; }
.gallery--cinematic .jp-photo__title { font-size: var(--text-display-s); }
@media (min-width: 1100px){
  .gallery--cinematic { grid-template-columns: 1fr 1fr; }
  .gallery--cinematic .gcell:nth-child(3n+1) { grid-column: 1 / -1; }
}

/* ---------- Lightbox extras ---------- */
.lightbox__imgwrap { display: flex; justify-content: center; }
@media (prefers-reduced-motion: no-preference){ .lightbox__img { animation: lb-img-in .4s var(--ease-out); } }
@keyframes lb-img-in { from { transform: scale(.99); } to { transform: none; } }
.lightbox__place { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .08em; color: var(--text-muted); text-transform: uppercase; }
.lightbox__actions { display: flex; gap: 10px; align-items: center; }
.lightbox__exif { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding-top: 4px; border-top: 1px solid var(--border-subtle); }
.lightbox__title { margin: 8px 0 4px; }

/* ---------- Services ---------- */
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px){ .services { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }
.svc {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  background: var(--surface-card); border-radius: var(--radius-lg); box-shadow: var(--inset-hairline);
  padding: 28px 26px 26px; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.svc:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.svc--featured { background: linear-gradient(180deg, rgba(0,112,255,.10), rgba(0,112,255,0) 60%), var(--surface-card);
  box-shadow: var(--inset-hairline), var(--glow-blue-soft); outline: 1px solid rgba(46,139,255,.35); }
.svc__flag {
  position: absolute; top: -11px; left: 26px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: #fff; background: var(--accent); padding: 5px 10px; border-radius: var(--radius-sm);
}
.svc__top { display: flex; align-items: center; justify-content: space-between; }
.svc__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: var(--radius-md); background: rgba(46,139,255,.12); color: var(--accent-hover); border: 1px solid var(--border-default); }
.svc__price { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: .04em; color: var(--text-secondary); }
.svc__name { font-family: var(--font-display); font-weight: var(--fw-bold); text-transform: uppercase; font-size: var(--text-display-s); color: #fff; margin: 2px 0 0; line-height: 1; }
.svc__blurb { color: var(--text-muted); font-size: var(--text-md); margin: 0; }
.svc__points { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 10px; }
.svc__points li { display: flex; gap: 10px; align-items: flex-start; color: var(--text-secondary); font-size: var(--text-sm); }
.svc__check { color: var(--accent-hover); flex: none; margin-top: 1px; }
.svc .jp-btn { margin-top: auto; }

/* ---------- Booking ---------- */
.booking__intro { position: relative; display: flex; flex-direction: column; }
.booking__lead { color: var(--text-secondary); font-size: var(--text-md); max-width: 38ch; margin: 16px 0 22px; }
.booking__facts { list-style: none; margin: auto 0 0; padding: 22px 0 0; display: grid; gap: 14px; border-top: 1px solid var(--border-subtle); }
.booking__facts li { display: flex; gap: 12px; align-items: center; color: var(--text-secondary); font-size: var(--text-sm); }
.booking__facts svg { color: var(--accent-hover); flex: none; }
.booking__select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.booking__select option { background: var(--surface-raised); color: var(--text-primary); }
.booking__select--empty { color: var(--text-faint); }
.booking__fineprint { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--text-faint); margin: 2px 0 0; text-align: center; }
.booking__success { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 8px 0; animation: cell-in .5s var(--ease-out); }
.booking__successicon { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px;
  border-radius: 50%; background: rgba(25,195,125,.14); color: var(--success); border: 1px solid rgba(25,195,125,.4); margin-bottom: 6px; }
.booking__success h3 { font-family: var(--font-display); font-weight: var(--fw-bold); text-transform: uppercase; font-size: var(--text-display-s); color: #fff; margin: 0; }
.booking__success p { color: var(--text-secondary); font-size: var(--text-md); margin: 0 0 8px; max-width: 42ch; }

/* ---------- Footer extras ---------- */
.footer__left { display: flex; flex-direction: column; gap: 12px; max-width: 36ch; }
.footer__tag { color: var(--text-muted); font-size: var(--text-sm); margin: 0; }
.footer__right { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
@media (max-width: 620px){ .footer__right { align-items: flex-start; } }

/* ---------- Tweak text control: make multiline-friendly ---------- */
.site { scroll-behavior: smooth; }