/* ============================================================
   RTC ABETIFI — RESPONSIVE STYLESHEET
   responsive.css
   ============================================================ */

/* ── TABLET (≤ 960px) ──────────────────────────────────────── */
@media (max-width: 960px) {

  /* Navigation */
  .site-nav   { display: none; }
  .hamburger  { display: flex; }

  /* Stats band */
  .stats-inner { grid-template-columns: 1fr 1fr; }
  .stat-item:nth-child(2) { border-right: none; }
  .stat-item:nth-child(3) { border-right: 1px solid rgba(255,255,255,.15); }

  /* Intro */
  .intro-grid { grid-template-columns: 1fr; }
  .founded-badge { right: 0; }

  /* Director's Message */
  .dm-card { grid-template-columns: 1fr; max-width: 600px; }
  .dm-photo-col { flex-direction: row; align-items: center; gap: 20px; padding: 28px 24px; }
  .dm-photo-frame { width: 120px; height: 144px; flex-shrink: 0; }
  .dm-name-plate { margin-top: 0; text-align: left; }
  .dm-text-col { padding: 32px 28px; }

  /* News */
  .main-grid { grid-template-columns: 1fr; }

  /* Blog */
  .blog-grid { grid-template-columns: 1fr 1fr; }

  /* Programmes */
  .prog-grid { grid-template-columns: 1fr 1fr; }
  .prog-list { grid-template-columns: 1fr; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; }

  /* Inner pages */
  .admin-grid        { grid-template-columns: 1fr; }
  .about-2col        { grid-template-columns: 1fr; }
  .about-intro-grid  { grid-template-columns: 1fr; }
  .about-mv-grid     { grid-template-columns: 1fr 1fr; }
  .atl-item          { grid-template-columns: 100px 1fr; gap: 18px; }
  .atl-people        { grid-template-columns: 1fr; }
  .mv-grid           { grid-template-columns: 1fr; }
  .contact-2col { grid-template-columns: 1fr; }
  .ct-cards      { grid-template-columns: 1fr 1fr; }
  .ct-main-grid  { grid-template-columns: 1fr; }
  .ct-bottom-grid { grid-template-columns: 1fr 1fr; }
  .content-cards { grid-template-columns: 1fr 1fr; }
  .gallery-grid  { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; }
  .gallery-hdr   { flex-direction: column; align-items: flex-start; }
  .fg-row { grid-template-columns: 1fr; }

  /* Board & staff */
  .board-grid      { grid-template-columns: repeat(3, 1fr); }
  .staff-dir       { grid-template-columns: 1fr; }
  .staff-card-grid { grid-template-columns: repeat(3, 1fr); }

  /* Newsletter */
  .nl-inner { gap: 24px; }
}

/* ── SMALL TABLET (≤ 720px) ────────────────────────────────── */
@media (max-width: 720px) {
  .blog-grid { grid-template-columns: 1fr; }
  .content-cards { grid-template-columns: 1fr; }
  .prog-grid { grid-template-columns: 1fr 1fr; }

  .page-banner h1 { font-size: 1.6rem; }

  /* Lightbox arrows smaller & closer on mobile */
  .lb-arrow { width: 36px; height: 36px; font-size: 1.4rem; }
  .lb-prev  { left: 6px; }
  .lb-next  { right: 6px; }

  .footer-grid { grid-template-columns: 1fr 1fr; }

  .topbar-left span:nth-child(3) { display: none; }
}

/* ── MOBILE (≤ 600px) ──────────────────────────────────────── */
@media (max-width: 720px) {
  .bc-img-strip { flex-wrap: wrap; height: auto; }
  .bc-img-strip img { flex: 1 1 calc(50% - 1px); height: 120px; }
  .article-inline-img--right { float: none; width: 100%; margin: 0 0 20px; }
  .article-gallery-grid { grid-template-columns: 1fr; }
  .article-title { font-size: 1.35rem; }
  .news-magazine { grid-template-columns: 1fr; gap: 0; }
  .news-featured-img { height: 200px; }
}

