/* ==========================================================================
   Radiance Events - Master Responsive Stylesheet
   Company: Radiance India Industries Pvt. Ltd.
   Optimized for: All Screen Sizes (Mobile 320px+, Tablets, Laptops, Desktops)
   ========================================================================== */

/* ==========================================================================
   1. GLOBAL MOBILE RESETS & OVERFLOW SAFEGUARDS
   ========================================================================== */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
  position: relative;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img, picture, svg, video, canvas {
  max-width: 100%;
  height: auto;
}

iframe {
  max-width: 100%;
}

/* Touch Device Ergonomics */
button, input, select, textarea, a {
  -webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   2. LARGE SCREENS & LAPTOPS (max-width: 1200px)
   ========================================================================== */
@media (max-width: 1200px) {
  .container {
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .desktop-nav {
    gap: 20px;
  }

  .nav-list {
    gap: 18px;
  }

  .nav-link {
    font-size: 0.875rem;
  }

  .footer-grid {
    grid-template-columns: 1.2fr 1fr 1.2fr;
    gap: 32px;
  }

  .footer-contact {
    grid-column: span 3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 10px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
}

/* ==========================================================================
   3. TABLET & MEDIUM DEVICES (max-width: 991px)
   ========================================================================== */
@media (max-width: 991px) {
  /* --- Header & Navigation --- */
  .header-topbar {
    display: none !important; /* Hide announcement bar on tablets/mobile for clean UX */
  }

  .header-navbar {
    padding: 8px 0;
  }

  .desktop-nav,
  .header-cta-group .btn {
    display: none !important;
  }

  .mobile-menu-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 8px;
    background: rgba(225, 0, 122, 0.08);
    border: 1px solid rgba(225, 0, 122, 0.2);
  }

  .brand-logo-img {
    height: 50px;
  }

  .site-header.scrolled .brand-logo-img {
    height: 44px;
  }

  /* --- Section Typography & Spacing --- */
  .section-padding {
    padding: 65px 0;
  }

  .section-padding-sm {
    padding: 45px 0;
  }

  .section-header {
    margin-bottom: 36px;
  }

  .section-title {
    font-size: 2.1rem;
  }

  .section-badge {
    font-size: 1.6rem;
  }

  /* --- Hero Sections --- */
  .home-hero {
    min-height: auto;
    padding: 80px 0 60px;
  }

  .page-hero {
    min-height: auto;
    padding: 80px 0 50px;
  }

  .page-hero-title {
    font-size: 2.2rem;
  }

  .home-hero-title {
    font-size: 2.1rem;
    line-height: 1.22;
  }

  .home-hero-subtitle {
    font-size: 1.5rem;
  }

  .page-hero-subtitle {
    font-size: 1.6rem;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
    text-align: center;
  }

  .hero-content {
    margin: 0 auto;
    max-width: 100%;
  }

  .hero-cta-group {
    justify-content: center;
  }

  .hero-img-stack {
    margin-top: 20px;
  }

  .hero-main-card {
    max-width: 380px;
    margin: 0 auto;
  }

  .hero-badge-float {
    left: 50%;
    transform: translateX(-50%);
    bottom: -16px;
    padding: 12px 20px;
    gap: 18px;
  }

  .hero-stat-col {
    align-items: center;
    text-align: center;
  }

  /* --- Grids & Components Stacking --- */
  .home-about-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .home-about-floating-card {
    position: static;
    margin-top: 16px;
    max-width: 100%;
  }

  .stats-counter-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

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

  .stat-counter-card {
    padding: 18px 14px;
  }

  .stat-counter-num {
    font-size: 2.2rem;
  }

  .home-services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .venues-showcase-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .why-choose-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .process-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

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

  .budget-calc-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .home-booking-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

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

  .footer-contact {
    grid-column: span 2;
    grid-template-columns: 1fr 1fr;
  }

  /* --- Lightbox --- */
  .lightbox-prev { left: 10px; }
  .lightbox-next { right: 10px; }
  .lightbox-close { top: 10px; right: 10px; }
}

/* ==========================================================================
   4. MOBILE SMARTPHONES (max-width: 767px)
   ========================================================================== */
@media (max-width: 767px) {
  /* --- Layout & Containers --- */
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .container-fluid {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* --- Typography Scaling --- */
  h1, .page-hero-title {
    font-size: 1.85rem;
    line-height: 1.25;
  }

  .home-hero-title {
    font-size: 1.7rem;
    line-height: 1.25;
    margin-bottom: 14px;
  }

  .home-hero-subtitle {
    font-size: 1.3rem;
    margin-bottom: 6px;
  }

  h2, .section-title {
    font-size: 1.65rem;
    line-height: 1.28;
  }

  h3 {
    font-size: 1.25rem;
  }

  .page-hero-subtitle, .section-badge {
    font-size: 1.4rem;
  }

  .page-hero-desc, .section-desc, .home-hero-desc {
    font-size: 0.9375rem;
    line-height: 1.65;
  }

  .section-padding {
    padding: 50px 0;
  }

  .section-padding-sm {
    padding: 35px 0;
  }

  .section-header {
    margin-bottom: 28px;
  }

  /* --- Header & Brand Logo --- */
  .header-navbar {
    padding: 6px 0;
  }

  .brand-logo-img {
    height: 43px;
  }

  .site-header.scrolled .brand-logo-img {
    height: 38px;
  }

  /* --- Compact & Sleek Buttons for Mobile --- */
  .btn {
    padding: 9px 16px;
    font-size: 0.78125rem;
    min-height: 44px;
    letter-spacing: 0.02em;
    gap: 8px;
  }

  .btn svg {
    width: 16px;
    height: 16px;
  }

  .btn-sm {
    padding: 6px 14px;
    font-size: 0.75rem;
    min-height: 32px;
  }

  /* --- Hero Section Mobile --- */
  .home-hero {
    padding: 65px 0 45px;
  }

  .page-hero {
    padding: 65px 0 40px;
  }

  .page-hero-breadcrumbs {
    font-size: 0.75rem;
    padding: 5px 12px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .hero-main-card {
    max-width: 100%;
    aspect-ratio: 16 / 11;
  }

  .hero-badge-float {
    position: static;
    transform: none;
    margin: 16px auto 0;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    padding: 12px 18px;
    gap: 16px;
    border-radius: var(--radius-md);
  }

  .hero-stat-col {
    align-items: center;
    text-align: center;
  }

  .hero-stat-num {
    font-size: 1.4rem;
  }

  .hero-stat-label {
    font-size: 0.75rem;
  }

  .hero-stat-divider {
    height: 26px;
  }

  .hero-cta-group {
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }

  .hero-cta-group .btn {
    width: 100%;
    padding: 9px 15px;
    font-size: 0.78125rem;
    min-height: 44px;
  }

  /* --- Featured In Authority Bar --- */
  .stats-counter-section {
    padding: 28px 0;
  }

  .stats-counter-grid {
    grid-template-columns: repeat(2, 1fr) !important; /* 2x2 Grid on Mobile */
    gap: 12px;
  }

  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .team-card-content {
    padding: 15px 10px;
  }

  .team-card-content h3 {
    font-size: 1rem;
  }

  .team-photo-placeholder span {
    padding: 7px 9px;
    font-size: 0.625rem;
  }

  .stat-counter-card {
    padding: 16px 10px;
    border-radius: var(--radius-md);
  }

  .stat-counter-num {
    font-size: 1.8rem;
    margin-bottom: 3px;
  }

  .stat-counter-label {
    font-size: 0.8125rem;
    line-height: 1.3;
  }

  .featured-trust-section {
    padding: 24px 0;
  }

  .featured-trust-wrapper {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }

  .featured-trust-logos {
    justify-content: center;
    gap: 10px;
  }

  .trust-brand-pill {
    font-size: 0.8125rem;
    padding: 6px 14px;
  }

  /* --- About Section Features --- */
  .about-feature-list {
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 20px 0;
  }

  /* --- 1-Column Responsive Grids on Mobile --- */
  .home-services-grid,
  .venues-showcase-grid,
  .testimonials-grid,
  .why-choose-grid,
  .process-grid,
  .gallery-grid,
  .related-posts-grid {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }

  .service-card-body {
    padding: 18px;
  }

  .service-card-title {
    font-size: 1.15rem;
  }

  .why-card {
    padding: 24px 20px;
  }

  .process-step-card {
    padding: 24px 18px;
  }

  .venue-card-body {
    padding: 16px 18px;
  }

  .testimonial-card-home {
    padding: 24px 18px;
  }

  /* --- Interactive Budget Estimator --- */
  .budget-calculator-box {
    padding: 28px 16px;
    border-radius: var(--radius-lg);
  }

  .calc-options-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .calc-btn-option {
    padding: 8px 10px;
    font-size: 0.8125rem;
    text-align: center;
  }

  .calc-result-card {
    padding: 24px 16px;
  }

  .calc-result-num {
    font-size: 2.1rem;
  }

  /* --- VIP Booking Banner & Forms --- */
  .home-booking-banner {
    padding: 30px 16px;
    border-radius: var(--radius-lg);
  }

  .quick-form-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .quick-form-input,
  .quick-form-select {
    font-size: 16px !important; /* Prevents auto-zoom in iOS Safari */
    padding: 12px 14px;
    min-height: 48px;
  }

  /* --- FAQs Accordion --- */
  .faq-summary {
    padding: 16px 18px;
    font-size: 1rem;
  }

  .faq-content {
    padding: 0 18px 18px;
    font-size: 0.875rem;
  }

  /* --- Gallery Filter Buttons --- */
  .gallery-filter-nav {
    gap: 8px;
    margin-bottom: 28px;
  }

  .gallery-filter-btn {
    padding: 7px 14px;
    font-size: 0.8125rem;
  }

  /* --- Lightbox Modal Mobile --- */
  .lightbox-modal {
    padding: 12px;
  }

  .lightbox-img-box {
    max-height: 60vh;
  }

  .lightbox-img-box img {
    max-height: 60vh;
  }

  .lightbox-btn {
    width: 40px;
    height: 40px;
  }

  .lightbox-prev { left: 4px; }
  .lightbox-next { right: 4px; }
  .lightbox-close { top: 6px; right: 6px; }

  .lightbox-caption {
    font-size: 0.95rem;
  }

  /* --- Blog Single Article Mobile --- */
  .blog-single-container {
    padding: 30px 16px 60px;
  }

  .blog-meta-bar {
    flex-wrap: wrap;
    gap: 10px 16px;
    justify-content: flex-start;
    font-size: 0.8125rem;
  }

  .blog-featured-img {
    margin-bottom: 24px;
    max-height: 320px;
    border-radius: var(--radius-md);
  }

  .blog-article-content {
    font-size: 1rem;
    line-height: 1.7;
  }

  .blog-article-content h2 {
    font-size: 1.4rem;
    margin-top: 28px;
  }

  .blog-article-content h3 {
    font-size: 1.2rem;
    margin-top: 24px;
  }

  .blog-article-content ul,
  .blog-article-content ol {
    padding-left: 20px;
  }

  .blog-cta-box {
    margin-top: 40px;
    padding: 28px 16px;
    border-radius: var(--radius-md);
  }

  /* Make any table in blog or pages horizontally scrollable */
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
  }

  /* --- Footer Mobile --- */
  .site-footer {
    padding-top: 50px;
  }

  .footer-top {
    padding-bottom: 40px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-contact {
    grid-column: span 1;
    grid-template-columns: 1fr;
    padding-top: 0;
    border-top: none;
    margin-top: 0;
  }

  .footer-logo-img {
    height: 60px;
  }

  .footer-bottom .container {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }

  .footer-bottom-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 14px;
  }

  /* --- Floating Actions Mobile --- */
  .floating-actions {
    bottom: max(16px, env(safe-area-inset-bottom));
    right: 14px;
    gap: 10px;
  }

  .float-btn {
    width: 46px;
    height: 46px;
  }

  .float-whatsapp svg {
    width: 24px;
    height: 24px;
  }

  .float-call svg {
    width: 18px;
    height: 18px;
  }

  .float-scroll-top svg {
    width: 16px;
    height: 16px;
  }

  /* --- Mobile Drawer Offcanvas Styling --- */
  .mobile-drawer {
    width: min(320px, 85vw);
    height: 100vh;
    height: 100dvh;
    padding: 20px 18px;
  }

  .mobile-drawer-header {
    padding-bottom: 12px;
  }

  .mobile-nav-list {
    margin-top: 14px;
    gap: 8px;
  }

  .mobile-nav-link {
    font-size: 1rem;
    padding: 8px 0;
  }

  .mobile-dropdown-link {
    font-size: 0.875rem;
    padding: 4px 0;
  }

  .mobile-drawer-footer {
    margin-top: 20px;
    padding-top: 16px;
  }
}

/* ==========================================================================
   5. EXTRA SMALL SMARTPHONES (max-width: 400px - iPhone SE, Android Mini)
   ========================================================================== */
@media (max-width: 400px) {
  .container {
    padding-left: 12px;
    padding-right: 12px;
  }

  h1, .page-hero-title {
    font-size: 1.55rem;
  }

  .home-hero-title {
    font-size: 1.45rem;
    line-height: 1.25;
  }

  .home-hero-subtitle {
    font-size: 1.15rem;
  }

  h2, .section-title {
    font-size: 1.4rem;
  }

  .page-hero-subtitle, .section-badge {
    font-size: 1.25rem;
  }

  .brand-logo-img {
    height: 38px;
  }

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

  .calc-result-num {
    font-size: 1.8rem;
  }

  .btn {
    padding: 7px 12px;
    font-size: 0.75rem;
    min-height: 44px;
    gap: 6px;
  }

  .btn svg {
    width: 14px;
    height: 14px;
  }

  .hero-cta-group .btn {
    padding: 7px 12px;
    font-size: 0.75rem;
    min-height: 44px;
  }

  .stats-counter-grid {
    grid-template-columns: repeat(2, 1fr) !important; /* Keep 2x2 on small mobile */
    gap: 8px;
  }

  .stat-counter-card {
    padding: 12px 6px;
  }

  .stat-counter-num {
    font-size: 1.5rem;
  }

  .stat-counter-label {
    font-size: 0.72rem;
  }

  .home-booking-banner,
  .budget-calculator-box {
    padding: 22px 12px;
  }

  .hero-badge-float {
    width: 100%;
    justify-content: space-around;
    padding: 10px 12px;
    gap: 10px;
  }

  .hero-stat-num {
    font-size: 1.25rem;
  }

  .hero-stat-label {
    font-size: 0.7rem;
  }

  .hero-stat-divider {
    height: 24px;
  }

  .gallery-filter-btn {
    width: 100%;
    text-align: center;
  }
}