/* ============================================================
   index.css - homepage-specific styles (hero, stats, sections,
   news grid, announcements, about/dept/contact teasers, video).
   Shared chrome lives in site.css.
   ============================================================ */

    /* ─── HERO SLIDER ─── */
    .hero {
      position: relative;
      overflow: hidden;
      height: 480px;
      max-height: 960px;
      background: linear-gradient(135deg, #111 0%, #222 60%, #333 100%);
    }
    .slide {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      flex-direction: column; text-align: center;
      color: #fff;
      opacity: 0; transition: opacity .8s;
      padding: 2rem;
    }
    .slide.active { opacity: 1; }
    .slide h2 { font-size: 2rem; text-shadow: 0 2px 8px rgba(0,0,0,.5); margin-bottom: .6rem; }
    .slide p  { font-size: 1.05rem; max-width: 600px; opacity: .85; }
    .slide .btn { margin-top: 1.2rem; }
    .hero-dots {
      position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);
      display: flex; gap: .5rem;
    }
    .dot {
      width: 10px; height: 10px; border-radius: 50%;
      background: rgba(255,255,255,.35); cursor: pointer; transition: background .3s;
    }
    .dot.active { background: var(--accent); }
    .hero::before, .hero::after {
      content: '';
      position: absolute;
      border-radius: 50%;
      background: rgba(255,206,27,.04);
    }
    .hero::before { width: 500px; height: 500px; top: -200px; right: -150px; }
    .hero::after  { width: 350px; height: 350px; bottom: -180px; left: -100px; }

    /* ─── QUICK STATS ─── */
    .stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      background: var(--primary);
      border-top: 4px solid var(--accent);
    }
    .stat-item {
      color: #fff;
      text-align: center;
      padding: 1.4rem 1rem;
      border-right: 1px solid rgba(255,255,255,.1);
    }
    .stat-item:last-child { border-right: none; }
    .stat-item .num { font-size: 2rem; font-weight: 700; color: var(--accent); }
    .stat-item .lbl { font-size: .82rem; opacity: .8; }

    /* ─── SECTION WRAPPER ─── */
    .section { padding: 3rem 2rem; }
    .section-alt { background: var(--gray); }
    .section-title {
      text-align: center;
      font-size: 1.5rem;
      color: var(--primary);
      font-weight: 700;
      margin-bottom: .4rem;
    }
    .section-title::after {
      content: '';
      display: block;
      width: 60px; height: 4px;
      background: var(--accent);
      border-radius: 2px;
      margin: .5rem auto 1.8rem;
    }

    /* ─── NEWS GRID ─── */
    .news-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 1.4rem;
      max-width: 1100px;
      margin: 0 auto;
    }
    .news-card {
      background: #fff;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 2px 10px rgba(0,0,0,.07);
      transition: transform .2s, box-shadow .2s;
      border-bottom: 3px solid transparent;
    }
    .news-card:hover { transform: translateY(-4px); box-shadow: 0 6px 20px rgba(0,0,0,.12); border-bottom-color: var(--accent); }
    .news-card .thumb {
      height: 215px;
      background: linear-gradient(135deg, #222, #111);
      display: flex; align-items: center; justify-content: center;
      color: rgba(255,255,255,.25); font-size: 3rem;
    }
    .news-card .body { padding: 1rem; }
    .news-card .tag {
      font-size: .72rem; background: var(--accent); color: #111;
      border-radius: 4px; padding: .2rem .5rem; display: inline-block; margin-bottom: .4rem;
      font-weight: 600;
    }
    .news-card h3 { font-size: .97rem; line-height: 1.45; margin-bottom: .4rem; color: var(--primary); }
    .news-card .date { font-size: .78rem; color: var(--muted); }

    /* ─── ANNOUNCEMENTS ─── */
    .announce-list { max-width: 800px; margin: 0 auto; }
    .announce-item {
      display: flex;
      gap: 1rem;
      align-items: flex-start;
      padding: .9rem 1rem;
      border-bottom: 1px solid #e0e0d8;
      text-decoration: none;
      color: inherit;
      transition: background .15s;
      border-radius: 6px;
    }
    .announce-item:hover { background: var(--light); }
    .announce-item .date-box {
      min-width: 54px; text-align: center;
      background: var(--primary); color: var(--accent);
      border-radius: 8px; padding: .4rem .3rem;
      font-size: .75rem; line-height: 1.3;
    }
    .announce-item .date-box .day { font-size: 1.3rem; font-weight: 700; line-height: 1; }
    .announce-item .title { font-size: .92rem; line-height: 1.5; }
    .announce-item .sub   { font-size: .78rem; color: var(--muted); }

    /* ─── ABOUT ─── */
    .about-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
      max-width: 1050px;
      margin: 0 auto;
      align-items: center;
    }
    .about-img {
      border-radius: 12px;
      height: 300px;
      background: linear-gradient(135deg, var(--light), #fff3a0);
      display: flex; align-items: center; justify-content: center;
      font-size: 4rem; color: #888;
      border: 2px solid var(--accent);
    }
    .about-text h2 { font-size: 1.3rem; color: var(--primary); margin-bottom: .8rem; }
    .about-text p  { font-size: .93rem; line-height: 1.8; color: #444; margin-bottom: .9rem; }
    .about-text ul { padding-left: 1.2rem; }
    .about-text ul li { font-size: .92rem; line-height: 1.9; color: #444; }
    .about-link { margin-top: .8rem; }

    /* ─── DEPARTMENTS ─── */
    .dept-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
      gap: 1rem;
      max-width: 1050px;
      margin: 0 auto;
    }
    .dept-card {
      background: #fff;
      border-radius: 10px;
      text-align: center;
      padding: 1.4rem 1rem;
      box-shadow: 0 2px 8px rgba(0,0,0,.07);
      cursor: pointer;
      transition: transform .2s, box-shadow .2s, background .2s;
      text-decoration: none;
      color: var(--text);
      border-bottom: 3px solid transparent;
    }
    .dept-card:hover { transform: translateY(-4px); box-shadow: 0 6px 18px rgba(0,0,0,.12); background: var(--light); border-bottom-color: var(--accent); }
    .dept-card .icon { font-size: 2.2rem; margin-bottom: .7rem; }
    .dept-card span { font-size: .88rem; color: var(--primary); font-weight: 600; display: block; }
    .dept-card small { font-size: .75rem; color: var(--muted); }

    /* ─── CONTACT ─── */
    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2.5rem;
      max-width: 1000px;
      margin: 0 auto;
    }
    .contact-info h3 { font-size: 1.1rem; color: var(--primary); margin-bottom: 1rem; }
    .contact-info p  { font-size: .9rem; line-height: 2; color: #444; }
    .contact-info a  { color: #555; }
    .map-embed {
      border-radius: 12px;
      height: 280px;
      border: 2px solid var(--accent);
      overflow: hidden;
    }
    .map-embed iframe { border: 0; width: 100%; height: 100%; display: block; }

    /* ─── FOOTER ─── */

    /* ─── VIDEO PLAYER SECTION ─── */
    .video-section { background:#0d0d0d; padding:2.5rem 2rem; display:none; }
    .video-section.has-videos { display:block; }
    .video-wrap { max-width:900px; margin:0 auto; }
    .video-top-bar { display:flex; align-items:center; justify-content:space-between; margin-bottom:.9rem; }
    .video-top-bar h2 { font-size:1.15rem; color:var(--accent); font-weight:700; display:flex; align-items:center; gap:.5rem; }
    .vid-counter { font-size:.78rem; color:#555; }
    .vid-container { position:relative; border-radius:10px; overflow:hidden; background:#000; box-shadow:0 8px 32px rgba(0,0,0,.5); }
    .vid-container video { width:100%; display:block; max-height:506px; }
    .vid-overlay { position:absolute; bottom:0; left:0; right:0; padding:.6rem 1rem; background:linear-gradient(transparent,rgba(0,0,0,.75)); display:flex; align-items:center; justify-content:space-between; gap:.8rem; }
    .vid-curr-title { color:#fff; font-size:.85rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
    .vid-mute-btn { background:rgba(255,206,27,.9); border:none; border-radius:20px; padding:.3rem .85rem; font-size:.78rem; font-weight:700; cursor:pointer; color:#111; font-family:inherit; flex-shrink:0; transition:.2s; }
    .vid-mute-btn:hover { background:var(--accent); }
    .vid-playlist { margin-top:.75rem; display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.3rem; scrollbar-width:thin; scrollbar-color:#333 transparent; }
    .vid-pl-item { flex-shrink:0; background:rgba(255,255,255,.07); border:1.5px solid transparent; border-radius:8px; padding:.4rem .85rem; font-size:.78rem; color:#bbb; cursor:pointer; transition:.2s; white-space:nowrap; }
    .vid-pl-item:hover { background:rgba(255,206,27,.15); color:#fff; }
    .vid-pl-item.active { border-color:var(--accent); color:var(--accent); background:rgba(255,206,27,.1); }

    @media (max-width: 768px) {
      nav { padding: .4rem .5rem; }
      .nav-pill { height: 44px; }
      .nav-btn { padding: .38rem .7rem; font-size: .8rem; }
      .stats { grid-template-columns: 1fr 1fr; }
      .about-inner, .contact-grid, .footer-grid { grid-template-columns: 1fr; }
      .hero { height: 320px; }
      .slide h2 { font-size: 1.4rem; }
    }