/* ============================================================
   responsive.css — Mobile-first breakpoints
   Base = mobile 375px | 768px | 1024px | 1440px
   ============================================================ */


/* ══════════════════════════════════════════════════════════════
   BASE — Mobile 375px (default styles applied to all viewports)
══════════════════════════════════════════════════════════════ */

/* Experience section: stacks on mobile */
.experience__inner {
  grid-template-columns: 1fr;
  gap: var(--space-10);
  padding-inline: var(--space-6);
}

.experience__image { clip-path: none; }

/* Signatures: single column on mobile */
.signatures__grid {
  grid-template-columns: 1fr;
  max-width: 400px;
  margin-inline: auto;
}

.signatures__inner { padding-inline: var(--space-6); }

/* Booking split stacks on mobile */
.booking__split {
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

.booking__divider { display: none; }
.booking__inner   { padding-inline: var(--space-6); }

/* Reviews: single card on mobile */
.review-card { flex: 0 0 calc(100% - var(--space-6)); }
.reviews__inner { padding-inline: var(--space-6); }

/* Social grid: 2 columns on mobile */
.social__grid { grid-template-columns: repeat(2, 1fr); }
.social__inner { padding-inline: var(--space-6); }

/* Menu items: single col on mobile */
.menu-items--two-col { grid-template-columns: 1fr; }
.menu-section__inner { padding-inline: var(--space-6); }

/* Contact: single col on mobile */
.section--contact-main .container--wide {
  grid-template-columns: 1fr;
  gap: var(--space-10);
  padding-inline: var(--space-6);
}

/* Hero: smaller font on mobile */
.hero__title { font-size: clamp(2.8rem, 13vw, 5rem); }

/* Page hero: shorter on mobile */
.page-hero { min-height: 40vh; }

/* Ambiance: smaller items on mobile */
.ambiance__item--portrait  { width: 200px; }
.ambiance__item--landscape { width: 280px; }
.ambiance__item--square    { width: 220px; }
.ambiance__inner { padding-inline: var(--space-6); }

/* Nav inner padding: compact on mobile */
.nav__inner { padding-inline: var(--space-5); }


/* ══════════════════════════════════════════════════════════════
   TABLET — 768px+
══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {

  /* Footer grid: 2 columns */
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Experience: still stacked, but bigger gap */
  .experience__inner {
    padding-inline: var(--space-8);
  }

  /* Signatures: 2 columns */
  .signatures__grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: none;
  }

  /* Booking: show horizontal but simpler */
  .booking__split {
    grid-template-columns: 1fr 1px 1fr;
  }

  .booking__divider { display: block; }

  /* Reviews: 2 cards visible */
  .review-card {
    flex: 0 0 calc(50% - var(--space-4));
  }

  /* Social: 3 cols */
  .social__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Contact: 2 cols */
  .section--contact-main .container--wide {
    grid-template-columns: 1fr 1fr;
    padding-inline: var(--space-8);
  }

  /* Menu 2 cols */
  .menu-items--two-col {
    grid-template-columns: 1fr 1fr;
  }

  /* Ambiance gallery wider items */
  .ambiance__item--portrait  { width: 240px; }
  .ambiance__item--landscape { width: 380px; }
  .ambiance__item--square    { width: 300px; }
}


/* ══════════════════════════════════════════════════════════════
   DESKTOP — 1024px+
══════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

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

  /* Experience: 2 cols asymmetric */
  .experience__inner {
    grid-template-columns: 2fr 3fr;
    gap: var(--space-16);
    padding-inline: var(--space-12);
  }

  .experience__image {
    clip-path: polygon(0 0, 100% 0, 88% 100%, 0% 100%);
  }

  /* Signatures: 3 columns */
  .signatures__grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: none;
  }

  /* Booking: full split */
  .booking__divider { display: block; }

  /* Reviews: 3 cards */
  .review-card {
    flex: 0 0 calc(33.333% - var(--space-4));
  }

  /* Hero title large */
  .hero__title {
    font-size: clamp(4rem, 9vw, 8rem);
  }

  /* Page hero full height */
  .page-hero { min-height: 50vh; }

  /* Ambiance items full size */
  .ambiance__item--portrait  { width: 260px; }
  .ambiance__item--landscape { width: 420px; }
  .ambiance__item--square    { width: 320px; }

  /* Nav links visible */
  .nav__links    { display: flex; }
  .nav__cta      { display: inline-flex; }
  .nav__hamburger { display: none; }

  /* Contact: more space */
  .section--contact-main .container--wide {
    gap: var(--space-20);
    padding-inline: var(--space-12);
  }
}


/* ══════════════════════════════════════════════════════════════
   LARGE — 1440px+
══════════════════════════════════════════════════════════════ */
@media (min-width: 1440px) {

  /* Max-width containers stretch gracefully */
  .nav__inner {
    max-width: var(--container-wide);
    padding-inline: var(--space-12);
  }

  .hero__title {
    font-size: clamp(5rem, 9vw, 9rem);
  }

  /* Signatures cards taller */
  .signature-card {
    aspect-ratio: 9/13;
  }

  /* Reviews 3 cards comfortable */
  .review-card {
    flex: 0 0 calc(33.333% - var(--space-6));
  }
}


/* ══════════════════════════════════════════════════════════════
   ACCESSIBILITY — Reduced motion
══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .hero__chinese,
  .hero__title,
  .hero__subtitle,
  .hero__description,
  .hero__ctas,
  .hero__scroll-indicator {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .hero__dragon img {
    animation: none;
    opacity: 0.05;
  }
}


/* ══════════════════════════════════════════════════════════════
   PRINT
══════════════════════════════════════════════════════════════ */
@media print {
  .nav,
  .hero__particles,
  .hero__dragon,
  .hero__scroll-indicator,
  .cursor-dot,
  .nav__mobile {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }

  .hero {
    background: none;
    min-height: auto;
    padding: 2rem;
  }
}