/* =========================
   iFaith v9 — Full Drop-In
   ========================= */

:root{
  --bg:#0b0f14;
  --surface:#101720;
  --muted:#9fb0c9;
  --text:#e7eef8;
  --brand:#fdbe2c;
  --accent:#23a6f2;
  --border:#1b2633;

  /* EPG sizing */
 --epg-hour: 400px;          /* was 360 */
  --epg-half: calc(var(--epg-hour)/2);
  --epg-track-h: 96px;
  --epg-pad: 12px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto;
  color:var(--text);
  background:linear-gradient(180deg,#0b0f14 0%, #0b0f14 60%, #0d1218 100%);
}
.container{width:min(1100px,92vw);margin:0 auto}

/* ===== Header / Nav ===== */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(11,15,20,.85);
  backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--border)
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--text);font-weight:800}
.brand img{width:40px;height:40px;object-fit:contain}
.nav a{color:var(--text);opacity:.85;margin-left:18px;text-decoration:none;font-weight:700}
.nav a.active,.nav a:hover{opacity:1;color:var(--brand)}

/* Mobile hamburger */
.nav-toggle{
  display:none;
  background:transparent;
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px;
  width:44px;height:44px;
  align-items:center;justify-content:center;
  cursor:pointer;
}
.nav-toggle .bar{
  display:block;width:20px;height:2px;background:var(--text);margin:3px 0;border-radius:2px;
}
@media (max-width: 920px){
  .nav-toggle{display:flex}
  .nav{
    position:absolute;right:4vw;top:64px;background:var(--surface);
    border:1px solid var(--border);border-radius:12px;padding:10px;
    display:none;flex-direction:column;gap:8px;min-width:220px;
    box-shadow:0 12px 30px rgba(0,0,0,.35)
  }
  .nav a{margin:0;padding:8px 10px;border-radius:8px}
  .nav a:hover,.nav a.active{background:#0c131c;color:var(--brand)}
  .nav-open .nav{display:flex}
}

/* ===== Hero / Buttons ===== */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;padding:54px 0}
.hero h1{font-size:44px;margin:0 0 10px}
.hero p{color:var(--muted);font-size:18px;margin:0 0 18px}
.cta-row{display:flex;gap:12px;margin:12px 0 18px}
.btn{display:inline-block;border:1px solid var(--border);background:var(--surface);padding:12px 16px;border-radius:10px;color:var(--text);text-decoration:none;font-weight:800}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--brand);color:#111;border-color:#111}
.btn-ghost{background:transparent}
.app-badges{display:flex;gap:12px;margin-top:8px;flex-wrap:wrap}
.app-badges .badge{display:inline-block}
.app-badges img{display:block}

