/* Generation Iron: page sections (spec section 5).
   Alternating ink and paper sections, responsive down to 360px,
   no horizontal scroll ever. No em or en dashes in this file. */

/* 0. Section shells */

.sec {
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}

.sec--paper {
  background: var(--paper);
  color: var(--ink);
}

.sec--ink {
  background: var(--ink);
  color: var(--paper);
}

.sec--ink h2 {
  color: var(--yellow);
}

.sec__head {
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.sec__head .label {
  display: block;
  margin-bottom: 0.9rem;
}

.sec__sub {
  margin-top: 0.9rem;
  max-width: 62ch;
}

/* 1. Hero (spec 5.2): full screen photographic poster. The photo is
   a full bleed layer behind everything, the type stack sits bottom
   left over an ink scrim. The section is pulled up under the fixed
   nav so the photo fills the whole viewport. */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  margin-top: calc(var(--nav-h) * -1);
  background: var(--ink);
  color: var(--paper);
}

/* Full bleed photo layer: the img element keeps the fallback
   contract and the Ken Burns hook. Same duotone filter as the
   site's photo frames. */
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  filter: grayscale(1) contrast(1.15) brightness(0.95);
}

/* Swapped svg placeholders keep their brand colors, same as .duotone */
.hero__bg[data-fallback-done="1"] {
  filter: none;
}

/* Yellow multiply pass, same treatment as .duotone::after */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--yellow);
  mix-blend-mode: multiply;
  opacity: 0.22;
  pointer-events: none;
}

/* Ink scrim over the photo: strongest at the bottom left where the
   type sits, lightest at the top right. Two stacked gradients keep
   the yellow label region dark enough for AA contrast even over the
   bright chalk light beam at the top of the photo. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(
      to top,
      rgba(16, 16, 16, 0.9) 0%,
      rgba(16, 16, 16, 0.62) 40%,
      rgba(16, 16, 16, 0.3) 72%,
      rgba(16, 16, 16, 0.12) 100%
    ),
    linear-gradient(
      to top right,
      rgba(16, 16, 16, 0.85) 0%,
      rgba(16, 16, 16, 0.58) 55%,
      rgba(16, 16, 16, 0.35) 100%
    );
}

/* Narrow viewports show the full width of the photo, so the chalk
   light beam reaches into the label rows: the scrim deepens there to
   keep the yellow label at AA contrast. */
@media (max-width: 900px) {
  .hero__scrim {
    background:
      linear-gradient(
        to top,
        rgba(16, 16, 16, 0.9) 0%,
        rgba(16, 16, 16, 0.68) 40%,
        rgba(16, 16, 16, 0.42) 72%,
        rgba(16, 16, 16, 0.16) 100%
      ),
      linear-gradient(
        to top right,
        rgba(16, 16, 16, 0.85) 0%,
        rgba(16, 16, 16, 0.66) 55%,
        rgba(16, 16, 16, 0.4) 100%
      );
  }
}

.hero__inner {
  position: relative;
  z-index: 3;
  flex: 1;
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--nav-h) + clamp(1.5rem, 4vh, 3rem));
  padding-bottom: clamp(2rem, 4vh, 3rem);
}

.hero .marquee {
  position: relative;
  z-index: 3;
}

.hero__label {
  display: block;
  color: var(--yellow);
  margin-bottom: 1.25rem;
}

.hero__title span {
  display: block;
}

.hero__l1 { color: var(--paper); }

.hero__l2 {
  color: var(--yellow);
  font-size: 1.6em;
}

