/* ==========================================================================
   The culinary compositions (owner's food photography brief, 24 Oct 2026)
   Markup: src/partials/culinary.mjs. Motion: assets/js/culinary.js.
   Loaded on the pages that show one: the home page (the Culinary Reveal),
   the Winelands tour (the Dining Diptych), Destinations (the Quiet Moment) and
   About, whose coast-and-penguins pair is the same layered reveal (.about-pair).

   Every rule is scoped to .taste. The overlaps are made with grid placement and
   margins, never transforms, so the movement (transform, opacity, clip-path in
   culinary.js) never fights the layout, and the composition is complete when
   nothing moves: reduced motion, ?nomotion, or no JavaScript.
   ========================================================================== */

.taste {
  --taste-gap: clamp(2rem, 1rem + 3vw, 4.5rem);
}

/* A photograph filling its frame on its focal point, a little taller than the frame
   so the scroll drift (about 4% each way) never shows an edge */
.taste__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--ratio, 3 / 2);
  border-radius: var(--media-radius);
  background: var(--lc-ivory);
}
.taste__frame > picture {
  position: absolute;
  inset: -5% 0;
  display: block;
}
.taste__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
}
.taste figcaption {
  margin-top: 0.75rem;
  font-family: var(--lc-ui);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--lc-muted);
}

/* The fine brass line under a heading (drawn from the left by culinary.js) */
.taste__rule {
  display: block;
  width: 4.5rem;
  height: 1px;
  margin-top: clamp(1rem, 0.8rem + 0.6vw, 1.5rem);
  background: var(--lc-brass);
  transform-origin: 0 50%;
}
.taste__text {
  max-width: 34rem;
  margin-top: clamp(1rem, 0.8rem + 0.6vw, 1.4rem);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0938rem);
  line-height: 1.7;
  color: var(--lc-body);
  text-wrap: pretty;
}

/* ---------- The Culinary Reveal (home) ----------
   The words beside a Winelands landscape; the food photograph laid over the landscape's lower
   corner on a narrow paper mat, overhanging it, with one restrained caption on the other side. */
.taste--reveal {
  padding-block: var(--lc-chapter, clamp(4rem, 6vw, 8rem));
  background: var(--lc-paper-light);
}
.taste__grid {
  display: grid;
  gap: var(--taste-gap);
}
.taste--reveal .taste__words .lc-lead {
  max-width: 30rem;
}
.taste--reveal .lc-note {
  margin-top: clamp(1.25rem, 1rem + 0.8vw, 2rem);
}
.taste__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  /* room for the food photograph's overhang below the landscape */
  padding-bottom: clamp(1.5rem, 6vw, 3.5rem);
}
.taste__main {
  grid-area: 1 / 1;
  border-radius: var(--media-radius);
}
/* The landscape keeps its photograph's own shape (3:2) at every width and shows its whole width: the guests at the
   tasting table sit at both of its edges (the media audit) */
.taste__main .taste__frame {
  --ratio: 3 / 2;
}
.taste__layer {
  grid-area: 1 / 1;
  align-self: end;
  justify-self: end;
  width: 50%;
  margin: 0 4% -16% 0;
  padding: clamp(5px, 0.6vw, 8px);
  border-radius: calc(var(--media-radius) + 6px);
  background: var(--lc-paper-light);
  box-shadow: var(--media-shadow);
  position: relative;
}
.taste__layer .taste__frame {
  --ratio: 1;
}
.taste__caption {
  grid-area: 2 / 1;
  max-width: 44%;
  text-wrap: pretty;
}
@media (min-width: 64em) {
  .taste__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    align-items: center;
  }
  .taste__layer {
    justify-self: start;
    width: 36%;
    margin: 0 0 -10% -4%;
  }
  .taste__caption {
    justify-self: end;
    max-width: 56%;
    text-align: right;
  }
  .taste__stage {
    padding-bottom: clamp(2.5rem, 4vw, 4rem);
  }
}

/* ---------- The Dining Diptych (the Winelands tour) ----------
   A spread: the table on the left page; the words, then the plate, on the right. Phones read words, table, plate,
   the plate overlapping the table's foot on a narrow mat. */
