/* ==========================================================================
   AARTI & SONU — RESPONSIVE LAYOUTS
   site.css is mobile-first; these rules progressively recompose the layout.
   Breakpoints: 480 (large phone) · 640 (small tablet) · 768 (tablet)
                1024 (laptop / tablet landscape) · 1280 (desktop)
   ========================================================================== */

/* ---------- ≥ 480px ---------- */
@media (min-width: 480px) {
  .cta-banner-actions { flex-direction: row; flex-wrap: wrap; width: auto; }
  .check-list { grid-template-columns: 1fr 1fr; }
  .hero-badge { width: 7rem; }
}

/* ---------- ≥ 640px ---------- */
@media (min-width: 640px) {
  .mobile-menu-footer { grid-template-columns: 1fr 1fr; }
  .mobile-menu-meta { grid-column: 1 / -1; }

  /* Looks: stop scrolling sideways, become a staggered 2-column grid */
  .looks-grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-inline: 0;
    padding: 0;
    overflow: visible;
    align-items: start;
  }
  .looks-grid { padding-bottom: 3.5rem; }
  .look-card:nth-child(2n) { top: 3.5rem; }

  .academy-preview-intro { grid-template-columns: 11rem 1fr; }
  .academy-preview-image { aspect-ratio: 3 / 4; }

  .bridal-points { grid-template-columns: 1fr 1fr; }

  .why-grid { grid-template-columns: 1fr 1fr; }
  .why-item { display: block; padding: 2.25rem 2rem 2.25rem 0; }
  .why-item:nth-child(2n) { padding-left: 2rem; padding-right: 0; border-left: 1px solid var(--border); }
  .why-item h3 { margin-top: 1.5rem; }

  .form-grid { grid-template-columns: 1fr 1fr; gap: 1.4rem 1.25rem; }
  .field--full { grid-column: 1 / -1; }

  .service-card { grid-template-columns: minmax(12rem, 38%) 1fr; }
  .service-card-media { aspect-ratio: auto; min-height: 100%; }

  .course-meta { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
  .course-meta div:first-child { grid-column: 1 / -1; }

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

  .process-steps { grid-template-columns: 1fr 1fr; gap: 2.5rem 2rem; }

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

  .page-hero-image { aspect-ratio: 4 / 3.4; }

  .intro-quote { margin-top: -6rem; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }

  .gallery-filters { justify-content: center; margin-inline: 0; padding-inline: 0; flex-wrap: wrap; }

  .portfolio-grid { grid-auto-rows: 11rem; gap: .9rem; }
  .masonry { column-gap: 1rem; }
  .masonry .tile { margin-bottom: 1rem; }
  .tile-meta { padding: 1rem 1.1rem; }
  .tile-caption { font-size: .66rem; }
}

/* ---------- ≥ 768px ---------- */
@media (min-width: 768px) {
  :root { --header-h: 80px; }

  .header-cta { display: inline-flex; }

  .section-head--split {
    grid-template-columns: 1.1fr 1fr;
    align-items: end;
    gap: 2.5rem;
  }

  .hero-visual { width: 86%; margin-inline: auto; }

  .course-preview-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
  .course-preview { min-height: 23rem; }

  .masonry { columns: 3; }

  .cta-banner-inner { align-items: center; min-height: 32rem; }
  .cta-banner-inner::after {
    background: linear-gradient(90deg, rgba(22, 14, 13, .9) 0%, rgba(22, 14, 13, .6) 45%, rgba(22, 14, 13, .05) 85%);
  }
  [data-theme="dark"] .cta-banner-inner::after {
    background: linear-gradient(90deg, rgba(30, 12, 20, .94) 0%, rgba(30, 12, 20, .65) 45%, rgba(30, 12, 20, .1) 85%);
  }
  .cta-banner-media img { object-position: 80% 25%; }

  .footer-top { grid-template-columns: 1fr auto; align-items: end; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.25fr; }
  .footer-brand { grid-column: auto; }
  .footer-bottom { padding-bottom: 1.6rem; }

  .lightbox-stage { padding: 3.5rem 6.5rem; }
  .lightbox-img { max-height: calc(100dvh - 9rem); }
  .lightbox-prev,
  .lightbox-next { top: 50%; bottom: auto; transform: translateY(-50%); }
  .lightbox-prev { left: 1.5rem; }
  .lightbox-next { right: 1.5rem; }
  .lightbox-close { top: 1.5rem; right: 1.5rem; }

  .contact-panel .btn-block { width: auto; }
}

