/* ==========================================================================
   A.P.S PUBLIC INTER COLLEGE — Responsive Stylesheet
   Mobile-first: style.css holds the mobile base, this file scales it up.

   Breakpoints
   ---------------------------------------------------
   Small mobile   : < 576px   (base in style.css)
   Mobile / phone : >= 576px  (sm)
   Tablet         : >= 768px  (md)
   Laptop         : >= 992px  (lg)
   Desktop        : >= 1200px (xl)
   Large desktop  : >= 1400px (xxl)
   ========================================================================== */

/* ==========================================================================
   >= 576px — LARGE MOBILE
   ========================================================================== */
@media (min-width: 576px) {

  .section { padding: 56px 0; }

  .gal-strip { grid-template-columns: repeat(3, 1fr); }

  .hero-btns .btn { padding: 12px 30px; }

  .cta-inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* ==========================================================================
   >= 768px — TABLET
   ========================================================================== */
@media (min-width: 768px) {

  body { font-size: 15px; }

  .section { padding: 64px 0; }

  .sec-title { font-size: 1.5rem; margin-bottom: 18px; }
  .sec-text  { font-size: .92rem; }

  /* Top bar spreads out */
  .topbar { font-size: .74rem; }
  .topbar-inner { justify-content: space-between; gap: 10px 30px; }

  /* Hero */
  .hero { min-height: 82vh; }
  .hero-content { padding: 56px 0; }

  /* Gallery strip — 4 across on tablet */
  .gal-strip { grid-template-columns: repeat(4, 1fr); }

  /* Message cards get more room */
  .msg-photo { width: 140px; }
  .msg-title { font-size: 1.1rem; }
  .msg-text  { font-size: .82rem; }

  /* Footer map sits right */
  .footer-map { max-width: 100%; }

  .back-top { right: 22px; bottom: 22px; width: 46px; height: 46px; }
}

/* ==========================================================================
   >= 992px — LAPTOP  (navbar switches to horizontal)
   ========================================================================== */
@media (min-width: 992px) {

  .section { padding: 72px 0; }

  .sec-title { font-size: 1.6rem; }

  /* ---- Navbar: transparent over hero, white after scroll ---- */
  .site-nav {
    padding: 10px 0;
  }
  .site-nav .nav-link { font-size: .8rem; padding: 8px 13px !important; }

  /* Hero: taller, full-screen feel */
  .hero { min-height: 88vh; }
  .hero-content { padding: 70px 0; max-width: 640px; }

  .float-ico { font-size: 2.4rem; }
  .float-ico.i3 { font-size: 2.8rem; }
  .float-ico.i4 { font-size: 3rem; }

  /* Why-choose-us: 6 across as per mockup */
  .why-row > [class*="col-"] { flex: 0 0 auto; width: 16.6666%; }
  .why-card { padding: 20px 12px 16px; }
  .why-ico  { width: 50px; height: 50px; font-size: 1.25rem; }
  .why-name { font-size: .72rem; }

  /* Gallery strip — 7 across, matching mockup */
  .gal-strip { grid-template-columns: repeat(7, 1fr); gap: 12px; }

  /* Message cards */
  .msg-photo { width: 160px; }

  /* Footer */
  .site-footer { padding-top: 52px; }
  .footer-logo { height: 48px; }
}

/* ==========================================================================
   >= 1200px — DESKTOP
   ========================================================================== */
@media (min-width: 1200px) {

  body { font-size: 16px; }

  .section { padding: 80px 0; }

  .sec-title { font-size: 1.75rem; }
  .sec-text  { font-size: .95rem; }

  .site-nav .nav-link { font-size: .84rem; padding: 8px 15px !important; }
  .brand-logo { height: 52px; }
  .site-nav.nav-scrolled .brand-logo { height: 44px; }

  .hero { min-height: 92vh; }
  .hero-content { max-width: 700px; }

  .cta-band { padding: 32px 0; }

  .testi-text { font-size: .86rem; }
  .msg-text   { font-size: .85rem; }

  .site-footer { font-size: .82rem; }
}

/* ==========================================================================
   >= 1400px — LARGE DESKTOP
   ========================================================================== */
@media (min-width: 1400px) {

  .container { max-width: 1280px; }

  .section { padding: 90px 0; }

  .hero-content { max-width: 760px; }

  .sec-title { font-size: 1.9rem; }
}

/* ==========================================================================
   MAX-WIDTH TWEAKS — small screens only
   ========================================================================== */

/* Below 992px: offcanvas is the menu, so hide the inline collapse */
@media (max-width: 991.98px) {
  .site-nav .navbar-collapse { display: none !important; }

  /* Nav is always solid white on mobile for legibility */
  .site-nav { background: var(--white); box-shadow: 0 2px 12px rgba(4, 26, 73, .08); }
}

/* Below 768px: stack the message card so the photo sits on top */
@media (max-width: 767.98px) {

  .topbar-item span { font-size: .68rem; }

  /* Ticker label shrinks */
  .ticker-label { padding: 8px 20px 8px 14px; font-size: .66rem; }
  .ticker-label::after { border-width: 17px 0 17px 10px; }

  .hero-title { letter-spacing: -.01em; }
  .hero-btns  { gap: 10px; }
  .hero-btns .btn { flex: 1 1 auto; text-align: center; }

  /* Message cards stack vertically, photo centered */
  .msg-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
  }
  .msg-photo { width: 130px; }
  .msg-sign  { margin-left: auto; margin-right: auto; }

  /* Hide floating hero icons on small screens (visual noise) */
  .float-ico { display: none; }

  /* Footer center-aligns */
  .footer-social { justify-content: flex-start; }
}

/* Below 576px: tighten everything up */
@media (max-width: 575.98px) {

  .section { padding: 40px 0; }

  .sec-title { font-size: 1.15rem; }

  .hero { min-height: 72vh; }
  .hero-content { padding: 34px 0; }
  .hero-overlay {
    /* Full wash on mobile — text must stay readable over any photo */
    background: linear-gradient(180deg, rgba(4, 26, 73, .88) 0%, rgba(4, 26, 73, .8) 100%);
  }

  /* Top bar: show only phone + email, drop the long address */
  .topbar-inner { gap: 4px 14px; }
  .topbar-item:nth-child(3) { display: none; }

  /* Gallery strip 2-up on phones */
  .gal-strip { grid-template-columns: repeat(2, 1fr); gap: 8px; }

  .cta-title { font-size: 1.05rem; }
  .cta-inner .btn { width: 100%; }

  .why-card { padding: 14px 8px 12px; }
  .why-ico  { width: 40px; height: 40px; font-size: 1rem; }
  .why-name { font-size: .64rem; }

  .footer-map { max-width: 100%; }
  .back-top { right: 12px; bottom: 12px; width: 38px; height: 38px; font-size: .9rem; }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
  .topbar, .site-nav, .news-ticker, .hero-icons,
  .back-top, .footer-social, .footer-map, .cta-band { display: none !important; }

  body { font-size: 12pt; color: #000; }
  .site-footer { background: none; color: #000; }
  [data-anim] { opacity: 1 !important; transform: none !important; }
  a[href]::after { content: " (" attr(href) ")"; font-size: .8em; }
}