/* gym-sections.css — hero, features, training, philosophy, trainers, contacts */

.page-content {
  position: relative;
  z-index: 2;
  padding-top: var(--g-nav-height);
  min-height: 100vh;
}

/* ─── Hero ───────────────────────────────────────────────────────────────── */

.section.header {
  min-height: calc(100vh - var(--g-nav-height));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 80px;
}

.header-container {
  width: 100%;
}

.header-content {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.header-row {
  display: flex;
  align-items: flex-end;
  gap: 48px;
  margin-top: 32px;
  width: 100%;
}

.h2-wrapper {
  flex: 1;
}

.button-wrapper {
  flex-shrink: 0;
}

/* ─── Features mosaic ────────────────────────────────────────────────────── */

.sec-wrapper {
  position: relative;
  padding-top: 60px;
}

/*
 * Scoped .grid — mirrors gym-base.css but only inside .features-section so it
 * does not collide with defenseflow's own layout classes elsewhere in index.html.
 * Uses the same column formula as Defenseflow's .container:
 *   minmax(2rem, 1fr)  |  minmax(0, 1286px)  |  minmax(2rem, 1fr)
 * This aligns the section with Contact and Asset Control at every viewport.
 */
.features-section .grid {
  display: grid;
  grid-template-columns:
    minmax(var(--space-8), 1fr)
    minmax(0, var(--container))
    minmax(var(--space-8), 1fr);
  grid-template-rows: auto;
  grid-auto-columns: 1fr;
  width: 100%;
}

.features-section .grid > * {
  grid-column: 2;
}

.features-section .grid.bg-grid {
  height: 100%;
}

/*
 * Column lines overlay — identical to gym.html's .bg-lines-wrapper.
 * position: absolute + inset: 0 makes it span the full .sec-wrapper height.
 * The inner .grid places .lines-container in the same content column as all
 * other .grid children, so the dividers align with and scale with the content.
 */
.features-section .bg-lines-wrapper {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.features-section .lines-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 100%;
}

.features-section .bg-line {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

/* Ensure feature content sits above the lines overlay.
 * Neutralise Defenseflow's global .section padding-block (5rem top + bottom)
 * which stacks on top of .sec-wrapper's own padding-top: 60px. */
.features-section .section {
  position: relative;
  z-index: 1;
  padding-block: 0;
}

/*
 * Scoped pic-wrapper & image rules — mirrors gym-components.css which is not
 * loaded in index.html. Without these the images overflow their aspect-ratio
 * containers and do not cover them correctly.
 */
.features-section .pic-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.features-section .pic-wrapper .image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s ease;
}

.features-section .pic-wrapper:hover .image {
  transform: scale(1.03);
}

/*
 * Section header — mirrors gym-base.css typography for .heading-line,
 * .h4-wrapper, .heading-4 scoped so defenseflow styles don't bleed through.
 */
.features-section .heading-line {
  width: 40px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.4);
  margin-bottom: 16px;
}

.features-section .h4-wrapper {
  margin-bottom: 48px;
}

.features-section .heading-4 {
  font-family: var(--g-body);
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.12em;
  line-height: 1.2;
  color: #fff;
}

/*
 * The features container stacks rows vertically (block flow),
 * so each .row spans the full content width.
 */
/*
 * Override defenseflow's base.css .container (max-width:1286px, padding-inline:2rem,
 * margin-inline:auto) so photos occupy the same gym .grid content column width
 * as .lines-container — keeping both in perfect alignment at every zoom level.
 */
.features-section .container {
  display: block;
  max-width: none;
  padding-inline: 0;
  margin-inline: 0;
}

/*
 * Each feature row: 3 equal columns — text label | large photo | small photo.
 * Each column is exactly 1/3 of the content width, perfectly aligned to the
 * bg-line dividers at 33% and 67%.
 * Alternating direction is handled by HTML element order, not CSS tricks.
 */
.features-section .row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  align-items: start;
  margin-bottom: 80px;
}

/* All three column types auto-place in source order */
.features-section .pic-col,
.features-section .pic-col-2,
.features-section .feat-text-col {
  grid-column: auto;
}