.hero__stamp {
  margin-top: 1.4rem;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.hero__lede {
  margin-top: 1.5rem;
  max-width: 52ch;
  font-size: 1.05rem;
}

.hero__cta {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Idle life (motion spec section 4): slow Ken Burns on the full
   screen photo, scale 1.0 to 1.05 over 12s, alternating, origin
   center. The hero clips its own overflow so the scaled photo can
   never widen the page. Reduced motion never sees it. */

@media (prefers-reduced-motion: no-preference) {
  .hero__bg {
    transform-origin: center;
    animation: gi-kenburns 12s ease-in-out infinite alternate;
  }

  @keyframes gi-kenburns {
    from { transform: scale(1); }
    to   { transform: scale(1.05); }
  }
}

/* 2. Trust band (spec 5.3): paper, three stat stamps */

.trust__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
}

/* Resting rotations match the scroll choreography end values:
   -2, -1.5 and 2 degrees (motion spec section 3). */

.stat {
  border: var(--rule-thick);
  background: var(--paper);
  padding: 1.5rem 1rem;
  text-align: center;
  transform: rotate(-2deg);
}

.trust__grid .stat:nth-child(2) {
  transform: rotate(-1.5deg);
}

.trust__grid .stat:nth-child(3) {
  transform: rotate(2deg);
}

.stat__num {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.4rem, 5.5vw, 3.6rem);
  line-height: 1;
}

.stat__cap {
  margin-top: 0.6rem;
  opacity: 0.7;
}

.trust__text {
  margin-top: clamp(2rem, 5vw, 3rem);
  max-width: 62ch;
  font-size: 1.02rem;
}

@media (max-width: 640px) {
  .trust__grid {
    grid-template-columns: 1fr;
    max-width: 380px;
  }
}

/* 3. Zones (spec 5.4): ink, 6 duotone tiles with overlapping plates */

.zones__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2.25rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2rem);
}

.zone {
  position: relative;
}

.zone .duotone {
  aspect-ratio: 3 / 4;
}

.zone__plate {
  position: absolute;
  left: -0.5rem;
  bottom: -0.9rem;
  z-index: 2;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 0.5rem 0.85rem;
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  max-width: calc(100% + 0.5rem);
}

@media (max-width: 1023px) {
  .zones__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 599px) {
  .zones__grid { grid-template-columns: 1fr; }
}

/* 4. Trainers (spec 5.5): paper section, ink poster cards. Each card
   carries a full bleed duotone photo behind the text, a bottom ink
   scrim for contrast, and the huge yellow initial as an overlay. */

.trainers__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.trainer {
  position: relative;
  isolation: isolate;
  background: var(--ink);
  color: var(--paper);
  border: var(--rule-thick);
  padding: 1.5rem;
  min-height: 280px;
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* The photo layer fills the card behind the text. The card border
   already frames it, so the duotone frame border is dropped here. */
.trainer__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 0;
}

.trainer__photo img {
  transition: filter var(--step) step-end;
}

/* Bottom ink scrim: keeps name, role and link at AA contrast over
   any photo, including the bright backlight on the Aleksey card. */
.trainer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(16, 16, 16, 0) 34%,
    rgba(16, 16, 16, 0.35) 52%,
    rgba(16, 16, 16, 0.78) 68%,
    rgba(16, 16, 16, 0.94) 82%,
    rgba(16, 16, 16, 0.96) 100%
  );
}

.trainer__initial,
.trainer__name,
.trainer__role,
.trainer__ig {
  position: relative;
  z-index: 2;
}

.trainer__initial {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 9vw, 7rem);
  line-height: 0.9;
  color: var(--yellow);
  align-self: flex-start;
  padding: 0 0.08em;
  margin-bottom: auto;
  transition:
    color var(--step) step-end,
    background-color var(--step) step-end;
}

.trainer__name {
  font-weight: 800;
  font-size: 1.1rem;
  margin-top: 1.25rem;
}

.trainer__role {
  opacity: 0.65;
}

.trainer__ig {
  color: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
  transition: color var(--step) step-end;
}

/* Hover and focus keep the inversion feel without hiding the photo:
   the initial swaps to ink on a yellow plate, the link goes yellow,
   the photo brightens one step. Swapped placeholders keep filter
   none, same as the base duotone rule. */
.trainer:hover .trainer__initial,
.trainer:focus-within .trainer__initial {
  color: var(--ink);
  background: var(--yellow);
}

.trainer:hover .trainer__ig,
.trainer:focus-within .trainer__ig {
  color: var(--yellow);
}

.trainer:hover .trainer__photo img:not([data-fallback-done="1"]),
.trainer:focus-within .trainer__photo img:not([data-fallback-done="1"]) {
  filter: grayscale(1) contrast(1.15) brightness(1.12);
}

