/* ==========================================================================
   Responsive Styles — Raj Laxmi Murti Art's
   Mobile First Approach
   ========================================================================== */

/* ---- Small Mobile (360px+) ---- */
@media (min-width: 360px) {
  .hero__features {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Mobile (576px+) ---- */
@media (min-width: 576px) {
  :root {
    --section-padding-y: 4rem;
    --container-padding: 2rem;
  }

  .hero__title {
    font-size: var(--font-size-4xl);
  }

  .hero__subtitle {
    font-size: var(--font-size-md);
  }

  .hero__features {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }

  .hero__feature-text {
    font-size: var(--font-size-sm);
  }

  .trust-bar__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }

  .collection__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }

  .join-cta__inner {
    flex-direction: row;
    text-align: left;
  }

  .footer__bottom-inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* ---- Small Tablet (768px+) ---- */
@media (min-width: 768px) {
  :root {
    --header-height: 80px;
    --section-padding-y: 5rem;
  }

  .hero {
    padding-top: var(--header-height);
  }

  .hero__inner {
    flex-direction: row;
    align-items: center;
    min-height: calc(100vh - var(--header-height));
    padding-block: var(--space-16);
    gap: var(--space-12);
  }

  .hero__content {
    flex: 1.1;
  }

  .hero__slider {
    flex: 0.9;
  }

  .hero__title {
    font-size: var(--font-size-4xl);
  }

  .hero__features {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
  }

  .hero__feature {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-2);
  }

  .trust-bar__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
  }

  .trust-bar__item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .collection__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .about-why__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: start;
  }

  .about {
    flex-direction: column;
  }

  .why-choose__box {
    padding: var(--space-12) var(--space-10);
    min-height: 450px;
  }

  .why-choose__image-wrap {
    width: 50%;
    max-width: 320px;
    right: -10px;
    bottom: -30px;
  }

  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-10);
  }

  .mobile-nav {
    top: var(--header-height);
  }
}

/* ---- Tablet (992px+) ---- */
@media (min-width: 992px) {
  .header__nav {
    display: block;
  }

  .header__contact {
    display: flex;
  }

  .header__toggle {
    display: none;
  }

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

  .section__title--decorated::before,
  .section__title--decorated::after {
    width: 345px;
  }

  .hero__title {
    font-size: var(--font-size-5xl);
  }

  .collection__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
  }

  .about-why__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  .about {
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
  }

  .about__image-wrap {
    flex: 1;
  }

  .about__content {
    flex: 1;
    padding: 0;
  }

  .why-choose__box {
    min-height: 480px;
    padding: var(--space-12) var(--space-10);
  }

  .why-choose__image-wrap {
    width: 48%;
    max-width: 350px;
    right: 0;
    bottom: -40px;
  }

  .join-cta__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-8);
  }

  .join-cta__content {
    text-align: left;
  }

  .footer__grid {
    grid-template-columns: 1.2fr 1fr 1fr 1.2fr;
    gap: var(--space-8);
  }
}

/* ---- Laptop (1200px+) ---- */
@media (min-width: 1200px) {
  :root {
    --container-max-width: 1320px;
    --container-padding: 2rem;
  }

  .hero__slides {
    max-width: 550px;
  }

  .hero__slider-nav {
    right: -20px;
  }

  .about__title,
  .why-choose__title {
    font-size: var(--font-size-3xl);
  }

  .join-cta__title {
    font-size: var(--font-size-2xl);
  }

  .why-choose__list {
    max-width: 420px;
  }

  .why-choose__text {
    font-size: var(--font-size-base);
  }
}

/* ---- Desktop (1400px+) ---- */
@media (min-width: 1400px) {
  :root {
    --container-max-width: 1400px;
    --section-padding-y: 6rem;
  }

  .hero__inner {
    gap: var(--space-16);
  }

  .hero__slides {
    max-width: 600px;
  }

  .collection__grid {
    gap: var(--space-8);
  }

  .about-why__grid {
    gap: var(--space-12);
  }

  .why-choose__image-wrap {
    max-width: 400px;
    right: 20px;
    bottom: -50px;
  }
}

/* ---- Mobile Collection Slider ---- */
@media (max-width: 575px) {
  .collection__grid--mobile-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-4);
    padding-bottom: var(--space-4);
    scrollbar-width: none;
  }

  .collection__grid--mobile-slider::-webkit-scrollbar {
    display: none;
  }

  .collection__grid--mobile-slider .collection__card {
    flex: 0 0 75%;
    scroll-snap-align: start;
  }
}

/* ---- Print Styles ---- */
@media print {
  .header,
  .back-to-top,
  .hero__scroll,
  .hero__slider-nav,
  .hero__dots,
  .mobile-nav {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }

  .hero {
    min-height: auto;
    padding-top: 0;
  }
}