/* PUBLIC HOME — "Luxury Combat / Cinematic Performance". Tokens only (tokens.css / themes.css); no raw colors except pure-black mask/shadow. */
.wrap { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--sp-6); }
.sec { padding-block: var(--sp-16); scroll-margin-block-start: calc(var(--topbar-h) + var(--sp-6)); }
.sec__head { margin-block-end: var(--sp-8); }
.sec__kicker, .eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--accent); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.sec__kicker::before { content: ""; width: 2rem; height: 1px; background: var(--accent); }
.sec__title { font-size: var(--fs-3xl); margin-block-start: var(--sp-2); }
.eyebrow { padding: var(--sp-1) var(--sp-3); border: 1px solid var(--accent-line); border-radius: var(--r-pill); background: var(--accent-soft); }
.chip { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface-2); color: var(--text-1); font-size: var(--fs-sm); transition: border-color var(--dur-base), background var(--dur-base), transform var(--dur-base) var(--ease-out); }
.chip:hover { text-decoration: none; border-color: var(--accent-line); background: var(--accent-soft); transform: translateY(-1px); }
.chip .icon { color: var(--accent); }

/* ---------- Scroll reveal (JS marks only below-the-fold items as pending → no flash, works without JS) ---------- */
.reveal--pending { opacity: 0; transform: translateY(1.25rem); }
.reveal { transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }

/* ---------- Hero ---------- */
.hero-pub { position: relative; overflow: hidden; isolation: isolate; border-block-end: 1px solid var(--border); }
.hero-pub__bg { position: absolute; inset: 0; z-index: -1; }
.hero-pub__grid { position: absolute; inset: 0; background: radial-gradient(var(--dot) 1px, transparent 1px) 0 0 / 22px 22px; mask-image: linear-gradient(to bottom, black, transparent 85%); -webkit-mask-image: linear-gradient(to bottom, black, transparent 85%); }
.hero-pub__glow { position: absolute; inset-block-start: -10%; inset-inline-start: -8%; width: 60rem; max-width: 120%; aspect-ratio: 1; background: radial-gradient(closest-side, rgb(var(--accent-rgb) / .22), transparent 70%); }
.hero-pub__inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: end; gap: var(--sp-8); min-height: min(46rem, calc(100dvh - var(--topbar-h))); padding-block-start: var(--sp-12); }
.hero-pub__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-5); padding-block-end: var(--sp-12); align-self: center; }
.hero-pub__name { font-size: var(--fs-display); line-height: 1.15; font-weight: var(--fw-bold); }
.hero-pub__lead { max-width: 34rem; color: var(--text-2); font-size: var(--fs-lg); }
.hero-pub__stats { display: flex; flex-wrap: wrap; gap: var(--sp-8); margin-block-start: var(--sp-4); padding-block-start: var(--sp-5); border-block-start: 1px solid var(--border); }
.hero-pub__stats dt { color: var(--text-3); font-size: var(--fs-sm); }
.hero-pub__stats dd { margin: 0; font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--text-1); }

.hero-pub__stage { position: relative; align-self: stretch; display: flex; align-items: flex-end; justify-content: center; min-height: 24rem; --px: 0; --py: 0; }
.hero-pub__ring { position: absolute; border-radius: 50%; border: 1px solid var(--accent-line); inset-inline: 50%; inset-block-end: 8%; translate: 50% 0; aspect-ratio: 1; pointer-events: none; transition: transform var(--dur-slow) var(--ease-out); }
.hero-pub__ring--a { width: min(30rem, 92%); background: radial-gradient(closest-side, rgb(var(--accent-rgb) / .16), transparent 72%); transform: translate3d(calc(var(--px) * -10px), calc(var(--py) * -8px), 0); }
.hero-pub__ring--b { width: min(38rem, 118%); border-style: dashed; opacity: .55; transform: translate3d(calc(var(--px) * 14px), calc(var(--py) * 10px), 0); }
.hero-pub__photo { position: relative; z-index: 1; width: auto; height: min(40rem, 82dvh); max-height: 100%; object-fit: contain; object-position: bottom;
  filter: drop-shadow(0 0 1px var(--accent-line)) drop-shadow(0 24px 36px rgb(0 0 0 / .5));
  mask-image: linear-gradient(to bottom, black 88%, transparent); -webkit-mask-image: linear-gradient(to bottom, black 88%, transparent);
  transform: translate3d(calc(var(--px) * 6px), calc(var(--py) * 4px), 0); transition: transform var(--dur-slow) var(--ease-out); }
.hero-pub__photo--avatar { height: auto; width: min(22rem, 80%); aspect-ratio: 1; object-fit: cover; border-radius: var(--r-xl); border: 1px solid var(--accent-line); margin-block-end: var(--sp-12); }
.hero-pub__mark { position: relative; z-index: 1; width: min(18rem, 70%); aspect-ratio: 1; color: var(--accent); opacity: .35; margin-block-end: var(--sp-12); }
.hero-pub__mark .icon { width: 100%; height: 100%; stroke-width: .8; }

/* ---------- About ---------- */
.about { display: grid; gap: var(--sp-8); }
.about--photo { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; }
.about__figure { position: relative; margin: 0; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--border-strong); box-shadow: var(--elev-3); aspect-ratio: 3 / 4; }
.about__figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(var(--accent-rgb) / .22), transparent 45%); pointer-events: none; }
.about__figure img { width: 100%; height: 100%; object-fit: cover; }
.about__body { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 44rem; }
.about__body p { color: var(--text-2); font-size: var(--fs-md); }