.trainers__note {
  margin-top: 2rem;
  max-width: 62ch;
}

@media (max-width: 1024px) {
  .trainers__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .trainers__grid { grid-template-columns: 1fr; }
}

/* 5. Slideshow (spec 5.6): full bleed, 100svh, crossfade */

.slideshow {
  position: relative;
  height: 100svh;
  min-height: 420px;
  background: var(--ink);
  overflow: hidden;
}

.slideshow__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.slideshow__slide.is-active {
  opacity: 1;
}

.slideshow__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.15) brightness(0.95);
}

/* Designed svg placeholders keep their brand colors, same as .duotone */
.slideshow__slide img[data-fallback-done="1"] {
  filter: none;
}

.slideshow__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--yellow);
  mix-blend-mode: multiply;
  opacity: 0.22;
  pointer-events: none;
}

.slideshow__dots {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  display: flex;
  gap: 0.6rem;
  z-index: 2;
}

.slideshow__dot {
  width: 14px;
  height: 14px;
  padding: 0;
  border: 2px solid var(--paper);
  background: transparent;
}

.slideshow__dot[aria-current="true"] {
  background: var(--yellow);
  border-color: var(--yellow);
}

.slideshow__counter {
  position: absolute;
  right: clamp(1rem, 3vw, 2rem);
  bottom: 1.25rem;
  z-index: 2;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--yellow);
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  line-height: 1;
}

/* 6. Price (spec 5.7): ink, menu table with 2px paper rules */

.price__menu {
  border-top: 2px solid var(--paper);
}

.price__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 2rem;
  align-items: center;
  padding-block: 1.1rem;
  border-bottom: 2px solid var(--paper);
}

.price__name {
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.35;
}

.price__note {
  display: block;
  font-weight: 400;
  font-size: 0.85rem;
  opacity: 0.7;
  margin-top: 0.2rem;
}

.price__num {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--yellow);
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  line-height: 1;
  white-space: nowrap;
}

.price__foot {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  opacity: 0.7;
  max-width: 62ch;
}

.price__cta {
  margin-top: 2rem;
}

/* 7. Reviews (spec 5.8): paper, 3 cards */

.reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.reviews__cta {
  margin-top: 2.5rem;
}

@media (max-width: 900px) {
  .reviews__grid { grid-template-columns: 1fr; }
}

/* 8. Contacts (spec 5.9): paper, 2 col, stacks mobile */

.contacts__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

.contacts__row {
  display: grid;
  gap: 0.3rem;
  padding-block: 1rem;
  border-bottom: var(--rule);
}

.contacts__row:first-child {
  border-top: var(--rule);
}

.contacts__key {
  opacity: 0.6;
}

.contacts__val {
  font-weight: 600;
  font-size: 1.05rem;
  overflow-wrap: anywhere;
}

.contacts__val a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contacts__map {
  border: var(--rule-thick);
  min-height: 360px;
  height: 100%;
}

.contacts__map iframe {
  width: 100%;
  height: 100%;
  min-height: 360px;
}

@media (max-width: 900px) {
  .contacts__grid { grid-template-columns: 1fr; }
}

/* 9. Footer (spec 5.10): ink, yellow 2px top border */

.footer {
  background: var(--ink);
  color: var(--paper);
  border-top: 2px solid var(--yellow);
  padding-block: clamp(2.5rem, 6vw, 4rem) 1.5rem;
}

.footer__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
}

.footer__lockup {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  text-decoration: none;
}

.footer__brand {
  font-family: var(--font-display);
  color: var(--yellow);
  text-transform: uppercase;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1;
  letter-spacing: 0.02em;
}

.footer__band {
  background: var(--white);
  color: var(--ink);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  line-height: 1;
  padding: 3px 4px 3px 8px;
  white-space: nowrap;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.footer__links a {
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
  transition: color var(--step) step-end;
}

.footer__links a:hover {
  color: var(--yellow);
}

.footer__social {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer__social a {
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.footer__meta {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 2px solid rgba(242, 239, 233, 0.25);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  font-size: 0.85rem;
  opacity: 0.8;
}