/* ==========================================================================
   Ntcheuayimbi — mobile adaptation layer v2 (additive; load AFTER styles.css)
   Every rule either fixes a gap confirmed from the provided HTML/JS, or is an
   idempotent guard — harmless even if styles.css already handles it.
   Nothing here alters desktop (≥900px) appearance.
   ========================================================================== */

/* ---------- 0. Global guards ---------- */
html, body { max-width: 100%; }
body.drawer-open { overflow: hidden; }
img, svg, video, iframe { max-width: 100%; }
input, select, textarea { font-size: 16px; }              /* stops iOS focus-zoom */
.btn { min-height: 44px; }                                 /* touch targets */
.chip, .tab, .icon-btn { min-height: 40px; min-width: 40px; }
.lyrics-body pre { white-space: pre-wrap; word-break: break-word; }   /* lyrics must never force page scroll */
.song-title, .sd-title { overflow-wrap: break-word; }
@supports (aspect-ratio: 16 / 9) {
  .video-embed-wrap { height: auto; aspect-ratio: 16 / 9; }
}

/* ---------- 1. ≤900px — aligns with the existing nav collapse ---------- */
@media (max-width: 900px) {
  .hero, .page-hero { background-attachment: scroll; }   /* iOS can't do fixed; no-op if unused */
  /* container gutter now comes from --gutter in styles.css (one system for every width) */
  .field-row { grid-template-columns: 1fr; gap: 14px; }  /* form rows stack */
  .toolbar { flex-direction: column; align-items: stretch; }
  .song-row-info { min-width: 0; }
  .song-row-stat { font-size: 11px; white-space: nowrap; }
}

