/* ============================================================
 * mobile.css — Responsive overrides for phones & tablets.
 * Loaded AFTER style.css; relies on cascade order, not !important
 * (except where style.css itself uses !important, e.g. .hidden).
 * ============================================================ */

/* --------- Dynamic viewport height (iOS Safari URL-bar fix) --------- */
@supports (height: 100dvh) {
  html, body { height: 100dvh; }
  #app { height: 100dvh; }
}

/* --------- Touch-friendly defaults (all sizes) --------- */
.tile,
.mini-card,
.pg-row {
  touch-action: manipulation;
}

/* Prevent overscroll bounce / pull-to-refresh inside player surfaces.
   Grid scroll on phones should still feel native, so we scope this. */
#player-view,
.mini-rail,
.pg-list {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ============================================================
 * 721px – 960px  ·  phone landscape / small tablet
 * ============================================================ */
@media (max-width: 960px) and (min-width: 721px) {
  .home-preview {
    margin: 0 22px 14px;
    min-height: 190px;
  }
  .home-preview-overlay {
    min-height: 190px;
    padding: 20px 22px;
  }
  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    padding: 14px 22px;
  }

  /* Shrink the topbar but keep it on one row */
  .topbar {
    padding: 16px 22px 8px;
    gap: 14px;
  }
  .brand-ar { font-size: 28px; }
  .brand-en { font-size: 11px; letter-spacing: 0.24em; }
  .clock { font-size: 16px; }
  .hijri { font-size: 11px; }
  .data-source { font-size: 10px; padding: 4px 8px; }

  :root { --tile-h: clamp(160px, 26vh, 220px); }

  /* Player HUD: tighten paddings */
  .player-overlay { padding: 22px 26px; }
  .np-ar { font-size: 30px; }
  .np-en { font-size: 13px; }
  .player-hints {
    gap: 14px;
    font-size: 11px;
  }

  /* Mini-guide */
  .mini-guide {
    height: clamp(220px, 40vh, 300px);
    padding: 18px 22px 14px;
  }
  .mini-card { flex: 0 0 200px; }

  /* Program guide: hide UP NEXT column at this width if not already */
  .pg-row {
    grid-template-columns: minmax(180px, 1.3fr) 2fr 90px;
  }
  .pg-next { display: none; }
}

/* ============================================================
 * <= 720px  ·  phone portrait
 * ============================================================ */
