/* ==========================================================================
   Vrinda Packing House — Responsive Rules
   ========================================================================== */

/* ---------- 1200px ---------- */
@media (max-width: 1300px) {
  .main-nav { display: none; }
  .hamburger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--dark);
  }
  .header-actions .desktop-only { display: none; }
}

@media (max-width: 1200px) {
  .main-nav { gap: 20px; }
  .main-nav a { font-size: 12.5px; }
  .category-card img { height: 220px; }
  .product-track { grid-auto-columns: calc((100% - 48px) / 4); }
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 28px; }
}

/* ---------- 992px : tablet / nav breakpoint ---------- */
@media (max-width: 992px) {
  :root { --section-pad: 64px; }

  .main-nav { display: none; }
  .hamburger-btn {
    display: flex;
    align-items: center; justify-content: center;
    width: 40px; height: 40px;
    color: var(--dark);
  }
  .header-actions .desktop-only { display: none; }

  .hero, .hero.carousel, .hero .carousel-inner, .hero .carousel-item { height: 540px; min-height: 540px; }
  .hero-slide-content { width: calc(100% - 52px); padding: 48px 0; text-align: left; }
  .hero-slide-media { min-height: 540px; }
  .hero-slide-media img { min-height: 540px; object-position: 62% center; }
  .hero-nav { display: none; }

  .about-grid { grid-template-columns: 1fr; gap: 34px; }
  .about-media { order: 1; }
  .about-content { order: 2; }
  .about-content .btn { width: 100%; justify-content: center; }
  .about-content h2, .about-content p.about-copy { max-width: 100%; }

  .product-track { grid-auto-columns: calc(50% - 9px); gap: 18px; }

  .wedding-feature {
    grid-template-columns: 46% 54%;
    min-height: 430px;
    background-image: url("../images/wedding-special-banner-v1.jpg");
    background-size: cover;
    background-position: center;
    background-color: #f8e3e1;
  }
  .wedding-feature::after { display: block; }
  .wedding-feature-media {
    order: 1;
    min-height: 430px;
    background: none;
  }
  .wedding-feature-content {
    order: 2;
    min-width: 0;
    padding: 38px 28px 38px 34px;
    background: transparent;
  }
  .wedding-feature-content h2, .wedding-feature-content p.lead { max-width: 100%; }
  .service-points { margin-left: 24px; }

  .occasion-grid { grid-template-columns: repeat(2, 1fr); gap: 26px; }
  .why-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px 24px; padding: 56px 0 30px; }

  .final-cta-actions .btn { flex: 1 1 auto; }
}

