/* site/assets/css/reception.css */

/* The title band ghosts the dinner, not the sweetheart table: the sweetheart
   table is the full-colour banner directly below it, and no photograph should
   appear twice in one view. The dinner returns far down, under The Menu. */
.reception .page-head {
  --page-ghost: url('../img/pages/reception-dinner-800.jpg');
  --page-ghost-pos: center 40%;
}

/* The banner is a band across a wide photograph, so it is held high enough that
   both faces stay inside it. */
.reception .page-banner img { object-position: center 28%; }

.page-banner + .reception-opening { margin-top: clamp(44px, 5vw, 64px); }

.reception-opening { padding-bottom: 0; }

/* The courtyard pair closes the opening, and the first section follows it. */
.reception-courtyard { margin-top: clamp(40px, 5vw, 56px); }

.reception-courtyard img { object-position: center 46%; }

.reception-courtyard + .page-section { margin-top: clamp(64px, 8vw, 104px); }

.reception-after-quote { margin-top: 36px; }

/* The recording of the toasts: one vellum panel on the white page, with the
   page's rule motif over it. Never a box inside a box. */
.audio-slot {
  max-width: 640px;
  margin: clamp(36px, 4vw, 48px) auto 0;
  padding: clamp(34px, 4.4vw, 48px) clamp(26px, 4vw, 44px);
  text-align: center;
}

.audio-slot::before {
  content: '';
  display: block;
  width: 90px;
  height: 3px;
  margin: 0 auto 26px;
  background: var(--color-accent-rule);
}

.audio-slot p {
  margin: 0;
  font-weight: 300;
  font-style: normal;
  font-size: clamp(17px, 1.9vw, 20px);
  line-height: 1.7;
  text-wrap: pretty;
}

/* The finished cake on its own, centred with even air above and below it. */
.reception .page-inset { margin: clamp(36px, 4vw, 48px) auto 0; }

/* Three cake photographs side by side from 700px, stacked below. */
@media (min-width: 700px) {
  .figures-three { grid-template-columns: repeat(3, 1fr); align-items: start; }
}

/* The menu, set like the printed card: a narrow column of italic dish names,
   each with its dietary notes in small tracked capitals beneath, on a vellum
   panel with white all around it. The tint and hairline come from .vellum. */
.menu-card {
  max-width: 460px;
  margin: 48px auto 0;
  padding: clamp(36px, 6vw, 56px) clamp(22px, 5vw, 40px);
  background: rgba(253, 248, 240, 0.9);
  border: 1px solid rgba(44, 42, 32, 0.16);
  text-align: center;
}

.menu-list { margin: 0; padding: 0; list-style: none; }

.menu-dish { margin: 0 0 30px; }
.menu-dish:last-child { margin-bottom: 0; }

.menu-dish span { display: block; }

.menu-dish-name {
  font-weight: 500;
  font-style: italic;
  font-size: clamp(22px, 5vw, 27px);
  line-height: 1.25;
  text-wrap: balance;
}

.menu-dish-notes {
  margin-top: 6px;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.2em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--color-muted);
}

.menu-dish-text {
  margin-top: 6px;
  font-weight: 300;
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
  text-wrap: balance;
}

/* The typeset card and the photograph of the printed card, side by side from
   900px and top aligned, the card first and the photograph under it below. */
.menu-pair {
  display: grid;
  gap: 32px;
  max-width: 1000px;
  margin: clamp(36px, 4vw, 48px) auto 0;
}

@media (min-width: 900px) {
  .menu-pair {
    grid-template-columns: minmax(0, 460px) minmax(0, 480px);
    justify-content: center;
    align-items: start;
    gap: 48px;
  }
}

/* The pair supplies the space above the card, so the card drops its own. The explicit
   width matters: a grid item with auto side margins and no width of its own shrinks
   to its content instead of filling its column. */
.menu-pair .menu-card { width: 100%; margin-top: 0; }

/* The two photographs stack in the right column, so it stands as tall as the
   typeset card beside it rather than leaving the page half empty. */