@media (max-width: 720px) {

  /* ---------- Topbar: stack into 2 rows ---------- */
  .topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 14px 16px 6px;
  }
  .brand {
    justify-content: flex-start;
    gap: 8px;
  }
  .brand-ar {
    font-size: 24px;
    line-height: 1.1;
  }
  .brand-divider { font-size: 18px; }
  .brand-en {
    font-size: 10px;
    letter-spacing: 0.24em;
    display: inline-block;       /* style.css hides this <=540px; re-show */
  }
  .topbar-right {
    justify-content: space-between;
    gap: 10px;
  }
  .clock-stack { text-align: end; }
  .clock { font-size: 15px; letter-spacing: 0.04em; }
  .hijri { font-size: 10px; letter-spacing: 0.14em; }
  .data-source { display: none !important; }

  /* ---------- Prayer strip: comfortable vertical rhythm on phones ---------- */
  .prayer-strip {
    margin: 8px 14px 12px;
    padding: 16px 14px 18px;
    min-height: 120px;
    gap: 12px;
    flex-wrap: wrap;
    align-items: stretch;
  }
  .prayer-strip-label { display: none; }
  .prayer-strip-loc {
    width: 100%;
    justify-content: flex-start;
    font-size: 11px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(245, 239, 225, .06);
  }
  .prayer-strip-list {
    width: 100%;
    gap: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px 0 8px;
    -webkit-overflow-scrolling: touch;
  }
  .ps-item {
    gap: 8px;
    padding: 4px 8px;
    min-width: 70px;
    line-height: 1.5;
  }
  .ps-item-en {
    font-size: 10px;
    line-height: 1.4;
    letter-spacing: 0.16em;
    margin-bottom: 2px;
  }
  .ps-item-row {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    line-height: 1.5;
  }
  .ps-item-time {
    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
  }
  .ps-item-ar {
    font-size: 12px;
    line-height: 1.5;
  }

  .home-preview {
    margin: 0 14px 12px;
    min-height: 168px;
  }
  .home-preview-overlay {
    min-height: 168px;
    padding: 16px 14px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: end;
    gap: 14px;
  }
  .home-preview-copy { max-width: 100%; }
  .home-preview-kicker { font-size: 10px; letter-spacing: 0.24em; }
  .home-preview-ar { font-size: 24px; }
  .home-preview-en { font-size: 10px; letter-spacing: 0.14em; }
  .home-preview-now { font-size: 13px; margin-top: 10px; }
  .home-preview-meta {
    align-items: flex-start;
    gap: 8px;
  }
  .home-preview-open { font-size: 10px; letter-spacing: 0.16em; }

  /* ---------- Grid: 1 column, auto-ish tile ---------- */
  .grid {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 10px 14px;
    overflow-y: auto;            /* phones need to scroll the list */
    align-content: start;
    -webkit-overflow-scrolling: touch;
  }
  :root { --tile-h: 140px; }
  .tile {
    padding: 16px 18px;
    border-radius: 12px;
  }
  .tile .name-ar { font-size: 22px; }     /* ~20% smaller than desktop */
  .tile .name-en { font-size: 10px; }
  .tile .now-line { font-size: 12px; margin-top: 6px; }
  .tile.featured .now-line { -webkit-line-clamp: 2; }
  .tile .type-badge,
  .tile .live-pill { font-size: 9px; padding: 4px 8px; }
  .tile .haram-ar { font-size: 12px; }
  .tile .haram-label { font-size: 10px; letter-spacing: 0.18em; }
  .tile.focused {
    transform: scale(1.015);   /* less scale; phones don't need the lift */
    box-shadow: 0 0 0 3px var(--gold-soft), 0 14px 30px rgba(0,0,0,.55);
  }

  /* ---------- Hint footer: "Tap or swipe" only ---------- */
  .hint {
    padding: 6px 14px 12px;
    font-size: 10px;
    letter-spacing: 0.2em;
    justify-content: center;
    gap: 14px;
  }
  .hint kbd { display: none; }
  .hint span { display: none; }
  .hint::before {
    content: 'TAP OR SWIPE';
    color: var(--cream-dim);
    letter-spacing: 0.3em;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 600;
  }

  /* ---------- Player HUD ---------- */
  .player-overlay {
    padding: 14px 16px;
  }
  .now-playing { max-width: 92%; }
  .np-label { font-size: 10px; letter-spacing: 0.24em; }
  .np-ar { font-size: 22px; line-height: 1.18; }
  .np-en { font-size: 11px; letter-spacing: 0.16em; }
  .np-meta { gap: 10px; margin-top: 12px; }
  .haram-tag { font-size: 10px; letter-spacing: 0.18em; }

  /* Hints on a single row, smaller */
  .player-hints {
    gap: 10px;
    font-size: 10px;
    letter-spacing: 0.1em;
    flex-wrap: nowrap;
    overflow: hidden;
  }
  .player-hints span { white-space: nowrap; }
  .player-hints kbd { padding: 1px 5px; font-size: 0.8em; }

  /* ---------- Mini-guide: ~50vh, larger cards ---------- */
  .mini-guide {
    height: 50vh;
    padding: 14px 14px 12px;
  }
  .mini-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 10px;
  }
  .mini-title { font-size: 12px; letter-spacing: 0.24em; }
  .mini-hint { font-size: 10px; letter-spacing: 0.1em; }
  .mini-tools {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 10px;
  }
  .mini-select,
  .mini-search {
    width: 100%;
    height: 38px;
    font-size: 12px;
    letter-spacing: 0.08em;
  }
  .mini-status {
    min-width: 0;
    text-align: start;
    font-size: 10px;
  }
  .mini-rail {
    gap: 10px;
    padding-bottom: 6px;
  }
  .mini-card { flex: 0 0 150px; }
  .mini-card .card-body { padding: 8px 10px 10px; }
  .mini-card .card-title { font-size: 12px; }
  .mini-card .thumb-badge { font-size: 9px; padding: 2px 6px; }
  .mini-card .card-meta { font-size: 9px; }

  /* ---------- Program guide: 1-column flex rows ---------- */
  .program-guide {
    padding: 18px 14px;
  }
  .pg-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 14px;
  }
  .pg-title { font-size: 14px; letter-spacing: 0.24em; }
  .pg-meta { font-size: 10px; letter-spacing: 0.14em; }

  .pg-list { gap: 8px; }
  .pg-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 10px;
    grid-template-columns: none;     /* overrides desktop grid */
  }
  .pg-row.focused { transform: none; }
  .pg-channel {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
  }
  .pg-channel-ar { font-size: 17px; }
  .pg-channel-en { font-size: 10px; letter-spacing: 0.18em; }
  .pg-now, .pg-next { gap: 2px; }
  .pg-label { font-size: 9px; letter-spacing: 0.24em; }
  .pg-prog { font-size: 13px; }
  .pg-next { display: none; }      /* keep NOW only in 1-column */
  .pg-status {
    position: absolute;
    top: 12px;
    inset-inline-end: 14px;
    justify-content: flex-end;
  }
  .pg-row { position: relative; }
  .pg-hint {
    margin-top: 10px;
    font-size: 10px;
    letter-spacing: 0.16em;
  }
  .pg-hint kbd { display: none; }

  /* ---------- Banners: full width, side padding ---------- */
  .banner {
    left: 12px;
    right: 12px;
    transform: none;
    top: 12px;
    border-radius: 12px;
    padding: 10px 14px;
    gap: 10px;
    width: auto;
    max-width: none;
    justify-content: flex-start;
  }
  @keyframes bannerInPhone {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .banner { animation: bannerInPhone 320ms cubic-bezier(.2,.8,.2,1) both; }
  .banner-text strong { font-size: 13px; }
  .banner-text span { font-size: 10px; letter-spacing: 0.18em; }

  /* ---------- Channel flash: smaller ---------- */
  .channel-flash {
    font-size: 26px;
    padding: 12px 22px;
    border-radius: 12px;
    max-width: 86vw;
  }
  .channel-flash .flash-en {
    font-size: 10px;
    letter-spacing: 0.24em;
    margin-top: 4px;
  }

  /* ---------- Audio mode: scale ornament/name ---------- */
  .audio-ornament { font-size: 36px; margin-bottom: 18px; }
  .audio-name-ar { font-size: 34px; margin-bottom: 6px; }
  .audio-name-en { font-size: 12px; letter-spacing: 0.24em; margin-bottom: 22px; }
  .audio-bars { height: 50px; gap: 6px; }
  .audio-bars span { width: 6px; }
}

