/* =============================================================================
   RESPONSIVE.CSS — Mobile-First Responsive System
   Ilahia Polytechnic College
   Breakpoints: 480px | 640px | 768px | 1024px | 1200px
============================================================================= */

/* ── Global overflow guard ──────────────────────────────────────────────────── */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img, video, iframe, embed, object {
  max-width: 100%;
  height: auto;
}

/* ── BASE — Mobile-first defaults (all screens, especially < 480px) ─────────── */

/* Nav: hamburger visible, desktop nav hidden */
.menu-toggle { display: flex !important; }
.main-nav    { display: none !important; }
.header-cta  { display: none !important; }

/* Header inner: never overflow */
.header-inner {
  gap: var(--space-4);
  flex-wrap: nowrap;
}

/* Logo image: constrain on small screens */
.logo img {
  max-width: 140px;
  height: auto !important;
}

/* Container: safe horizontal padding */
.container {
  padding-left: var(--space-4);
  padding-right: var(--space-4);
  width: 100%;
}

/* Section spacing reduced on mobile */
.section {
  padding-top: var(--space-10);
  padding-bottom: var(--space-10);
}
.section-header {
  margin-bottom: var(--space-6);
}
.section-header h2 {
  font-size: 1.6rem;
  word-break: break-word;
}
.section-header h2::after {
  width: 40px;
  height: 3px;
}

/* Admissions — Important Dates: tighter cells on very small screens */
@media (max-width: 479px) {
  .important-dates-table th,
  .important-dates-table td {
    padding: 8px 10px;
    font-size: var(--fs-xs);
  }

  .important-dates-table th:nth-child(2),
  .important-dates-table td:nth-child(2) {
    white-space: nowrap;
  }
}

/* Typography scale down */
h1 { font-size: 1.75rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }

/* ── Hero ───────────────────────────────────────────────────────────────────── */
.hero__content {
  padding: var(--space-8) 0;
  max-width: 100%;
}
.hero__title {
  font-size: 1.75rem;
  word-break: break-word;
}
.hero__subtitle { font-size: var(--fs-base); }
.hero__eyebrow  { font-size: 0.7rem; }
.hero__badges   { gap: var(--space-2); }
.hero__badge    { font-size: 0.65rem; padding: var(--space-1) var(--space-2); }
.hero__actions  { justify-content: center; flex-wrap: wrap; }

/* ── About Section — MOBILE FIX ─────────────────────────────────────────────── */
.about-section {
  overflow: hidden; /* prevent pseudo-elements bleeding outside */
}
.about-content {
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
.about-img-wrapper {
  width: 100%;
  max-width: 100%;
  overflow: visible;
  position: relative;
}
.about-img-main {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--radius-xl);
  display: block;
}
/* Hide decorative pseudo-elements on small screens to prevent overflow */
.about-img-wrapper::before,
.about-img-wrapper::after {
  display: none;
}
.about-img-badge {
  bottom: var(--space-3);
  right: var(--space-3);
  padding: var(--space-2) var(--space-3);
}
.about-img-badge .year { font-size: 1.5rem; }

/* ── Stats ──────────────────────────────────────────────────────────────────── */
.stats-grid {
  grid-template-columns: repeat(2, 1fr);
}
.stat-item__number { font-size: 1.75rem; }
.stat-item + .stat-item::before { display: none; }
.stat-item:nth-child(n+3) {
  border-top: 1px solid rgba(255,255,255,0.12);
}

/* ── About meta ─────────────────────────────────────────────────────────────── */
.about-meta {
  grid-template-columns: 1fr !important;
}

/* ── Dept cards ─────────────────────────────────────────────────────────────── */
.dept-grid {
  grid-template-columns: 1fr;
}

/* ── MV cards ───────────────────────────────────────────────────────────────── */
.mv-grid {
  grid-template-columns: 1fr;
}

/* ── Trust section ──────────────────────────────────────────────────────────── */
.trust-grid {
  grid-template-columns: 1fr;
}
.trust-stats {
  grid-template-columns: 1fr 1fr;
}

/* ── Management grid ────────────────────────────────────────────────────────── */
.mgmt-grid {
  grid-template-columns: 1fr;
}

/* ── Faculty grid ───────────────────────────────────────────────────────────── */
.faculty-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* ── Steps ──────────────────────────────────────────────────────────────────── */
.step {
  flex-direction: column;
  gap: var(--space-3);
}
.step::after { display: none; }
.step__content h4 { padding-top: 0; }

/* ── Two-col: always stack on mobile ────────────────────────────────────────── */
.two-col,
.two-col--60-40 {
  grid-template-columns: 1fr !important;
  gap: var(--space-6);
}

/* ── Contact / Form ─────────────────────────────────────────────────────────── */
.contact-grid {
  grid-template-columns: 1fr !important;
}
.form-row {
  grid-template-columns: 1fr !important;
}

/* ── Dept detail ────────────────────────────────────────────────────────────── */
.dept-detail__overview {
  grid-template-columns: 1fr !important;
}

