/* ====================================
   AAHVAAN'26 - RESPONSIVE STYLES
   Mobile-First Responsive Design
   ==================================== */

/* ========================================
   EXTRA LARGE SCREENS (1400px+)
   ======================================== */
@media (min-width: 1400px) {
  .container {
    max-width: 1400px;
  }

  .hero-title {
    font-size: var(--font-size-8xl);
  }

  .evt {
    flex: 0 0 320px;
    height: 450px;
  }
}

/* ========================================
   LARGE SCREENS (1200px - 1399px)
   ======================================== */
@media (max-width: 1399px) and (min-width: 1200px) {
  .evt {
    flex: 0 0 300px;
    height: 420px;
  }
}

/* ========================================
   MEDIUM-LARGE SCREENS (1024px - 1199px)
   ======================================== */
@media (max-width: 1199px) and (min-width: 1024px) {
  .evt {
    flex: 0 0 280px;
    height: 400px;
  }

  .numbers>div {
    min-width: 70px;
    font-size: var(--font-size-5xl);
  }
}

/* ========================================
   TABLET LANDSCAPE (768px - 1023px)
   ======================================== */
@media (max-width: 1023px) {

  /* Navigation */
  .nav-link {
    display: none;
  }

  .nav .regist {
    display: none;
  }

  .ham-cont {
    display: block;
  }

  /* Hero */
  .home-page {
    padding: var(--space-16) var(--space-4) var(--space-8);
  }

  .hero-title {
    font-size: clamp(3rem, 10vw, 4.5rem);
  }

  .numbers>div {
    min-width: 60px;
    font-size: var(--font-size-4xl);
  }

  .labels>div {
    min-width: 60px;
    font-size: var(--font-size-xs);
  }

  /* Events */
  .evt {
    flex: 0 0 260px;
    height: 380px;
  }

  .evt-arrow-left,
  .evt-arrow-right {
    width: 40px;
    height: 40px;
  }

  /* About */
  #about-car-cont {
    gap: var(--space-4);
  }

  .about-stat {
    min-width: 120px;
    padding: var(--space-4);
  }
}

/* ========================================
   TABLET PORTRAIT (600px - 767px)
   ======================================== */
@media (max-width: 767px) {

  /* Global */
  :root {
    --space-20: 4rem;
    --space-16: 3rem;
  }

  /* Navigation */
  .nav {
    padding: 0 var(--space-4);
    height: 60px;
  }

  .nav .left span {
    font-size: 1.2rem !important;
  }

  /* Hero */
  .home-page {
    min-height: 100vh;
    padding: var(--space-12) var(--space-4) var(--space-8);
  }

  .hero-title {
    font-size: clamp(2.5rem, 12vw, 4rem);
    letter-spacing: 0.05em;
  }

  .hero-year {
    font-size: clamp(1.5rem, 6vw, 2rem);
    letter-spacing: 0.2em;
  }

  .hero-tagline-sanskrit {
    font-size: var(--font-size-lg);
  }

  .lines {
    opacity: 0.3;
  }

  .arrow-rain {
    display: none;
  }

  .scroll-indicator {
    display: none;
  }

  /* Timer */
  .numbers {
    gap: var(--space-1);
  }

  .numbers>div {
    min-width: 50px;
    font-size: var(--font-size-3xl);
  }

  .numbers>div::after {
    width: 30px;
    height: 1px;
  }

  .numbers span {
    font-size: var(--font-size-xl);
  }

  .labels {
    gap: var(--space-2);
  }

  .labels>div {
    min-width: 50px;
    font-size: 10px;
    letter-spacing: 0.05em;
  }

  /* Register Button */
  .regist {
    padding: var(--space-3) var(--space-6);
    font-size: var(--font-size-sm);
  }

  /* Socials */
  .socials {
    bottom: var(--space-4);
  }

  .socials a {
    width: 40px;
    height: 40px;
  }

  /* Events Section */
  .events {
    padding: var(--space-16) var(--space-2);
  }

  .sec-header {
    font-size: clamp(1.5rem, 6vw, 2rem);
    letter-spacing: 0.1em;
  }

  .sec-header::after {
    width: 80px;
    height: 2px;
  }

  .events-subtitle {
    font-size: var(--font-size-base);
  }

  .evt-cont {
    padding: 0;
  }

  .evt-arrow-left,
  .evt-arrow-right {
    display: none;
  }

  .evt {
    flex: 0 0 240px;
    height: 340px;
  }

  .evt-logo {
    font-size: 45px;
  }

  .evt-label {
    font-size: var(--font-size-lg);
  }

  .evt-sanskrit {
    font-size: var(--font-size-xs);
  }

  .evt-corner {
    width: 15px;
    height: 15px;
  }

  .evt-guidelines {
    padding: var(--space-3) var(--space-6);
    font-size: var(--font-size-xs);
  }

  /* About Section */
  .about {
    padding: var(--space-16) var(--space-4);
  }

  #about-txt {
    padding: 0 var(--space-2);
  }

  .about-par {
    font-size: var(--font-size-base);
  }

  .about-quote {
    padding: var(--space-4);
  }

  .about-quote-sanskrit {
    font-size: var(--font-size-base);
  }

  #about-car-cont {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
  }

  .about-stat {
    min-width: 100px;
    flex: 0 0 calc(50% - var(--space-3));
    padding: var(--space-4);
  }

  .about-stat-number {
    font-size: var(--font-size-2xl);
  }

  .about-stat-label {
    font-size: 10px;
  }

  /* Contact Section */
  .contact {
    padding: var(--space-16) var(--space-4);
  }

  .contactCont {
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
  }

  .contDiv {
    width: 100%;
    max-width: 350px;
    padding: var(--space-6);
  }

  .contactImgCont {
    width: 100px;
    height: 100px;
  }

  .contDiv .name {
    font-size: var(--font-size-lg);
  }

  /* Footer */
  footer {
    padding: var(--space-6) var(--space-4);
  }

  .footer-quote-sanskrit {
    font-size: var(--font-size-base);
  }

  /* Hamburger Menu */
  .ham-grid {
    padding: var(--space-8) var(--space-4);
  }

  .ham-links a {
    font-size: var(--font-size-lg);
  }
}

