/* =========================================================================
   L'ATELIER MATA — MOBILE / RESPONSIVE PASS
   v0.6.0
   ----------------------------------------------------------------------
   Loaded site-wide LAST so it can fix sizing issues on every page.
   Mostly clamp() ceilings + stack behaviour at small viewports.
   ========================================================================= */

/* -------------------------------------------------------------------------
   PHONE (≤ 640px)
   ------------------------------------------------------------------------- */

@media (max-width: 640px) {

  :root {
    --lm-gutter: 1.25rem;
  }

  /* ---- HOMEPAGE -------------------------------------------------------- */

  body.home .lm-hero {
    min-height: 80vh;
  }

  body.home .lm-hero__inner {
    padding-top: var(--lm-s-7);
    padding-bottom: var(--lm-s-7);
  }

  body.home .lm-hero .lm-hero__headline,
  body.home .lm-hero h1.lm-hero__headline {
    font-size: clamp(2.25rem, 11vw, 3.25rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
  }

  body.home .lm-hero__lead {
    font-size: var(--lm-fs-base) !important;
    line-height: 1.6;
    max-width: 100%;
  }

  body.home .lm-hero__cta {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  body.home .lm-hero__cta .lm-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* Manifesto pull quote was overflowing — cap it */
  body.home .lm-manifesto .lm-pullquote {
    font-size: clamp(1.25rem, 6vw, 1.625rem) !important;
    line-height: 1.3;
    max-width: 24ch;
    padding: 0 var(--lm-gutter);
  }

  body.home .lm-manifesto.lm-section--lg,
  body.home .lm-manifesto {
    padding-top: var(--lm-s-7) !important;
    padding-bottom: var(--lm-s-7) !important;
  }

  /* Selected-pieces grid stacks vertically */
  body.home .lm-collection-teaser__grid {
    grid-template-columns: 1fr !important;
    gap: var(--lm-s-6);
  }

  body.home .lm-collection-teaser__head h2 {
    font-size: clamp(1.75rem, 8vw, 2.25rem) !important;
  }

  /* Process teaser stacks */
  body.home .lm-process-teaser__inner {
    grid-template-columns: 1fr !important;
  }

  body.home .lm-process-teaser__media {
    aspect-ratio: 4 / 3;
  }

  body.home .lm-process-teaser__content {
    padding: var(--lm-s-7) var(--lm-gutter);
  }

  body.home .lm-process-teaser__content h2 {
    font-size: clamp(1.75rem, 8vw, 2.25rem) !important;
  }

  body.home .lm-contact-teaser h2 {
    font-size: clamp(1.75rem, 8vw, 2.25rem) !important;
  }

  /* ---- COMMISSION ------------------------------------------------------ */

  body.page-template-template-commission .lm-commission__title,
  body.page-template-template-commission h1.lm-commission__title {
    font-size: clamp(2.25rem, 10vw, 3rem) !important;
  }

  body.page-template-template-commission .lm-step__inner {
    grid-template-columns: 1fr !important;
    gap: var(--lm-s-4);
    padding: var(--lm-s-7) var(--lm-gutter);
  }

  body.page-template-template-commission .lm-step__num,
  body.page-template-template-commission .lm-step--alt .lm-step__num {
    order: 0 !important;
    text-align: left !important;
    font-size: 3rem;
    margin-bottom: var(--lm-s-2);
  }

  body.page-template-template-commission .lm-step__body h2 {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
  }

  body.page-template-template-commission .lm-pricing__row {
    grid-template-columns: 1fr !important;
    gap: var(--lm-s-2);
    padding: var(--lm-s-4) 0;
  }

  body.page-template-template-commission .lm-pricing__row dd {
    font-size: var(--lm-fs-xl) !important;
  }

  body.page-template-template-commission .lm-commission__cta-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  body.page-template-template-commission .lm-commission__cta-buttons .lm-btn {
    width: 100%;
    justify-content: center;
  }

  /* ---- COLLECTION ------------------------------------------------------ */

  body.page-template-template-collection .lm-collection__title,
  body.page-template-template-collection h1.lm-collection__title {
    font-size: clamp(2.25rem, 10vw, 3rem) !important;
  }

  body.page-template-template-collection .lm-collection__grid {
    grid-template-columns: 1fr !important;
    gap: var(--lm-s-6);
  }

  /* Override the every-7th-spans-2 rule on phone */
  body.page-template-template-collection .lm-collection__grid > .lm-piece:nth-child(7n+1) {
    grid-column: span 1 !important;
  }

  /* ---- ATELIER --------------------------------------------------------- */

  body.page-template-template-atelier .lm-atelier__title,
  body.page-template-template-atelier h1.lm-atelier__title {
    font-size: clamp(2.25rem, 10vw, 3rem) !important;
  }

  body.page-template-template-atelier .lm-atelier__hero {
    min-height: 60vh;
  }

  body.page-template-template-atelier .lm-atelier__split,
  body.page-template-template-atelier .lm-atelier__split--alt {
    grid-template-columns: 1fr !important;
    direction: ltr !important;
    gap: var(--lm-s-5);
  }

  body.page-template-template-atelier .lm-atelier__values-grid {
    grid-template-columns: 1fr !important;
    gap: var(--lm-s-6);
  }

  body.page-template-template-atelier .lm-atelier__section {
    padding: var(--lm-s-7) 0;
  }

  /* ---- CONTACT --------------------------------------------------------- */

  body.page-template-template-contact .lm-contact__title,
  body.page-template-template-contact h1.lm-contact__title {
    font-size: clamp(2.25rem, 10vw, 3rem) !important;
  }

  body.page-template-template-contact .lm-contact__grid {
    grid-template-columns: 1fr !important;
    gap: var(--lm-s-7);
  }

  body.page-template-template-contact .lm-contact__details {
    padding: var(--lm-s-6) var(--lm-s-5);
  }

  /* ---- HEADINGS GLOBAL CAP --------------------------------------------- */

  /* Belt-and-braces: any aggressive heading inside container-wrap caps at
     viewport width to prevent horizontal overflow on phones. */
  .container-wrap h1,
  .container-wrap h2 {
    max-width: 100%;
    word-break: break-word;
  }

  /* ---- SECTION PADDING ------------------------------------------------- */

  .lm-section--lg {
    padding-top: var(--lm-s-7) !important;
    padding-bottom: var(--lm-s-7) !important;
  }

  .lm-section,
  .lm-section--sm {
    padding-top: var(--lm-s-6);
    padding-bottom: var(--lm-s-6);
  }

  /* ---- FOOTER ---------------------------------------------------------- */

  #lm-footer {
    padding: var(--lm-s-7) 0 var(--lm-s-5);
  }

  .lm-footer__inner {
    gap: var(--lm-s-6);
  }
}

/* -------------------------------------------------------------------------
   SMALL TABLET (641 – 880px)
   ------------------------------------------------------------------------- */

@media (min-width: 641px) and (max-width: 880px) {

  body.home .lm-collection-teaser__grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  body.page-template-template-collection .lm-collection__grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* =========================================================================
   END mobile.css — v0.6.0
   ========================================================================= */