/* ==========================================================================
   Maison du Soleil · maison-du-soleil.html
   Written by site-internal/build_brand_pages.py. A lookbook first: spreads
   of photographs with a look number and a line beneath each, then what the
   house makes for buyers and how to ask for the trade lookbook.
   ========================================================================== */

/* Page head: words left, the two gowns right ------------------------------ */
.mds-head__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
.mds-head__logo {
  display: block;
  width: auto;
  height: clamp(2.5rem, 2rem + 1.4vw, 3.5rem);
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.mds-head__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: clamp(2rem, 4vw, 2.75rem); }
.mds-head__image { margin: 0; background: var(--paper-2); }
.mds-head__image img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
@media (min-width: 900px) {
  .mds-head__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .mds-head__image { max-width: 34rem; justify-self: end; width: 100%; }
}

/* The lookbook ---------------------------------------------------------- */
.lookbook { padding-block: clamp(4rem, 9vw, 8rem); }
.lb-intro { text-align: center; margin-bottom: clamp(3rem, 7vw, 6rem); }
.lb-intro .label { justify-content: center; }
.lb-intro .label::before { display: none; }
.lb-intro h2 { margin-top: 1.25rem; }

.lb-spread { display: grid; gap: clamp(1rem, 2.5vw, 2.5rem); }
.lb-spread + .lb-spread,
.lb-statement + .lb-spread,
.lb-spread + .lb-statement,
.lb-spread + .lb-close { margin-top: clamp(4.5rem, 10vw, 9rem); }

.lb-look, .lb-detail, .lb-close { margin: 0; }
.lb-look picture, .lb-detail picture, .lb-close picture { display: block; background: var(--paper-2); }
.lb-look img, .lb-detail img, .lb-close img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

.lb-cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1.25rem;
  padding-top: 1rem;
}
.lb-cap__no {
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.lb-cap__name { font-size: var(--fs-small); }

/* Phone: one look to a row; a detail sits half width on the right, as if
   pinned to the page beside the look it belongs to. */
.lb-detail { width: 58%; justify-self: end; }

@media (min-width: 900px) {
  /* A look across seven of twelve columns, its detail in the last four,
     dropped to the foot of the look. Flipped, the two trade sides. */
  .lb-spread--feature { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
  .lb-spread--feature .lb-look   { grid-column: 1 / span 7; }
  .lb-spread--feature .lb-detail { grid-column: 9 / span 4; width: auto; margin-bottom: 3.25rem; }
  .lb-spread--flip .lb-look   { grid-column: 6 / span 7; grid-row: 1; }
  .lb-spread--flip .lb-detail { grid-column: 1 / span 4; grid-row: 1; }

  /* Two looks of a size, the second set lower: a pair, not a grid. */
  .lb-spread--pair { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .lb-spread--pair .lb-look:first-child { grid-column: 1 / span 5; }
  .lb-spread--pair .lb-look:last-child  { grid-column: 7 / span 5; margin-top: clamp(6rem, 12vw, 11rem); }
}

/* Measured on the line itself, in its own (display) size. */
.lb-statement { margin: 0; text-align: center; }
.lb-statement p { margin: 0 auto; max-width: 24ch; text-wrap: balance; }

.lb-close { max-width: 36rem; margin-inline: auto; }

/* What we make ----------------------------------------------------------- */
.mds-ways {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.mds-ways li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  column-gap: 1rem;
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--line);
}
.mds-ways li > p { grid-column: 2; margin: 0.75rem 0 0; color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.7; max-width: 38ch; }
.mds-ways__no {
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  color: var(--ink-soft);
  padding-top: 0.55rem;
}
.mds-ways__title { font-size: var(--fs-display-s); line-height: 1.2; font-weight: 400; }
@media (min-width: 900px) {
  .mds-ways { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mds-ways li { grid-template-columns: minmax(0, 1fr); border-bottom: 0; padding-inline: 0 clamp(1.5rem, 3vw, 3rem); }
  .mds-ways li + li { border-left: 1px solid var(--line); padding-left: clamp(1.5rem, 3vw, 3rem); }
  .mds-ways li > p { grid-column: 1; }
  .mds-ways__no { padding: 0 0 1.25rem; }
}

/* Brief to delivery ------------------------------------------------------ */
.mds-workroom { margin: 0; background: var(--paper-2); }
.mds-workroom img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.mds-steps { list-style: none; margin: 0; padding: 0; }

/* Terms ------------------------------------------------------------------ */
.mds-terms { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
/* Four across on a wide screen: each figure over its label, rather than the
   label pushed out to the right as style.css sets a single-column row. */
@media (min-width: 900px) {
  .mds-terms { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mds-terms .stat {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.9rem;
    padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1rem, 2vw, 2rem) clamp(1.5rem, 3vw, 2.25rem) 0;
  }
  .mds-terms .stat + .stat { border-left: 1px solid var(--line); padding-left: clamp(1rem, 2vw, 2rem); }
  .mds-terms .stat__label { text-align: left; }
}

/* Trade lookbook --------------------------------------------------------- */
.mds-trade { border-top: 1px solid var(--line); }
.mds-trade__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 2rem; }