/* ============================================
   RESPONSIVE BREAKPOINTS
   Unique Beauty Salon
   ============================================ */

/* ---------- Tablet Landscape (1024px) ---------- */
@media (max-width: 1024px) {
  .header__nav {
    gap: 1.5rem;
  }

  .hero__inner {
    grid-template-columns: 48% 52%;
    gap: 2rem;
  }

  .hero__image-secondary {
    width: 160px;
    height: 220px;
    left: -30px;
  }

  .hero__decorative-u {
    font-size: 16rem;
  }

  .services__grid {
    gap: 1rem;
  }

  .service-card {
    min-height: 320px;
  }

  .treatments__grid {
    gap: 1rem;
  }

  .footer__top {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
  }

  .footer__top > div:first-child {
    grid-column: 1 / -1;
  }
}

/* ---------- Tablet Portrait (768px) ---------- */
@media (max-width: 768px) {
  :root {
    --header-height: 68px;
  }

  /* Navigation */
  .header__nav {
    display: none;
  }

  .header__book {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

  /* Hero */
  .hero {
    min-height: auto;
    padding-top: calc(var(--header-height) + 2rem);
    padding-bottom: var(--space-3xl);
  }

  .hero__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .hero__content {
    order: 1;
    text-align: left;
  }

  .hero__media {
    order: 2;
  }

  .hero__image-main {
    height: 50vh;
    max-height: 500px;
  }

  .hero__image-secondary {
    width: 120px;
    height: 170px;
    left: auto;
    right: 1rem;
    bottom: -20px;
  }

  .hero__decorative-u {
    font-size: 10rem;
    top: -30px;
    right: -20px;
  }

  /* Trust Strip */
  .trust-strip__inner {
    flex-wrap: wrap;
    gap: 0;
  }

  .trust-strip__item {
    flex: 0 0 50%;
    padding: var(--space-md) var(--space-lg);
  }

  .trust-strip__item:nth-child(1)::after,
  .trust-strip__item:nth-child(3)::after {
    display: block;
  }

  .trust-strip__item:nth-child(2)::after {
    display: none;
  }

  .trust-strip__item:nth-child(3),
  .trust-strip__item:nth-child(4) {
    border-top: 1px solid var(--color-border);
    margin-top: 0;
    padding-top: var(--space-lg);
  }

  /* Introduction */
  .intro__inner {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .intro__image {
    height: 350px;
  }

  /* Services */
  .services__grid {
    grid-template-columns: 1fr 1fr;
  }

  .service-card--large {
    grid-column: span 2;
  }

  .service-card {
    min-height: 300px;
  }

  /* Treatments */
  .treatments__grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .treatment-card:nth-child(1),
  .treatment-card:nth-child(2),
  .treatment-card:nth-child(3),
  .treatment-card:nth-child(4),
  .treatment-card:nth-child(5),
  .treatment-card:nth-child(6) {
    grid-column: span 1;
    min-height: 280px;
  }

  .treatment-card:nth-child(4) {
    grid-column: span 2;
    min-height: 300px;
  }

  /* Why */
  .why__inner {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  /* Reviews */
  .reviews__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .reviews__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .reviews__rating {
    text-align: left;
  }

  /* Gallery Preview */
  .gallery-preview__grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }

  .gallery-item:nth-child(1),
  .gallery-item:nth-child(2),
  .gallery-item:nth-child(3),
  .gallery-item:nth-child(4),
  .gallery-item:nth-child(5),
  .gallery-item:nth-child(6) {
    grid-column: span 1;
    min-height: 250px;
  }

  .gallery-item:nth-child(1) {
    grid-column: span 2;
    min-height: 300px;
  }

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

  /* Location */
  .location__inner {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .location__map {
    height: 350px;
  }

  /* Footer */
  .footer__top {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .footer__top > div:first-child {
    grid-column: 1 / -1;
  }

  /* Services Page */
  .service-category__inner {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .service-category:nth-child(even) .service-category__inner {
    direction: ltr;
  }

  .service-category__image {
    height: 350px;
  }

  /* Gallery Page */
  .gallery-page__grid {
    grid-template-columns: 1fr 1fr;
  }

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

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

  .about-story__image {
    height: 380px;
  }

  .about-values__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* Feature */
  .feature {
    min-height: 60vh;
  }

  /* Floating WhatsApp - hidden on mobile (using sticky bar) */
  .floating-whatsapp {
    display: none;
  }

  /* Mobile Booking Bar */
  .mobile-booking-bar {
    display: block;
  }

  /* Add bottom padding for mobile booking bar */
  body {
    padding-bottom: 56px;
  }
}

/* ---------- Mobile (430px) ---------- */
@media (max-width: 430px) {
  .hero__image-main {
    height: 45vh;
    max-height: 400px;
  }

  .hero__image-secondary {
    display: none;
  }

  .hero__decorative-u {
    font-size: 8rem;
  }

  .hero__buttons {
    flex-direction: column;
  }

  .hero__buttons .btn {
    width: 100%;
  }

  .trust-strip__item {
    flex: 0 0 50%;
  }

  .services__grid {
    grid-template-columns: 1fr;
  }

  .service-card--large {
    grid-column: span 1;
  }

  .service-card {
    min-height: 350px;
  }

  .treatments__grid {
    grid-template-columns: 1fr;
  }

  .treatment-card:nth-child(1),
  .treatment-card:nth-child(2),
  .treatment-card:nth-child(3),
  .treatment-card:nth-child(4),
  .treatment-card:nth-child(5),
  .treatment-card:nth-child(6) {
    grid-column: span 1;
    min-height: 300px;
  }

  .gallery-preview__grid {
    grid-template-columns: 1fr;
  }

  .gallery-item:nth-child(1),
  .gallery-item:nth-child(2),
  .gallery-item:nth-child(3),
  .gallery-item:nth-child(4),
  .gallery-item:nth-child(5),
  .gallery-item:nth-child(6) {
    grid-column: span 1;
    min-height: 280px;
  }

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

  .gallery-page__grid {
    grid-template-columns: 1fr;
  }

  .gallery-page-item {
    aspect-ratio: 3/4;
  }

  .booking-cta__buttons {
    flex-direction: column;
  }

  .booking-cta__buttons .btn {
    width: 100%;
  }

  .location__actions {
    flex-direction: column;
  }

  .location__actions .btn {
    width: 100%;
  }

  .footer__top {
    grid-template-columns: 1fr;
  }

  .footer__bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* ---------- Small Mobile (390px) ---------- */
@media (max-width: 390px) {
  .hero__image-main {
    height: 40vh;
  }

  .trust-strip__value {
    font-size: var(--text-2xl);
  }

  .mobile-menu a {
    font-size: var(--text-3xl);
  }

  .review-card {
    padding: 1.5rem;
  }

  .review-card__quote {
    font-size: var(--text-xl);
  }
}