/* === Mobile Optimizations (Overrides) ===
   These styles aim to improve readability and layout on small screens without altering desktop design.
   You can safely remove any block if it's not needed. */
/* 1) Base fluid media */
img, video, canvas, svg, iframe {
  max-width: 100%;
  height: auto;
}

/* 2) Prevent horizontal scroll */
html, body {
  overflow-x: hidden;
}
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;

/* 3) Tap target and typography defaults */
button, .btn, a.button, a.btn, input[type=submit] {
  min-height: 44px;
  padding: 12px 16px;
}

/* 4) Form fields usability */
input, select, textarea {
  font-size: 16px; /* avoid iOS zoom */
  width: 100%;
  box-sizing: border-box;
}

/* 5) Utility container that may exist as .container or .wrap */
.container, .wrap, .content, .inner, .page, .section {
  padding-left: clamp(12px, 4vw, 20px);
  padding-right: clamp(12px, 4vw, 20px);
}

/* 6) Common fixed width images/logos */
.logo, .brand, header img, .hero img {
  max-width: 100%;
  height: auto;
}

/* 7) Break complex grids into single-column on small screens */
@media (max-width: 768px) {
  /* Headings scale */
  h1 { font-size: clamp(24px, 7vw, 34px); line-height: 1.2; }
  h2 { font-size: clamp(20px, 6vw, 28px); line-height: 1.25; }
  h3 { font-size: clamp(18px, 5.5vw, 24px); }
  p, li { font-size: clamp(14px, 4.2vw, 18px); }

  /* Generic grid to single column */
  .grid, .row, .columns, .cols, .cards, .gallery {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: clamp(12px, 3vw, 18px);
  }

  /* Two-column common patterns */
  .left, .right, .col, .col-6, .col-7, .col-5, .split, .half {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }

  /* Hero/cover spacing */
  .hero, .header, .cover, .banner {
    padding: clamp(20px, 8vw, 40px) 0;
    text-align: center;
  }

  /* Buttons full-width on mobile for accessibility */
  .btn, a.btn, .button, a.button, button {
    width: 100%;
    display: inline-block;
  }

  /* Tables: allow wrap + scroll */
  table {
    width: 100%;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* 8) Fine-tune very small screens */
@media (max-width: 420px) {
  .cta, .big, .display, .headline {
    font-size: clamp(20px, 8vw, 28px);
  }
  .card, .box, .panel {
    padding: clamp(12px, 4vw, 18px);
    border-radius: 14px;
  }
}

/* 9) Fix common absolute elements that might overflow */
.fixed, .absolute, .badge, .ribbon {
  max-width: 95vw;
  word-break: break-word;
}

/* 10) Audio controls wrapper adjustments (if present) */
.audio-toggle, .sound-toggle, .sound-btn {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}