/* ==========================================================================
   MOBILE APP VIEW (phones + small tablets)
   File: assets/css/app-mobile.css

   Notes:
   - This file is ONLY for the mobile app-style UI.
   - It is scoped to .app-site so it won't collide with the desktop site.
   - Desktop site remains untouched.

   TABLE OF CONTENTS
   --------------------------------------------------------------------------
   1) Breakpoint + Visibility (desktop vs app view)
   2) App Shell Base (background, spacing, safe areas)
   3) App Top Bar (brand + notification bell)
   4) App Bottom Nav (fixed)
   5) App Home (placeholder – we’ll build next)
   --------------------------------------------------------------------------
   ========================================================================== */


/* ==========================================================================
   1) Breakpoint + Visibility (desktop vs app view)
   ========================================================================== */

/* Default: desktop site shows, app view hidden */
.app-site{ display: none; }

/* Phones + small tablets:
   - max-width: 1024px catches phones + iPads in portrait.
   - pointer: coarse helps avoid switching desktop laptops resized small. */
@media (max-width: 1024px) and (pointer: coarse){
  .desktop-site{ display: none !important; }
  .app-site{ display: block; }
}

:root{
  --app-nav-h: 88px;       /* your bottom nav height */
  --app-mini-h: 64px;      /* mini player height */
  --app-gap: 10px;         /* spacing between mini + nav */
}

/* Reserve space so content never hides behind nav + mini-player */
.app-main,
.app-content,
.app-shell main{
  padding-bottom: calc(var(--app-nav-h) + var(--app-mini-h) + var(--app-gap) + env(safe-area-inset-bottom));
}

/* ==========================================================================
   2) App Shell Base
   ========================================================================== */

/* App background image */
.app-bg{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background-image:
    linear-gradient(
      to bottom,
      rgba(10,22,34,0.45),
      rgba(10,22,34,0.15),
      rgba(10,22,34,0.55)
    ),
    url("/assets/img/inx/hero.jpg");

  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;

  transform: translateZ(0); /* iOS smoothness */
}

/* Content layer */
.app-shell{
  position: relative;
  z-index: 1;
  min-height: 100vh;
}


/* ==========================================================================
   3) App Top Bar (placeholder)
   ========================================================================== */

@media (max-width: 1024px) and (pointer: coarse){
  .app-topbar{
    position: sticky;
    top: 0;
    z-index: 999;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 14px 0;

    background: linear-gradient(180deg, rgba(9,28,47,.92) 0%, rgba(7,24,40,.90) 100%);
    border-bottom: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(10px);
  }

  .app-brand{
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
  }

  .app-brand img{
    height: 44px;
    width: auto;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 10px 14px rgba(0,0,0,.25));
  }

  .app-brand-title{
    display: flex;
    flex-direction: column;
    line-height: 1.05;
  }
  .app-brand-name{
    font-family: var(--serif);
    font-weight: 900;
    font-size: 16px;
  }
  .app-brand-sub{
    font-family: var(--serif);
    font-style: italic;
    font-size: 11px;
    opacity: .78;
    margin-top: 2px;
  }

  .app-bell{
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.06);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
  }
}


/* ==========================================================================
   4) App Bottom Nav (placeholder)
   ========================================================================== */

@media (max-width: 1024px) and (pointer: coarse){
  .app-nav{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    padding: 10px max(18px, env(safe-area-inset-left))
             calc(10px + env(safe-area-inset-bottom))
             max(18px, env(safe-area-inset-right));

    background: linear-gradient(180deg, rgba(9,28,47,.94) 0%, rgba(7,24,40,.96) 100%);
    border-top: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(10px);

    z-index: 1000;
  }

  .app-nav-row{
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr 1fr 1fr; /* center slightly larger */
    align-items: end;
    gap: 10px;
  }

  .app-tab{
    text-decoration: none;
    color: rgba(255,255,255,.80);
    display: grid;
    justify-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
  }

  .app-ico{
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    opacity: .92;
  }

  /* Enlarge bottom nav icons (Home, Schedule, Library, More) */
.app-nav .app-ico{
  font-size: 20px;   /* was ~16–18px */
  line-height: 1;
}

  /* Center play button style (just a placeholder for now) */
  .app-play{
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--gold) 0%, var(--gold2) 100%);
    color: #241b0f;
    display: grid;
    place-items: center;
    box-shadow: 0 16px 26px rgba(10,20,35,.18);
    border: 2px solid rgba(255,255,255,.18);
    margin-top: -22px; /* lift above bar */
  }

  .app-tab.is-active{ color: #fff; }
}

