/* =============================================
   WONDER CHROME STUDIO — RESPONSIVE
   ============================================= */

/* ── Tablet (≤ 1024px) ──────────────────────── */
@media (max-width: 1024px) {
  :root {
    --spacing-xl: 5rem;
    --spacing-2xl: 7rem;
  }

  .hero__content {
    grid-template-columns: 1fr;
    padding-bottom: 4rem;
  }

  .hero__right {
    display: none;
  }

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

  .category-intro__inner,
  .category-intro--reverse .category-intro__inner {
    grid-template-columns: 1fr;
    direction: ltr;
    gap: 3rem;
  }

  .why-section__inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .why-section__visual {
    display: none;
  }

  .experience-teaser__inner {
    grid-template-columns: 1fr 1fr;
  }

  .experience-step:nth-child(3) {
    grid-column: 1 / 3;
  }

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

  /* Page heroes */
  .page-hero__title {
    font-size: clamp(2.2rem, 5.5vw, 4rem);
  }

  .what-is-section__inner,
  .delivery-section__inner,
  .magazine-section__inner,
  .art-philosophy__inner,
  .art-experience__inner,
  .about-hero__content,
  .invest-intro__inner,
  .invest-includes__inner,
  .contact-main__inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

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

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

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

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

  .editorial-hero__content {
    grid-template-columns: 1fr;
  }

  .editorial-hero__right {
    display: none;
  }

  .styling-section__inner,
  .studio-direction__inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .artist-statement__inner {
    grid-template-columns: 1fr;
  }

  .artist-statement__portrait {
    position: relative;
    top: 0;
  }

  .exp-stage {
    grid-template-columns: 60px 1fr;
    gap: 2rem;
  }

  .exp-stage__visual {
    display: none;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

/* ── Mobile (≤ 768px) ───────────────────────── */
@media (max-width: 768px) {
  :root {
    --spacing-xl: 3.5rem;
    --header-h: 65px;
  }

  .container {
    padding: 0 1.5rem;
  }

  /* Header */
  .site-nav {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-mobile {
    display: flex;
  }

  /* Hero */
  .hero {
    align-items: center;
    min-height: 100svh;
  }

  .hero__content {
    padding: 0 1.5rem 3rem;
  }

  .hero__sub {
    font-size: 0.875rem;
  }

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

  /* Experience teaser */
  .experience-teaser__inner {
    grid-template-columns: 1fr;
  }

  .experience-step {
    border-right: none;
    border-bottom: 1px solid var(--border-light);
  }

  .experience-step:last-child {
    border-bottom: none;
  }

  /* Categories */
  .categories-grid,
  .editorial-cats__grid,
  .art-cats__inner {
    grid-template-columns: 1fr;
  }

  /* Art gallery */
  .art-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .art-gallery__item--wide {
    grid-column: span 1;
  }

  .art-gallery__item--wide .img-placeholder {
    aspect-ratio: 1 / 1;
  }

  /* Process */
  .process-steps {
    grid-template-columns: 1fr;
  }

  /* Philosophy */
  .philosophy-grid,
  .invest-value__grid {
    grid-template-columns: 1fr;
  }

  /* Editorial experience */
  .editorial-exp__cols {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* Experience */
  .exp-banner__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }

  .exp-banner__item {
    text-align: left;
    border-right: none;
    border-bottom: 1px solid var(--border-light);
    padding: 0 0 1.5rem;
  }

  .exp-banner__item:last-child {
    border-bottom: none;
  }

  /* Investment */
  .delivery-items {
    grid-template-columns: 1fr;
  }

  /* Footer */
  .site-footer__top {
    grid-template-columns: 1fr;
  }

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

  /* CTA buttons */
  .home-cta__actions,
  .page-cta__actions {
    flex-direction: column;
    align-items: center;
  }

  .btn {
    width: 100%;
    max-width: 320px;
    text-align: center;
  }

  /* Page hero adjustments */
  .page-hero__title {
    font-size: clamp(2rem, 8vw, 3.5rem);
  }

  /* Contact form */
  .form-row {
    grid-template-columns: 1fr;
  }

  .about-hero__content {
    grid-template-columns: 1fr;
  }
}

/* ── Small mobile (≤ 430px) ─────────────────── */
@media (max-width: 430px) {
  .hero__title {
    font-size: clamp(2.4rem, 9vw, 3.5rem);
  }

  .art-gallery__grid {
    grid-template-columns: 1fr;
  }

  .site-footer__bottom {
    flex-direction: column;
    gap: 0.75rem;
  }
}