/* ============================================================
   MOBILE.CSS — Mobile & Tablet Layout Optimizations
   Mobile:  max-width 767px
   Tablet:  768px – 1023px
   ============================================================ */

/* ─── 1. GLOBAL: No horizontal overflow ─────────────────── */

html,
body {
  overflow-x: hidden;
}

/* ─── 2. MOBILE (≤ 767px) ────────────────────────────────── */

@media (max-width: 767px) {

  /* Container padding reduced for small screens */
  :root {
    --container-pad: 20px;
  }

  /* Touch: restore normal pointer on all interactive elements */
  .btn,
  a,
  button,
  input,
  select,
  textarea {
    cursor: pointer;
  }

  /* Ensure all buttons have minimum touch target height */
  .btn {
    min-height: 44px;
  }

  /* Reduce section vertical padding */
  .section {
    padding: 52px 0;
  }

  /* ─── NAVIGATION ─────────────────────────────────────── */

  /* Hamburger lines: red on mobile */
  .nav__hamburger span {
    background: var(--color-red);
  }

  /* Mobile menu link size: scale down for small screens */
  .nav__mobile-link {
    font-size: clamp(26px, 8vw, 40px);
  }

  /* ─── HERO ───────────────────────────────────────────── */

  /*
   * Bild ist 1535×1024px (3:2 Landscape).
   * Bei 100vh Portrait-Viewport zeigt cover nur ~31% der Bildbreite.
   * Mit 62vh sehen wir ~50% der Bildbreite → deutlich mehr vom Bild.
   * background-position: center 25% zeigt die Handschuhe (obere Hälfte)
   * statt des unteren FIGHT ACADEMY Textes.
   */
  .hero {
    height: 62vh;
    min-height: 380px;
    background-position: center 25%;
  }

  /* Full-width CTA button, flush to container edges */
  .hero__cta-wrap {
    bottom: 28px;
    left: var(--container-pad);
    right: var(--container-pad);
    transform: none;
    width: auto;
  }

  .btn--hero {
    width: 100%;
    padding: 20px var(--space-md);
  }

  /* Hide decorative scroll indicator on mobile */
  .hero__scroll {
    display: none;
  }

  /* ─── FEATURES SECTION ───────────────────────────────── */

  .features-grid {
    padding: 32px 0;
    gap: 0;
  }

  /* Center icons and text in single-column layout */
  .feature {
    align-items: center;
    text-align: center;
    padding: 20px 0;
  }

  /* ─── STATS SECTION ──────────────────────────────────── */

  .stats {
    padding: 48px 0;
  }

  /* Single column, use border-bottom instead of border-right */
  .stats__grid {
    grid-template-columns: 1fr;
  }

  .stat {
    border-right: none !important;
    border-top: none !important;
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-md);
  }

  .stat:last-child {
    border-bottom: none;
  }

  /* ─── ABOUT SPLIT ────────────────────────────────────── */

  /* Secondary CTA button full-width */
  .about-split__content .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* ─── CTA BANNER ─────────────────────────────────────── */

  .cta-banner {
    padding: 52px var(--container-pad);
  }

  .cta-banner h2 {
    font-size: clamp(26px, 7.5vw, 40px);
  }

  .cta-banner p {
    font-size: 15px;
  }

  /* Full-width CTA button inside banner */
  .cta-banner .btn {
    width: 100%;
  }

  /* ─── TRAINER CARDS (TEAM PAGE) ──────────────────────── */

  .trainer-card__body {
    padding: var(--space-md);
  }

  /* ─── COURSE CARDS (TRAINING PAGE) ──────────────────── */

  .course-card {
    padding: var(--space-lg) var(--space-md);
  }

  /* ─── SCHEDULE TABLE (TRAINING PAGE) ────────────────── */

  /* Horizontal scroll instead of squashed table */
  .schedule-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .schedule {
    min-width: 540px;
  }

  /* ─── FORM (MITGLIED PAGE) ───────────────────────────── */

  .form-wrap {
    padding: var(--space-lg) var(--container-pad);
  }

  /* font-size 16px prevents iOS auto-zoom on input focus */
  .form-input,
  .form-select,
  .form-textarea {
    min-height: 48px;
    font-size: 16px;
  }

  /* Full-width submit button */
  .btn--submit {
    width: 100%;
  }

  /* ─── FIGHT NIGHT / EVENTS PAGE ──────────────────────── */

  .fight-night {
    padding: 100px var(--container-pad) 52px;
    min-height: auto;
  }

  /* Reduce large top gap before DEMNÄCHST label */
  .fight-night__soon {
    margin-top: var(--space-lg);
  }

  .fight-night__desc {
    font-size: 14px;
    margin-bottom: var(--space-lg);
    padding: 0 var(--space-xs);
  }

  /* ─── PAGE HERO (SUBPAGES) ───────────────────────────── */

  .page-hero {
    padding: calc(76px + 36px) var(--container-pad) 40px;
    min-height: 38vh;
  }

  .page-hero__sub {
    font-size: 14px;
  }

  /* ─── FOOTER ─────────────────────────────────────────── */

  .footer {
    padding: 56px 0 var(--space-lg);
  }

  /* Increase social icon touch targets to 44px minimum */
  .footer__social-link {
    width: 44px;
    height: 44px;
  }

  /* Increase legal link touch targets */
  .footer__legal a {
    padding: 8px 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* ─── PRICING (TRAINING PAGE) ────────────────────────── */

  .pricing-section-title {
    font-size: 18px;
  }

  /* ─── VALUES GRID ────────────────────────────────────── */
  /* Already 2 columns via components.css — no change needed */

  /* ─── STUDIO PAGE GRIDS ──────────────────────────────── */

  .values-grid--studio {
    grid-template-columns: repeat(2, 1fr);
  }

  .studio-netzwerk-cards {
    grid-template-columns: 1fr;
  }

  .studio-einblicke-imgs {
    grid-template-columns: 1fr;
  }

  /* ─── IMPRESSUM / TEXT PAGES ─────────────────────────── */

  /* Ensure readable body text on small screens */
  p {
    font-size: 14px;
  }
}

/* ─── 3. TABLET (768px – 1023px) ────────────────────────── */

@media (min-width: 768px) and (max-width: 1023px) {

  /* Slightly reduced container padding */
  :root {
    --container-pad: 28px;
  }

  /* Moderate section padding */
  .section {
    padding: 64px 0;
  }

  /* CTA Banner */
  .cta-banner {
    padding: var(--space-xl) var(--container-pad);
  }

  /* Form */
  .form-wrap {
    padding: var(--space-xl) var(--space-lg);
  }

  /* Stats: 2 columns on tablet — already handled by 1023px
     rule in components.css, no override needed here */

  /* Studio grids on tablet */
  .studio-netzwerk-cards {
    grid-template-columns: 1fr;
  }

  .studio-einblicke-imgs {
    grid-template-columns: repeat(2, 1fr);
  }
}