/* Enlarge center Play icon */
.app-play{
  font-size: 26px;      /* was effectively ~18–20px */
  line-height: 1;
}


/* ==========================================================================
   5) App Home (placeholder)
   ========================================================================== */

@media (max-width: 1024px) and (pointer: coarse){
  .app-home{
    padding-top: 14px;
  }

  .app-placeholder{
    background: rgba(255,255,255,.62);
    border: 1px solid rgba(18,40,62,.12);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-soft);
    padding: 18px;
  }
}


/* ==========================================================================
   6) App Cards, Buttons, Layout
   ========================================================================== */

@media (max-width: 1024px) and (pointer: coarse){

  .app-card{
    background: rgba(255,255,255,.70);
    border: 1px solid rgba(18,40,62,.12);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-soft);
    padding: 16px;
    margin-bottom: 14px;
  }

  .app-card-hero{
    background: linear-gradient(180deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.70) 100%);
    border: 1px solid rgba(201,162,77,.22);
  }

  .app-kicker{
    font-weight: 900;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .72;
  }

  .app-hero-title{
    font-family: var(--serif);
    font-weight: 900;
    font-size: 22px;
    margin: 6px 0 6px;
    color: var(--ink);
  }

  .app-hero-sub{
    margin: 0;
    opacity: .82;
    font-weight: 600;
    line-height: 1.35;
  }

  .app-hero-top{
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .app-hero-right{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .app-btn{
    border: 1px solid rgba(18,40,62,.16);
    border-radius: 16px;
    padding: 12px 12px;
    font-weight: 900;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    background: rgba(255,255,255,.70);
    color: var(--ink);
  }

  .app-btn-soft{
    background: rgba(9,28,47,.08);
  }

  .app-btn-gold{
    background: linear-gradient(180deg, var(--gold) 0%, var(--gold2) 100%);
    border-color: rgba(201,162,77,.38);
    color: #241b0f;
  }

  .app-nowplaying{
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed rgba(18,40,62,.18);
  }

  .np-label{
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .65;
  }

  .np-title{
    font-weight: 900;
    margin-top: 6px;
  }

  .np-meta{
    margin-top: 2px;
    opacity: .72;
    font-weight: 700;
    font-size: 12px;
  }

  .app-grid2{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
  }

  .app-tile{
    padding: 14px;
    text-decoration: none;
    color: var(--ink);
  }

  .tile-ico{
    font-size: 22px;
    margin-bottom: 10px;
  }

  .tile-title{
    font-weight: 900;
    margin-bottom: 4px;
  }

  .tile-sub{
    opacity: .75;
    font-weight: 700;
    font-size: 12px;
    line-height: 1.25;
  }

  .app-card-head{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
  }

  .app-card-title{
    font-family: var(--serif);
    font-weight: 900;
    font-size: 16px;
    margin: 0;
  }

  .app-link{
    font-weight: 900;
    font-size: 12px;
    text-decoration: none;
    color: rgba(9,28,47,.90);
    opacity: .85;
  }

  .app-list{
    display: grid;
    gap: 10px;
  }

  .app-row{
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 10px;
    align-items: start;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(255,255,255,.65);
    border: 1px solid rgba(18,40,62,.10);
    text-decoration: none;
    color: var(--ink);
  }

  .row-time{
    font-weight: 900;
    font-size: 12px;
    opacity: .80;
  }

  .row-title{
    font-weight: 900;
    margin-bottom: 2px;
  }

  .row-sub{
    opacity: .74;
    font-weight: 700;
    font-size: 12px;
    line-height: 1.25;
  }

  .app-chips{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
  }

  .chip{
    text-decoration: none;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(9,28,47,.08);
    border: 1px solid rgba(18,40,62,.12);
    color: var(--ink);
    font-weight: 900;
    font-size: 12px;
  }

  .app-mini-note{
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(201,162,77,.14);
    border: 1px solid rgba(201,162,77,.22);
    font-weight: 800;
    font-size: 12px;
    opacity: .9;
  }
}


/* ==========================================================================
   7) App Player Modal / Drawer
   ========================================================================== */

@media (max-width: 1024px) and (pointer: coarse){

  .app-player{
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
  }

  .app-player.is-open{
    display: block;
  }

  .app-player-backdrop{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(4px);
  }

  .app-player-sheet{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    border-top-left-radius: 22px;
    border-top-right-radius: 22px;

    background: rgba(255,255,255,.92);
    border-top: 1px solid rgba(18,40,62,.10);
    box-shadow: 0 -28px 60px rgba(0,0,0,.25);

    max-height: 86dvh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
  }

  .app-player-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(18,40,62,.10);
  }

  .ppt-kicker{
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .7;
  }

  .ppt-name{
    font-weight: 900;
    margin-top: 3px;
  }

  .app-player-close{
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(18,40,62,.12);
    background: rgba(9,28,47,.06);
    cursor: pointer;
    font-weight: 900;
  }

  .app-player-body{
    padding: 0;
  }

  .app-player-body iframe{
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }

  .app-player-foot{
    padding: 12px 16px;
    border-top: 1px solid rgba(18,40,62,.10);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}

/* ==========================================================================
   8) Mini Player (persistent) + Player Sheet (bottom drawer)
   ========================================================================== */

:root{
  /* Needed for calc() below */
  --app-gap: 12px;     /* spacing between nav + mini player */
  --app-mini-h: 68px;  /* mini player height */
}

@media (max-width: 1024px) and (pointer: coarse){

  /* ===== Mini Player ===== */
  .mini-player{
    position: fixed;
    left: 12px;
    right: 12px;

    /* Sits above bottom nav + safe area */
    bottom: calc(var(--app-nav-h) + var(--app-gap) + env(safe-area-inset-bottom));

    height: var(--app-mini-h);
    z-index: 3500;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    border-radius: 18px;
    background: rgba(12, 20, 34, 0.92);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 10px 12px;

    /* iOS touch polish */
    -webkit-tap-highlight-color: transparent;
  }

  .mini-main{
    flex: 1;
    min-width: 0; /* allows text ellipsis */
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;

    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
  }

  .mini-text{
    min-width: 0; /* allows ellipsis */
  }

  .mini-title{
    font-weight: 900;
    color: #fff;
    font-size: 14px;
    line-height: 1.1;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mini-sub{
    margin-top: 2px;
    font-size: 12px;
    color: rgba(255,255,255,.78);
    font-weight: 700;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mini-play{
    width: 46px;
    height: 46px;
    border-radius: 14px;
    border: 0;
    background: var(--gold);
    color: #111;
    font-weight: 900;
    font-size: 22px; /* bigger play icon */
    display: grid;
    place-items: center;
    cursor: pointer;

    box-shadow: 0 12px 18px rgba(0,0,0,.22);
    -webkit-tap-highlight-color: transparent;
  }

  .mini-play:active{
    transform: translateY(1px);
  }

  /* ===== Player Sheet ===== */
  .player-sheet{
    position: fixed;
    inset: 0;
    z-index: 4500; /* above mini player */
    display: none;
  }
  .player-sheet.is-open{ display: block; }

  .sheet-backdrop{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
  }

  .sheet-panel{
    position: absolute;
    left: 12px;
    right: 12px;

    /* Sheet sits ABOVE the mini player, not on top of it */
    bottom: calc(var(--app-nav-h) + var(--app-gap) + var(--app-mini-h) + env(safe-area-inset-bottom));

    border-radius: 22px;
    background: rgba(12, 20, 34, 0.96);
    border: 1px solid rgba(255,255,255,.14);
    padding: 12px;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    box-shadow: 0 -24px 60px rgba(0,0,0,.35);
  }

  .sheet-grab{
    width: 52px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255,255,255,.25);
    margin: 2px auto 10px;
  }

  .sheet-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
  }

  .sheet-now{
    color: rgba(255,255,255,.85);
    font-size: 13px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .sheet-close{
    border: 0;
    background: rgba(255,255,255,.10);
    color: #fff;
    border-radius: 12px;
    width: 40px;
    height: 40px;
    font-weight: 900;
    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
  }

  .sheet-close:active{
    transform: translateY(1px);
  }

  .player-sheet audio{
    width: 100%;
  }

  .sheet-meta{
    margin-top: 10px;
    font-size: 12px;
    color: rgba(255,255,255,.75);
    font-weight: 700;
  }
}

/* ==========================================================================
   Broadcast Schedule Mobile App View Verison
   ========================================================================== */

@media (max-width: 1024px) and (pointer: coarse){

  .app-sched-controls{
    display: grid;
    gap: 10px;
    margin-top: 12px;
  }

  .app-tabs{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .app-tabbtn{
    border: 1px solid rgba(18,40,62,.16);
    border-radius: 999px;
    padding: 10px 12px;
    font-weight: 900;
    background: rgba(255,255,255,.60);
    color: var(--ink);
    cursor: pointer;
  }

  .app-tabbtn.is-active{
    background: linear-gradient(180deg, var(--gold) 0%, var(--gold2) 100%);
    border-color: rgba(201,162,77,.38);
    color: #241b0f;
  }

  .app-toggle{
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 12px;
    opacity: .9;
  }

  .app-toggle input{
    width: 18px;
    height: 18px;
  }

  /* Panels switching (we’ll mirror your desktop tab behavior) */
  .app-panel{ display: none; }
  .app-panel.is-active{ display: block; }
}

/* App schedule highlight states */
.app-site .app-row.is-live,
.app-site .app-row.is-today {
  border: 2px solid rgba(201, 162, 77, 0.55); /* your gold vibe */
  background: rgba(201, 162, 77, 0.10);
  box-shadow: 0 10px 24px rgba(0,0,0,0.10);
}

.app-site .app-row.is-live .row-time,
.app-site .app-row.is-today .row-time {
  font-weight: 800;
}

/* Optional: a subtle "live" dot look if you want */
.app-site .app-row.is-live .row-title::after {
  content: " • LIVE";
  font-weight: 800;
  letter-spacing: 0.08em;
  font-size: 0.8em;
  opacity: 0.85;
}


/* ==========================================================================
   9) On-Demand Mobile App View
   ========================================================================== */

@media (max-width: 1024px) and (pointer: coarse){

  .app-od-search{
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 10px;

    background: rgba(255,255,255,.65);
    border: 1px solid rgba(18,40,62,.12);
    border-radius: 18px;
    padding: 10px 12px;
  }

  .app-od-ico{
    opacity: .72;
    font-weight: 900;
  }

  .app-od-input{
    border: 0;
    background: transparent;
    outline: none;
    font-weight: 800;
    color: var(--ink);
    width: 100%;
  }

  .app-od-btn{
    padding: 10px 14px;
    border-radius: 14px;
    min-width: 64px;
  }

  .app-od-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .app-od-card{
    text-decoration: none;
    color: var(--ink);

    background: rgba(255,255,255,.65);
    border: 1px solid rgba(18,40,62,.10);
    border-radius: 18px;
    padding: 12px;
  }

  .app-od-cardhead{
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 12px;
    align-items: center;
  }

  .app-od-icon{
    width: 44px;
    height: 44px;
    border-radius: 14px;
    object-fit: contain;
    background: rgba(201,162,77,.12);
    border: 1px solid rgba(201,162,77,.22);
    padding: 6px;
  }

  .app-od-title{
    font-weight: 900;
    margin-bottom: 2px;
  }

  .app-od-sub{
    font-weight: 700;
    opacity: .75;
    font-size: 12px;
    line-height: 1.25;
  }
}