/* ── Footer ─────────────────────────────────────────────────────────────────── */
.footer-grid {
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
.footer-bottom {
  flex-direction: column;
  text-align: center;
  gap: var(--space-3);
}

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.btn-group {
  justify-content: center;
}
.btn {
  padding: 0.7rem 1.4rem;
  font-size: var(--fs-sm);
}
.btn--lg {
  padding: 0.85rem 1.75rem;
  font-size: var(--fs-base);
}

/* ── Gallery grid ───────────────────────────────────────────────────────────── */
.gallery-grid {
  grid-template-columns: 1fr;
}

/* ── Lightbox ───────────────────────────────────────────────────────────────── */
.lightbox-overlay { padding: var(--space-3); }
.lightbox-prev    { left: var(--space-1); }
.lightbox-next    { right: var(--space-1); }
.lightbox-close   { top: -44px; right: 0; }

/* ── Page hero ──────────────────────────────────────────────────────────────── */
.page-hero {
  padding: var(--space-10) 0 var(--space-8);
}
.page-hero h1 { font-size: 1.6rem; }
.page-hero p  { font-size: var(--fs-sm); }

/* ══════════════════════════════════════════════════════════════════════════════
   SMALL PHONE (≥ 480px)
══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 480px) {
  h1 { font-size: var(--fs-3xl); }
  h2 { font-size: var(--fs-2xl); }

  .hero__title    { font-size: 2rem; }
  .hero__subtitle { font-size: var(--fs-md); }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .section-header h2 { font-size: var(--fs-2xl); }

  .about-img-main {
    aspect-ratio: 4/3;
  }

  .about-meta {
    grid-template-columns: 1fr 1fr !important;
  }

  .faculty-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .step {
    flex-direction: row;
    gap: var(--space-4);
  }
  .step__content h4 { padding-top: 10px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   PHABLET (≥ 640px)
══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 640px) {
  .mv-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   TABLET (≥ 768px)
══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  :root {
    --header-height: 72px;
  }

  .container {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }

  h1 { font-size: var(--fs-4xl); }
  h2 { font-size: var(--fs-3xl); }
  h3 { font-size: var(--fs-2xl); }

  .hero__title    { font-size: clamp(2rem, 4vw, 3rem); }
  .hero__subtitle { font-size: var(--fs-md); }
  .hero__badges   { gap: var(--space-3); }
  .hero__badge    { font-size: var(--fs-xs); padding: var(--space-2) var(--space-3); }
  .hero__content  { padding: var(--space-16) 0; text-align: left; }
  .hero__actions  { justify-content: flex-start; }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .section-header h2 { font-size: var(--fs-3xl); }
  .section {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }
  .section-header { margin-bottom: var(--space-10); }

  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .stat-item:nth-child(n+3) { border-top: none; }
  .stat-item + .stat-item::before { display: block; }
  .stat-item__number { font-size: var(--fs-4xl); }

  .dept-grid {
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
  }

  /* Three department cards: centre the lone card on the second row */
  .dept-grid .dept-card:nth-child(3):last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    max-width: min(100%, 400px);
  }

  .mv-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  /* About: side-by-side, restore decorative corners */
  .about-content {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
  }
  .about-img-main {
    aspect-ratio: 4/5;
  }
  .about-img-wrapper::before,
  .about-img-wrapper::after {
    display: block;
  }

  .mgmt-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
  .footer-bottom {
    flex-direction: row;
    text-align: left;
  }

  .page-hero { padding: var(--space-16) 0 var(--space-12); }
  .page-hero h1 { font-size: var(--fs-3xl); }
  .page-hero p  { font-size: var(--fs-md); }

  .btn {
    padding: 0.75rem 1.75rem;
    font-size: var(--fs-base);
  }
  .btn--lg {
    padding: 1rem 2.25rem;
    font-size: var(--fs-md);
  }
  .btn-group { justify-content: flex-start; }

  .two-col,
  .two-col--60-40 {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
  }
  .two-col--60-40 {
    grid-template-columns: 3fr 2fr;
  }

  .contact-grid {
    grid-template-columns: 1fr 1.4fr;
  }

  .form-row {
    grid-template-columns: 1fr 1fr;
  }

  .dept-detail__overview {
    grid-template-columns: 2fr 1fr;
  }

  .step {
    flex-direction: row;
    gap: var(--space-6);
  }
  .step::after { display: block; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   TABLET-ONLY (768px – 1023px): keep hamburger
══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px) {
  .menu-toggle { display: flex !important; }
  .main-nav    { display: none !important; }
  .header-cta  { display: none !important; }

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

/* ══════════════════════════════════════════════════════════════════════════════
   DESKTOP (≥ 1024px)
══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  /* Show desktop nav */
  .menu-toggle { display: none !important; }
  .mobile-nav  { display: none !important; }
  .main-nav    { display: flex !important; }
  /* header-cta removed — keep hidden */
  .header-cta  { display: none !important; }

  h1 { font-size: var(--fs-5xl); }
  h2 { font-size: var(--fs-3xl); }

  .hero__title { font-size: clamp(2.5rem, 4.5vw, 3.75rem); }

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

  .dept-grid {
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
  }

  .dept-grid .dept-card:nth-child(3):last-child {
    grid-column: auto;
    justify-self: stretch;
    max-width: none;
  }

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

  .mgmt-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .faculty-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-8);
  }

  .about-img-main { aspect-ratio: 4/5; }

  .section {
    padding-top: var(--space-20);
    padding-bottom: var(--space-20);
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   WIDE DESKTOP (≥ 1200px)
══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .hero__title { font-size: var(--fs-5xl); }
  .section-header h2 { font-size: var(--fs-3xl); }
}

/* ══════════════════════════════════════════════════════════════════════════════
   PRINT
══════════════════════════════════════════════════════════════════════════════ */
@media print {
  .site-header, .site-footer,
  .btn, .btn-group,
  .social-links, .mobile-nav,
  .hero__scroll, .hero__side,
  .lightbox-overlay { display: none !important; }

  body { font-size: 12pt; color: #000; }
  h1, h2, h3 { color: #000; page-break-after: avoid; }
  a { text-decoration: underline; color: #000; }
  a[href]::after { content: ' (' attr(href) ')'; font-size: 9pt; }
  .card, .mv-card, .dept-card { box-shadow: none; border: 1px solid #ccc; }
}