@media (max-width: 600px) {

  /* Prevent any horizontal scroll */
  html, body { overflow-x: hidden; }

  /* Top bar */
  .topbar-left { gap: 10px; font-size: .7rem; }
  .topbar-left span:nth-child(2),
  .topbar-left span:nth-child(3) { display: none; }

  /* Header */
  .logo-text .sub   { display: none; }
  .logo-text .motto { display: none; }
  .logo-text .name  { font-size: .95rem; }

  /* ── Hero: full-bleed, no boxing ──────────────────────────── */
  .hero {
    height: clamp(300px, 58vw, 420px);
    width: 100%;
    overflow: hidden;
  }
  .slides-track { width: 100%; }
  .slide {
    min-width: 100%;
    width: 100%;
    overflow: hidden;
  }

  /* Welcome / photo slide — fill the hero fully */
  .slide--image-only { display: flex; align-items: stretch; }
  .slide-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    flex-shrink: 0;
  }

  /* Text slides — no cut-off content */
  .slide-content {
    padding: 0 20px;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }
  .slide-overlay {
    background: linear-gradient(160deg, rgba(10,30,70,.78) 0%, rgba(10,30,70,.45) 100%);
  }
  .hero-dots   { left: 20px; bottom: 14px; }
  .hero-arrows { bottom: 10px; right: 14px; }
  .slide-title { font-size: 1.4rem; line-height: 1.25; }
  .slide-text  { font-size: .85rem; margin-bottom: 18px; }
  .slide-actions .btn { font-size: .78rem; padding: 8px 14px; }

  /* Social slide — mobile */
  .social-content { padding: 28px 16px; }
  .social-slide-title { font-size: clamp(1.5rem, 8vw, 2.2rem); }
  .social-slide-logo  { width: 36px; height: 36px; }
  .social-slide-name  { font-size: .82rem; }
  .social-icon-link   { width: 48px; height: 48px; }
  .social-slide-url   { font-size: 1rem; }
  .social-slide-learn { font-size: .72rem; }

  /* Stats band */
  .stats-inner { grid-template-columns: 1fr 1fr; }
  .stat-item   { padding: 14px 14px; }
  .stat-val    { font-size: 1.15rem; }

  /* Intro */
  .founded-badge { width: 80px; height: 80px; }
  .founded-badge .yr { font-size: 1.2rem; }
  .intro-chips { gap: 8px; }
  .chip { font-size: .74rem; padding: 5px 10px; }

  /* Director's Message */
  .dm-card { grid-template-columns: 1fr; }
  .dm-photo-col { flex-direction: column; align-items: center; padding: 32px 20px 28px; }
  .dm-photo-frame { width: 150px; height: 180px; }
  .dm-name-plate { margin-top: 16px; text-align: center; }
  .dm-text-col { padding: 28px 20px 32px; }
  .dm-open-quote { font-size: 5rem; top: 16px; left: 14px; }
  .dm-motto-bar { width: 100%; text-align: center; }

  /* News */
  .news-card { grid-template-columns: 80px 1fr; }
  .news-thumb { width: 80px; height: 56px; }

  /* Blog */
  .blog-hdr { flex-direction: column; align-items: flex-start; gap: 12px; }

  /* Gallery */
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; }
  .gallery-item--wide { grid-column: span 2; }
  .gallery-item--tall { grid-row: span 1; }

  /* About timeline */
  .about-timeline::before { left: 50px; }
  .atl-item   { grid-template-columns: 80px 1fr; gap: 14px; }
  .about-mv-grid { grid-template-columns: 1fr; }
  .about-stats   { gap: 18px; }

  /* Programmes strip */
  .prog-grid { grid-template-columns: 1fr; }
  .prog-hdr  { flex-direction: column; align-items: flex-start; gap: 12px; }

  /* Contact */
  .ct-cards       { grid-template-columns: 1fr; }
  .ct-bottom-grid { grid-template-columns: 1fr; }
  .fg-row         { grid-template-columns: 1fr; }

  /* Newsletter */
  .nl-inner { flex-direction: column; }
  .nl-form  { flex-direction: column; width: 100%; }
  .nl-form input, .nl-form button { width: 100%; justify-content: center; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 8px; }

  /* Inner pages */
  .gallery-grid { grid-template-columns: 1fr; }
  .page-body    { padding: 36px 0; }

  /* Buttons */
  .btn { font-size: .8rem; padding: 9px 16px; }

  /* Content cards */
  .content-cards { grid-template-columns: 1fr; }

  /* Board & staff */
  .board-grid      { grid-template-columns: 1fr 1fr; }
  .staff-card-grid { grid-template-columns: 1fr 1fr; }
  .staff-row  { flex-wrap: wrap; gap: 2px; }
  .staff-phone { flex-basis: 100%; padding-left: 0; }
}

/* ── VERY SMALL (≤ 380px) ──────────────────────────────────── */
@media (max-width: 380px) {
  .container { padding: 0 14px; }
  .slide-title { font-size: 1.3rem; }
  .sec-title   { font-size: 1.3rem; }
  .logo-icon   { width: 44px; height: 44px; }
}

/* ── PRINT ─────────────────────────────────────────────────── */
@media print {
  .topbar, .site-header, .hero-arrows, .hero-dots,
  .newsletter, .site-footer, .hamburger, .m-nav { display: none !important; }
  .page { display: block !important; }
  body { font-size: 12pt; color: #000; }
  a { color: #000; }
}