/* site/assets/css/details.css */

/* The title band ghosts the invitation, which the page shows in full far below
   it. The reception house used to be the ghost, but it is also the photograph
   in the band just under the title, and no picture should appear twice at once. */
.details .page-head {
  --page-ghost: url('../img/pages/ceremony-aisle-800.jpg');
  --page-ghost-pos: center 58%;
}

/* Where and When: the original's signature composition, a tall sand half carrying
   the reception house as a faint ghost with the heading over it, beside a white half
   with a lot of air, the key lines in small tracked capitals and the two venue
   photographs below them. */
.details-where { position: relative; display: grid; }

@media (min-width: 900px) {
  .details-where { grid-template-columns: 1fr 1fr; }
}

.details-where-ghost {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 300px;
  padding: 0 clamp(24px, 4vw, 56px) clamp(36px, 5vw, 64px);
  background: var(--color-sand);
  overflow: hidden;
}

.details-where-ghost::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('../img/pages/details-reception-house-800.jpg') center 30% / cover no-repeat;
  filter: saturate(0.3) contrast(0.86) brightness(1.06);
  opacity: 0.16;
}

/* White on bare sand is only 1.7:1, so a soft dark-olive shade at the foot carries
   the large letters past 3:1. The same device as the home panel, a little deeper
   here because this panel is shorter and the heading sits higher in the gradient.
   Measured on the composited pixels: 3.4:1. */
.details-where-ghost::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(44, 42, 32, 0.5), rgba(44, 42, 32, 0) 72%);
}

.details-where-title {
  margin: 0;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(46px, 5.6vw, 80px);
  line-height: 1.05;
  color: var(--color-white);
}

.details-where-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(44px, 6vw, 88px) clamp(24px, 4vw, 64px);
  background: var(--color-white);
}

/* The key lines are the owner's own justified lettering, kept as artwork. */
.details-where-plate {
  margin: 0 auto;
  max-width: 420px;
}

.details-where-plate img {
  display: block;
  width: 100%;
  height: auto;
}

.ww-date {
  margin: clamp(28px, 3.5vw, 44px) 0 0;
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-muted);
}

/* The two venues, in the order the lines above name them. */
.details-venues {
  display: grid;
  gap: 20px;
  margin: clamp(32px, 4vw, 48px) 0 0;
}

@media (min-width: 560px) {
  .details-venues { grid-template-columns: 1fr 1fr; gap: 20px; }
}

.details-venues figure { margin: 0; }

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

/* A small italic note from us, in the voice of .credit-note but in the body text colour. */
.details-fm-note {
  margin: 24px 0 0;
  font-weight: 300;
  font-style: italic;
  font-size: 15px;
  line-height: 1.4;
}

/* Three colour columns: stacked on phones, side by side from 800px. */
.details-cols { display: grid; }

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

.details-col {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 420px;
  padding-block: clamp(52px, 6vw, 78px);
  overflow: hidden;
  text-align: center;
}

.details-col p {
  max-width: 34ch;
  margin: 0 auto;
  font-size: 17px;
  line-height: 2;
}

/* The soft photo behind Accommodations: the lace pillow from the hero, faint enough
   to read as a texture rather than a picture. */
.details-col-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('../img/hero.jpg') 26% 74% / cover no-repeat;
  filter: saturate(0.3) contrast(0.68) brightness(1.08);
  opacity: 0.28;
}

/* Itinerary ------------------------------------------------------------- */

/* A white gap keeps the khaki panel apart from the khaki Transportation column. */
.details-itinerary { margin-top: 16px; }

/* The itinerary, in the original's three parts: the time right aligned in its own
   column, a hairline, then the venue as a small tracked label above the description.
   Everything sits a little back from full strength so the panel stays quiet. */
.itinerary {
  max-width: 720px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: left;
  counter-reset: none;
}