/* Promo / Player card */
.promo-card{background:radial-gradient(120% 120% at 70% 30%, #112032, #0e141c);border:1px solid var(--border);border-radius:16px;padding:14px;position:relative}
.promo-card video{width:100%;height:240px;background:#000;border-radius:10px;border:1px solid var(--border)}
.promo-meta{display:flex;justify-content:space-between;margin-top:10px;color:var(--muted)}

/* Grid / Cards */
.grid{display:grid;gap:16px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px}
.features .card h3{margin-top:0}

/* Sections */
.about{padding:40px 0}
.about h2{margin-top:0}

/* Footer */
.site-footer{margin-top:60px;border-top:1px solid var(--border);background:rgba(11,15,20,.5)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;padding:20px 0;gap:20px}
.footer-brand{display:flex;gap:12px;align-items:center}
.footer-brand img{width:36px;height:36px}
.footer-links{display:flex;gap:14px;flex-wrap:wrap}
.footer-links a{color:var(--muted);text-decoration:none}
.legal{border-top:1px solid var(--border);padding:12px 0;text-align:center;color:var(--muted);font-size:14px}

/* Watch page */
.subhead{color:var(--muted)}
.watch .player-wrap{margin:16px 0;background:#000;border-radius:12px;overflow:hidden;border:1px solid var(--border);position:relative}
.watch video{width:100%;height:60vh;max-height:680px;background:#000;display:block}
.current-title{color:var(--muted);font-weight:800;margin-top:8px}
.help{margin-top:16px;color:var(--muted)}

/* Forms */
.narrow{max-width:760px}
.form .form-row{display:flex;flex-direction:column;margin-bottom:14px}
.form label{font-weight:800;margin-bottom:6px}
.form input,.form textarea,.form select{padding:12px 12px;border-radius:10px;border:1px solid var(--border);background:#0c131c;color:var(--text);outline:none}
.form input:focus,.form textarea:focus,.form select:focus{border-color:#2b81ff;box-shadow:0 0 0 3px rgba(35,166,242,.15)}
.form-actions{display:flex;gap:12px;align-items:center}
.form-note{color:var(--muted);font-size:14px;margin:0}
.guidelines{margin:0 0 6px 18px}
.contact-list{margin:0 0 6px 18px}

/* Responsive base */
@media (max-width: 920px){
  .hero{grid-template-columns:1fr}
  .watch video{height:44vh}
  .grid-3{grid-template-columns:1fr}
}

/* ===== Autoplay overlay (fallback button) ===== */
.autoplay-overlay{
  position:absolute;inset:0;margin:auto;width:120px;height:120px;border-radius:60px;
  border:1px solid var(--border);background:rgba(0,0,0,.6);color:#fff;font-size:22px;
  cursor:pointer;z-index:5;display:flex;align-items:center;justify-content:center
}

/* ====================
   EPG v9 — Updated
   ==================== */

/* Now/Next cards */
.now-next{display:flex;gap:14px;margin:12px 0 22px}
.nn-block{flex:1;border:1px solid var(--border);border-radius:12px;padding:12px;background:linear-gradient(135deg,#111824,#0d141d)}
.nn-label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.nn-title{font-weight:900;margin-top:4px}
.nn-time{color:var(--muted);margin-top:2px}
.nn-inline{display:inline-block;margin-right:16px;color:var(--muted)}

/* Tabs (7-day, Sun–Sat) */
:root{
  --epg-hour: 400px; /* 1 hour width */
  --epg-track-h: 96px;
  --epg-pad: 12px;
}

/* --- Day Tabs --- */
.epg-tabs {
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
  padding-bottom:6px; scrollbar-width:thin;
}
.epg-tab {
  background:var(--surface); border:1px solid var(--border);
  border-radius:10px; padding:8px 12px; color:var(--text);
  cursor:pointer; font-weight:800; white-space:nowrap;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.epg-tab:hover,.epg-tab.active {
  background:#0c131c; color:var(--brand); border-color:#142030;
}

/* --- Schedule Wrapper --- */
.epg-grid-wrap {
  position:relative; background:rgba(16,23,32,.9);
  border:1px solid var(--border); border-radius:16px;
  padding:var(--epg-pad);
}
.epg-scroller {
  overflow-x:auto; overflow-y:hidden; scroll-behavior:smooth;
  border:1px solid var(--border); border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0)40%),rgba(16,23,32,.9);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
  max-width:calc((var(--epg-hour)*2)+60px); /* ~2 hours visible */
}

/* --- Hours Header --- */
.epg-hours {
  position:relative; height:28px; margin-left:60px; margin-bottom:8px;
}
.epg-hours .hour {
  position:absolute; top:0; transform:translateX(-50%);
  font-size:12px; color:rgba(231,238,248,.9); font-weight:700;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
  user-select:none;
}

/* --- Program Track --- */
.epg-track {
  position:relative; height:calc(var(--epg-track-h) + 16px); margin-left:60px;
}
.epg-track .tick {position:absolute; top:0; bottom:0; width:1px; z-index:0}
.epg-track .tick.hour {background:rgba(255,255,255,.22)}
.epg-track .tick.half {background:rgba(255,255,255,.12)}

/* --- Program Blocks --- */
.program {
  position:absolute; top:8px; height:var(--epg-track-h);
  background:linear-gradient(135deg,#1a2330,#0f1621);
  border:1px solid rgba(255,255,255,.12); border-radius:12px;
  padding:8px 10px; overflow:hidden; z-index:1;
  box-shadow:0 3px 10px rgba(0,0,0,.28);
  transition:transform .15s ease, box-shadow .15s ease;
}
.program .p-title {
  font-weight:900; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; line-height:1.2; color:#f4f7fb;
}
.program .p-time {
  margin-top:2px; font-size:12px; color:rgba(231,238,248,.75);
  white-space:nowrap;
}

.hour.half-label {
  font-size: 12px;
  color: rgba(231, 238, 248, 0.6);
  top: 18px;
}

.program .p-desc{
  margin-top:2px;
  font-size:12px;
  color:rgba(231,238,248,.65);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

@media (hover:hover){
  .program:hover {
    transform:translateY(-1px);
    box-shadow:0 6px 16px rgba(0,0,0,.34);
  }
}

/* --- Left Gutter Guide --- */
.epg-scroller::before {
  content:""; position:sticky; left:0; top:0; height:100%;
  width:60px; display:inline-block; border-right:1px solid var(--border);
  background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,0));
  pointer-events:none; z-index:2;
}

/* --- NOW Marker Line --- */
.now-line {
  position:absolute; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg,#ffd75a,#ffab00);
  box-shadow:0 0 0 2px rgba(255,203,64,.15);
  z-index:2; pointer-events:none; opacity:.95;
  animation:nowPulse 2.4s ease-in-out infinite;
}
.now-line::after {
  content:"NOW";
  position:absolute; top:6px; left:6px;
  font-size:10px; font-weight:800; letter-spacing:.08em;
  color:#111; background:#ffd75a; padding:2px 6px; border-radius:6px;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
@keyframes nowPulse {0%{opacity:.8} 50%{opacity:1} 100%{opacity:.8}}

@media (max-width:920px){
  :root{--epg-hour:320px}
  .program{padding:7px 8px;height:84px}
  .program .p-title{font-size:14px}
  .program .p-time{font-size:11px}
}
@media (max-width:560px){
  :root{--epg-hour:260px}
  .epg-hours{height:26px}
  .epg-hours .hour{font-size:11px}
  .now-line::after{display:none}
}

/* --- Classic list fallback --- */
.epg-header{display:flex;align-items:baseline;gap:12px;margin:8px 0 14px}
.epg-date{color:var(--muted)}
.epg-list{display:flex;flex-direction:column;gap:10px}
.epg-row{display:flex;gap:14px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.epg-time{min-width:180px;display:flex;gap:6px;color:var(--muted);font-weight:800}
.epg-body .epg-title{font-weight:900;margin-bottom:2px}
.epg-body .epg-desc{color:var(--muted)}


/* Schedule page list look (uses your existing epg-row styles) */
#schedList .epg-row{ align-items:center }
#schedList .epg-time{ min-width:200px }
#schedList .epg-title{ font-weight:900 }
#schedList .epg-desc{ color:var(--muted) }

/* Mobile tab grid (4/3, centered) */
@media (max-width: 820px){
  .epg-tabs{
    display:grid;
    grid-template-columns: repeat(4, minmax(110px, 1fr));
    justify-items:center; gap:10px; padding-inline:8px;
    max-width:680px; margin-inline:auto;
  }
  .epg-tab{ width:100%; text-align:center }
}
@media (max-width: 520px){
  .epg-tabs{ grid-template-columns: repeat(3, minmax(98px, 1fr)); max-width:420px }
}

/* Mobile: show more lead time left of NOW */
@media (max-width: 820px){
  .epg-scroller{ max-width: calc((var(--epg-hour) * 2) + 60px) }
}

/* --- MOBILE EPG ALIGNMENT PATCH --- */
:root{ --epg-gutter:60px; }

@media (max-width: 820px){
  /* The scroller must have ZERO horizontal padding so hours & track align */
  .epg-scroller{ padding:0 !important; }

  /* Hours + Track use the same left offset (gutter) */
  .epg-hours,
  .epg-track{
    margin-left: var(--epg-gutter) !important;
  }

  /* Slightly taller header so half-hour label doesn't collide */
  .epg-hours{ height:34px; }

  /* Label clarity on phones */
  .epg-hours .hour{ font-size:12px; }
  .hour.half-label{ top:18px; font-size:11px; }

  /* Improve visual alignment on subpixel widths */
  .epg-hours .hour,
  .epg-track .tick{ transform: translateZ(0); }
}

/* Make sure the scroller itself doesn’t sneak in inner spacing */
.epg-grid-wrap{ padding:12px; }
.epg-scroller{ border-radius:12px; border:1px solid var(--border); background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0)40%),rgba(16,23,32,.9); box-shadow:inset 0 0 0 1px rgba(255,255,255,.03); }

/* (Unchanged, just reiterating) both rows live inside the SAME .epg-scroller */