/* ============================================================
   CFC — SERMONS.HTML PAGE STYLES
   ============================================================ */

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
    html { scroll-behavior:smooth; }
    
    body {
      font-family: 'Lato', sans-serif;
      color: #f0e8d0;
      overflow-x: hidden;
      background-color: #0D1B3E;
      background-position: center top;
      position: relative;
    }
    /* Overlay to control fade intensity */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-color: rgba(8, 15, 36, 0.93);
      pointer-events: none;
      z-index: 0;
    }
    /* Ensure all direct children sit above the overlay */
    body > * { position: relative; z-index: 1; }

    :root {
      --navy:  #0D1B3E;
      --royal: #4B0082;
      --gold:  #C9A84C;
      --gold-l:#E2C06A;
      --white: #f0e8d0;
    }

    /* ── Sticky Nav ── */
    #navbar { position:fixed; top:0; left:0; right:0; z-index:1000; background:rgba(8,15,36,.97); box-shadow:0 2px 20px rgba(201,168,76,.2); transition:background .4s, box-shadow .4s; }
    #navbar.scrolled { background:rgba(5,10,26,1); box-shadow:0 2px 24px rgba(201,168,76,.25); }

    .gold-text   { color:var(--gold); }
    .gold-border { border:1px solid var(--gold); }

    .gold-divider {
      width:80px; height:3px;
      background:linear-gradient(90deg,transparent,var(--gold),transparent);
      margin:1rem auto;
    }

    .nav-link {
      font-family:'Cinzel',serif; font-size:.8rem; letter-spacing:.08em;
      color:#f0e8d0; transition:color .2s; padding:.25rem 0; position:relative;
    }
    .nav-link::after {
      content:''; position:absolute; bottom:-2px; left:0; right:0;
      height:2px; background:var(--gold); transform:scaleX(0); transition:transform .25s;
    }
    .nav-link:hover { color:var(--gold); }
    .nav-link:hover::after { transform:scaleX(1); }
    .nav-link.active { color:var(--gold); }
    .nav-link.active::after { transform:scaleX(1); }

    .btn-gold {
      display:inline-block; padding:.75rem 2rem;
      background:linear-gradient(135deg,var(--gold-l),var(--gold));
      color:#0D1B3E; font-family:'Cinzel',serif; font-weight:700;
      letter-spacing:.05em; border-radius:4px;
      transition:transform .2s, box-shadow .2s;
    }
    .btn-gold:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(201,168,76,.4); }

    .btn-gold-sm {
      display:inline-flex; align-items:center; gap:6px;
      padding:.5rem 1.1rem;
      background:linear-gradient(135deg,var(--gold-l),var(--gold));
      color:#0D1B3E; font-family:'Cinzel',serif; font-weight:700;
      font-size:.72rem; letter-spacing:.06em; border-radius:4px;
      transition:transform .2s, box-shadow .2s;
    }
    .btn-gold-sm:hover { transform:translateY(-2px); box-shadow:0 4px 14px rgba(201,168,76,.4); }

    .btn-outline {
      display:inline-block; padding:.75rem 2rem;
      border:2px solid var(--gold); color:var(--gold);
      font-family:'Cinzel',serif; font-weight:700; letter-spacing:.05em;
      border-radius:4px; transition:background .2s, color .2s, transform .2s;
    }
    .btn-outline:hover { background:var(--gold); color:#0D1B3E; transform:translateY(-2px); }

    #mobile-menu { display:none; }
    #mobile-menu.open { display:block; }

    /* ── Page Hero ── */
    /* ── Page hero with faded photo background ── */
    .page-hero {
      padding-top:130px; padding-bottom:80px;
      position:relative; overflow:hidden;
      background-color: #080f24;
    }
    /* Real photo layer — faded */
    .page-hero::before {
      content:'';
      position:absolute; inset:0;
      background-image: url('../../../images/sermons/hero/hero-bg.jpeg');
      background-position: center center;
      opacity: 0.60;
      filter: grayscale(0%);
    }
    /* Gradient overlay on top of photo */
    .page-hero::after {
      content:'';
      position:absolute; inset:0;
      background: linear-gradient(
        to bottom,
        rgba(8,15,36,.55) 0%,
        rgba(75,0,130,.32) 50%,
        rgba(8,15,36,.65) 100%
      );
    }
    /* All children must sit above the overlays */
    .page-hero > * { position:relative; z-index:2; }

    /* ── Featured sermon embed wrapper ── */
    .video-wrapper {
      position:relative; padding-bottom:56.25%; height:0; overflow:hidden;
      border-radius:12px;
      box-shadow:0 0 0 3px rgba(201,168,76,.4), 0 20px 60px rgba(0,0,0,.6);
    }
    .video-wrapper iframe,
    .video-wrapper .video-placeholder {
      position:absolute; top:0; left:0; width:100%; height:100%;
    }
    .video-placeholder {
      background:linear-gradient(145deg,#1a003a,#0d1b3e,#2a0050);
      display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
      border-radius:12px;
      cursor:pointer;
    }
    .play-btn {
      width:80px; height:80px; border-radius:50%;
      background:linear-gradient(135deg,var(--gold-l),var(--gold));
      display:flex; align-items:center; justify-content:center;
      transition:transform .25s, box-shadow .25s;
    }
    .play-btn:hover { transform:scale(1.1); box-shadow:0 0 30px rgba(201,168,76,.5); }

    /* ── Filter Buttons ── */
    .filter-btn {
      padding:.45rem 1.2rem; border-radius:999px;
      font-family:'Cinzel',serif; font-size:.72rem; letter-spacing:.08em;
      border:1px solid rgba(201,168,76,.35); color:#bbb;
      background:transparent; cursor:pointer;
      transition:background .2s, color .2s, border-color .2s, transform .15s;
    }
    .filter-btn:hover { border-color:var(--gold); color:var(--gold); transform:translateY(-1px); }
    .filter-btn.active {
      background:linear-gradient(135deg,var(--gold-l),var(--gold));
      color:#0D1B3E; border-color:var(--gold); font-weight:700;
    }

    /* ── Sermon Card ── */
    .sermon-card {
      background:linear-gradient(145deg,rgba(75,0,130,.18),rgba(13,27,62,.9));
      border:1px solid rgba(201,168,76,.2); border-radius:12px; overflow:hidden;
      transition:transform .3s, box-shadow .3s, border-color .3s;
      display:flex; flex-direction:column;
    }
    .sermon-card:hover {
      transform:translateY(-6px);
      box-shadow:0 16px 40px rgba(0,0,0,.4), 0 0 20px rgba(201,168,76,.1);
      border-color:rgba(201,168,76,.5);
    }

    /* ── Thumbnail ── */
    .sermon-thumb {
      width:100%; height:180px; object-fit:cover; display:block;
    }
    .sermon-thumb-placeholder {
      width:100%; height:180px;
      display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px;
      position:relative; overflow:hidden;
    }
    .thumb-overlay {
      position:absolute; inset:0;
      background:rgba(0,0,0,.35);
      display:flex; align-items:center; justify-content:center;
      opacity:0; transition:opacity .25s;
    }
    .sermon-card:hover .thumb-overlay { opacity:1; }

    /* ── Series badge ── */
    .series-badge {
      display:inline-block; padding:.2rem .7rem;
      background:rgba(201,168,76,.15); color:var(--gold);
      border:1px solid rgba(201,168,76,.3); border-radius:999px;
      font-size:.65rem; font-family:'Cinzel',serif; letter-spacing:.08em;
    }

    /* ── Reveal ── */
    .reveal { opacity:0; transform:translateY(30px); transition:opacity .65s ease, transform .65s ease; }
    .reveal.visible { opacity:1; transform:translateY(0); }

    /* ── Pattern bg ── */
    .pattern-bg {
      background-image:radial-gradient(circle at 1px 1px,rgba(201,168,76,.06) 1px,transparent 0);
      background-size:32px 32px;
    }

    /* ── Scripture ticker ── */
    @keyframes tickerScroll { from{transform:translateX(100%)} to{transform:translateX(-100%)} }
    .ticker-inner { animation:tickerScroll 30s linear infinite; white-space:nowrap; }
    .ticker-inner:hover { animation-play-state:paused; }

    /* ── Hidden card (for filter) ── */
    .sermon-card.hidden-card { display:none; }

.time-pill {
    display:inline-flex; align-items:center; gap:6px;
    background:rgba(201,168,76,.1); border:1px solid rgba(201,168,76,.3);
    color:var(--gold); border-radius:999px;
    padding:.35rem .9rem; font-size:.78rem;
    cursor:pointer; text-decoration:none;
    transition:background .2s, color .2s;
  }

  
    /* ── Sermon card thumbnails ── */
    .sermon-card { position: relative; overflow: hidden; }
    .sermon-thumb {
      width: 100%;
      height: 180px;
      object-fit: cover;
      display: block;
      transition: transform .5s ease;
      border-radius: 8px 8px 0 0;
    }
    .sermon-card:hover .sermon-thumb { transform: scale(1.05); }
    .sermon-thumb-wrap {
      overflow: hidden;
      border-radius: 8px 8px 0 0;
      position: relative;
    }
    .sermon-thumb-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, transparent 40%, rgba(8,15,36,.85) 100%);
      pointer-events: none;
    }
    .sermon-thumb-play {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%,-50%);
      width: 44px; height: 44px;
      border-radius: 50%;
      background: rgba(201,168,76,.85);
      display: flex; align-items: center; justify-content: center;
      opacity: 0; transition: opacity .3s;
      pointer-events: none;
    }
    .sermon-card:hover .sermon-thumb-play { opacity: 1; }
  
    /* ══ SERMONS MOBILE ══ */
    @media (max-width: 640px) {
      .sermon-thumb { height: 150px !important; }
      #sermon-grid { grid-template-columns: 1fr !important; }
      .filter-btn { font-size: .65rem !important; padding: .35rem .7rem !important; }
    }
    @media (max-width: 375px) {
      .sermon-thumb { height: 130px !important; }
    }