/* ============================================================
   OXFORDIAN — INNER PAGES CSS v2.0
   ============================================================ */

/* ── PAGE HERO ───────────────────────────────────────────────── */
.page-hero {
  background:var(--ox-navy); position:relative; overflow:hidden;
  padding:clamp(5rem,10vw,8rem) 0 clamp(4rem,7vw,6rem);
}
.page-hero__bg-img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.18;
}
.page-hero__overlay {
  position:absolute; inset:0;
  background:linear-gradient(135deg,var(--ox-navy) 0%,rgba(10,23,42,.88) 100%);
}
.page-hero__red-line {
  position:absolute; bottom:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--ox-red),var(--ox-gold),transparent);
}
.page-hero__content { position:relative; z-index:2; }
.page-hero__breadcrumb {
  display:flex; align-items:center; gap:var(--space-2); margin-bottom:var(--space-5);
  font-family:var(--font-heading); font-size:var(--text-xs); font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
}
.breadcrumb-link { color:rgba(255,255,255,.5); transition:color var(--duration-fast); }
.breadcrumb-link:hover { color:var(--ox-gold); }
.breadcrumb-sep { color:rgba(255,255,255,.3); }
.breadcrumb-current { color:var(--ox-gold); }
.page-hero__title {
  font-family:var(--font-display); font-size:clamp(2.5rem,6vw,5rem);
  font-weight:800; color:#fff; line-height:1.1; letter-spacing:-.03em; margin-bottom:var(--space-5);
}
.page-hero__sub {
  font-size:clamp(1rem,1.5vw,1.2rem); color:rgba(255,255,255,.65);
  max-width:600px; line-height:1.75;
}

/* ── ABOUT PAGE ──────────────────────────────────────────────── */
.about-story { padding:var(--section-pad) 0; background:#fff; }
.about-story__grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-16); align-items:center; }
.about-story__img-wrap { position:relative; }
.about-img-bg-shape { position:absolute; top:-20px; left:-20px; width:80%; height:80%; border-radius:var(--radius-2xl); border:2px solid var(--ox-gray-200); z-index:-1; }
.vision-mission { padding:var(--section-pad) 0; background:var(--ox-cream); }
.vm-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6); margin-top:var(--space-12); }
.vm-card { background:#fff; border-radius:var(--radius-2xl); padding:var(--space-8); box-shadow:var(--shadow-sm); border-top:4px solid transparent; transition:all var(--duration-slow) var(--ease-smooth); }
.vm-card--vision { border-top-color:var(--ox-red); }
.vm-card--mission { border-top-color:var(--ox-navy); }
.vm-card--values { border-top-color:var(--ox-gold); }
.vm-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.vm-card__icon { width:64px; height:64px; border-radius:var(--radius-xl); display:flex; align-items:center; justify-content:center; margin-bottom:var(--space-5); }
.vm-card--vision .vm-card__icon  { background:var(--ox-red-glow); }
.vm-card--mission .vm-card__icon { background:rgba(10,23,42,.06); }
.vm-card--values .vm-card__icon  { background:rgba(184,146,42,.1); }
.vm-card__icon svg { width:28px; height:28px; }
.vm-card--vision  .vm-card__icon svg { color:var(--ox-red); }
.vm-card--mission .vm-card__icon svg { color:var(--ox-navy); }
.vm-card--values  .vm-card__icon svg { color:var(--ox-gold); }
.leadership { padding:var(--section-pad) 0; background:#fff; }
.leaders-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--space-6); margin-top:var(--space-12); }
.leader-card { background:#fff; border-radius:var(--radius-2xl); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--ox-gray-200); transition:all var(--duration-slow) var(--ease-smooth); text-align:center; }
.leader-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-xl); }
.leader-card__img-wrap { position:relative; padding-top:100%; background:var(--ox-gray-100); overflow:hidden; }
.leader-card__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform var(--duration-slower) var(--ease-smooth); }
.leader-card:hover .leader-card__img { transform:scale(1.05); }
.leader-card__body { padding:var(--space-6); }
.leader-card__name { font-size:var(--text-lg); font-weight:700; color:var(--ox-navy); margin-bottom:var(--space-1); }
.leader-card__role { font-family:var(--font-heading); font-size:var(--text-xs); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ox-red); }