/* ---------- 768px ---------- */
@media (max-width: 768px) {
  :root {
    --section-pad: 55px;
    --section-pad-sm: 55px;
    --inner-page-hero-height: 300px;
    --inner-page-hero-padding-y: 42px;
  }

  .container { padding: 0 20px; }

  .announce-bar .container { gap: 10px; font-size: 11px; }
  .announce-bar .announce-call span.full { display: none; }

  .site-header .container { height: 76px; }
  .brand-name { font-size: 21px; }
  .brand-tag { font-size: 9px; }

  .hero, .hero.carousel, .hero .carousel-inner, .hero .carousel-item { height: 560px; min-height: 560px; }
  .hero-slide-content { width: calc(100% - 40px); padding: 42px 0 58px; }
  .hero-slide-content h1 { font-size: 38px; max-width: 390px; }
  .hero-slide-content p { max-width: 350px; color: #625656; }
  .hero-slide-media::after { background: linear-gradient(90deg, rgba(255,249,244,.98) 0%, rgba(255,249,244,.92) 56%, rgba(255,249,244,.56) 82%, rgba(255,249,244,.26) 100%); }
  .hero-actions { width: 100%; }
  .hero-actions .btn { flex: 0 1 auto; }

  .section-head { margin-bottom: 34px; }

  .category-card img { height: 180px; }
  .category-card-label { padding: 16px; }
  .category-card-label h3 { font-size: 17px; }

  .product-track { grid-auto-columns: min(78vw, 320px); }

  .wedding-feature { min-height: 400px; }
  .wedding-feature-media { min-height: 400px; }
  .wedding-feature-content { padding: 32px 20px 32px 28px; }
  .wedding-feature-content h2 { font-size: clamp(30px, 4.8vw, 38px); }
  .service-points { margin-left: 20px; }

  .occasion-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .occasion-copy { padding: 19px 18px 21px; }
  .why-section { padding: 58px 0 62px; }
  .why-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
  .why-item { min-height: 190px; padding: 27px 24px; }

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

  .gallery-lightbox { grid-template-columns: 1fr; gap: 12px; padding: 62px 18px 20px; }
  .lightbox-figure { max-width: 100%; max-height: calc(100vh - 156px); }
  .lightbox-figure img { max-height: calc(100vh - 190px); }
  .lightbox-figure figcaption { font-size: 20px; }
  .lightbox-nav { position: absolute; bottom: 28px; }
  .lightbox-prev { left: calc(50% - 58px); }
  .lightbox-next { right: calc(50% - 58px); }

  .testimonials-heading { align-items: flex-start; flex-direction: column; gap: 22px; }
  .testimonials-heading .write-review-btn { width: 100%; }
  .testimonial-card > p { min-height: 0; }

  .final-cta-actions { flex-direction: column; align-items: stretch; }

  .footer-grid { grid-template-columns: 1fr; padding: 46px 0 24px; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }

  .modal-box { padding: 30px 22px; }
  .form-grid-2 { grid-template-columns: 1fr; gap: 0; }

  .whatsapp-float span { display: none; }
  .whatsapp-float { padding: 14px; border-radius: 50%; }
}

/* ---------- 576px ---------- */
@media (max-width: 576px) {
  :root {
    --inner-page-hero-height: 270px;
    --inner-page-hero-padding-y: 34px;
  }

  .hero, .hero.carousel, .hero .carousel-inner, .hero .carousel-item { height: 520px; min-height: 520px; }
  .hero-slide-media { min-height: 520px; }
  .hero-slide-media img { min-height: 520px; object-position: 68% center; }
  .hero-slide-content { padding: 24px 0 32px; justify-content: center; }
  .hero-slide-content h1 { font-size: 32px; max-width: 330px; }
  .hero-slide-content p { font-size: 14px; max-width: 300px; }
  .hero-actions { margin-top: 20px; gap: 10px; }
  .hero-actions .btn { width: 100%; }
  .hero .carousel-control-prev, .hero .carousel-control-next { display: none; }

  .wedding-feature {
    grid-template-columns: 43% 57%;
    min-height: 390px;
    background-image: none;
  }
  .wedding-feature-media {
    min-height: 390px;
    background: url("../images/wedding-special-banner-v1.jpg") 28% center / cover no-repeat;
  }
  .wedding-feature-content {
    padding: 24px 10px 24px 16px;
    background: linear-gradient(135deg, #fbe9e7 0%, #f8dede 100%);
  }
  .wedding-feature-content .eyebrow { font-size: 8px; letter-spacing: 2px; }
  .wedding-feature-content h2 { margin-top: 7px; font-size: 21px; line-height: 1.02; }
  .wedding-feature-content p.lead { margin-top: 10px; font-size: 9.5px; line-height: 1.4; }
  .service-points { margin-top: 15px; margin-left: 7px; gap: 9px; }
  .service-points li { gap: 8px; }
  .service-points li > i { width: 27px; height: 27px; flex-basis: 27px; font-size: 12px; }
  .service-points strong { font-size: 10.5px; line-height: 1.2; }
  .service-points small { font-size: 8.5px; line-height: 1.3; }

  .about-content h2 { max-width: none; white-space: nowrap; font-size: clamp(18px, 5.8vw, 25px); }

  .occasion-grid { grid-template-columns: 1fr; gap: 18px; }
  .occasion-media { aspect-ratio: 16/9; }

  .why-grid { grid-template-columns: 1fr; gap: 16px; }
  .why-item { min-height: 0; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-actions { margin-top: 26px; }
  .lightbox-close { top: 14px; right: 14px; }

  .section-head h2 { font-size: 28px; }
}

/* ---------- 425px ---------- */
@media (max-width: 425px) {
  .category-card img { height: 160px; }
  .occasion-grid { grid-template-columns: 1fr; gap: 16px; }
  .occasion-item h3 { font-size: 24px; }
}

/* ---------- 375px / 320px small phones ---------- */
@media (max-width: 375px) {
  .container { padding: 0 16px; }
  .brand-name { font-size: 19px; }
  .btn { padding: 13px 22px; font-size: 12.5px; }
}