/* ========================================
   MOBILE LARGE (480px - 599px)
   ======================================== */
@media (max-width: 599px) and (min-width: 480px) {
  .hero-title {
    font-size: 2.5rem;
  }

  .evt {
    flex: 0 0 220px;
    height: 320px;
  }
}

/* ========================================
   MOBILE SMALL (320px - 479px)
   ======================================== */
@media (max-width: 479px) {

  /* Hero */
  .hero-title {
    font-size: 2rem;
    letter-spacing: 0.02em;
  }

  .hero-year {
    font-size: 1.2rem;
    letter-spacing: 0.15em;
    margin-top: -5px;
  }

  .hero-tagline-sanskrit {
    font-size: var(--font-size-base);
  }

  .hero-tagline-english {
    font-size: 10px;
    letter-spacing: 0.15em;
  }

  /* Timer */
  .numbers {
    gap: 2px;
  }

  .numbers>div {
    min-width: 40px;
    font-size: var(--font-size-2xl);
  }

  .numbers>div::after {
    display: none;
  }

  .numbers span {
    font-size: var(--font-size-lg);
    margin: 0;
  }

  .labels {
    gap: 2px;
  }

  .labels>div {
    min-width: 40px;
    font-size: 8px;
    letter-spacing: 0;
  }

  /* Events */
  .evt {
    flex: 0 0 200px;
    height: 280px;
  }

  .evt-logo {
    font-size: 35px;
    top: var(--space-4);
  }

  .evt-label {
    font-size: var(--font-size-base);
  }

  .evt-content {
    padding: var(--space-4);
  }

  /* About stats */
  .about-stat {
    flex: 0 0 100%;
    max-width: 200px;
  }

  /* Contact */
  .contDiv {
    padding: var(--space-4);
  }

  .contactImgCont {
    width: 80px;
    height: 80px;
  }

  .contDiv .name {
    font-size: var(--font-size-base);
  }

  .contDiv .dept {
    font-size: 10px;
  }

  .contact-details a {
    font-size: var(--font-size-xs);
  }
}

/* ========================================
   VERY SMALL SCREENS (< 320px)
   ======================================== */
@media (max-width: 319px) {
  .hero-title {
    font-size: 1.5rem;
  }

  .numbers>div {
    min-width: 35px;
    font-size: var(--font-size-xl);
  }

  .evt {
    flex: 0 0 180px;
    height: 260px;
  }
}

/* ========================================
   LANDSCAPE PHONES
   ======================================== */
@media (max-height: 500px) and (orientation: landscape) {
  .home-page {
    min-height: auto;
    padding: var(--space-8) var(--space-4);
  }

  .loader-mandala {
    width: 100px;
    height: 100px;
  }

  .loader-logo {
    margin-bottom: var(--space-4);
  }

  .loader-text {
    font-size: var(--font-size-3xl);
  }

  .hero-title {
    font-size: 2rem;
  }

  .time {
    margin-bottom: var(--space-4);
  }

  .numbers>div {
    font-size: var(--font-size-2xl);
  }
}

/* ========================================
   HIGH DPI / RETINA DISPLAYS
   ======================================== */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
  .ember {
    box-shadow: 0 0 4px var(--ember), 0 0 8px var(--ember-glow);
  }
}

/* ========================================
   REDUCED MOTION
   ======================================== */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .ember-overlay,
  .arrow-rain,
  .loader-particles {
    display: none !important;
  }

  .loader-mandala {
    animation: none !important;
  }

  .mandala-ring {
    animation: none !important;
  }
}

/* ========================================
   DARK MODE FORCED (for OLED screens)
   ======================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #000000;
    --dark-700: #000000;
    --dark-600: #0a0a0a;
  }
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {

  .loader,
  .ember-overlay,
  .arrow-rain,
  .nav,
  .ham-grid,
  .socials,
  .scroll-indicator,
  .falling-shapes {
    display: none !important;
  }

  .home-page {
    min-height: auto;
    padding: 2cm;
    background: white !important;
    color: black !important;
  }

  .hero-title,
  .sec-header {
    color: black !important;
    -webkit-text-fill-color: black !important;
  }

  .evt {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}