/* ============================================
   ART BY REMYA — Responsive Styles
   Mobile-first media queries
   ============================================ */

/* ---------- Max 1024px (Tablets) ---------- */
@media (max-width: 1024px) {
  :root {
    --header-height: 70px;
  }

  /* Header */
  .header__nav-links {
    display: none;
  }

  .header__nav .btn {
    display: none;
  }

  .header__menu-toggle {
    display: flex;
  }

  /* About */
  .about__grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .about__image-wrapper {
    max-width: 500px;
    margin: 0 auto;
  }

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

  .about__highlights {
    justify-items: center;
  }

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

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

  .pricing-card:last-child {
    grid-column: 1 / -1;
    max-width: 400px;
    justify-self: center;
  }

  /* Collections */
  .collections__grid {
    grid-template-columns: 1fr;
  }

  /* Portfolio */
  .portfolio__masonry {
    columns: 2;
  }

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

  .transformation__grid .transform-card:last-child {
    grid-column: 1 / -1;
    max-width: 400px;
    justify-self: center;
  }

  /* Booking */
  .booking__grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .booking__info {
    text-align: center;
  }

  .booking__whatsapp {
    justify-content: center;
  }

  /* Contact */
  .contact__grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .contact__google-actions {
    justify-content: center;
  }

  /* Instagram */
  .instagram__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
  }

  /* Footer */
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
  }

  .footer__bottom {
    flex-direction: column;
    gap: var(--space-sm);
    text-align: center;
  }
}

/* ---------- Max 768px (Large Phones / Small Tablets) ---------- */
@media (max-width: 768px) {
  :root {
    --section-padding: clamp(3rem, 6vw, 5rem);
  }

  /* Hero */
  .hero__actions {
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
  }

  .hero__actions .btn {
    width: 100%;
    max-width: 280px;
  }

  /* Services */
  .services__grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Pricing */
  .pricing__grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }

  .pricing-card:last-child {
    grid-column: auto;
    max-width: none;
  }

  /* Portfolio Filters */
  .portfolio__filters {
    gap: 0.5rem;
  }

  .portfolio__filter {
    padding: 0.5rem 1rem;
    font-size: 0.65rem;
  }

  /* Portfolio */
  .portfolio__masonry {
    columns: 2;
    column-gap: var(--space-sm);
  }

  .gallery-item {
    margin-bottom: var(--space-sm);
  }

  /* Transformation */
  .transformation__grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }

  .transformation__grid .transform-card:last-child {
    grid-column: auto;
    max-width: none;
  }

  /* Timeline */
  .process__timeline::before {
    left: 20px;
  }

  .process__step-number {
    width: 42px;
    height: 42px;
    min-width: 42px;
    font-size: var(--fs-body);
  }

  .process__step {
    gap: var(--space-md);
  }

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

  /* Instagram */
  .instagram__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Footer */
  .footer__grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer__brand-text {
    max-width: 100%;
  }

  .footer__social {
    justify-content: center;
  }

  .footer__links {
    align-items: center;
  }

  /* WhatsApp Float */
  .whatsapp-float {
    bottom: 1.5rem;
    right: 1.5rem;
  }

  .whatsapp-float__btn {
    width: 52px;
    height: 52px;
  }

  .whatsapp-float__btn svg {
    width: 26px;
    height: 26px;
  }

  .whatsapp-float__tooltip {
    display: none;
  }

  /* Section labels */
  .section-label {
    justify-content: center;
  }

  /* Page Header */
  .page-header {
    min-height: 30vh;
  }

  /* Lightbox */
  .lightbox__nav {
    width: 40px;
    height: 40px;
  }

  .lightbox__nav--prev { left: 0.75rem; }
  .lightbox__nav--next { right: 0.75rem; }
}

/* ---------- Max 480px (Small Phones) ---------- */
@media (max-width: 480px) {
  :root {
    --section-padding: clamp(2.5rem, 5vw, 4rem);
  }

  /* About highlights */
  .about__highlights {
    grid-template-columns: 1fr;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Portfolio */
  .portfolio__masonry {
    columns: 1;
  }

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

  /* Testimonial */
  .testimonial-card__inner {
    padding: var(--space-lg);
  }

  .testimonial-card__inner::before {
    font-size: 3rem;
    top: 5px;
    left: 15px;
  }

  /* Booking Form */
  .booking__form {
    padding: var(--space-lg);
  }

  /* Mobile nav */
  .mobile-nav {
    max-width: 100%;
  }

  /* Opening animation */
  .opening__mandala {
    width: 100px;
    height: 100px;
  }

  /* Button sizing */
  .btn {
    padding: 0.85rem 2rem;
    font-size: 0.7rem;
  }

  /* Contact Google actions */
  .contact__google-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .contact__google-actions .btn {
    width: 100%;
  }
}

/* ---------- Min 1280px (Large Desktops) ---------- */
@media (min-width: 1280px) {
  .about__grid {
    gap: var(--space-3xl);
  }

  .services__grid {
    gap: var(--space-xl);
  }

  .booking__grid {
    gap: 6rem;
  }

  .contact__grid {
    gap: 6rem;
  }
}

/* ---------- Hover-capable devices only ---------- */
@media (hover: hover) {
  .service-card:hover {
    transform: translateY(-8px);
  }

  .gallery-item:hover img {
    transform: scale(1.05);
  }
}

/* ---------- Touch devices ---------- */
@media (hover: none) {
  .service-card:active {
    transform: translateY(-4px);
    box-shadow: var(--shadow-gold);
  }

  .gallery-item__overlay {
    opacity: 0.8;
    background: rgba(43, 33, 24, 0.3);
  }

  .instagram__item-overlay {
    display: none;
  }
}