/*
 * Text column: holds the large feature label.
 * Right-padding keeps text clear of the column divider line.
 */
.features-section .feat-text-col {
  padding-right: 32px;
  padding-left: 0;
}

/* When text column is on the right (alternating rows), flip the padding */
.features-section .row .feat-text-col:last-child {
  padding-left: 32px;
  padding-right: 0;
}

/* Description body copy in the staggered photo column — mirrors philosophy */
.features-section .text-block {
  color: rgba(255, 255, 255, 0.6);
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 24px;
}

/*
 * Feature label: large bold display heading inside the text column.
 */
.features-section .label {
  font-family: var(--g-display);
  font-size: clamp(22px, 3vw, 52px);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--g-white);
  line-height: 1.05;
  margin-bottom: 24px;
  text-transform: uppercase;
}

/*
 * Large photo: tall portrait at 3/4 column width for visual breathing room.
 */
.features-section .pic-col .pic-wrapper {
  aspect-ratio: 4 / 5;
  width: 75%;
}

/*
 * Small photo column: pushed down 70% of the content width so the small photo
 * sits well below the large photo's bottom edge. The remaining column width
 * also shrinks to 3/4 to maintain consistent visual sizing across both photos.
 */
.features-section .pic-col-2 {
  margin-top: 70%;
}

.features-section .pic-col-2 .pic-wrapper {
  aspect-ratio: 4 / 3;
  width: 75%;
}

/* ─── Training classes ───────────────────────────────────────────────────── */

.training-section .h4-wrapper {
  grid-column: 1 / -1;
}

.training-section .training-grid {
  grid-column: 1 / -1;
  display: grid;
  /* minmax(0, 1fr) lets columns shrink below content size, preventing overflow
     from long module names forcing columns wider than the container */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

.training-section .training-grid .col {
  grid-column: span 1;
  padding-right: 32px;
  padding-bottom: 48px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  padding-left: 0;
}

/* Remove left border on first item of each row (columns 1, 4, 7) */
.training-section .training-grid .col:nth-child(3n+1) {
  border-left: none;
}

/* Give columns 2+ left breathing room away from their border-left divider */
.training-section .training-grid .col:not(:nth-child(3n+1)) {
  padding-left: 32px;
}

.training-section .training-grid .col > div:not(.number):not(.label) {
  color: var(--g-white-60);
  font-size: 13px;
  line-height: 1.5;
}

.training-section .training-grid .col:nth-child(1) { transition-delay: 0s; }
.training-section .training-grid .col:nth-child(2) { transition-delay: 0.05s; }
.training-section .training-grid .col:nth-child(3) { transition-delay: 0.1s; }
.training-section .training-grid .col:nth-child(4) { transition-delay: 0.15s; }
.training-section .training-grid .col:nth-child(5) { transition-delay: 0.2s; }
.training-section .training-grid .col:nth-child(6) { transition-delay: 0.25s; }
.training-section .training-grid .col:nth-child(7) { transition-delay: 0.3s; }

.training-section .training-cta {
  grid-column: span 1;
  align-self: end;
  opacity: 1;
  transform: none;
  padding-left: 32px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

/* ─── Philosophy ─────────────────────────────────────────────────────────── */

/* Text-only column: primary body copy */
.philosophy-section .phil-text-col {
  padding-right: 32px;
}

/* Small photo + secondary text column, staggered down 25% */
.philosophy-section .col-2 {
  margin-top: 25%;
  padding-left: 32px;
}

/* Large photo: tall portrait filling its 1/3 column */
.philosophy-section .col-1 .pic-wrapper {
  aspect-ratio: 4 / 5;
  margin-top: 0;
}

/*
 * Small photo: landscape format (roughly half the height of the large photo)
 * to match the visual size hierarchy from the gym reference.
 */
.philosophy-section .col-2 .pic-wrapper {
  aspect-ratio: 4 / 3;
  margin-top: 24px;
}


/* ─── Training & Philosophy shared helpers for index.html ───────────────────
 * Mirrors gym-base.css + gym-components.css rules that are NOT loaded in
 * index.html, all scoped to avoid touching defenseflow's own layout.
 * ────────────────────────────────────────────────────────────────────────── */

/*
 * position:relative on the section so bg-lines-wrapper (absolute, inset:0)
 * is contained within it — same pattern as .sec-wrapper for features-section.
 */
.training-section,
.philosophy-section {
  position: relative;
}

/*
 * Column lines overlay — identical to features-section's bg-lines-wrapper.
 * Uses the same var(--g-grid-cols) grid so lines sit in the same content
 * column and align pixel-for-pixel with the features section above.
 */
.training-section .bg-lines-wrapper,
.philosophy-section .bg-lines-wrapper {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.training-section .lines-container,
.philosophy-section .lines-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 100%;
}

.training-section .bg-line,
.philosophy-section .bg-line {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

/* Ensure content sits above the absolute bg-lines overlay */
.training-section,
.philosophy-section {
  isolation: isolate;
}

/* Both training and philosophy use the standard defenseflow .container.
   The .row inside philosophy carries the 3-column photo/text layout. */
.training-section .container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.philosophy-section .row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: var(--space-8);
}

/* Section label header */
.training-section .heading-line,
.philosophy-section .heading-line {
  width: 40px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.4);
  margin-bottom: 16px;
}

.training-section .h4-wrapper,
.philosophy-section .h4-wrapper {
  margin-bottom: 48px;
  grid-column: 1 / -1;
}

.training-section .heading-4,
.philosophy-section .heading-4 {
  font-family: var(--g-body);
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.12em;
  line-height: 1.2;
  color: #fff;
}

/* Training col: flex stack */
.training-section .training-grid .col {
  display: flex;
  flex-direction: column;
}

/* Item number */
.training-section .number {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 12px;
}

/* Large display label inside training grid */
.training-section .label-2 {
  font-family: var(--g-display);
  text-transform: uppercase;
  font-size: clamp(20px, 2.2vw, 36px);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.05;
  color: #fff;
  margin-bottom: 8px;
}

/* Small description text */
.training-section .col-desc {
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  line-height: 1.5;
}


/* Philosophy body copy */
.philosophy-section .text-block {
  color: rgba(255, 255, 255, 0.6);
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 24px;
}

/* Pic wrappers — mirrors gym-components.css */
.training-section .pic-wrapper,
.philosophy-section .pic-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.training-section .pic-wrapper .image,
.philosophy-section .pic-wrapper .image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s ease;
}