/* ---------- Achievements (asymmetric bento) ---------- */
.ach { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.ach__item { position: relative; display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-6); border: 1px solid var(--border); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--sheen), transparent 50%), var(--surface-1); box-shadow: var(--elev-1); overflow: hidden; }
.ach__item::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; height: 2px; background: linear-gradient(to left, transparent, var(--accent)); opacity: .7; }
.ach__item:first-child { grid-column: span 2; background: radial-gradient(24rem 14rem at 100% 0, rgb(var(--accent-rgb) / .2), transparent 70%), var(--surface-1); border-color: var(--accent-line); }
.ach__year { color: var(--accent); font-size: var(--fs-2xl); font-weight: var(--fw-bold); }
.ach__title { font-size: var(--fs-lg); }
.ach__text { color: var(--text-2); font-size: var(--fs-sm); }

/* ---------- Gyms ---------- */
.gyms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); align-items: start; }
.gyms--single { grid-template-columns: minmax(0, 40rem); }
.gym { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-6); }
.gym__img { width: calc(100% + var(--sp-12)); max-width: none; margin: calc(var(--sp-6) * -1) calc(var(--sp-6) * -1) 0; aspect-ratio: 16 / 9; object-fit: cover; border-block-end: 1px solid var(--border); background: var(--surface-2); }
.gym__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.gym__name { font-size: var(--fs-xl); }
.gym__facts, .gym__phones, .socials { list-style: none; padding: 0; }
.gym__facts { display: flex; flex-direction: column; gap: var(--sp-2); color: var(--text-2); }
.gym__facts li { display: flex; align-items: flex-start; gap: var(--sp-2); }
.gym__facts .icon { margin-block-start: .3em; color: var(--accent); }
.gym__text { color: var(--text-2); font-size: var(--fs-sm); }
.gym__phones, .socials { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.gym__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.gym__map { aspect-ratio: 16 / 10; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border-strong); background: var(--surface-2); }
.gym__map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Contact ---------- */
.contact { position: relative; isolation: isolate; overflow: hidden; padding: var(--sp-12) var(--sp-8); border-color: var(--accent-line); background: radial-gradient(30rem 18rem at 0 100%, rgb(var(--accent-rgb) / .22), transparent 70%), var(--surface-1); }
.contact__bg { position: absolute; inset-block: 0; inset-inline-start: 0; width: 55%; height: 100%; object-fit: cover; opacity: .3; z-index: -1; mask-image: linear-gradient(to left, transparent, black); -webkit-mask-image: linear-gradient(to left, transparent, black); }
.contact__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-5); max-width: 36rem; }
.contact__phone { font-size: var(--fs-display); font-weight: var(--fw-bold); color: var(--text-1); line-height: 1.1; }
.contact__phone:hover { color: var(--accent); text-decoration: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .hero-pub__inner { grid-template-columns: 1fr; min-height: 0; padding-block-start: var(--sp-8); }
  .hero-pub__copy { padding-block-end: 0; }
  .hero-pub__stage { min-height: 22rem; order: 2; }
  .hero-pub__photo { height: min(30rem, 62dvh); }
  .about--photo { grid-template-columns: 1fr; }
  .about__figure { max-width: 26rem; }
  .ach { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ach__item:first-child { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .wrap { padding-inline: var(--sp-4); }
  .sec { padding-block: var(--sp-12); }
  .sec__title { font-size: var(--fs-2xl); }
  .ach, .gyms { grid-template-columns: 1fr; }
  .gyms--single { grid-template-columns: 1fr; }
  .contact { padding: var(--sp-8) var(--sp-5); }
  .contact__bg { width: 100%; opacity: .15; }
  .hero-pub__ring--b, .hero-pub__glow { display: none; }   /* fewer decorative layers on phones */
  .hero-pub__cta .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal--pending { opacity: 1; transform: none; }
  .hero-pub__photo, .hero-pub__ring { transform: none !important; }
}

/* ---------- Mobile fixes ---------- */
.eyebrow { max-width: 100%; text-align: start; line-height: var(--lh-snug); }
.gyms { align-items: stretch; }
.gym { overflow: hidden; }
.gym__img { height: auto; aspect-ratio: 16 / 9; }                 /* the height="360" attribute used to win over aspect-ratio */

@media (max-width: 1023px) {
  /* the page is pulled under the floating header (.pub__main margin) → leave room for it */
  .hero-pub__inner { padding-block-start: calc(var(--sp-12) + var(--sp-6)); }
}
@media (max-width: 639px) {
  .eyebrow { align-items: flex-start; border-radius: var(--r-lg); padding: var(--sp-2) var(--sp-3); }
  .eyebrow .icon { margin-block-start: .3em; }
  .hero-pub__copy { gap: var(--sp-4); }
  .hero-pub__name { font-size: clamp(2rem, 10vw, 2.6rem); }
  .hero-pub__lead { font-size: var(--fs-md); }
  .hero-pub__stats { gap: var(--sp-5); width: 100%; }
  .hero-pub__stats dd { font-size: var(--fs-xl); }
  .hero-pub__stage { min-height: 18rem; }
  .hero-pub__photo { height: min(26rem, 56dvh); }
  .hero-pub__photo--avatar { width: min(16rem, 70%); margin-block-end: var(--sp-6); }
  .about__figure { max-width: 100%; }
  .ach__item { padding: var(--sp-5); }
  .gym { padding: var(--sp-5); }
  .gym__img { width: calc(100% + var(--sp-10)); margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) 0; }
  .gym__head { flex-wrap: wrap; }
  .gym__phones .chip { width: 100%; justify-content: space-between; }
  .contact__phone { font-size: clamp(1.75rem, 9vw, 2.5rem); }
  .contact__body .cluster .btn { flex: 1 1 100%; }
  .pub__footer { padding-inline: var(--sp-4); }
}