/* ============================================================
 * Very narrow (<= 380px) — extra-tight polish
 * ============================================================ */
@media (max-width: 380px) {
  .brand-ar { font-size: 20px; }
  .tile .name-ar { font-size: 20px; }
  .np-ar { font-size: 19px; }
  :root { --tile-h: 132px; }
}

/* ============================================================
 * Touch / coarse-pointer hover suppression
 * ============================================================ */
@media (hover: none) {
  /* Hover-triggered focus on tiles is jarring on touch; rely on tap. */
  .tile:not(.focused) { transform: none; }
}

/* ============================================================
 * Safe-area insets — make sure the home-indicator on iPhone does
 * not overlap our fixed/absolute UI. Apply on phones only so the
 * desktop layout is unchanged.
 * ============================================================ */
@media (max-width: 960px) {
  .player-overlay {
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }
  .player-hints {
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mini-guide {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
  .program-guide {
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }
  .install-banner {
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }
  .hint {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
  #pull-refresh {
    top: env(safe-area-inset-top);
  }
  .tile-preview {
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }
}

/* ============================================================
 * Touch-feedback sizing tweaks for phones
 * ============================================================ */
@media (max-width: 720px) {
  .touch-pill {
    font-size: 12px;
    padding: 12px 18px;
    letter-spacing: 0.14em;
  }
  .touch-scrub {
    font-size: 10px;
    padding: 8px 14px;
    letter-spacing: 0.18em;
  }
  .tile-preview .tp-card { max-width: 320px; }
  .tile-preview .tp-name-ar { font-size: 22px; }

  /* Tighter chevron positions on phones */
  .edge-chev-left   { left: 6px; }
  .edge-chev-right  { right: 6px; }
  .edge-chev-top    { top: max(8vh, env(safe-area-inset-top)); }
  .edge-chev-bottom { bottom: calc(max(10vh, env(safe-area-inset-bottom)) + 6px); }
  .edge-chev .ec-arrow { font-size: 26px; }

  /* Tutorial card sized for narrow screens */
  .gesture-tutorial .gt-card {
    max-width: 100%;
    padding: 18px 16px 12px;
  }
  .gesture-tutorial .gt-title { font-size: 18px; }
  .gesture-tutorial .gt-arrow { font-size: 22px; }
  .gesture-tutorial .gt-cue { padding: 10px 6px; }
  .gesture-tutorial .gt-label { font-size: 9px; letter-spacing: 0.14em; }
}