.training-section .pic-wrapper:hover .image,
.philosophy-section .pic-wrapper:hover .image {
  transform: scale(1.03);
}

/* Gym-style arrow button — mirrors gym-components.css .button */
.gym-btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: #fff;
  text-transform: uppercase;
  font-family: var(--g-body);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-decoration: none;
  margin-bottom: 32px;
  margin-top: 8px;
  transition: opacity 0.2s ease;
}

.gym-btn:hover {
  opacity: 0.8;
}

.gym-btn .button-text {
  white-space: nowrap;
}

.gym-btn .button-circle {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.2s ease;
}

.gym-btn:hover .button-circle {
  border-color: #fff;
}

.gym-btn .button-arrow {
  width: 12px;
  height: auto;
}

/* ─── Trainers page ──────────────────────────────────────────────────────── */

.page-hero {
  padding-top: 60px;
  padding-bottom: 60px;
}

.page-hero .heading {
  width: auto;
  min-width: auto;
  max-width: 80%;
  margin-bottom: 24px;
}

.trainer-block {
  margin-bottom: var(--g-section-gap);
}

.trainer-block .row {
  align-items: start;
}

.trainer-photo-col {
  grid-column: span 2;
}

.trainer-text-col {
  grid-column: span 2;
}

.trainer-photo-col .pic-wrapper {
  aspect-ratio: 3 / 4;
}

.trainer-name {
  font-family: var(--g-display);
  text-transform: uppercase;
  font-size: 24px;
  letter-spacing: 0.06em;
  margin-bottom: 24px;
}

/* ─── Contacts page ──────────────────────────────────────────────────────── */

.contacts-section {
  padding-top: 60px;
  padding-bottom: 60px;
}

.contacts-section .row.contacts {
  grid-column: 1 / -1;
}

