/* The events: one ivory gatefold card per function, on the burgundy lace.

   Each card is a sheet of the letter's gold-flecked paper framed in gold, with
   the event's illustration, its date and time, venue, dress code, a short
   programme, and buttons for directions and the calendar. Over it, while it
   waits to be seen, lie two burgundy lace covers (a gatefold) that swing open
   as it comes into view (js/events.js); without the script there are none.

   The section is as tall as it needs to be (at least a screen). Its cards
   are laid out by the section's width, and by the screen's shape on tablets:
     phone      a deck that swipes sideways, with dots
     upright    two by two (tablets upright, the laptop column)
     sideways   four in a row (tablets sideways; is-tablet is set in <head>)
   Inside a card, cqi is the card's own width, so a card reads the same at
   any size; --k scales its words where cards are narrow for the screen.
*/

.events {
  position: relative;
  background: #3a0a12;
  container: esec / inline-size;
}

.e-bg {
  position: absolute;
  inset: 0;
  background: #3a0a12 url(../assets/letter/bg-phone.webp) center / cover no-repeat;
}

.e-inner {
  --edge: calc(clamp(44px, 13vw, 84px) * .66);   /* clear of the lace trims */
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--edge) + 7cqi) 0 calc(var(--edge) + 8cqi);
}

.e-head {
  text-align: center;
  color: #f4ead9;
}

.e-head > * { margin: 0; }

.e-kicker {
  font: 600 3.2cqi/1.3 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .3em;
  padding-left: .3em;
  text-transform: uppercase;
  color: #d4b06a;
}

.e-title {
  font: 400 12cqi/1.15 "Pinyon Script", cursive;
  color: #f4ead9;
  text-shadow: 0 .02em .12em rgba(20, 0, 5, .5);
}

/* ------------------------------------------------------------ the deck (phone) */

.e-track {
  display: flex;
  gap: 4cqi;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 12cqi;
  padding: 6cqi 12cqi 7cqi;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.e-track::-webkit-scrollbar { display: none; }

.e-card {
  --k: 1;
  position: relative;
  flex: 0 0 76cqi;
  scroll-snap-align: center;
  container-type: inline-size;
}

.e-dots {
  display: flex;
  justify-content: center;
  gap: 3cqi;
  margin-top: -2cqi;
}

.e-dots button {
  width: max(8px, 2.2cqi);
  height: max(8px, 2.2cqi);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(244, 234, 217, .3);
  cursor: pointer;
  transition: background-color .3s, transform .3s;
}

.e-dots button[aria-current="true"] {
  background: #d4b06a;
  transform: scale(1.3);
}

/* ------------------------------------------------------------ a card */

.e-card-in {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8cqi 7cqi 8cqi;
  border-radius: 1.4cqi;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(255, 250, 238, .5), transparent 70%),
    linear-gradient(90deg, rgba(120, 72, 30, .12), transparent 8%, transparent 92%, rgba(120, 72, 30, .12)),
    #f3e8d2 url(../assets/letter/paper.webp) center / cover;
  box-shadow: 0 2.4cqi 6cqi rgba(16, 0, 4, .5), 0 .4cqi 1cqi rgba(16, 0, 4, .3);
  color: var(--ink);
  text-align: center;
}

/* the letter's gold and burgundy ruling */
.e-card-in::before {
  content: "";
  position: absolute;
  inset: 3.4cqi;
  border: max(1px, .5cqi) solid rgba(178, 136, 66, .85);
  box-shadow:
    inset 0 0 0 max(1px, .45cqi) rgba(246, 236, 214, .9),
    inset 0 0 0 max(2px, .75cqi) rgba(122, 35, 49, .45);
  border-radius: .6cqi;
  pointer-events: none;
}

.e-card-in > * { position: relative; margin: 0; }

.e-art {
  --art-h: 46cqi;
  width: 70cqi;
  height: var(--art-h);
  display: flex;
  align-items: center;
  justify-content: center;
}

.e-art img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: var(--art-h);
  filter: drop-shadow(0 1.2cqi 1.4cqi rgba(92, 40, 30, .28));
}

.e-name {
  margin-top: 4.5cqi !important;
  font: 400 calc(15cqi * var(--k))/1.05 "Pinyon Script", cursive;
  color: var(--ink);
  text-shadow: 0 .012em 0 rgba(255, 255, 255, .7);
}

.e-when span { display: block; }

