/* The home page: the pitch beside a salon wall, the promises, recently sold, featured slides and
   newest works. Sections are separated by air and a hairline, not by boxes. */

@layer pages {
  /* Pitch */
  .home-hero {
    display: grid;
    gap: var(--space-12);
    align-items: center;
    padding-block: var(--space-8) var(--space-12);
  }

  @media (min-width: 900px) {
    .home-hero--wall { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--space-16); padding-block: var(--space-12) var(--space-16); }
  }

  .home-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
  .home-hero__title { font-size: var(--fs-display); line-height: 1.02; }

  .home-hero__tagline {
    max-width: 30ch;
    font-family: var(--font-display);
    font-size: clamp(20px, 16px + 1vw, 26px);
    font-weight: 300;
    line-height: 1.3;
    color: var(--bp-ink);
  }

  .home-hero__lead { max-width: 56ch; color: var(--bp-ink-2); }

  .home-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); margin-top: var(--space-3); }

  /* Salon wall: three works of different shapes, hung close together. */
  .salon {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--space-8) var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  @media (min-width: 900px) {
    .salon { gap: var(--space-10) var(--space-8); }
  }

  .salon__work--1 { grid-row: 1 / span 2; margin-top: 12%; }
  .salon__work--2 { width: 82%; align-self: end; }
  .salon__work--3 { width: 100%; }

  .salon__link { display: flex; flex-direction: column; gap: 10px; color: var(--bp-ink); text-decoration: none; }

  .salon__frame {
    display: block;
    overflow: hidden;
    border: var(--mat) solid var(--bp-mat);
    background: var(--bp-mat);
    box-shadow: var(--shadow-hang);
    transition: box-shadow var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  }

  .salon__work--1 .salon__frame { aspect-ratio: 4 / 5; }
  .salon__work--2 .salon__frame { aspect-ratio: 1 / 1; }
  .salon__work--3 .salon__frame { aspect-ratio: 4 / 3; }
  .salon__frame img { width: 100%; height: 100%; object-fit: cover; }

  .salon__link:hover .salon__frame { box-shadow: var(--shadow-lift); transform: translateY(-4px); }

  .salon__label { font-size: 12px; line-height: 1.35; color: var(--bp-ink-2); }
  .salon__label em { font-family: var(--font-display); font-size: 14px; font-weight: 400; color: var(--bp-ink); }

  @media (min-width: 900px) {
    .salon__frame { border-width: var(--mat-lg); }
  }

  /* Promises: one ruled line of small capitals. */
  .trust-badges {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-3);
    margin: 0;
    padding: var(--space-5) 0;
    border-block: 1px solid var(--bp-line);
    list-style: none;
  }

  .trust-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .1em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--bp-ink-2);
  }

  .trust-badge .icon { font-size: 24px; color: var(--bp-brand-600); }
  .trust-badge:last-child:nth-child(odd) { grid-column: 1 / -1; }

  @media (min-width: 900px) {
    .trust-badges { display: flex; justify-content: space-between; }
    .trust-badge:last-child:nth-child(odd) { grid-column: auto; }
  }

  /* Section heads */
  .home-section { margin-top: var(--space-16); display: flex; flex-direction: column; gap: var(--space-8); scroll-margin-top: var(--space-4); }

  @media (min-width: 820px) {
    .home-section { margin-top: var(--space-24); }
  }

  .home-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--bp-line);
  }

  .home-section__heading { display: flex; flex-direction: column; gap: 6px; }
  .home-section__title { font-size: clamp(30px, 22px + 2vw, 48px); }

  .scroller-controls,
  .showcase__controls { display: flex; gap: var(--space-2); }

  /* Recently sold: the headline figure, then the works */
  .sold__summary {
    display: grid;
    gap: var(--space-5);
    align-items: end;
  }

  @media (min-width: 820px) {
    .sold__summary { grid-template-columns: minmax(0, 1fr) auto; }
    .sold__pitch { align-items: flex-end; text-align: end; }
  }

  .sold__figure { display: flex; flex-direction: column; gap: 4px; }

  .sold__amount {
    font-family: var(--font-display);
    font-size: clamp(44px, 30px + 3.4vw, 80px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: lining-nums;
    color: var(--bp-heading);
  }

  .sold__caption { font-size: var(--fs-lg); color: var(--bp-ink-2); }

  .sold__pitch { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
  .sold__pitch .hand { font-size: 28px; color: var(--bp-brand-600); transform: rotate(-2deg); }

  /* No sales total beside it (Home:ShowSalesTotal off): the pitch sits on the left, under the heading. */
  .sold__summary > .sold__pitch:only-child { align-items: flex-start; text-align: start; }

  .sold__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(200px, 66%);
    gap: var(--space-6);
    margin: 0 calc(var(--gutter) * -1);
    padding: 6px var(--gutter) var(--space-8);
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }

  @media (min-width: 820px) {
    .sold__track { grid-auto-columns: calc((100% - 4 * var(--space-8)) / 4.4); gap: var(--space-8); margin: 0; padding-inline: 0; }
  }

  .sold-card { scroll-snap-align: start; }

  .sold-card__link { display: flex; flex-direction: column; gap: var(--space-4); height: 100%; color: var(--bp-ink); text-decoration: none; }

  .sold-card__media {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: var(--mat) solid var(--bp-mat);
    background-color: var(--bp-mat);
    box-shadow: var(--shadow-hang);
    transition: box-shadow var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  }

  .sold-card__media img { width: 100%; height: 100%; object-fit: cover; }
  .sold-card__link:hover .sold-card__media { box-shadow: var(--shadow-lift); transform: translateY(-4px); }

  .sold-card__body { display: flex; flex-direction: column; gap: 3px; padding-inline: 2px; }
  .sold-card__artist { font-size: 11.5px; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; }
  .sold-card__title { font-family: var(--font-display); font-size: 19px; font-style: italic; font-weight: 300; line-height: 1.25; color: var(--bp-heading); }

  .sold-card__price {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--bp-line);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  .sold-card__price-label { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--bp-ink-2); }
  .sold-card__when { color: var(--bp-ink-2); }

  /* Featured slides: each style is a small exhibition on a deeper wall. */
  .showcase__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: var(--space-4);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }

  .showcase__track::-webkit-scrollbar { display: none; }

  .slide {
    display: grid;
    gap: var(--space-8);
    align-items: center;
    padding: var(--space-8) var(--space-5) var(--space-10);
    background: var(--bp-paper-2);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .slide__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }

  .slide__eyebrow {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--bp-ink-2);
  }

  .slide__number {
    font-family: var(--font-display);
    font-size: 30px;
    font-style: italic;
    font-weight: 300;
    letter-spacing: 0;
    line-height: 1;
    color: var(--bp-brand-600);
  }

  .slide__title { font-size: clamp(32px, 24px + 2vw, 52px); }
  .slide__hook { max-width: 40ch; font-size: var(--fs-lg); color: var(--bp-ink-2); }
  .slide__cta { margin-top: var(--space-2); }

  .slide__products {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8) var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .slide-tile__link {
    display: flex;
    flex-direction: column;
    gap: 3px;
    height: 100%;
    color: var(--bp-ink);
    text-decoration: none;
  }

  .slide-tile__media {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 5;
    margin-bottom: var(--space-3);
    overflow: hidden;
    border: 8px solid var(--bp-mat);
    background-color: var(--bp-mat);
    box-shadow: var(--shadow-hang);
    transition: transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease);
  }

  .slide-tile__link:hover .slide-tile__media { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
  .slide-tile__media img { width: 100%; height: 100%; object-fit: cover; }
  .slide-tile__badge { position: absolute; bottom: 8px; inset-inline-start: 8px; }

  .slide-tile__artist { font-size: 10.5px; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; }

  .slide-tile__name {
    display: -webkit-box;
    overflow: hidden;
    font-family: var(--font-display);
    font-size: 16px;
    font-style: italic;
    font-weight: 300;
    line-height: 1.25;
    color: var(--bp-heading);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .slide-tile__size { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--bp-ink-3); }
  .slide-tile__price { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--bp-ink-2); }

  /* Under the slides: the markers, and on phones pause / previous / next round them. */
  .showcase__nav { display: flex; align-items: center; justify-content: center; gap: var(--space-1); }

  @media (min-width: 820px) {
    .showcase__step { display: none; }
  }

  /* Slide markers: short painted lines. The button is tall enough to tap; the line is drawn in its middle. */
  .showcase__dots { display: flex; justify-content: center; gap: var(--space-2); }

  .showcase__dot {
    --line: var(--bp-line-strong);
    width: 32px;
    height: 24px;
    padding: 0;
    border: 0;
    background: linear-gradient(var(--line), var(--line)) no-repeat center / 100% 2px;
    cursor: pointer;
    transition: width var(--dur) var(--ease);
  }

  .showcase__dot:hover { --line: var(--bp-ink-2); }
  .showcase__dot[aria-current="true"] { --line: var(--bp-brand-600); width: 56px; }

  @media (min-width: 820px) {
    .slide { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-12); padding: var(--space-12) var(--space-12) var(--space-12); }
    .slide__products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
  }

  @media (min-width: 820px) and (max-width: 1100px) {
    .slide__products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* Phones (ADR-0033): a slide fits on one screen with its controls under it. A short heading, three
     small works in a row (a fourth waits for the style's page), and the buttons below, not above. */
  @media (max-width: 819.98px) {
    .showcase { gap: var(--space-4); }
    .showcase__controls { display: none; }

    .slide { gap: var(--space-4); align-items: start; padding: var(--space-5) var(--space-4); }
    .slide__text { gap: var(--space-2); }
    .slide__number { font-size: 22px; }
    .slide__title { font-size: 26px; }

    .slide__hook {
      display: -webkit-box;
      overflow: hidden;
      font-size: 15px;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .slide__cta { margin-top: 0; }

    .slide__products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
    .slide__products > :nth-child(n + 4) { display: none; }
    .slide-tile__media { margin-bottom: var(--space-2); border-width: 4px; }
    .slide-tile__artist { display: none; }
    .slide-tile__name { font-size: 13px; -webkit-line-clamp: 1; }
    .slide-tile__size { font-size: 11px; }
    .slide-tile__price { font-size: 12px; }

    .showcase__dots { gap: 6px; }
    .showcase__dot { width: 18px; }
    .showcase__dot[aria-current="true"] { width: 32px; }
  }

  .home-empty { margin-block: var(--space-10); text-align: center; color: var(--bp-ink-2); }
}