/**
 * Iron Elite — mobile layout fixes only (max-width: 768px).
 * Loaded last; desktop styles unchanged.
 */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width: 768px) {
  main,
  .home-flow,
  .home-flow--compact,
  .footer,
  .footer-bottom {
    max-width: 100%;
    overflow-x: clip;
  }

  /* ── Section padding (not hero grid — hero has its own) ── */
  .section-inner,
  .merch__inner,
  .packages__inner,
  .facility-premium__inner,
  .field-evidence__inner,
  .footer-grid,
  .footer-bottom {
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }

  /* ── Mobile vertical rhythm — trim section padding ── */
  .home-flow--compact {
    --ie-section-y: clamp(26px, 4vw, 32px);
  }

  .home-flow--compact > .page-section,
  .home-flow--compact > .section,
  .home-flow--compact > .cta--final,
  .home-tactical.home-elevate .home-flow--compact > .page-section,
  .home-tactical.home-elevate .home-flow--compact > .section {
    padding-top: var(--ie-section-y) !important;
    padding-bottom: var(--ie-section-y) !important;
  }

  .home-flow--compact > .packages--compact {
    padding-top: calc(var(--ie-section-y) * 0.92) !important;
    padding-bottom: calc(var(--ie-section-y) * 0.88) !important;
  }

  .home-flow--compact .hero + .page-section {
    padding-top: calc(var(--ie-section-y) * 0.92) !important;
  }

  .why-quote {
    margin-top: calc(var(--ie-section-y) * 0.85) !important;
  }

  #packages .package-card:not(:last-child) {
    padding-bottom: clamp(36px, 7vw, 48px) !important;
  }

  #packages .package-card:not(:last-child)::after {
    bottom: clamp(16px, 3.5vw, 22px) !important;
  }

  .home-tactical .footer {
    padding-top: 36px;
  }

  .home-tactical .footer-grid {
    padding-bottom: 40px;
  }

  /* ── Hero: stacked layout (copy first, image below) ── */
  #hero.hero,
  #hero.hero--impact,
  #hero.hero--bright {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
    align-items: stretch !important;
    min-height: auto !important;
    height: auto !important;
  }

  #hero .hero-layout.hero-layout--card.hero-wrapper,
  #hero.hero--impact .hero-layout--card,
  #hero.hero--bright .hero-layout--card,
  #hero.hero--tactical .hero-layout--card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
    grid-template-areas:
      "copy"
      "visual"
      "meta" !important;
    gap: clamp(24px, 5vw, 32px) !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    justify-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    flex: 1 1 auto !important;
    align-self: stretch !important;
    padding: calc(var(--nav-h, 72px) + 10px) 20px 18px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  #hero .hero-layout.hero-layout--card > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #hero .hero-copy-panel.hero-copy-card {
    grid-area: copy !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 18px 14px 22px !important;
    min-height: 0 !important;
    height: auto !important;
    align-self: start !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid rgba(255, 122, 0, 0.28) !important;
    border-radius: 18px !important;
    box-shadow: 0 20px 56px rgba(0, 0, 0, 0.55) !important;
  }

  #hero .hero-image-panel,
  .hero-image-panel {
    grid-area: visual !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    height: clamp(70vh, 75vh, 80vh) !important;
    min-height: 70vh !important;
    max-height: 80vh !important;
    align-self: stretch !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    isolation: isolate !important;
  }

  #hero .hero-copy-meta {
    grid-area: meta !important;
    grid-column: 1 !important;
    grid-row: 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 16px 14px 18px !important;
    box-sizing: border-box !important;
    background: linear-gradient(145deg, rgba(22, 16, 10, 0.96) 0%, rgba(10, 8, 6, 0.92) 100%) !important;
    border: 1px solid rgba(255, 122, 0, 0.28) !important;
    border-radius: 18px !important;
    box-shadow: 0 20px 56px rgba(0, 0, 0, 0.55) !important;
  }

  #hero [data-parallax-layer] {
    transform: none !important;
  }

  #hero .hero-copy-card .hero-headline,
  #hero .hero-copy-panel .hero-headline {
    font-size: clamp(1.65rem, 7.5vw, 2.75rem) !important;
    line-height: 0.95 !important;
    max-width: 100% !important;
    overflow-wrap: break-word;
  }

  #hero .hero-copy-card .hero-sub {
    margin-bottom: 28px !important;
  }

  #hero .hero-copy-card .hero-sub,
  #hero .hero-copy-card .hero-eyebrow,
  #hero .hero-copy-card .hero-tac-label,
  #hero .hero-copy-card p {
    font-size: 12px !important;
    line-height: 1.62 !important;
    max-width: 100% !important;
  }

  #hero .hero-copy-card .hero-tac-label {
    font-size: 8px !important;
    letter-spacing: 0.14em !important;
  }

  #hero .hero-copy-card .hero-legacy-slogan,
  #hero .hero-copy-meta .hero-legacy-slogan {
    font-size: 0.58rem !important;
    letter-spacing: 0.12em !important;
  }

  #hero .hero-copy-card .hero-trust-strip,
  #hero .hero-copy-meta .hero-trust-strip {
    font-size: 6.5px !important;
    letter-spacing: 0.06em !important;
    gap: 4px 0;
    max-width: 100% !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
  }

  #hero .hero-copy-meta .hero-legacy-slogan {
    margin-top: 12px !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(255, 122, 0, 0.22) !important;
  }

  #hero .hero-athlete-image {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  #hero .hero-athlete-image,
  #hero .hero-image-panel img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    /* Shift focal point down to show shoulders, arms, and upper torso */
    object-position: center 35% !important;
  }

  /* ── Hero CTAs inside copy card ── */
  #hero .hero-acts {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 0 !important;
  }

  #hero .hero-acts .btn {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 14px 12px !important;
    font-size: 11px !important;
    letter-spacing: 0.16em !important;
    justify-content: center !important;
    box-sizing: border-box;
  }

  /* ── Final CTA section (unchanged stack) ── */
  .cta-acts {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .cta-acts .btn,
  .cta--cinematic .cta-acts .btn {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
    box-sizing: border-box;
  }

  .package-button {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* ── Header / nav ── */
  .nav.nav--premium,
  body.home-premium .nav--premium {
    padding-left: 20px !important;
    padding-right: 20px !important;
    gap: 10px;
  }

  .nav-logo .site-logo,
  body.home-premium .nav--premium .site-logo {
    width: 132px !important;
    max-width: 132px !important;
    height: auto !important;
    max-height: 48px !important;
  }

  .nav-logo__img:not(.site-logo),
  body.home-premium .nav--premium .nav-logo__img:not(.site-logo) {
    max-width: 150px !important;
    width: auto !important;
    height: auto !important;
    max-height: 42px !important;
  }

  .nav-toggle,
  body.home-premium .nav--premium .nav-toggle {
    width: 56px !important;
    height: 56px !important;
    flex-shrink: 0;
  }

  .nav-actions {
    gap: 8px;
    min-width: 0;
  }

  /* ── Grids that can overflow below tablet ── */
  .packages-layout,
  .cta-layout,
  .why-section__grid,
  .metrics-premium__grid,
  .facility-support {
    grid-template-columns: 1fr !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .packages-facility-visual,
  .packages-facility-card {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* ── Field Evidence gallery ── */
  .ie-gallery-wall {
    grid-template-columns: 1fr !important;
    gap: 20px;
    margin-top: clamp(24px, 5vw, 36px);
    width: 100%;
    min-width: 0;
  }

  .ie-gallery-thumbs {
    grid-template-rows: auto auto;
    gap: 14px;
    min-height: 0;
    height: auto;
    width: 100%;
  }

  .ie-gallery-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px;
    min-height: 0;
    height: auto;
  }

  .ie-gallery-feature {
    aspect-ratio: 1 / 1.05;
    min-height: clamp(240px, 58vw, 360px);
  }

  .ie-gallery-thumb {
    min-height: clamp(96px, 24vw, 128px);
  }

  /* ── Footer copyright + signature ── */
  .footer-grid > div:first-child .footer-socials {
    justify-content: center;
  }

  .footer-bottom__meta {
    min-width: 0;
  }

  .footer-copyright-line {
    max-width: 100%;
    overflow: hidden;
  }

  /* ── Contain wide decorative layers ── */
  .hero-atmosphere,
  .cta-cinema,
  .hero-cinema-lines {
    max-width: 100%;
    overflow: hidden;
  }

  .hero-headline {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .hero-trust-strip {
    max-width: 100%;
  }

  .section-inner {
    max-width: 100% !important;
  }

  /* ── Mobile typography — body line-height + heading/body spacing ── */
  .why-elite__lead,
  .packages__subtitle,
  .field-evidence__lead,
  .metric-card__desc,
  .package-card__desc,
  .pillar-card__p,
  .why-quote p,
  .cta-stat__meta,
  .prog-tag,
  .prog-best-for,
  .footer-about,
  .testimonial-card__quote p {
    line-height: 1.62 !important;
  }

  .tac-header {
    margin-bottom: clamp(24px, 5vw, 32px) !important;
  }

  .tac-header__title {
    margin-bottom: 16px !important;
  }

  .pillar-card__n,
  .package-card__name,
  .metric-card__name,
  .command-stat__name,
  .prog-name {
    margin-bottom: 12px !important;
  }
}

/* Very small phones — image framing only (stack unchanged) */
@media (max-width: 390px) {
  #hero .hero-athlete-image,
  #hero .hero-image-panel img {
    object-position: center 35% !important;
  }
}