/* =========================================================================
   L'ATELIER MATA — HOMEPAGE
   v0.4.0
   ----------------------------------------------------------------------
   Loaded only on the front page (see functions.php). Built around the
   front-page.php template; selectors here use BEM-style .lm- prefixes
   and never touch Salient's namespace.
   ========================================================================= */

/* -------------------------------------------------------------------------
   FORCE VISIBILITY + ESCAPE SALIENT'S CONTAINER
   We render inside Salient's expected wrappers (.container-wrap >
   .container.main-content) so Salient's reveal JS / base CSS treats
   us as a normal page. Then we override the container's width/padding
   so our hero and process sections can go fully full-bleed.
   ------------------------------------------------------------------------- */

body.home .lm-home,
body.home .lm-home * {
  opacity: 1 !important;
  visibility: visible !important;
}

body.home .container-wrap {
  padding: 0 !important;
}

body.home .container-wrap > .main-content,
body.home .container-wrap > .lm-main,
body.home .lm-main {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.home main.lm-home {
  display: block !important;
  width: 100%;
  background: var(--lm-bg);
}

/* Belt-and-braces: nav menu sometimes hides on custom templates if
   Salient's mobile-detect JS misfires. Force flex-row visibility. */

/* DESKTOP ONLY — these force-visibility rules are needed because Salient's
   reveal JS sometimes hides the nav on custom front-page templates. They
   were originally unscoped, which prevented the mobile hamburger from
   rendering at all on small viewports (the desktop nav was forced visible
   even at 390px wide). Scoped to >=1000px so Salient's native mobile menu
   takes over below that breakpoint. */

@media (min-width: 1000px) {
  body.home #header-outer #top nav,
  body.home #header-outer #top nav > ul {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.home #header-outer #top nav > ul > li {
    display: inline-flex !important;
    visibility: visible !important;
  }
}

/* -------------------------------------------------------------------------
   HERO
   Photograph as the canvas. Caption sits inside a narrow column,
   bottom-left, with editorial restraint.
   ------------------------------------------------------------------------- */

.lm-hero {
  position: relative;
  min-height: clamp(620px, 92vh, 920px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  background: var(--lm-ink);                /* fallback while img loads */
  color: var(--lm-bone);
}

.lm-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.lm-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Placeholder gradient for when no hero image is present yet */
.lm-hero__placeholder {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse at 70% 60%, #2a1f15 0%, #0d0907 70%),
    var(--lm-ink);
}

/* Subtle vignette to keep caption legible */
.lm-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to right,
    rgba(13, 9, 7, 0.65) 0%,
    rgba(13, 9, 7, 0.35) 35%,
    rgba(13, 9, 7, 0)    65%
  );
  pointer-events: none;
}

.lm-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  /* Clear Salient's floating header (~100-120px tall) at every viewport
     height. var(--lm-s-9) alone (96px) wasn't enough — the headline could
     end up touching the header hairline on shorter screens. clamp keeps
     the gap proportionate. */
  padding-top: clamp(160px, 18vh, 240px);
  padding-bottom: var(--lm-s-9);
}

.lm-hero__content {
  max-width: 38rem;
}

/* Hero content colors — selectors lifted to (.container-wrap .lm-hero …)
   so they outrun the global .container-wrap heading override in
   components.css that otherwise forces ink on every heading. */

.container-wrap .lm-hero .lm-eyebrow,
body.home .lm-hero .lm-eyebrow {
  color: rgba(245, 241, 234, 0.78) !important;
  margin-bottom: var(--lm-s-5);
}

.container-wrap .lm-hero .lm-hero__headline,
body.home .lm-hero .lm-hero__headline,
body.home .lm-hero h1.lm-hero__headline {
  font-family: var(--lm-font-display) !important;
  font-weight: 400 !important;
  font-size: clamp(2.25rem, 5vw, 4.25rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.025em !important;
  color: var(--lm-bone) !important;
  margin: 0 0 var(--lm-s-6) !important;
  text-shadow: 0 1px 24px rgba(0,0,0,0.25);    /* legibility over photography */
}

.container-wrap .lm-hero .lm-hero__lead,
body.home .lm-hero .lm-hero__lead {
  color: rgba(245, 241, 234, 0.92) !important;
}

.lm-hero__lead {
  font-family: var(--lm-font-body);
  font-size: var(--lm-fs-md);
  line-height: var(--lm-lh-loose);
  color: rgba(245, 241, 234, 0.85);
  max-width: 36ch;
  margin: 0 0 var(--lm-s-7);
}

.lm-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lm-s-4);
}

/* Light variant of ghost button — used over photography */
.lm-btn.lm-btn--ghost-light {
  background: transparent;
  color: var(--lm-bone);
  border-color: var(--lm-bone);
}
.lm-btn.lm-btn--ghost-light:hover {
  background: var(--lm-bone);
  color: var(--lm-ink);
}

/* -------------------------------------------------------------------------
   MANIFESTO
   ------------------------------------------------------------------------- */

/* Override .lm-section--lg via higher specificity — manifesto wants
   tighter top/bottom rhythm than the section default. */

body.home .lm-manifesto.lm-section--lg,
body.home .lm-manifesto {
  padding-top: var(--lm-s-8) !important;       /* 64px (was 192px) */
  padding-bottom: var(--lm-s-8) !important;
  text-align: center;
}

