/* site/assets/css/home.css */

/* Bands sit in a frame inset from the page edges, like the original. */
.home-frame { margin-inline: 16px; }

@media (min-width: 700px) {
  .home-frame { margin-inline: 40px; }
}

@media (min-width: 1000px) {
  .home-frame { margin-inline: 80px; }
}

/* Hero: photo, then a translucent cream card holding the lettered names and date.

   The photograph is deliberately washed out: the original is a pale, low-contrast
   lace-and-pillow picture, and the file on disk is warmer and more contrasty than
   that. The layer below desaturates it, cuts the contrast, lifts the brightness and
   then floats a flat cream veil over the top, which lifts the blacks (a contrast()
   alone pivots on mid grey and would crush them instead). The crop sits higher than
   the file's centre so the dark fold at the foot of the frame stays out of the band. */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 32px 16px;
  background: var(--color-cream);
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('../img/hero.jpg') center 42% / cover no-repeat;
  filter: saturate(0.46) sepia(0.16) contrast(0.76) brightness(1.2);
}

/* A flat cream veil, a shade heavier at the foot where the photograph is darkest. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(253, 246, 235, 0.3), rgba(253, 246, 235, 0) 52%),
    rgba(253, 246, 235, 0.3);
}

.hero-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 36px 20px 28px;
  background: var(--color-overlay);
}

.hero-names { margin: 0; width: 100%; text-align: center; }

.hero-names img,
.hero-date {
  height: auto;
  margin-inline: auto;
}

.hero-names img { width: 590px; max-width: 100%; }
.hero-date { width: 267px; max-width: 100%; }

.hero-rule {
  display: block;
  width: 304px;
  max-width: 100%;
  height: 3px;
  background: var(--color-rule);
}

.hero-names + .hero-rule { margin-top: 28px; }
.hero-rule + .hero-date { margin-top: 32px; margin-bottom: 32px; }

@media (min-width: 700px) {
  .hero { padding: 64px 0; }
  .hero-card { width: min(980px, calc(100% - 96px)); padding: 52px 24px 37px; }
}

@media (min-width: 1000px) {
  .hero { padding: 87px 0; }
  .hero-card { min-height: 557px; }
  .hero-names + .hero-rule { margin-top: 37px; }
  .hero-rule + .hero-date { margin-top: 59px; margin-bottom: 52px; }
}

/* Where and when: a tall sand panel carrying the house as a faint, misty ghost,
   beside a plain white half with a lot of air and the schedule in small capitals.
   Dashed hairlines flank the whole band on wide screens. */
.wnw { position: relative; display: grid; }

@media (min-width: 700px) {
  .wnw { grid-template-columns: 1fr 1fr; min-height: clamp(520px, 52.5vw, 756px); }
}

/* The dashed rules of the original, just outside the band's content edges. They
   stay clear of the fixed side texts and only appear where there is room. */
@media (min-width: 1100px) {
  .wnw::before,
  .wnw::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 1px dashed rgba(66, 66, 66, 0.55);
  }

  .wnw::before { left: -14px; }
  .wnw::after { right: -14px; }
}

.wnw-photo {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 420px;
  padding: 0 0 12% 18%;
  background: var(--color-sand);
  overflow: hidden;
}

/* The house reads as a warm-grey ghost on the sand, not as a photograph. */
.wnw-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('../img/venue-photo-where-and-when.jpg') center top / 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. A soft dark-olive shade at the foot, where the
   heading sits, carries the large letters past 3:1 without the dusty brown cast the
   panel used to have. */
.wnw-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(44, 42, 32, 0.34), rgba(44, 42, 32, 0) 58%);
}

.wnw-title {
  margin: 0;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(56px, 6.53vw, 94px);
  line-height: 1;
  color: var(--color-white);
}

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

.wnw-schedule {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(56px, 8vw, 96px) 24px;
  background: var(--color-white);
}

/* The owner's own justified lettering, kept as artwork. */
.schedule { width: 100%; max-width: 420px; }

.schedule-plate {
  display: block;
  width: 100%;
  height: auto;
}

/* Three colour blocks, each a large link: equal thirds, full bleed to the frame,
   no gaps, in the rhythm of the original's Transportation / Accommodations / Attire
   columns. Dark text keeps every block above 5:1 (the original set white on the
   khaki and the olive, which is under 2:1 and unreadable as body copy). */
.home-tiles { display: grid; margin-bottom: 0; }

@media (min-width: 700px) {
  .home-tiles { grid-template-columns: repeat(3, 1fr); }
}

.home-tile {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0;
  padding: clamp(52px, 6vw, 78px) clamp(24px, 3vw, 40px) clamp(56px, 6vw, 84px);
  color: var(--color-text);
  text-align: center;
  text-decoration: none;
  overflow: hidden;
}

.home-tile-khaki { background: var(--color-khaki); }
.home-tile-cream { background: var(--color-cream); }
.home-tile-olive { background: var(--color-olive); }

/* Each column carries its own low contrast photograph, in the register of the page headers:
   a soft, pale ghost of the gallery, the church and the reception. */
.home-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--tile-photo) var(--tile-pos, center) / cover no-repeat;
  filter: saturate(0.25) contrast(0.6) brightness(1.2);
  opacity: 0.3;
}

.home-tile-khaki { --tile-photo: url('../img/pages/home-tile-bouquet.jpg'); --tile-pos: 50% 30%; }
.home-tile-cream { --tile-photo: url('../img/pages/home-tile-candles.jpg'); --tile-pos: 50% 50%; }
.home-tile-olive { --tile-photo: url('../img/pages/home-tile-cake.jpg'); --tile-pos: 50% 40%; }

.home-tile-title {
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

/* A short vertical rule between title and line, like the original columns. */
.home-tile-title::after {
  content: '';
  display: block;
  width: 1px;
  height: 90px;
  margin: 26px auto 0;
  background: currentColor;
  opacity: 0.85;
}

.home-tile-text { margin-top: 30px; max-width: 30ch; font-size: 17px; line-height: 2; }

/* The ring sits inside the tile so neighbouring tiles never overlap it. */
.home-tile:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: -6px;
}

.home-tile:hover .home-tile-title,
.home-tile:focus-visible .home-tile-title {
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* The two of us beside a few words: photograph on a pale sand panel, the words on white,
   side by side from 800px and stacked (photograph first) below. */
.home-couple {
  display: grid;
  margin-top: 16px;
}

.home-couple figure {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: clamp(28px, 5vw, 72px) 16px;
  background: #ece5df;
}

.home-couple img {
  width: 100%;
  max-width: 420px;
  height: auto;
  filter: saturate(0.85) contrast(0.9) brightness(1.06);
}

.home-couple-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(44px, 7vw, 96px) clamp(24px, 6vw, 88px);
  text-align: center;
}

.home-couple-text p {
  max-width: 30ch;
  margin: 0;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(22px, 2.3vw, 32px);
  line-height: 1.5;
  text-wrap: balance;
  color: #3a382d;
}

.home-couple-rule {
  display: block;
  width: 96px;
  height: 3px;
  margin: 34px 0;
  background: var(--color-rule);
}

@media (min-width: 800px) {
  .home-couple { grid-template-columns: 1fr 1fr; min-height: clamp(560px, 46vw, 760px); }
}