/* ============================================================
   responsive.css — Premium Responsive Breakpoints
   Sri Sri Sri Yogendra Avadhuta Guruji Website
   ============================================================ */

/* ============================================================
   LARGE DESKTOPS (> 1280px)
   ============================================================ */
@media (min-width: 1281px) {
  .events-grid { grid-template-columns: repeat(4, 1fr); }
  .footer-grid { grid-template-columns: 2fr 1fr 1.5fr 1fr; }
}

/* ============================================================
   DESKTOP (993px – 1280px)
   ============================================================ */
@media (max-width: 1280px) {
  .nav-inner { padding: 16px 28px; }
  .hero-content { gap: 44px; padding: 120px 32px 80px; }
  .hero-image-frame { width: 360px; height: 360px; }
  .hero-image-glow { width: 380px; height: 380px; }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1.5fr 1fr; gap: 36px; }
  .events-grid { grid-template-columns: repeat(3, 1fr); }
  .contact-grid { gap: 40px; }
}

/* ============================================================
   TABLET (768px – 992px)
   ============================================================ */
@media (max-width: 992px) {
  /* Navbar */
  .nav-links, .lang-switcher { display: none; }
  .hamburger { display: flex; }

  /* Hero */
  .hero-content {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 108px 28px 64px;
    gap: 52px;
  }
  .hero-image-wrap { order: -1; }
  .hero-image-frame { width: 300px; height: 300px; }
  .hero-image-glow { width: 320px; height: 320px; }
  .hero-image-wrap::after { inset: -36px; }
  .hero-desc { max-width: 100%; margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .hero-stats { justify-content: center; }

  /* Sections */
  .section { padding: 72px 0; }

  /* About sections */
  .about-row,
  .about-row.reverse {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .about-content { order: 2; text-align: center; }
  .about-image { order: 1; }
  .about-content h2 { font-size: 2.2rem; text-align: center; }
  .about-content .section-badge { display: inline-block; }

  /* Events */
  .events-grid { grid-template-columns: repeat(2, 1fr); }
  .events-page-grid { grid-template-columns: repeat(2, 1fr); }

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

  /* Video */
  .video-grid { grid-template-columns: repeat(2, 1fr); }

  /* Contact */
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-brand { grid-column: 1 / -1; }

  /* Testimonials */
  .testimonial-card { padding: 36px 28px; }

  /* Admin */
  .admin-sidebar { width: 220px; }
  .admin-main { margin-left: 220px; }
  .stat-cards { grid-template-columns: repeat(3, 1fr); }
  .form-row { grid-template-columns: 1fr; }

  /* Lightbox nav */
  .lightbox-prev { left: -44px; }
  .lightbox-next { right: -44px; }
}

/* ============================================================
   MOBILE LARGE (576px – 767px)
   ============================================================ */
@media (max-width: 767px) {
  /* Base */
  .section { padding: 60px 0; }
  .container { padding: 0 18px; }

  /* Typography */
  .section-title { font-size: 1.8rem; }
  .section-subtitle { font-size: 0.95rem; margin-bottom: 2.5rem; }

  /* Hero */
  .hero-image-frame { width: 240px; height: 240px; }
  .hero-image-glow { width: 260px; height: 260px; }
  .hero-image-wrap::after { inset: -28px; }
  .hero-stats { flex-wrap: wrap; gap: 24px; justify-content: center; }
  .stat-num { font-size: 1.6rem; }

  /* Events — 1 card per row */
  .events-grid { grid-template-columns: 1fr; }
  .events-page-grid { grid-template-columns: 1fr; }

  /* Gallery */
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .gallery-full-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  /* Video */
  .video-grid { grid-template-columns: 1fr; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-brand { grid-column: auto; }

  /* About */
  .about-biography,
  .spiritual-journey,
  .guruji-quote { padding: 72px 0; }
  .about-content h2 { font-size: 1.8rem; }
  .about-content p { font-size: 1rem; }
  .section-header h2 { font-size: 1.8rem; }

  /* Spiritual card */
  .spiritual-image { height: 240px; }
  .spiritual-content { padding: 28px 24px; }
  .spiritual-content p { font-size: 1rem; }

  /* Quote */
  .quote-box p { font-size: 1.3rem; }

  /* Admin */
  .stat-cards { grid-template-columns: 1fr; }
  .admin-sidebar { transform: translateX(-100%); transition: transform 0.3s; }
  .admin-sidebar.open { transform: translateX(0); }
  .admin-main { margin-left: 0; }
  .admin-content { padding: 20px 16px; }

  /* Contact Form */
  .contact-form-wrap { padding: 28px 20px; }

  /* Login */
  .login-card { padding: 36px 24px; }

  /* Lightbox nav */
  .lightbox-prev { left: -32px; }
  .lightbox-next { right: -32px; }

  /* Buttons */
  .btn { padding: 13px 28px; }
}

/* ============================================================
   MOBILE SMALL (< 576px)
   ============================================================ */
@media (max-width: 575px) {
  /* Gallery — 1 col */
  .gallery-full-grid { grid-template-columns: 1fr; }

  /* Page Hero */
  .page-hero { padding: 120px 0 60px; }
  .page-hero h1 { font-size: 1.8rem; }

  /* Buttons */
  .btn { padding: 12px 22px; font-size: 0.82rem; }

  /* Nav logo text — hide on very small */
  .nav-logo-text { display: none; }

  /* Hero logo overlay */
  .hero-logo-overlay { display: none; }

  /* Hero actions */
  .hero-actions { flex-direction: column; align-items: center; }

  /* About content */
  .about-content h2 { font-size: 1.6rem; }

  /* Quote */
  .quote-box p { font-size: 1.15rem; }
  .quote-box { padding: 0 12px; }

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

  /* Admin table */
  .table-responsive { overflow-x: auto; }
  .data-table { min-width: 600px; }

  /* Footer bottom */
  .footer-bottom { font-size: 0.78rem; }

  /* Meaning box */
  .meaning-box { padding: 16px; }

  /* Lightbox nav */
  .lightbox-prev { left: 4px; }
  .lightbox-next { right: 4px; }

  /* Events heading */
  .events-heading { font-size: 1.6rem; }
}

/* ============================================================
   EXTRA SMALL (< 380px)
   ============================================================ */
@media (max-width: 380px) {
  .hero-image-frame { width: 200px; height: 200px; }
  .hero-image-glow { width: 220px; height: 220px; }
  .hero-title { font-size: 1.6rem; }
  .stat-num { font-size: 1.4rem; }
  .section-title { font-size: 1.5rem; }
}

/* ============================================================
   EXTRA LARGE (> 1400px)
   ============================================================ */
@media (min-width: 1400px) {
  .hero-content { padding: 130px 80px 90px; gap: 80px; }
  .hero-image-frame { width: 480px; height: 480px; }
  .about-row { gap: 100px; }
  .about-content h2 { font-size: 3.2rem; }
  .quote-box { max-width: 1000px; }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  #navbar, footer, .hamburger, .mobile-nav { display: none !important; }
  .page-hero { padding-top: 40px; }
  .fade-up { opacity: 1 !important; transform: none !important; }
}

/* ===================================
   MOBILE HERO IMAGE
=================================== */

.mobile-guruji-image{
    display:none;
}

@media (max-width:768px){

.mobile-guruji-image{
    display:flex;
    justify-content:center;
    margin:20px auto 25px;
}

.mobile-guruji-image img{
    width:220px;
    max-width:85%;
    height:auto;

    border-radius:24px;

    box-shadow:
    0 15px 40px rgba(0,0,0,.18);

    border:4px solid #F5E6CC;

    background:#fff;
}

.hero-image-wrap{
    display:none;
}

.hero-text{
    text-align:center;
    width:100%;
}

}

/* =====================================
   MOBILE HERO BACKGROUND
===================================== */

@media (max-width:768px){

.hero-bg{

    background-image:
    url('../assets/background-image-mobile.jpeg');

    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
}

.hero-image-wrap{
    display:none;
}

}