/* ── ACADEMICS PAGE ──────────────────────────────────────────── */
.tab-nav { display:flex; gap:var(--space-2); border-bottom:2px solid var(--ox-gray-200); margin-bottom:var(--space-10); overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.tab-nav::-webkit-scrollbar { display:none; }
.tab-btn { padding:var(--space-4) var(--space-6); font-family:var(--font-heading); font-size:var(--text-sm); font-weight:700; color:var(--ox-gray-500); border-bottom:3px solid transparent; margin-bottom:-2px; cursor:pointer; white-space:nowrap; background:transparent; border-top:none; border-left:none; border-right:none; transition:all var(--duration-base) var(--ease-smooth); letter-spacing:.04em; }
.tab-btn:hover { color:var(--ox-navy); }
.tab-btn.active { color:var(--ox-red); border-bottom-color:var(--ox-red); }
.tab-panel { display:none; }
.tab-panel.active { display:block; }
.level-detail { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-12); align-items:center; }
.level-features { display:flex; flex-direction:column; gap:var(--space-4); margin-top:var(--space-6); }
.level-feature { display:flex; gap:var(--space-4); align-items:flex-start; padding:var(--space-4); background:var(--ox-cream); border-radius:var(--radius-lg); border-left:3px solid var(--ox-red); }
.level-feature svg { width:20px; height:20px; color:var(--ox-red); flex-shrink:0; margin-top:2px; }
.level-feature p { font-size:var(--text-sm); color:var(--ox-gray-700); line-height:1.6; margin:0; }

/* ── ADMISSIONS PAGE ─────────────────────────────────────────── */
.admissions-hero-info { padding:var(--section-pad) 0; background:var(--ox-cream); }
.admission-info-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-5); margin-top:var(--space-10); }
.admission-info-card { background:#fff; border-radius:var(--radius-xl); padding:var(--space-6); text-align:center; box-shadow:var(--shadow-sm); border:1px solid var(--ox-gray-200); transition:all var(--duration-slow) var(--ease-smooth); }
.admission-info-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--ox-red); }
.admission-info-card .info-icon { width:56px; height:56px; border-radius:var(--radius-lg); background:var(--ox-red-glow); display:flex; align-items:center; justify-content:center; margin:0 auto var(--space-4); }
.admission-info-card .info-icon svg { width:24px; height:24px; color:var(--ox-red); }

/* ── FACILITIES PAGE ─────────────────────────────────────────── */
.facilities-detail { padding:var(--section-pad) 0; }
.facility-detail-item { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-12); align-items:center; margin-bottom:var(--space-16); }
.facility-detail-item:nth-child(even) .facility-detail-img { order:2; }
.facility-detail-item:nth-child(even) .facility-detail-content { order:1; }
.facility-detail-img { border-radius:var(--radius-2xl); overflow:hidden; aspect-ratio:4/3; box-shadow:var(--shadow-lg); }
.facility-detail-img img { width:100%; height:100%; object-fit:cover; transition:transform var(--duration-slower) var(--ease-smooth); }
.facility-detail-img:hover img { transform:scale(1.04); }
.facility-specs { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); margin-top:var(--space-6); }
.facility-spec { padding:var(--space-4); background:var(--ox-cream); border-radius:var(--radius-lg); border-left:3px solid var(--ox-red); }
.facility-spec__label { font-family:var(--font-heading); font-size:var(--text-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ox-red); margin-bottom:2px; }
.facility-spec__value { font-size:var(--text-sm); font-weight:600; color:var(--ox-navy); }

/* ── GALLERY PAGE ────────────────────────────────────────────── */
.gallery-section { padding:var(--section-pad) 0; background:#fff; }
.gallery-filters { display:flex; gap:var(--space-3); flex-wrap:wrap; margin-bottom:var(--space-8); }
.gallery-filter-btn { padding:.5rem 1.25rem; border-radius:var(--radius-full); font-family:var(--font-heading); font-size:var(--text-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase; border:2px solid var(--ox-gray-200); background:transparent; color:var(--ox-gray-500); cursor:pointer; transition:all var(--duration-base) var(--ease-smooth); }
.gallery-filter-btn:hover,.gallery-filter-btn.active { background:var(--ox-red); border-color:var(--ox-red); color:#fff; }
.masonry-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); }
.masonry-item { border-radius:var(--radius-xl); overflow:hidden; position:relative; cursor:pointer; }
.masonry-item:nth-child(3n+1) { grid-row:span 2; }
.masonry-item__img { width:100%; height:100%; min-height:240px; object-fit:cover; transition:transform var(--duration-slower) var(--ease-smooth); }
.masonry-item:hover .masonry-item__img { transform:scale(1.05); }
.masonry-item__overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(10,23,42,.7) 0%,transparent 60%); opacity:0; transition:opacity var(--duration-base) var(--ease-smooth); display:flex; align-items:flex-end; padding:var(--space-5); }
.masonry-item:hover .masonry-item__overlay { opacity:1; }
.masonry-item__caption { font-family:var(--font-heading); font-size:var(--text-sm); font-weight:600; color:#fff; }
.gallery-lightbox { position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:99999; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:all var(--duration-base) var(--ease-smooth); }
.gallery-lightbox.active { opacity:1; visibility:visible; }
.lightbox-close { position:absolute; top:var(--space-6); right:var(--space-6); width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all var(--duration-fast); }
.lightbox-close:hover { background:var(--ox-red); border-color:var(--ox-red); }
.lightbox-close svg { width:18px; height:18px; }

/* ── BLOG PAGE ───────────────────────────────────────────────── */
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6); }
.blog-card { background:#fff; border-radius:var(--radius-2xl); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--ox-gray-200); transition:all var(--duration-slow) var(--ease-smooth); }
.blog-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-xl); }
.blog-card__img { aspect-ratio:16/9; overflow:hidden; }
.blog-card__img img { width:100%; height:100%; object-fit:cover; transition:transform var(--duration-slower) var(--ease-smooth); }
.blog-card:hover .blog-card__img img { transform:scale(1.05); }
.blog-card__body { padding:var(--space-6); }
.blog-card__category { display:inline-block; padding:.25rem .75rem; background:var(--ox-red-glow); color:var(--ox-red); border-radius:var(--radius-full); font-family:var(--font-heading); font-size:.65rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:var(--space-3); }
.blog-card__title { font-size:var(--text-xl); font-weight:700; color:var(--ox-navy); line-height:1.35; margin-bottom:var(--space-3); transition:color var(--duration-fast); }
.blog-card:hover .blog-card__title { color:var(--ox-red); }
.blog-card__excerpt { font-size:var(--text-sm); color:var(--ox-gray-500); line-height:1.7; margin-bottom:var(--space-5); }
.blog-card__meta { display:flex; align-items:center; justify-content:space-between; padding-top:var(--space-4); border-top:1px solid var(--ox-gray-200); }
.blog-card__date { font-family:var(--font-heading); font-size:var(--text-xs); font-weight:600; color:var(--ox-gray-500); letter-spacing:.04em; }
.blog-read-more { font-family:var(--font-heading); font-size:var(--text-xs); font-weight:700; color:var(--ox-red); letter-spacing:.08em; text-transform:uppercase; display:flex; align-items:center; gap:var(--space-1); transition:gap var(--duration-fast); }
.blog-card:hover .blog-read-more { gap:var(--space-2); }
.blog-read-more svg { width:14px; height:14px; }

