/* IMSC public mobile baseline
   Add this as public/mobile.css and keep it linked after style.css.
   Purpose: consistent mobile spacing, tap targets, responsive grids, and table overflow. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

iframe {
  max-width: 100%;
}

button,
.btn,
a.btn,
input[type="submit"],
input[type="button"] {
  min-height: 44px;
  touch-action: manipulation;
}

input,
select,
textarea,
button {
  max-width: 100%;
  font: inherit;
}

main,
section,
.container,
.page-container,
.content-wrap {
  max-width: 100%;
}

.table-wrap,
.table-scroll,
.table-container,
.results-table-wrap,
.standings-table-wrap,
.fixtures-table-wrap,
.roster-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 900px) {
  .container,
  .page-container,
  .content-wrap {
    width: min(100% - 28px, 1200px);
    margin-left: auto;
    margin-right: auto;
  }

  .section,
  .page-section,
  .page-hero,
  .hero {
    padding-left: 0;
    padding-right: 0;
  }

  .hero,
  .page-hero,
  .join-layout,
  .status-layout,
  .waitlist-layout,
  .preseason-layout,
  .rules-layout,
  .players-layout,
  .fixtures-layout,
  .results-layout,
  .standings-layout {
    grid-template-columns: 1fr !important;
  }

  .grid,
  .quick-grid,
  .cards-grid,
  .info-grid,
  .summary-grid,
  .stats-grid,
  .division-grid,
  .fixtures-grid,
  .results-grid,
  .standings-grid,
  .roster-grid,
  .status-grid,
  .waitlist-grid,
  .preseason-grid,
  .rules-grid {
    grid-template-columns: 1fr !important;
  }

  .hero-actions,
  .page-actions,
  .join-actions,
  .status-actions,
  .waitlist-actions,
  .preseason-actions,
  .rules-actions,
  .card-actions,
  .button-row,
  .action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
  }

  .hero-actions .btn,
  .page-actions .btn,
  .join-actions .btn,
  .status-actions .btn,
  .waitlist-actions .btn,
  .preseason-actions .btn,
  .rules-actions .btn,
  .card-actions .btn,
  .button-row .btn,
  .action-row .btn {
    width: 100%;
    max-width: none;
    justify-content: center;
    text-align: center;
    white-space: normal;
  }

  .btn,
  a.btn,
  button,
  input[type="submit"],
  input[type="button"] {
    min-height: 44px;
    padding: 12px 16px;
    line-height: 1.2;
    white-space: normal;
  }

  form,
  .form,
  .join-form,
  .status-form,
  .waitlist-form {
    width: 100%;
  }

  label,
  .form-row,
  .form-field,
  .field-row {
    width: 100%;
  }

  input,
  select,
  textarea {
    width: 100%;
    min-height: 44px;
  }

  textarea {
    min-height: 120px;
  }

  .card,
  .info-card,
  .join-form-card,
  .steps-card,
  .status-card,
  .waitlist-card,
  .preseason-card,
  .rules-card,
  .admin-card,
  .summary-card {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  th,
  td {
    white-space: nowrap;
  }

  .launch-status,
  .launch-status-box,
  .status-box,
  .warning-box,
  .success-box,
  .error-box,
  .notice-box {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 16px;
  }

  h1,
  .hero-title,
  .page-title {
    font-size: clamp(2rem, 12vw, 3.1rem);
    line-height: 0.95;
    overflow-wrap: anywhere;
  }

  h2 {
    font-size: clamp(1.45rem, 7vw, 2.1rem);
    line-height: 1.05;
  }

  h3 {
    font-size: 1.15rem;
  }

  .section,
  .page-section {
    padding-top: 36px;
    padding-bottom: 36px;
  }

  .page-hero,
  .hero {
    padding-top: 42px;
    padding-bottom: 36px;
  }

  .container,
  .page-container,
  .content-wrap {
    width: min(100% - 24px, 1200px);
  }

  .card,
  .info-card,
  .join-form-card,
  .steps-card,
  .status-card,
  .waitlist-card,
  .preseason-card,
  .rules-card,
  .summary-card {
    border-radius: 16px;
    padding: 16px;
  }

  .hero-actions,
  .page-actions,
  .join-actions,
  .status-actions,
  .waitlist-actions,
  .preseason-actions,
  .rules-actions,
  .card-actions,
  .button-row,
  .action-row {
    flex-direction: column;
  }

  .btn,
  a.btn,
  button,
  input[type="submit"],
  input[type="button"] {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .site-header,
  .site-footer {
    max-width: 100%;
    overflow-x: hidden;
  }

  .site-footer .container,
  .footer-grid,
  .footer-bottom {
    grid-template-columns: 1fr !important;
    text-align: left;
  }
}
/* =========================================================
   IMSC MOBILE LEAGUE OVERFLOW PATCH
   Task: stop league boxes/cards from sitting outside the screen
   Where to paste: bottom of public/mobile.css
   ========================================================= */

