/* ==========================================================
   UNIVERSAL RESPONSIVE SYSTEM (Antigravity Fluidity)
   File: responsive.css
========================================================== */

/* ── Fluid Base Variables ── */
:root {
  /* Fluid Spacing */
  --fluid-space-sm: clamp(8px, 1.5vw, 16px);
  --fluid-space-md: clamp(16px, 3.5vw, 32px);
  --fluid-space-lg: clamp(32px, 5vw, 64px);
  --fluid-space-xl: clamp(48px, 8vw, 96px);
  
  /* Fluid Typography */
  --fluid-font-xs: clamp(0.75rem, 0.5vw + 0.6rem, 0.875rem);
  --fluid-font-sm: clamp(0.875rem, 0.8vw + 0.5rem, 1rem);
  --fluid-font-base: clamp(1rem, 1.2vw + 0.5rem, 1.125rem);
  --fluid-font-lg: clamp(1.2rem, 2vw + 0.5rem, 1.6rem);
  --fluid-font-xl: clamp(1.8rem, 3.5vw + 0.5rem, 2.8rem);
  --fluid-font-xxl: clamp(2.5rem, 5vw + 1rem, 4.5rem);
  --fluid-font-hero: clamp(3.5rem, 12vw, 10rem);
}

/* ── Core Restyles ── */
body {
  font-size: var(--fluid-font-base);
  text-align: justify;
}

p {
  text-align: justify;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
}

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

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

.section-heading, .theme-header h2, .section-teal-header h2 {
  font-size: var(--fluid-font-xl);
  text-align: center; /* Keep headings centered */
}

/* Universal box-sizing reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Bulletproof mobile horizontal constraints */
html, body {
  overflow-x: hidden;
  width: 100%;
}

/* Global protection against horizontal overflow from large media */
img, picture, video, canvas, svg {
  max-width: 100%;
  height: auto;
}

/* ── Typography Target (Page 1) ── */
.hero-title .line-ici, 
.hero-title .line-tech, 
.hero-title .line-bloom {
  font-size: var(--fluid-font-hero);
  line-height: 1.1;
}

.about-text h2 {
  font-size: var(--fluid-font-xl);
}

.about-text p, .theme-content-box p {
  font-size: var(--fluid-font-base);
  margin-bottom: var(--fluid-space-md);
}

/* ── Antigravity Grid Layouts (Decoupled & Fluid) ── */

/* Auto-flow grid replaces rigid flex or basic grid */
.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(280px, 45vw, 400px), 1fr));
  gap: var(--fluid-space-lg);
  align-items: center;
}

.about-logo-wrap img {
  width: clamp(180px, 30vw, 300px);
  max-width: 100%;
}

.schedule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(320px, 48vw, 800px), 1fr));
  gap: var(--fluid-space-lg);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 1.25fr;
  gap: var(--fluid-space-xl);
  max-width: 1400px;
  margin: 0 auto;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--fluid-space-md);
}

.contact-item-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fluid-space-md);
}

@media (max-width: 480px) {
  .contact-item-grid {
    grid-template-columns: 1fr;
  }
}

.footer-logo-row {
  display: flex;
  flex-direction: column;
  gap: var(--fluid-space-md);
}

.footer-logo-row img {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

/* Prevent text justify from stretching names/numbers in the footer */
.site-footer p, 
.site-footer div, 
.contact-item {
  text-align: left !important;
}

.sponsors-wrap, .assoc-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--fluid-space-lg);
  padding: var(--fluid-space-lg) var(--fluid-space-md);
}

.reg-banner-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(280px, 40vw, 500px), 1fr));
  gap: var(--fluid-space-md);
  justify-content: center;
}

/* ── Fluid Components ── */
.sponsor-logo img, .assoc-logos img {
  width: clamp(100px, 15vw, 200px);
  height: auto;
}

.accordion-header {
  font-size: var(--fluid-font-lg);
  padding: var(--fluid-space-md) var(--fluid-space-lg);
}

.accordion-content-inner {
  font-size: var(--fluid-font-base);
  padding: var(--fluid-space-md) var(--fluid-space-lg);
}

.register-banner a, .brochure-btn {
  padding: clamp(12px, 2vw, 18px) clamp(32px, 6vw, 80px);
  font-size: var(--fluid-font-lg);
}

.nav-brand-text {
  font-size: var(--fluid-font-xl);
}

.contact-item {
  font-size: var(--fluid-font-base);
}

/* Universal fluid table constraints to prevent overflow while preserving data */
.table-container {
  width: 100%;
  overflow-x: auto;
  margin: var(--fluid-space-lg) auto;
  padding: 0 var(--fluid-space-md);
}