.it-entry {
  display: grid;
  grid-template-columns: minmax(0, 4.6fr) 1px minmax(0, 7fr);
  column-gap: clamp(20px, 3vw, 34px);
  padding-bottom: clamp(36px, 4vw, 48px);
  margin-bottom: clamp(36px, 4vw, 48px);
  border-bottom: 1px solid rgba(44, 42, 32, 0.12);
}

.it-entry:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

/* The hairline between the two columns, drawn as the grid's middle track. */
.it-entry::after {
  content: '';
  grid-column: 2;
  grid-row: 1;
  width: 1px;
  background: rgba(44, 42, 32, 0.28);
}

.it-time {
  grid-column: 1;
  display: grid;
  grid-template-columns: 1fr 26px;
  align-items: baseline;
  column-gap: 5px;
  margin: 0;
  color: #3a372b;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum", "lnum";
}

.it-clock {
  text-align: right;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(38px, 4.4vw, 48px);
  line-height: 1.05;
}

.it-ampm {
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  letter-spacing: 0.08em;
}

.it-detail { grid-column: 3; }

.it-venue {
  margin: 0 0 10px;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.25em;
  line-height: 1.5;
  text-transform: uppercase;
  color: #3a372b;
}

.it-line {
  margin: 0 0 8px;
  font-size: 17px;
  line-height: 1.7;
  color: #3a372b;
}

.it-line:last-child { margin-bottom: 0; }

/* A second line, for example the photographer, sits a shade back from the first. */
.it-line-secondary {
  font-size: 16px;
  color: rgba(44, 42, 32, 0.72);
}

/* On a phone the three parts stack and the hairline goes. */
@media (max-width: 639.98px) {
  .itinerary { max-width: 34rem; }

  .it-entry {
    display: block;
    padding-bottom: 32px;
    margin-bottom: 32px;
  }

  .it-entry::after { content: none; }

  .it-time { grid-template-columns: auto 26px; justify-content: start; margin-bottom: 10px; }
}

/* With Thanks: the credits ------------------------------------------------- */

/* A white gap keeps the two brown panels (and the itinerary above them) apart. */
.credits-panel { margin-top: 16px; padding-bottom: clamp(48px, 7vw, 88px); }

.credits-intro {
  max-width: 620px;
  margin: 24px auto 0;
  text-align: center;
  font-size: 19px;
  text-wrap: balance;
}

.credits-label { margin-top: 56px; }

.credits-list {
  display: grid;
  gap: 56px 32px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 600px) {
  .credits-list { grid-template-columns: repeat(2, 1fr); }
}

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

.credit {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Credits with no logo: one quiet row under the grid, set off by a thin rule. */
.credits-text-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px 72px;
  margin: 64px 0 0;
  padding: 48px 0 0;
  list-style: none;
  border-top: 1px solid rgba(253, 246, 235, 0.35);
}

.credit-text .credit-body { margin-top: 14px; }

/* Rena's letter to the artists, under the credits. */
.credits-letter {
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid rgba(253, 246, 235, 0.35);
}

/* Category label: small tracked FM Light capitals, like the original. */
.credit-role {
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.credit-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 22px;
  color: inherit;
  text-decoration: none;
}

/* Every logo sits in the same 96px slot so the rows line up. */
.credit-logo-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  max-width: 100%;
}

.credit-logo {
  width: auto;
  height: var(--show);
  max-width: 100%;
  object-fit: contain;
}

/* Fogcutter is dark on transparent and vanishes on brown, so it gets a cream chip
   (Hedge's logo is already a white tile). */
.credit-logo-chip {
  box-sizing: content-box;
  padding: 12px 18px;
  background: var(--color-cream);
}

/* Wild Club's PNG is chartreuse; the original shows it white like the other logos. */
.credit-logo--white { filter: brightness(0) invert(1); }

.credit-name {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.5;
  max-width: 26ch;
}