.lm-manifesto .lm-eyebrow {
  margin-bottom: var(--lm-s-5);
}

.lm-manifesto .lm-pullquote {
  margin: var(--lm-s-3) auto 0;
  max-width: 30ch;
  font-style: normal;                          /* manifesto reads upright */
}

/* -------------------------------------------------------------------------
   COLLECTION TEASER (selected pieces grid)
   ------------------------------------------------------------------------- */

.lm-collection-teaser__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: var(--lm-s-9);
  gap: var(--lm-s-4);
}

.lm-collection-teaser__head h2 {
  font-family: var(--lm-font-display) !important;
  font-size: clamp(2rem, 4.5vw, 3.5rem) !important;
  font-weight: 400 !important;
  letter-spacing: var(--lm-tracking-tight) !important;
  margin: 0 !important;
}

.lm-collection-teaser__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--lm-s-7);
}

@media (max-width: 880px) {
  .lm-collection-teaser__grid {
    grid-template-columns: 1fr;
    gap: var(--lm-s-7);
  }
}

.lm-piece {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 0 !important;                     /* Salient adds underlines */
}

.lm-piece__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--lm-bone-deep);
  margin-bottom: var(--lm-s-5);
}

.lm-piece__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--lm-dur-slow) var(--lm-ease);
}

.lm-piece:hover .lm-piece__media img {
  transform: scale(1.03);
}

.lm-piece__placeholder {
  width: 100%;
  height: 100%;
  background:
    repeating-linear-gradient(
      45deg,
      var(--lm-bone-deep) 0,
      var(--lm-bone-deep) 12px,
      var(--lm-bone) 12px,
      var(--lm-bone) 24px
    );
  opacity: 0.6;
}

.lm-piece__title {
  font-family: var(--lm-font-display) !important;
  font-size: var(--lm-fs-lg) !important;
  font-weight: 400 !important;
  letter-spacing: var(--lm-tracking-tight) !important;
  margin: 0 0 var(--lm-s-2) !important;
  color: var(--lm-text) !important;
}

.lm-piece__meta {
  font-family: var(--lm-font-body);
  font-size: var(--lm-fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--lm-tracking-eyebrow);
  color: var(--lm-text-soft);
}

.lm-collection-teaser__foot {
  margin-top: var(--lm-s-9);
  text-align: center;
}

/* -------------------------------------------------------------------------
   PROCESS TEASER — 50/50 split
   ------------------------------------------------------------------------- */

.lm-process-teaser {
  background: var(--lm-bone-deep);
}

.lm-process-teaser__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 70vh;
}

@media (max-width: 880px) {
  .lm-process-teaser__inner {
    grid-template-columns: 1fr;
  }
}

.lm-process-teaser__media {
  background: var(--lm-ink);
  overflow: hidden;
}

.lm-process-teaser__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lm-process-teaser__content {
  padding: var(--lm-s-10) var(--lm-s-9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 30rem;
}

@media (max-width: 880px) {
  .lm-process-teaser__content {
    padding: var(--lm-s-9) var(--lm-gutter);
  }
  .lm-process-teaser__media {
    aspect-ratio: 4 / 3;
  }
}

.lm-process-teaser__content h2 {
  font-family: var(--lm-font-display) !important;
  font-size: clamp(2rem, 4vw, 3.25rem) !important;
  font-weight: 400 !important;
  letter-spacing: var(--lm-tracking-tight) !important;
  line-height: 1.05 !important;
  margin: var(--lm-s-4) 0 var(--lm-s-6) !important;
}

.lm-process-teaser__content p {
  margin-bottom: var(--lm-s-7);
}

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

.lm-contact-teaser {
  text-align: center;
  border-top: 1px solid var(--lm-rule);
}

.lm-contact-teaser h2 {
  font-family: var(--lm-font-display) !important;
  font-size: clamp(2rem, 4vw, 3.25rem) !important;
  font-weight: 400 !important;
  letter-spacing: var(--lm-tracking-tight) !important;
  margin: var(--lm-s-4) 0 var(--lm-s-5) !important;
  max-width: 24ch;
  margin-left: auto !important;
  margin-right: auto !important;
}

.lm-contact-teaser p {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--lm-s-7);
  color: var(--lm-text-mute);
}

.lm-contact-teaser__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lm-s-4);
  justify-content: center;
  align-items: center;
}

@media (max-width: 690px) {
  .lm-contact-teaser__cta {
    flex-direction: column;
    align-items: stretch;
  }
  .lm-contact-teaser__cta .lm-btn {
    justify-content: center;
  }
}

/* -------------------------------------------------------------------------
   RESPONSIVE TUNING
   ------------------------------------------------------------------------- */

@media (max-width: 690px) {

  .lm-hero {
    min-height: 88vh;
    align-items: flex-end;
  }

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

  .lm-hero__cta {
    flex-direction: column;
    align-items: stretch;
  }

  .lm-hero__cta .lm-btn {
    justify-content: center;
  }

  .lm-manifesto {
    padding-top: var(--lm-s-9);
    padding-bottom: var(--lm-s-9);
  }
}

/* =========================================================================
   END homepage.css — v0.4.0
   ========================================================================= */