.custom-table th, .custom-table td {
  padding: clamp(8px, 1.5vw, 16px) clamp(10px, 2vw, 24px);
  font-size: var(--fluid-font-sm);
}

/* ── Event & Subpage Layouts ── */
.event-banner-content {
  padding: var(--fluid-space-md) var(--fluid-space-xl) !important;
}

.event-banner-title {
  font-size: var(--fluid-font-xl) !important;
  text-align: left !important;
}

.event-banner-subtitle {
  font-size: var(--fluid-font-lg) !important;
  text-align: left !important;
}

/* Make event banners wrap cleanly instead of strictly absolute horizontal positioning */
@media (max-width: 768px) {
  .event-banner {
    height: auto !important;
    min-height: 140px !important;
    padding: var(--fluid-space-md) 0 !important;
  }
  .event-banner-content {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: var(--fluid-space-sm) !important;
  }
}

/* Ensure dropdowns align with fluid banner padding */
.event-dropdown a {
  padding-left: var(--fluid-space-xl) !important;
  padding-right: var(--fluid-space-xl) !important;
}
.event-dropdown a:hover {
  padding-left: calc(var(--fluid-space-xl) + 12px) !important;
}

/* Scale down navigation header elements exclusively on small mobile screens to keep the hamburger menu visible */
@media (max-width: 600px) {
  .nav {
    padding: 0 16px !important;
  }
  .nav-college-logos {
    margin-right: 8px !important;
  }
  .nav-college-logos img {
    height: 36px !important;
    width: auto !important; /* CRITICAL: Prevent rectangular combined logos from getting crushed */
  }
  .nav-brand {
    gap: 8px !important;
    margin-right: auto !important; /* Removes the fixed 32px dead space */
  }
  .nav-brand-text {
    font-size: 1.3rem !important;
    letter-spacing: 0.3px !important;
  }
}

/* Fix unstructured Organizing Committee columns on small screens */
@media (max-width: 600px) {
  .accordion-content-inner[style*="columns: 2;"] {
    columns: 1 !important;
  }
}

.archinova-hero-content {
  padding: var(--fluid-space-xl) var(--fluid-space-lg) !important;
  width: clamp(280px, 90vw, 900px) !important;
}

.archinova-hero-content h1 {
  font-size: clamp(2rem, 6vw, 3.8rem) !important;
}

.archinova-hero-subtitle {
  font-size: clamp(1.4rem, 3.5vw, 2.5rem) !important;
}

.archinova-hero-details {
  font-size: var(--fluid-font-lg) !important;
}

.teal-heading-large {
  font-size: var(--fluid-font-xxl) !important;
  margin-bottom: var(--fluid-space-lg) !important;
}

.archinova-heading {
  font-size: var(--fluid-font-lg) !important;
  margin-top: var(--fluid-space-lg) !important;
}

.guide-section h2 {
  font-size: var(--fluid-font-xxl) !important;
  margin-bottom: var(--fluid-space-md) !important;
}

.guide-section h3 {
  font-size: var(--fluid-font-xl) !important;
  margin-top: var(--fluid-space-lg) !important;
}

/* Fluid Form & Standard Tables */
.reg-table th, .reg-table td, .bank-table th, .bank-table td {
  padding: clamp(8px, 1.5vw, 16px) clamp(10px, 2vw, 24px) !important;
  font-size: var(--fluid-font-sm) !important;
}

.reg-table-wrap, .bank-table-wrap {
  width: 100% !important;
  overflow-x: auto !important;
  margin: var(--fluid-space-lg) auto !important;
}

/* ── Gallery & Jaipur Section (Moved from About.html) ── */
.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fluid-space-md);
  margin-top: var(--fluid-space-lg);
}

.item {
  flex: 1 1 calc(25% - var(--fluid-space-md)); /* 4 per row */
  text-align: center;
}

.item img {
  width: 100%;
  height: clamp(150px, 20vw, 250px);
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.caption {
  margin-top: var(--fluid-space-sm);
  font-size: var(--fluid-font-sm);
  font-weight: 500;
  color: var(--teal-dark);
}

/* ── Small Screen Space Optimization ── */
@media (max-width: 768px) {
  .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .theme-section, .dept-section, .section {
    padding: var(--fluid-space-lg) 0 !important;
  }

  .theme-content-box {
    padding: 20px 12px !important;
    margin-top: -20px !important;
  }

  .theme-header {
    padding: 16px !important;
    margin-bottom: 20px !important;
  }

  .item {
    flex: 1 1 calc(50% - var(--fluid-space-md));
  }
}

@media (max-width: 480px) {
  .item {
    flex: 1 1 100%;
  }
}


/* Added for header alignment */
.nav-links { justify-content: flex-end !important; }