.menu-photos {
  display: grid;
  gap: clamp(24px, 3vw, 34px);
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

.menu-photo { margin: 0; }

.menu-photo img {
  width: 100%;
  height: auto;
  background: rgba(44, 42, 32, 0.08);
}

.menu-photo figcaption {
  margin-top: 10px;
  font-style: normal;
  font-size: 14px;
  color: var(--color-muted);
}

.menu-pair + .credit-line { margin-top: 32px; }

/* The keepsake link and its file size. */
.menu-download { margin: 20px 0 0; text-align: center; font-size: 17px; }
.menu-download-size { margin-left: 8px; font-size: 13px; letter-spacing: 0.08em; }

/* The Music: the shared ghosted band, carrying the photograph of the dancing. */
.reception-music .music-ghost-img { object-position: 50% 46%; }

/* The toasts: one player, then a card for every speaker with a button that jumps to them. */
.toasts-player {
  max-width: 760px;
  margin: 40px auto 0;
  padding: clamp(20px, 3vw, 32px);
  text-align: center;
}

.toasts-player audio { display: block; width: 100%; }

.toasts-now {
  min-height: 1.6em;
  margin: 12px 0 0;
  font-size: 15px;
  color: var(--color-muted);
}

.toast-grid {
  display: grid;
  gap: 32px 20px;
  grid-template-columns: repeat(2, 1fr);
  max-width: 1040px;
  margin: 48px auto 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 800px) {
  .toast-grid { grid-template-columns: repeat(4, 1fr); }
}

.toast-card { text-align: center; }

.toast-card figure { margin: 0 0 14px; }

.toast-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: rgba(44, 42, 32, 0.08);
  outline: 3px solid transparent;
  outline-offset: -3px;
  transition: outline-color 0.2s ease;
}

.toast-card.is-playing img { outline-color: var(--color-brown); }

.toast-name {
  margin: 0;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.3;
}

.toast-role {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-muted);
}

.toast-time {
  margin: 6px 0 12px;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: #857f66;
}

.toast-play {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--color-brown);
  border-radius: 999px;
  background: transparent;
  color: var(--color-brown);
  font-family: var(--font-body);
  font-size: 14px;
  cursor: pointer;
}

.toast-play:hover,
.toast-card.is-playing .toast-play { background: var(--color-brown); color: var(--color-cream); }

.toast-play:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .toast-card img { transition: none; }
}

.toasts-now:empty { display: none; }

/* Speakers with and without a role line still share one row of buttons. */
.toast-card { display: flex; flex-direction: column; align-items: center; }
.toast-card figure { width: 100%; }
.toast-card .toast-play { margin-top: auto; }

/* One small player under each speaker. */
.toast-audio { display: block; width: 100%; max-width: 240px; margin-top: auto; height: 40px; }

.toast-time { margin: 6px 0 12px; }

.toast-name { min-height: 1.3em; }
.toast-role { min-height: 2.8em; }

/* Wide screens: the role fits on one line, so the reserved space is one line. */
@media (min-width: 1000px) {
  .toast-role { min-height: 1.4em; }
}

/* The card of whoever is speaking gets a stroke all the way round it. */
.toast-card {
  padding: 12px 12px 16px;
  border: 2px solid transparent;
  transition: border-color 0.25s ease;
}

.toast-card.is-playing { border-color: var(--color-brown); }
.toast-card.is-playing img { outline-color: transparent; }

.toast-grid { gap: 20px 8px; }

@media (prefers-reduced-motion: reduce) {
  .toast-card { transition: none; }
}

/* Columns: two on tablets and phones, four only where each card has room for its player. The
   tracks may shrink below the audio control's own minimum width, so nothing pushes past the page. */
.toast-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 800px) {
  .toast-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; }
}

@media (min-width: 1040px) {
  .toast-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1040px; }
}

.toast-card { min-width: 0; }
.toast-audio { min-width: 0; max-width: 100%; }

/* One small player for every browser: play button, a bar you can drag, the time. */
.toast-ctl {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 240px;
  margin: auto auto 0;
  padding: 4px 14px 4px 4px;
  border: 1px solid rgba(116, 72, 54, 0.35);
  border-radius: 999px;
  background: #f4efe9;
}

.toast-btn {
  flex: none;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--color-brown);
  color: var(--color-cream);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toast-btn:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }

.toast-btn-icon {
  display: block;
  width: 0;
  height: 0;
  margin-left: 3px;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent currentColor;
}

.toast-btn.is-playing .toast-btn-icon {
  width: 12px;
  height: 14px;
  margin-left: 0;
  border: 0;
  background: linear-gradient(to right, currentColor 0 4px, transparent 4px 8px, currentColor 8px 12px);
}

.toast-bar {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  --fill: 0%;
}

.toast-bar::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--color-brown) var(--fill), rgba(116, 72, 54, 0.25) var(--fill));
}

.toast-bar::-moz-range-track { height: 3px; border-radius: 2px; background: rgba(116, 72, 54, 0.25); }
.toast-bar::-moz-range-progress { height: 3px; border-radius: 2px; background: var(--color-brown); }

.toast-bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5.5px;
  border-radius: 50%;
  border: 0;
  background: var(--color-brown);
}

.toast-bar::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; border: 0; background: var(--color-brown); }
.toast-bar:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; border-radius: 4px; }

.toast-clock {
  flex: none;
  min-width: 2.6em;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-align: right;
  color: #6b6550;
  font-variant-numeric: tabular-nums;
}