/* Linked vendors carry a thin underline so they read as links; unlinked ones do not. */
a.credit-body .credit-name {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

a.credit-body:hover .credit-name { text-decoration-thickness: 2px; }

a.credit-body:focus-visible {
  outline: 2px solid var(--color-cream);
  outline-offset: 6px;
}

/* Optional secondary line under a credit (for example a second photographer): small, light,
   cream at 85% on the brown, about 5.7:1. It sits outside the link, so it is not underlined. */
.credit-note {
  margin-top: 6px;
  max-width: 26ch;
  font-weight: 300;
  font-style: italic;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-cream);
  opacity: 0.85;
}

/* Thank You --------------------------------------------------------------- */

/* Brown panel with the mirror-and-rose photo ghosted behind, as on the original. */
.thanks-panel {
  position: relative;
  margin-top: 16px;
  isolation: isolate;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.thanks-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('../img/itinerary-section-photo.jpg') center / cover no-repeat;
  opacity: 0.12;
}

.thanks-panel .panel-heading { margin-bottom: 32px; }

/* Cream on brown is 7.2:1 and stays above 5:1 over the ghosted photo. Balanced lines
   stop a lone word dropping to its own line; the max-width is the fallback. */
.thanks-text {
  max-width: 34ch;
  margin: 0 0 18px;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.7;
  text-wrap: balance;
}

.thanks-line { margin: 0; }

/* The address is set as written, in FM Light: never upper-cased. */
.thanks-email {
  font-weight: 300;
  font-size: clamp(20px, 4.4vw, 34px);
  letter-spacing: 0.02em;
  text-transform: none;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

.thanks-email:focus-visible { outline: 2px solid var(--color-cream); outline-offset: 6px; }

.thanks-signature {
  margin: 28px 0 0;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(24px, 3vw, 32px);
}

/* The invitation, the one section of this page in the white style of the
   others: Kindred's photograph of the invitation across the reading width,
   with the sticker sheet centred under it. */
.details-invitation { margin-top: clamp(64px, 8vw, 104px); }

.details-invitation .photo-wide + .photo-wide { margin-top: clamp(28px, 3vw, 36px); }

.details-invitation .credit-line { margin-top: 32px; color: var(--color-muted); }

/* The two venues drawn to the same tall shape, so the pair lines up. */
.details-venues img { aspect-ratio: 4 / 5; object-fit: cover; }
.details-venues figure:first-child img { object-position: 50% 40%; }
.details-venues figure:last-child img { object-position: 50% 22%; }

/* Transportation and Attire carry a faint, faceless detail behind their words, as Accommodations
   carries the lace: an iron gate and a stair for getting there, the dress for what to wear. */
.details-col:not(.details-col-photo)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--col-photo) var(--col-pos, center) / cover no-repeat;
  filter: saturate(0.25) contrast(0.6) brightness(1.2);
  opacity: 0.3;
}

.details-cols > .details-col:first-child { --col-photo: url('../img/pages/details-col-gate.jpg'); --col-pos: 50% 50%; }
.details-cols > .details-col:last-child { --col-photo: url('../img/pages/details-col-dress.jpg'); --col-pos: 50% 45%; }

/* The gate has more line work than the dress, so it sits a little fainter behind the words. */
.details-cols > .details-col:first-child::before { opacity: 0.2; }

/* The invitation opens the page, so the Where & When band follows it after a gap. */
.details-invitation { margin-top: clamp(24px, 3vw, 40px); margin-bottom: clamp(56px, 7vw, 96px); }

/* More air between the invitation quote and the photograph beneath it. */
.details-invitation .pull-quote { margin-bottom: clamp(56px, 6vw, 88px); }

/* Where & When, as the original set it: two lines, "where" then "& when" a step in, the
   ampersand dark, with generous room around the letters. */
.details-where-ghost {
  min-height: clamp(340px, 34vw, 520px);
  padding: 0 clamp(32px, 6vw, 88px) clamp(48px, 7vw, 96px);
}

.details-where-title {
  font-size: clamp(56px, 6.6vw, 104px);
  line-height: 1.12;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 18px rgba(44, 42, 32, 0.18);
}

.dw-line { display: block; }
.dw-line-first { padding-left: 0.5em; }
.dw-amp { color: var(--color-text); text-shadow: none; }