/* ---------- ≥ 1024px ---------- */
@media (min-width: 1024px) {
  .primary-nav { display: block; }
  .menu-toggle { display: none; }
  .mobile-menu { display: none; }

  /* Home hero: copy left, image composition right */
  .hero {
    min-height: min(100vh, 60rem);
    display: flex;
    align-items: center;
    padding-bottom: clamp(3rem, 5vw, 4.5rem);
  }
  .hero > .container { width: min(100% - 2 * var(--gutter), var(--container)); }
  .hero-grid {
    grid-template-columns: 1.08fr .92fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "head visual"
      "body visual";
    column-gap: clamp(3rem, 6vw, 6.5rem);
    row-gap: 2.25rem;
  }
  .hero-head { align-self: end; }
  .hero-body { align-self: start; max-width: 34rem; }
  .hero-visual { width: 100%; padding-bottom: 3.5rem; align-self: center; }
  .hero-main { width: 80%; }
  .hero-detail { width: 38%; bottom: 0; left: 0; }
  .hero-badge { top: 9%; left: 6%; width: 7.5rem; }
  .hero-index {
    position: absolute;
    right: -2.25rem;
    top: 50%;
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0;
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--text-muted);
    writing-mode: vertical-rl;
    transform: translateY(-50%) rotate(180deg);
  }
  .hero-index .num { font-size: .9rem; letter-spacing: 0; }

  .intro-grid { grid-template-columns: 5fr 1fr 6fr; align-items: center; gap: 0; }
  .intro-copy { grid-column: 1; }
  .intro-visual { grid-column: 3; }
  .intro-image { width: 82%; }
  .intro-quote { position: absolute; left: 0; bottom: 3.5rem; margin: 0; width: 20rem; }

  .looks-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  .looks-grid { padding-bottom: 5rem; }
  .look-card:nth-child(2n) { top: 0; }
  .look-card:nth-child(3n + 2) { top: 5rem; }

  .bridal-grid { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 7vw, 7rem); }
  .bridal-visual { padding-bottom: 2rem; }
  .bridal-title .indent { padding-left: 2em; }

  .academy-preview-head { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .academy-preview-intro { grid-template-columns: 12rem 1fr; }

  .portfolio-grid {
    grid-template-columns: 1.15fr 1fr 1.15fr 1fr;
    grid-template-rows: repeat(4, 8.75rem);
    grid-auto-rows: auto;
    grid-template-areas:
      "a b c d"
      "a b c d"
      "a e c f"
      "a e c f";
    gap: 1rem;
  }
  .portfolio-grid .tile { grid-row: auto; grid-column: auto; }
  .portfolio-grid .tile:nth-child(1) { grid-area: a; }
  .portfolio-grid .tile:nth-child(2) { grid-area: b; }
  .portfolio-grid .tile:nth-child(3) { grid-area: c; }
  .portfolio-grid .tile:nth-child(4) { grid-area: d; }
  .portfolio-grid .tile:nth-child(5) { grid-area: e; }
  .portfolio-grid .tile:nth-child(6) { grid-area: f; }
  .portfolio-grid .tile:nth-child(n + 7) { display: none; }

  .why-grid { grid-template-columns: repeat(4, 1fr); }
  .why-item,
  .why-item:nth-child(2n) { padding: 2.5rem 2rem; border-left: 1px solid var(--border); border-bottom: 0; }
  .why-item:first-child { border-left: 0; padding-left: 0; }
  .why-item:last-child { padding-right: 0; }

  .page-hero-grid { grid-template-columns: 1.15fr .85fr; gap: clamp(3rem, 7vw, 7rem); }
  .page-hero-image { aspect-ratio: 4 / 5; }

  .service-group-grid { grid-template-columns: 4fr 8fr; gap: clamp(3rem, 6vw, 6rem); }
  .service-group-head { position: sticky; top: calc(64px + 2.5rem); }

  .process-steps { grid-template-columns: repeat(4, 1fr); }

  .academy-hero { min-height: min(100vh, 56rem); display: flex; align-items: center; }
  .academy-hero > .container { width: min(100% - 2 * var(--gutter), var(--container)); }
  .academy-hero-grid { grid-template-columns: 1.05fr .95fr; gap: clamp(3rem, 7vw, 7rem); }

  .audience-grid { grid-template-columns: 4fr 8fr; gap: 4rem; }

  .course-card { grid-template-columns: 5fr 7fr; }
  .course-card:nth-child(2n) { grid-template-columns: 7fr 5fr; }
  .course-card:nth-child(2n) .course-card-media { order: 2; }
  .course-card-media { aspect-ratio: auto; min-height: 100%; }

  .learn-head { grid-template-columns: 1fr 24rem; gap: 4rem; }
  .learn-grid { grid-template-columns: repeat(5, 1fr); column-gap: 0; }
  .learn-grid li { padding: 2rem 1.5rem; border-left: 1px solid var(--ink-border); }
  .learn-grid li:nth-child(5n + 1) { border-left: 0; padding-left: 0; }

  .masonry { columns: 4; column-gap: 1.25rem; margin-top: 2.25rem; }
  .masonry .tile { margin-bottom: 1.25rem; }

  .contact-grid { grid-template-columns: 5fr 7fr; gap: 2rem; }
  .contact-panel { position: sticky; top: calc(64px + 1.5rem); }
  .contact-panel .btn-block { width: 100%; }
}

/* ---------- ≥ 1280px ---------- */
@media (min-width: 1280px) {
  .hero-main { width: 78%; }
  .looks-grid { gap: 2rem; }
  .contact-grid { gap: 3rem; }
  .enquiry { padding: 3.25rem; }
}

/* ---------- Short, wide screens (e.g. 1280 × 720 laptops) ---------- */
@media (min-width: 1024px) and (max-height: 820px) {
  .hero { min-height: auto; }
  .hero-main { width: 70%; }
  .hero-visual { max-width: 34rem; margin-left: auto; }
}

/* ---------- Phones only ---------- */
@media (max-width: 639px) {
  /* Let the long hero eyebrow wrap as one line of text */
  .hero-head .eyebrow { display: block; line-height: 1.9; }
  .hero-head .eyebrow::before { display: none; }
}