/* ── CONTACT PAGE ────────────────────────────────────────────── */
.contact-section { padding:var(--section-pad) 0; background:#fff; }
.contact-layout { display:grid; grid-template-columns:1fr 1.5fr; gap:var(--space-12); align-items:start; }
.contact-info-card { background:var(--ox-navy); border-radius:var(--radius-2xl); padding:var(--space-10); position:relative; overflow:hidden; }
.contact-info-card::before { content:''; position:absolute; top:0; right:0; width:200px; height:200px; background:radial-gradient(circle,rgba(192,39,44,.2) 0%,transparent 70%); pointer-events:none; }
.contact-info-item { display:flex; gap:var(--space-4); margin-bottom:var(--space-7); align-items:flex-start; }
.contact-info-icon { width:48px; height:48px; border-radius:var(--radius-lg); background:rgba(192,39,44,.2); display:flex; align-items:center; justify-content:center; flex-shrink:0; border:1px solid rgba(192,39,44,.3); }
.contact-info-icon svg { width:20px; height:20px; color:var(--ox-red-light); }
.contact-info-label { font-family:var(--font-heading); font-size:var(--text-xs); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:var(--space-1); }
.contact-info-value { font-size:var(--text-sm); color:rgba(255,255,255,.85); line-height:1.6; }
.contact-info-value a { color:inherit; transition:color var(--duration-fast); }
.contact-info-value a:hover { color:var(--ox-gold); }
.contact-form-card { background:#fff; border-radius:var(--radius-2xl); padding:var(--space-10); box-shadow:var(--shadow-lg); border:1px solid var(--ox-gray-200); position:relative; }
.contact-form-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--ox-red),var(--ox-gold)); border-radius:var(--radius-2xl) var(--radius-2xl) 0 0; }
.map-section { padding-bottom:var(--section-pad); background:#fff; }
.map-container { border-radius:var(--radius-2xl); overflow:hidden; height:450px; box-shadow:var(--shadow-lg); border:1px solid var(--ox-gray-200); }
.map-container iframe { width:100%; height:100%; border:none; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media(max-width:1024px) {
  .vm-grid { grid-template-columns:1fr 1fr; }
  .admission-info-grid { grid-template-columns:repeat(2,1fr); }
  .masonry-grid { grid-template-columns:repeat(2,1fr); }
  .blog-grid { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:768px) {
  .about-story__grid,.level-detail,.facility-detail-item,.contact-layout { grid-template-columns:1fr; }
  .vm-grid { grid-template-columns:1fr; }
  .facility-detail-item:nth-child(even) .facility-detail-img { order:0; }
  .facility-detail-item:nth-child(even) .facility-detail-content { order:0; }
  .masonry-grid { grid-template-columns:1fr; }
  .masonry-item:nth-child(3n+1) { grid-row:span 1; }
  .blog-grid { grid-template-columns:1fr; }
  .facility-specs { grid-template-columns:1fr; }
  .admission-info-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:480px) {
  .admission-info-grid { grid-template-columns:1fr; }
}