@media (max-width: 820px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  .container,
  .section .container,
  .section-sm .container,
  .league-section .container,
  .page-section .container,
  .page-hero .container {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
  }

  .league-grid,
  .division-grid,
  .divisions-grid,
  .quick-grid,
  .news-grid,
  .training-grid,
  .product-grid,
  .boards-grid,
  .match-grid,
  .fixtures-grid,
  .standings-grid,
  .results-grid,
  .cards-grid,
  .hub-grid,
  .league-cards,
  .league-card-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .panel,
  .quick-card,
  .news-card,
  .course-card,
  .path-card,
  .product-card,
  .honour-card,
  .match-card,
  .league-card,
  .division-card,
  .fixture-card,
  .standing-card,
  .result-card,
  .hub-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .panel *,
  .quick-card *,
  .news-card *,
  .course-card *,
  .path-card *,
  .product-card *,
  .honour-card *,
  .match-card *,
  .league-card *,
  .division-card *,
  .fixture-card *,
  .standing-card *,
  .result-card *,
  .hub-card * {
    max-width: 100%;
    min-width: 0;
  }

  .fixture-row,
  .hub-list li,
  .performers li,
  .ticker-inner,
  .match-card,
  .join-card,
  .section-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .fixture-row span,
  .fixture-row strong,
  .fixture-row small,
  .hub-list li strong,
  .hub-list li span,
  .performers li span,
  .performers li strong {
    width: auto;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .league-section table,
  .panel table,
  .standings-table,
  .results-table,
  .fixtures-table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
  }

  .league-section th,
  .league-section td,
  .panel th,
  .panel td,
  .standings-table th,
  .standings-table td,
  .results-table th,
  .results-table td,
  .fixtures-table th,
  .fixtures-table td {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  img,
  svg,
  video,
  canvas,
  iframe {
    max-width: 100%;
    height: auto;
  }
}

@media (max-width: 520px) {
  .container,
  .section .container,
  .section-sm .container,
  .league-section .container,
  .page-section .container,
  .page-hero .container {
    padding-left: 14px;
    padding-right: 14px;
  }

  .league-grid,
  .division-grid,
  .divisions-grid,
  .quick-grid,
  .news-grid,
  .training-grid,
  .product-grid,
  .boards-grid,
  .match-grid,
  .fixtures-grid,
  .standings-grid,
  .results-grid,
  .cards-grid,
  .hub-grid,
  .league-cards,
  .league-card-grid {
    gap: 14px;
  }

  .panel,
  .quick-card,
  .news-card,
  .course-card,
  .path-card,
  .product-card,
  .honour-card,
  .match-card,
  .league-card,
  .division-card,
  .fixture-card,
  .standing-card,
  .result-card,
  .hub-card {
    padding-left: 16px;
    padding-right: 16px;
  }
}







/* Homepage mobile hero contained layout start */
@media (max-width: 760px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  .hero-product-first {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .hero-product-first .container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
    overflow-x: hidden !important;
  }

  .hero-product-first .hero-product-headline {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 22px !important;
    line-height: 0.88 !important;
    letter-spacing: -0.055em !important;
    overflow: visible !important;
  }

  .hero-product-first .hero-product-headline .hero-line {
    display: block !important;
    white-space: nowrap !important;
    max-width: 100% !important;
  }

  .hero-product-first .hero-product-headline .hero-line:nth-child(1) {
    font-size: clamp(2.85rem, 12.4vw, 3.45rem) !important;
  }

  .hero-product-first .hero-product-headline .hero-line:nth-child(2) {
    font-size: clamp(2.85rem, 12.4vw, 3.45rem) !important;
  }

  .hero-product-first .hero-product-headline .hero-line:nth-child(3) {
    font-size: clamp(2.85rem, 12.4vw, 3.45rem) !important;
  }

  .hero-product-first .hero-product-headline .hero-line-free {
    font-size: clamp(2.55rem, 11.1vw, 3.1rem) !important;
    white-space: nowrap !important;
    letter-spacing: -0.055em !important;
  }

  .hero-product-first .hero-lead,
  .hero-product-first .hero-actions,
  .hero-product-first .hero-trust,
  .hero-product-first .hero-card,
  .hero-product-first .fixture-card,
  .hero-product-first .preview-card,
  .hero-product-first .season-card {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .hero-product-first .hero-lead {
    font-size: 1rem !important;
    line-height: 1.42 !important;
    overflow-wrap: break-word !important;
  }

  .hero-product-first .hero-actions a,
  .hero-product-first .btn {
    width: 100% !important;
    max-width: 100% !important;
  }

  .hero-product-first .hero-trust {
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }
}

@media (max-width: 380px) {
  .hero-product-first .container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .hero-product-first .hero-product-headline .hero-line:nth-child(1) {
    font-size: clamp(2.55rem, 11.7vw, 3rem) !important;
  }

  .hero-product-first .hero-product-headline .hero-line:nth-child(2) {
    font-size: clamp(2.55rem, 11.7vw, 3rem) !important;
  }

  .hero-product-first .hero-product-headline .hero-line:nth-child(3) {
    font-size: clamp(2.55rem, 11.7vw, 3rem) !important;
  }

  .hero-product-first .hero-product-headline .hero-line-free {
    font-size: clamp(2.3rem, 10.5vw, 2.75rem) !important;
  }
}
/* Homepage mobile hero contained layout end */