/* mobile-public.css — mobile-optimalisaties voor publiek-facing pagina's
   Geladen ná app.css. Alleen @media-regels en mobile-only helpers. */

/* ===== Global safety guards (mobile) ===== */
@media (max-width: 768px) {
  /* Voorkom horizontale scroll door breakwords in lange URLs / inhoud */
  html, body { overflow-x: hidden; }
  body { -webkit-text-size-adjust: 100%; }

  /* iOS zoomt in op inputs < 16px — forceer minimaal 16px */
  input, select, textarea, .form-input {
    font-size: 16px !important;
  }

  /* Touch targets: knoppen en links die als btn fungeren */
  .btn, .btn-sm {
    min-height: 44px;
  }
  .btn-sm { min-height: 38px; }

  /* Container padding consistent en compact */
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Page-header niet te veel padding boven */
  .container[style*="padding-top:48px"] {
    padding-top: 28px !important;
  }
  .container[style*="padding-top:60px"] {
    padding-top: 32px !important;
  }
  .container[style*="padding-top:80px"],
  .container[style*="padding-top:100px"] {
    padding-top: 60px !important;
  }

  /* Cards iets minder padding */
  .card { padding: 18px; }

  /* Flash full-width op mobiel — niet boxed */
  .flash.container {
    border-radius: 0;
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
  }

  /* Footer compacter */
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .footer-links {
    flex-wrap: wrap;
    gap: 10px 16px;
    row-gap: 8px;
  }
  .footer-links a {
    padding: 6px 0;
    font-size: 14px;
  }

  /* Nav-menu: smoothere transitie, scrollable als veel items */
  .nav-links.open {
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ===== Dashboard ===== */
@media (max-width: 768px) {
  /* Hero-actions stacken niet — laat ze wrap, maar compacter */
  .hero-actions { gap: 8px; }
  .hero-actions .btn { font-size: 13px; padding: 8px 12px; }

  /* Stat-strip: 2 kolommen ipv flex wrap chaos */
  .card > div[style*="display:flex"][style*="gap:28px"],
  .card > div[style*="display:flex"][style*="gap:24px"] {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px !important;
  }

  /* Group-card grid -> 1 kolom */
  .group-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  /* Stat-strip nog steeds 2 kol, anders te smal */
  .card > div[style*="display:flex"][style*="gap:28px"],
  .card > div[style*="display:flex"][style*="gap:24px"] {
    gap: 12px !important;
  }
  .card > div[style*="display:flex"][style*="gap:28px"] > div > div:last-child,
  .card > div[style*="display:flex"][style*="gap:24px"] > div > div:last-child {
    font-size: 22px !important;
  }
}

/* ===== Spellen lijst ===== */
@media (max-width: 640px) {
  /* Game-rows compacter, less padding */
  [data-game-row] {
    padding: 14px 14px !important;
    gap: 10px !important;
  }
  /* Status-knoppen kolom inkrimpen */
  [data-game-row] > div:first-child .status-btn,
  [data-game-row] > div:first-child .fav-btn {
    width: 32px;
    height: 32px;
  }
  /* Thumbnail iets kleiner */
  [data-game-row] img[loading="lazy"] {
    width: 54px !important;
    height: 54px !important;
  }
  [data-game-row] [style*="font-size:16px"] {
    font-size: 15px !important;
  }
}

/* Filter-grid op mobiel: minder kolommen */
@media (max-width: 640px) {
  .sp-filter-card > div > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
}
@media (max-width: 420px) {
  .sp-filter-card > div > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* ===== Game pagina ===== */
@media (max-width: 640px) {
  /* Game-header: thumbnail + title kleiner */
  .page-header[style*="align-items:flex-start"] img {
    width: 100px !important;
    height: 100px !important;
  }
  /* Buttons in hero-actions full-width op smal scherm */
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-actions .btn,
  .hero-actions form,
  .hero-actions form button {
    width: 100%;
    justify-content: center;
  }
  /* "Start in groep" picker stack */
  #start-group-picker {
    max-width: 100% !important;
    width: 100%;
  }
  form[onsubmit*="goToSessieNieuw"] {
    width: 100%;
  }
  form[onsubmit*="goToSessieNieuw"] select,
  form[onsubmit*="goToSessieNieuw"] button {
    width: 100%;
  }

  /* "Koop dit spel"-blok stack */
  .card > div[style*="justify-content:space-between"][style*="flex-wrap:wrap"] {
    flex-direction: column;
    align-items: stretch !important;
  }
  .card > div[style*="justify-content:space-between"][style*="flex-wrap:wrap"] > div:last-child {
    display: flex;
    width: 100%;
  }
  .card > div[style*="justify-content:space-between"][style*="flex-wrap:wrap"] > div:last-child .btn {
    flex: 1;
    justify-content: center;
  }

  /* Vergelijkbare spellen grid: 1 kol op heel smal */
  div[style*="minmax(220px"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
}
@media (max-width: 420px) {
  div[style*="minmax(220px"] {
    grid-template-columns: 1fr !important;
  }
}

/* ===== Categorieën/Uitgevers grids -> 1 kolom ===== */
@media (max-width: 640px) {
  div[style*="minmax(260px"],
  div[style*="minmax(280px"],
  div[style*="minmax(320px"] {
    grid-template-columns: 1fr !important;
  }
  div[style*="minmax(220px, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 480px) {
  div[style*="minmax(220px, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* ===== FAQ details: tap-friendlier ===== */
@media (max-width: 640px) {
  .container details summary {
    padding: 14px 0 !important;
    font-size: 15px !important;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .container details > p {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
}

/* ===== Auth-pagina's ===== */
@media (max-width: 480px) {
  .container[style*="max-width:420px"] h1,
  .container[style*="max-width:480px"] h1 {
    font-size: 32px !important;
  }
}

/* ===== Privacy: card padding compacter ===== */
@media (max-width: 640px) {
  .card[style*="padding:28px 32px"] {
    padding: 20px 18px !important;
  }
  .card h2 { font-size: 18px; margin-top: 22px; }
  .card h2:first-child { margin-top: 0; }
}

/* ===== Error pages compacter ===== */
@media (max-width: 640px) {
  .container[style*="padding-top:100px"] > div[style*="font-size:120px"] {
    font-size: 80px !important;
  }
}

/* ===== Heatmap: kleinere maand-labels op mobiel ===== */
@media (max-width: 640px) {
  .heatmap-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .heatmap-grid { min-width: 480px; }
  .heatmap-card { --hm-day-label: 30px; }
  .heatmap-day-label { font-size: 9px; padding-right: 4px; }
  .heatmap-month-label { font-size: 9px; letter-spacing: 0; }
}

/* ===== Page-header: minder margin/padding op mobiel ===== */
@media (max-width: 640px) {
  .page-header { padding: 20px 0 14px; margin-bottom: 16px; }
  .page-header h1 { font-size: 30px; line-height: 1.15; }
  .page-header p { font-size: 14px; }
  .page-header-meta { font-size: 11px; }
}
@media (max-width: 420px) {
  .page-header h1 { font-size: 26px; }
}

/* ===== Inline tag/badge lijsten — wrap goed ===== */
@media (max-width: 640px) {
  section[style*="margin-bottom:28px"] .badge {
    font-size: 12px !important;
    padding: 5px 10px !important;
  }
}

/* ===== Feedback / form full-width buttons al goed; alleen radio-grid checken ===== */
@media (max-width: 480px) {
  /* fb-types al door app.css naar 1 kolom */
  .fb-type-card { padding: 12px; }
}

/* ===== Awards rij compacter ===== */
@media (max-width: 640px) {
  /* award-row jaar-kolom smaller */
  a[href^="/spel/"] > span[style*="min-width:54px"] {
    min-width: 40px !important;
    font-size: 12px !important;
  }
  a[href^="/spel/"] > span[style*="flex:1"][style*="font-size:15px"] {
    font-size: 14px !important;
  }
  /* Awards section header met "Volledig overzicht" knop: stack */
  section > div[style*="display:flex"][style*="align-items:baseline"][style*="justify-content:space-between"] {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 6px;
  }
}

/* ===== Publisher- & category-list rows: meer wrap ===== */
@media (max-width: 480px) {
  a[href^="/uitgever/"][style*="padding:12px 18px"] {
    padding: 12px 14px !important;
    gap: 10px !important;
  }
  a[href^="/uitgever/"] > span[style*="width:44px"] {
    width: 36px !important;
    height: 36px !important;
  }
}

/* ===== Hero-actions in dashboard: betere wrap-look ===== */
@media (max-width: 480px) {
  .hero-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .hero-actions .btn {
    width: 100%;
    justify-content: center;
    min-height: 42px;
  }
}

/* ===== Section h2 inline-style overrides op mobiel ===== */
@media (max-width: 640px) {
  h2[style*="font-size:24px"] { font-size: 20px !important; }
  h2[style*="font-size:22px"] { font-size: 19px !important; }
  h2[style*="font-size:20px"] { font-size: 18px !important; }
  h2[style*="font-size:26px"] { font-size: 22px !important; }
}

/* ===== PWA nav-knoppen niet over content ===== */
@media (max-width: 640px) {
  body.is-standalone main { padding-bottom: 80px; }
}