.taste--diptych {
  overflow: clip;
}
.taste__spread {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(2rem, 1.5rem + 2vw, 3rem);
}
.taste__head h2 {
  text-wrap: balance;
}
.taste__pane {
  margin: 0;
  min-width: 0;
}
.taste__pane--a .taste__frame {
  --ratio: 4 / 3;
}
.taste__pane--b .taste__frame {
  --ratio: 4 / 5;
}
.taste__pane--b {
  position: relative;
  justify-self: end;
  width: 62%;
  max-width: 22rem;
  margin-top: calc(-14% - clamp(2rem, 1.5rem + 2vw, 3rem));
}
.taste__pane--b .taste__frame {
  outline: clamp(5px, 0.6vw, 8px) solid var(--white, #fff);
}
/* The first caption stays clear of the overlapping plate */
.taste__pane--a figcaption {
  max-width: 34%;
}
@media (min-width: 40em) {
  .taste__spread {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    grid-template-areas: 'head head' 'a b';
    column-gap: var(--gallery-gap, 16px);
    align-items: start;
  }
  .taste__head {
    grid-area: head;
  }
  .taste__pane--a {
    grid-area: a;
  }
  .taste__pane--b {
    grid-area: b;
    justify-self: stretch;
    width: auto;
    max-width: none;
    margin-top: clamp(3rem, 8vw, 6rem);
  }
  .taste__pane--b .taste__frame {
    outline: 0;
  }
  .taste__pane--a figcaption {
    max-width: none;
  }
}
@media (min-width: 64em) {
  .taste__spread {
    grid-template-columns: minmax(0, 7fr) minmax(0, 1fr) minmax(0, 4fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: 'a . head' 'a . b';
    row-gap: clamp(2rem, 3vw, 3rem);
  }
  .taste__head {
    align-self: start;
    padding-top: clamp(0.5rem, 2vw, 2rem);
  }
  .taste__pane--b {
    align-self: end;
    max-width: 20rem;
    margin-top: 0;
  }
}

/* ---------- The Quiet Culinary Moment (destinations) ----------
   One plate with room around it, a short heading and a line: a pause between the places and the call to action. */
.taste--quiet {
  padding-block: clamp(4.5rem, 3rem + 6vw, 9rem);
}
.taste__quiet {
  display: grid;
  gap: clamp(2rem, 1.5rem + 2vw, 3rem);
  justify-items: center;
}
.taste__solo {
  width: min(72vw, 20rem);
  margin: 0;
}
.taste__solo .taste__frame {
  --ratio: 4 / 5;
}
.taste--quiet .taste__words {
  max-width: 30rem;
}
@media (min-width: 48em) {
  .taste__quiet {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem) minmax(2.5rem, 7rem) minmax(0, 28rem) minmax(0, 1fr);
    align-items: center;
    justify-items: stretch;
  }
  .taste__solo {
    grid-column: 2;
    width: auto;
  }
  .taste--quiet .taste__words {
    grid-column: 4;
  }
}

/* ---------- About: the coast and the penguins (owner's About brief, 24 Oct 2026) ----------
   The dominant coastline with the penguins laid over its lower-left corner on a narrow mat, a brass corner
   cue at the opposite corner, and a restrained location caption. Replaces the solid green logo panel. */
.about-pair {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0.85rem 0.85rem clamp(2.5rem, 7vw, 4rem) 0;
}
.about-pair::before {
  /* the brass corner, set off the photograph's top-right corner */
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(3rem, 8vw, 4.5rem);
  height: clamp(3rem, 8vw, 4.5rem);
  border-top: 1px solid var(--lc-brass);
  border-right: 1px solid var(--lc-brass);
  border-top-right-radius: calc(var(--media-radius) + 6px);
  pointer-events: none;
}
.about-pair__main {
  grid-area: 1 / 1;
  border-radius: var(--media-radius);
}
.about-pair__main .taste__frame {
  --ratio: 5 / 4;
}
.about-pair__layer {
  position: relative;
  grid-area: 1 / 1;
  align-self: end;
  justify-self: start;
  width: 38%;
  max-width: 13rem;
  margin: 0 0 -18% -0.5rem;
  padding: clamp(5px, 0.6vw, 7px);
  border-radius: calc(var(--media-radius) + 5px);
  background: var(--white, #fff);
  box-shadow: var(--media-shadow);
}
.about-pair__layer .taste__frame {
  --ratio: 4 / 5;
}
.about-pair__caption {
  grid-area: 2 / 1;
  justify-self: end;
  max-width: 60%;
  text-align: right;
}
/* One place per line, clear of the penguins' overhang at every width */
.about-pair__caption > span {
  display: block;
}
.about-pair__caption > .about-pair__sep {
  display: none;
}
@media (min-width: 64em) {
  .about-pair__layer {
    margin-left: -8%;
  }
}