/* ---------- 2. ≤720px ---------- */
@media (max-width: 720px) {
  /* carousels: one dominant card per swipe */
  .carousel-track { display: grid; grid-auto-flow: column; grid-auto-columns: 78%;
                    gap: 12px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .carousel-track > * { scroll-snap-align: start; }
  .carousel-track.cards-people { grid-auto-columns: 46%; }

  .upload-choice-grid, .link-option-grid { grid-template-columns: 1fr; }
  .form-card { padding: 18px 16px; }
  .assist-actions { flex-direction: column; }
  .assist-actions .btn { width: 100%; justify-content: center; }

  .song-detail { grid-template-columns: 1fr; gap: 22px; }
  .sd-actions { flex-direction: column; align-items: stretch; }
  .sd-actions .btn { width: 100%; }
  .profile-header { flex-direction: column; }
  .feature-banner { grid-template-columns: 1fr; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { display: none; }                        /* hero art is decoration on phones */

  .chip-row, .tab-row { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }

  .mini-player { z-index: 70; }
  .mobile-drawer { z-index: 90; }
}

/* ---------- 3. ≤480px ---------- */
@media (max-width: 480px) {
  .mini-player { left: 0; right: 0; width: 100%; bottom: 0; border-radius: 0; }  /* NOTE: no transform here — it used to be `transform:none`, which kept the bar on screen permanently on phones */
  .mp-inner { flex-wrap: wrap; gap: 8px; padding: 10px var(--gutter); }
  .mp-progress-wrap { order: 3; flex: 1 1 100%; }
  .footer-bottom { flex-direction: column; gap: 6px; text-align: center; }
}

/* ---------- 4. ≤380px small phones ---------- */
@media (max-width: 380px) {
  .footer-grid { grid-template-columns: 1fr; }
  .people-grid { grid-template-columns: repeat(2, 1fr); }
  .sd-stats { gap: 12px; }
}

/* ---------- 5. drawer search (injected by app.js) ---------- */
.drawer-search { display: flex; align-items: center; gap: 8px; margin: 6px 18px 14px;
                 padding: 10px 14px; background: rgba(255,255,255,.08);
                 border-radius: 999px; color: rgba(255,255,255,.75); }
.drawer-search input { background: transparent; border: 0; outline: none; color: #fff; width: 100%; }
@media (max-width:720px){.nav-row{height:62px}.brand img{height:32px}.hamburger{width:44px;height:44px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.09)}.mobile-drawer{padding-top:14px}.mobile-drawer.open a{animation:drawer-item-in .28s both}.mobile-drawer.open a:nth-of-type(2){animation-delay:.025s}.mobile-drawer.open a:nth-of-type(3){animation-delay:.05s}.mobile-drawer.open a:nth-of-type(4){animation-delay:.075s}.mobile-drawer.open a:nth-of-type(5){animation-delay:.10s}.mobile-drawer.open a:nth-of-type(6){animation-delay:.125s}.mobile-drawer.open a:nth-of-type(7){animation-delay:.15s}.mobile-drawer.open a:nth-of-type(8){animation-delay:.175s}@keyframes drawer-item-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}.hero{padding:46px 0 52px;background-position:center 25%}.hero-grid{gap:0}.hero h1{font-size:clamp(42px,13vw,58px)}.hero-sub{font-size:15px;max-width:34ch}.hero-ctas .btn{flex:1 1 150px}.section{padding:44px 0}.tab-row{position:relative;z-index:2}}


/* ---------- 6. V1 responsive containment pass ----------
   The mobile layout must reflow to the device width, never imitate the desktop
   canvas. The rules below deliberately release min-width constraints that can
   be introduced by grid/flex children and long content. */
@media (max-width: 900px) {

  body { min-width:0; }
  main, section, header, footer, .container { max-width:100%; }
  .container { width:100%; min-width:0; }

  .nav-row { width:100%; min-width:0; }
  .brand { min-width:0; }
  .brand img { height:42px; width:auto; max-width:150px; object-fit:contain; }
  .nav-actions { min-width:0; }

  /* Every common layout child is allowed to shrink below its content's width. */
  .hero-grid > *, .song-detail > *, .profile-header > *,
  .feature-banner > *, .field-row > *, .upload-choice-grid > *,
  .link-option-grid > *, .settings-row > *, .submission-card > *,
  .submission-card-head > *, .admin-grid > *, .card > *,
  .grid > *, .people-grid > *, .video-grid > *, .song-grid > * {
    min-width:0;
    max-width:100%;
  }

  /* Long IDs, phone numbers, URLs, social links and filenames must wrap. */
  p, a, span, label, dt, dd, td, th, code, pre, input, textarea, select,
  .card-title, .card-sub, .song-title, .sd-title, .artist-name,
  .producer-name, .submission-card, .submission-detail, .settings-card {
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  img, video, iframe, canvas { height:auto; max-width:100%; }
  .table-scroll, .admin-table-wrap, .submission-list, .settings-card,
  .form-card, .card, .feature-banner, .song-detail, .profile-header {
    min-width:0;
    max-width:100%;
  }
}

@media (max-width: 720px) {
  .nav-row { height:66px; gap:8px; }
  .brand img { height:44px; max-width:165px; }
  .site-header.scrolled .nav-row { height:60px; }
  .site-header.scrolled .brand img { height:38px; }

  /* Turn desktop-style grids into true mobile stacks where appropriate. */
  .grid-2, .grid-3, .grid-4,
  .cards-grid, .song-grid, .video-grid, .people-grid,
  .feature-banner, .song-detail, .profile-header {
    width:100%;
    min-width:0;
  }

  .toolbar, .hero-ctas, .sd-actions, .assist-actions, .submission-actions,
  .settings-row, .admin-toolbar, .filter-row {
    min-width:0;
    max-width:100%;
  }

  .hero-ctas { flex-wrap:wrap; }
  .hero-ctas .btn { min-width:0; max-width:100%; }

  .site-footer { margin-top:auto; padding:42px 0 22px; }
  .footer-grid { width:100%; min-width:0; }
  .footer-bottom { width:100%; }
  .footer-brand-blurb { max-width:none; }
}

@media (max-width: 480px) {
  .brand img { height:43px; max-width:160px; }
  .site-header.scrolled .brand img { height:37px; }

  /* Prevent buttons/forms from creating a desktop-width row. */
  .btn, button, input, select, textarea { max-width:100%; }
  .hero-ctas .btn { flex:1 1 140px; }
  .footer-grid { gap:26px; }
}

/* ---------- 7. Admin dashboard on phones ----------
   The sidebar already collapses to an off-canvas drawer and each table
   already scrolls sideways inside .table-scroll (so the page itself never
   scrolls horizontally). These rules just make that scrollable table area
   denser so less side-scrolling is needed on a phone screen. */
@media (max-width: 720px) {
  .admin-main { padding: 18px var(--gutter); }
  .card-title-row h2 { font-size: 16px; }
  .stat-card { padding: 14px; }
  .stat-card .n { font-size: 21px; }
  .admin-table { min-width: 520px; }
  .admin-table th, .admin-table td { padding: 9px 10px; font-size: 12.5px; }
}
@media (max-width: 420px) {
  .admin-table { min-width: 460px; }
}


/* ---------- 7. Global search results inside the mobile drawer ----------
   The results box is appended INSIDE .mobile-drawer, so the drawer's generic link styles
   (.mobile-drawer a { color:#fff; font-size:19px; display:flex; background:rgba(255,255,255,.045); min-height:52px ... })
   were winning over .global-search-item and painting the result names WHITE ON WHITE. Only the headings (divs) and the
   grey <small> code lines stayed visible. These rules are more specific than the drawer's, so they restore the
   desktop look of the dropdown. */
.mobile-drawer .global-search-results { background:#fff; color:#111; text-align:left; }
.mobile-drawer a.global-search-item {
  display:block; color:#111; font-size:13px; font-weight:400; line-height:1.3;
  min-height:0; margin:0; padding:10px 14px; border:0; border-radius:0; background:transparent; transform:none;
}
.mobile-drawer a.global-search-item:hover,
.mobile-drawer a.global-search-item:active,
.mobile-drawer a.global-search-item.active { background:#f6f7fa; border:0; transform:none; }
.mobile-drawer a.global-search-item strong { display:block; color:#111; font-size:14px; font-weight:700; overflow-wrap:anywhere; }
.mobile-drawer a.global-search-item small  { display:block; margin-top:2px; color:#6b7280; font-size:12px; font-weight:500; overflow-wrap:anywhere; }
.mobile-drawer a.global-search-see-all {
  display:block; color:var(--orange); font-size:12px; font-weight:700;
  min-height:0; margin:0; padding:8px 14px; border:0; border-radius:0; background:transparent; transform:none;
}
.mobile-drawer .global-search-results a { animation:none !important; }


/* ---------- 8. Admin tables on phones: whole words, readable columns ----------
   Problem fixed: section 6 lets every cell break words "anywhere" and section 7 shrank the tables to
   460–520px, so 6–8 column tables were crushed into 20–60px columns and words were chopped mid-letter
   ("Publi / shed", "SON / G"). Now headers never split, normal words never split, and a table that needs
   more room than the screen simply scrolls sideways inside its own .table-scroll box (every admin table
   is already wrapped in one). Long IDs / e-mails / URLs may still wrap, but only when they exceed the cell. */
@media (max-width: 899.98px) {
  .table-scroll .admin-table { min-width: 640px; }
  .admin-table th {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
  }
  .admin-table td {
    overflow-wrap: break-word;   /* does not shrink columns below the longest word, unlike "anywhere" */
    word-break: normal;
    max-width: 260px;
    vertical-align: middle;
  }
  .admin-table td .btn, .admin-table td button { white-space: nowrap; }

  /* Other admin text must not be shredded letter-by-letter either. */
  .admin-main :is(p, a, span, label, dt, dd, strong, small, h2, h3, h4) {
    overflow-wrap: break-word;
    word-break: normal;
  }
  .admin-main .btn { white-space: normal; }
}
@media (max-width: 420px) {
  .table-scroll .admin-table { min-width: 600px; }
}