.contacts-heading {
  font-family: var(--g-display);
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.12em;
  color: var(--g-white-25);
  margin-bottom: 48px;
}

.contact-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}

.contact-item-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--g-white-40);
  margin-bottom: 12px;
}

.contact-link {
  font-family: var(--g-display);
  text-transform: uppercase;
  font-size: clamp(20px, 3vw, 32px);
  line-height: 1.1;
  color: var(--g-white);
  transition: opacity 0.2s ease;
}

.contact-link:hover {
  opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE — preserve 3-column dividers, stack content inside columns
   ≤ 767px matches the Defenseflow responsive breakpoint used in responsive.css

   Strategy (mirrors myfgym.webflow.io mobile behaviour):
   • The 3 bg-line dividers are NEVER hidden — they remain full-height at all
     viewport sizes, just like the reference.
   • Feature rows change from 3-wide side-by-side to a 3-row stack where
     each item still respects the 1/3-column grid lines:
       Row 1 — label text     (cols 1–2, left 2/3)
       Row 2 — large photo    (cols 1–2, left 2/3)
       Row 3 — small photo    (cols 2–3, right 2/3 — shifted 1 col right)
   • The 2nd divider line sits exactly at the col-2/col-3 boundary, which is
     the right edge of the large photo and the left edge of the small photo's
     start column — matching the myfgym stagger pattern.
   • Philosophy uses the same 3-row pattern.
   • Training keeps its 3 columns (matching the bg-line dividers) with
     reduced padding instead of collapsing.
═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── Features mosaic ── */

  /* Keep 3-column divider grid; expand to 3 rows for stacked layout */
  .features-section .row {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto auto;
    margin-bottom: 48px;
  }

  /*
   * Text label: top row, left 2/3 (cols 1–2).
   * The right 1/3 remains open — matching the myfgym pattern where col 3
   * is structural/empty at mobile viewport widths.
   */
  .features-section .feat-text-col,
  .features-section .row .feat-text-col:last-child {
    grid-column: 1 / 3;
    grid-row: 1;
    padding-left: 0;
    padding-right: 16px;
    margin-bottom: 12px;
  }

  /* Large photo: middle row, left 2/3 */
  .features-section .pic-col {
    grid-column: 1 / 3;
    grid-row: 2;
  }

  /*
   * Small photo: bottom row, right 2/3 (cols 2–4 in a 3-col grid = cols 2–3).
   * Starting at the 1st divider line creates the myfgym-style horizontal stagger.
   */
  .features-section .pic-col-2 {
    grid-column: 2 / 4;
    grid-row: 3;
    margin-top: 40px;
  }

  /* Photos fill their 2-column span at full width */
  .features-section .pic-col .pic-wrapper,
  .features-section .pic-col-2 .pic-wrapper {
    width: 100%;
  }

  /* ── Operational Modules ──
   * Single column on mobile — items stack vertically, no overflow.
   */
  .training-section .training-grid {
    grid-template-columns: 1fr;
  }

  .training-section .training-grid .col {
    padding-right: 0;
    padding-left: 0 !important;
    padding-bottom: 24px;
    border-left: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .training-section .training-cta {
    padding-left: 0;
    margin-top: 32px;
  }

  /* ── Philosophy ──
   * Same 3-row stagger pattern as features:
   *   Row 1 — body text     (full width, spans all 3 cols for readability)
   *   Row 2 — large photo   (cols 1–2, left 2/3)
   *   Row 3 — small photo   (cols 2–3, right 2/3)
   */
  /* Philosophy: single column on mobile, items stack vertically */
  .philosophy-section .row {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .philosophy-section .phil-text-col {
    padding-right: 0;
  }

  .philosophy-section .col-2 {
    margin-top: 0;
    padding-left: 0;
  }

  .philosophy-section .col-1 .pic-wrapper,
  .philosophy-section .col-2 .pic-wrapper {
    width: 100%;
  }

}

.contact-link.work-time {
  font-family: var(--g-body);
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  color: var(--g-white-60);
}

.contacts-map {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
  filter: grayscale(80%) invert(92%) contrast(90%);
}

.contacts-social {
  display: flex;
  flex-direction: column;
  gap: 8px;
}