.e-date {
  margin-top: 1.2cqi;
  font: 600 calc(3.8cqi * var(--k))/1.4 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.e-time {
  font: italic 500 calc(5cqi * var(--k))/1.3 "Cormorant Garamond", Georgia, serif;
  color: var(--gold);
}

.e-venue {
  margin-top: 3cqi !important;
  padding-top: 3cqi;
  width: 76%;
  border-top: 1px solid rgba(169, 128, 63, .5);
}

.e-venue span { display: block; }

.e-place { font: 600 calc(5.4cqi * var(--k))/1.25 "Cormorant Garamond", Georgia, serif; }
.e-addr  { font: 500 calc(4.2cqi * var(--k))/1.35 "Cormorant Garamond", Georgia, serif; color: var(--ink-soft); }

.e-dress {
  margin-top: 3cqi !important;
  font: italic 500 calc(4.3cqi * var(--k))/1.35 "Cormorant Garamond", Georgia, serif;
  color: var(--ink-soft);
  text-wrap: balance;
}

.e-dress span,
.e-prog::before {
  display: block;
  margin-bottom: .6cqi;
  font: 600 calc(3.1cqi * var(--k))/1.3 "Cormorant Garamond", Georgia, serif;
  font-style: normal;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}

.e-prog {
  margin-top: 3cqi !important;
  padding: 0;
  list-style: none;
  font: 500 calc(4.2cqi * var(--k))/1.5 "Cormorant Garamond", Georgia, serif;
}

.e-prog::before { content: "Programme"; }

.e-prog span {
  display: inline-block;
  min-width: 4.6em;
  margin-right: .5em;
  text-align: right;
  font-weight: 600;
  color: var(--ink);
}

.e-actions {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 2.4cqi;
  width: 100%;
  margin-top: auto !important;
  padding-top: 5cqi;
}

.e-btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.4cqi;
  min-height: max(40px, calc(11cqi * var(--k)));
  padding: 0 2cqi;
  border: 1px solid rgba(169, 128, 63, .75);
  border-radius: 999px;
  background: rgba(255, 250, 240, .55);
  color: var(--ink);
  font: 600 calc(4.3cqi * var(--k))/1 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .02em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s, color .2s;
}

.e-btn:hover { background: rgba(255, 250, 240, .9); }

.e-btn-cal {
  background: #5e1424;
  border-color: #5e1424;
  color: #f4ead9;
}

.e-btn-cal:hover,
.e-btn-cal[aria-expanded="true"] { background: #7a1d30; }

.e-btn svg {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.e-btn:focus-visible,
.e-cal-menu a:focus-visible,
.e-dots button:focus-visible {
  outline: 2px solid #d4b06a;
  outline-offset: 2px;
}

/* The calendar choices, opening above the button. */
.e-cal-menu {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: calc(100% - 3cqi);
  display: flex;
  flex-direction: column;
  min-width: 62cqi;
  padding: 1.4cqi;
  border: 1px solid rgba(169, 128, 63, .6);
  border-radius: 2.4cqi;
  background: #fffaf0;
  box-shadow: 0 2cqi 5cqi rgba(40, 6, 12, .3);
  text-align: left;
}

.e-cal-menu[hidden] { display: none; }

.e-cal-menu a {
  padding: 2.4cqi 3cqi;
  border-radius: 1.6cqi;
  color: var(--ink);
  font: 600 calc(4.3cqi * var(--k))/1.2 "Cormorant Garamond", Georgia, serif;
  text-decoration: none;
}

.e-cal-menu a small {
  display: block;
  font: italic 500 .82em/1.3 "Cormorant Garamond", Georgia, serif;
  color: var(--ink-soft);
}

.e-cal-menu a:hover { background: rgba(169, 128, 63, .14); }

/* ------------------------------------------------------------ the gatefold cover */

.e-cover {
  display: none;
  position: absolute;
  inset: 0;
  border-radius: 1.4cqi;
  background:
    linear-gradient(90deg, transparent 49.7%, rgba(20, 0, 5, .55) 50%, transparent 50.3%),
    url(../assets/events/medallion.webp) 50% 46% / 42cqi auto no-repeat,
    #4a0d18 url(../assets/letter/bg-tab.webp) center / cover;
  box-shadow: 0 2.4cqi 6cqi rgba(16, 0, 4, .5);
  backface-visibility: hidden;
  pointer-events: none;
}

.e-cover::before {
  content: "";
  position: absolute;
  inset: 3.4cqi;
  border: max(1px, .5cqi) solid rgba(212, 176, 106, .8);
  box-shadow: inset 0 0 0 max(2px, .8cqi) rgba(58, 10, 18, .5), inset 0 0 0 max(3px, 1.1cqi) rgba(212, 176, 106, .45);
  border-radius: .6cqi;
}

.e-cover-l { clip-path: inset(0 50% 0 0); transform-origin: 0 50%; }
.e-cover-r { clip-path: inset(0 0 0 50%); transform-origin: 100% 50%; }

.events.is-waiting .e-cover { display: block; }

/* ------------------------------------------------------------ upright tablet, laptop */

@container esec (min-width: 560px) {
  .e-bg { background-image: url(../assets/letter/bg-tab.webp); }
  .e-kicker { font-size: 2.1cqi; }
  .e-title { font-size: 7.6cqi; }
  .e-track {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3.4cqi;
    overflow: visible;
    padding: 4.5cqi 7cqi 3cqi;
  }
  .e-card { --k: 1.06; }
  .e-dots { display: none; }
}

/* ------------------------------------------------------------ sideways tablet */

@media (min-aspect-ratio: 6/5) {
  html.is-tablet .e-bg { background-image: url(../assets/letter/bg-land.webp); }
  html.is-tablet .e-kicker { font-size: 1.35cqi; }
  html.is-tablet .e-title { font-size: 5cqi; }
  html.is-tablet .e-track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.6cqi;
    padding: 2.4cqi 3.6cqi 2cqi;
  }
  html.is-tablet .e-card { --k: 1.22; }
  html.is-tablet .e-art { --art-h: 42cqi; }
}