/* The events, on the ivory plaster (surface P, in base.css).

   Four old Walled City haveli doors set in the plaster, one for each function, painted in its
   colour and studded with brass, under a pointed arch in a carved sheesham frame with a band of
   kashi tile. Each door is one picture of its frame (the doorway cut out) with its two leaves
   laid in behind (assets/events/events.css says where the doorway is). Shut, a door is just a
   door. Open (.is-open, set by js/events.js), its leaves have swung inward and out of sight,
   and in the doorway stands a card of the letter's paper cut to the arch: the function's name,
   in Urdu too, and its day, date and time. Below the door, the venue, the dress code (with
   swatches), a note, Directions and Add to calendar (js/calendar.js).

   Phones: one under another. Upright tablets and the laptop column: two by two, where two
   good-sized doors fit (otherwise one under another). Sideways tablets: the four in a row, like
   a street of doors. Everything on a door is sized by the door (--door-w, set on .ev-list), so
   each layout only sets that. */

.events {
  --sun-y: 0px;
  --sun-x: -24%;
  padding: calc(var(--seam-h) * .5 + 40px) 16px calc(var(--seam-h) * .5 + 56px);
  overflow-x: clip;                     /* a door's shadow; the seams still straddle the joins */
  -webkit-tap-highlight-color: transparent;
}

/* the functions' colours (base.css), and an ink of each dark enough to read on the plaster */
.ev-mehndi { --tone: var(--mehndi); --tone-ink: #95600f; --leaves: url(../assets/events/leaves-mehndi.webp); }
.ev-nikah  { --tone: var(--nikah);  --tone-ink: #1d6a6f; --leaves: url(../assets/events/leaves-nikah.webp); }
.ev-baraat { --tone: var(--baraat); --tone-ink: #983322; --leaves: url(../assets/events/leaves-baraat.webp); }
.ev-walima { --tone: var(--walima); --tone-ink: #1d3a82; --leaves: url(../assets/events/leaves-walima.webp); }

/* ------------------------------------------------------------ the heading */

.ev-head {
  position: relative;
  text-align: center;
  margin: 0 0 clamp(20px, 6cqi, 36px);
}

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

.ev-kicker {
  font: 700 clamp(11px, 3cqi, 14px)/1.3 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .26em;
  padding-left: .26em;
  text-transform: uppercase;
  color: var(--kick);
}

.ev-title {
  font: 400 clamp(46px, 13.5cqi, 80px)/1.2 "Great Vibes", cursive;
}

.ev-title .glaze {
  display: inline-block;
  padding: 0 .28em .08em;
}

/* ------------------------------------------------------------ the doors */

.ev-list {
  position: relative;
  --door-w: min(100cqi - 6px, 360px);   /* (100cqi is inside the section's padding) */
  display: grid;
  justify-content: center;
  gap: clamp(46px, 13cqi, 64px);
  margin: 0 auto;
}

.ev {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--door-w);
  text-align: center;
}

.ev-door {
  position: relative;
  width: var(--door-w);
  aspect-ratio: var(--door-r);
}

/* what is behind the doorway: a dim room, warm with lamplight */
.ev-inside,
.ev-leaf,
.ev-spill {
  position: absolute;
  top: var(--dw-t);
  height: var(--dw-h);
}

.ev-inside {
  left: var(--dw-l);
  width: var(--dw-w);
  -webkit-mask: url(../assets/events/doorway.svg) 0 0 / 100% 100% no-repeat;
          mask: url(../assets/events/doorway.svg) 0 0 / 100% 100% no-repeat;
  background:
    radial-gradient(ellipse 80% 42% at 50% 100%, rgba(255, 196, 110, .45), transparent 70%),
    radial-gradient(ellipse 90% 70% at 50% 58%, #6a4522, #2b190b 72%, #160c05);
}

/* The card: the letter's paper, cut to the arch, standing just inside the doorway. The
   jamb's and the arch's shadow on its left and top (the sun is on the left). */
.ev-card {
  position: absolute;
  left: calc(var(--dw-l) + var(--dw-w) * .07);
  width: calc(var(--dw-w) * .86);
  top: calc(var(--dw-t) + var(--dw-h) * .04);
  height: calc(var(--dw-h) * .96);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--door-w) * .1) calc(var(--door-w) * .035) 0;
  -webkit-mask: url(../assets/events/doorway.svg) 0 0 / 100% 100% no-repeat;
          mask: url(../assets/events/doorway.svg) 0 0 / 100% 100% no-repeat;
  background:
    linear-gradient(90deg, rgba(52, 30, 12, .34), rgba(52, 30, 12, 0) 20%),
    linear-gradient(180deg, rgba(52, 30, 12, .28), rgba(52, 30, 12, 0) 16%),
    linear-gradient(0deg, rgba(52, 30, 12, .22), rgba(52, 30, 12, 0) 10%),
    linear-gradient(105deg, rgba(255, 244, 214, .3), rgba(255, 244, 214, 0) 55%),
    url(../assets/letter/paper-back.webp) 0 0 / calc(var(--door-w) * .7) repeat,
    #efe4cb;
  color: var(--ink);
}

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

/* a thin line in the function's colour, just inside the card's edge */
.ev-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tone);
  opacity: .8;
  --in: calc(var(--door-w) * .028);
  -webkit-mask:
    url(../assets/events/doorway.svg) 50% 50% / calc(100% - var(--in) * 2) calc(100% - var(--in) * 2) no-repeat,
    url(../assets/events/doorway.svg) 50% 50% / calc(100% - var(--in) * 2 - 3px) calc(100% - var(--in) * 2 - 3px) no-repeat;
  -webkit-mask-composite: xor;
          mask:
    url(../assets/events/doorway.svg) 50% 50% / calc(100% - var(--in) * 2) calc(100% - var(--in) * 2) no-repeat exclude,
    url(../assets/events/doorway.svg) 50% 50% / calc(100% - var(--in) * 2 - 3px) calc(100% - var(--in) * 2 - 3px) no-repeat;
}

/* a little eight-pointed star of glazed tile in the arch, in the function's colour */
.ev-star {
  width: calc(var(--door-w) * .062);
  aspect-ratio: 1;
  margin-bottom: calc(var(--door-w) * .02) !important;
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 38%),
    radial-gradient(circle at 50% 50%, var(--tone) 50%, color-mix(in srgb, var(--tone), #000 30%));
  clip-path: polygon(50% 0, 61.5% 22.3%, 85.4% 14.6%, 77.7% 38.5%, 100% 50%, 77.7% 61.5%, 85.4% 85.4%, 61.5% 77.7%,
                     50% 100%, 38.5% 77.7%, 14.6% 85.4%, 22.3% 61.5%, 0 50%, 22.3% 38.5%, 14.6% 14.6%, 38.5% 22.3%);
  filter: drop-shadow(0 1px 0 rgba(60, 35, 10, .35));
}

.ev-name {
  font: 400 max(26px, calc(var(--door-w) * .118))/1.1 "Great Vibes", cursive;
}

.ev-name .glaze {
  display: inline-block;
  padding: 0 .22em .06em;
}

.ev-ur {
  margin: calc(var(--door-w) * -.012) 0 calc(var(--door-w) * -.008) !important;
  font: 400 max(13px, calc(var(--door-w) * .056))/1.9 "Noto Nastaliq Urdu", serif;
  color: var(--tone-ink);
}

/* a short rule with a lozenge, in the function's colour */
.ev-rule {
  width: calc(var(--door-w) * .22);
  height: 9px;
  margin: calc(var(--door-w) * .012) 0 calc(var(--door-w) * .026) !important;
  background:
    linear-gradient(var(--tone), var(--tone)) 50% 50% / 100% 1px no-repeat;
  -webkit-mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
          mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
}

.ev-rule::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  background: var(--tone);
  transform: translate(-50%, -50%) rotate(45deg);
}

.ev-when {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--door-w) * .008);
  text-wrap: balance;
}

.ev-day {
  font: 700 max(10.5px, calc(var(--door-w) * .033))/1.3 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .2em;
  padding-left: .2em;
  text-transform: uppercase;
  color: var(--kick);
}

.ev-dmy {
  font: 600 max(13px, calc(var(--door-w) * .054))/1.15 "Cormorant Garamond", Georgia, serif;
  white-space: nowrap;
  color: var(--ink);
}

.ev-time {
  margin-top: calc(var(--door-w) * .006);
  font: italic 500 max(12px, calc(var(--door-w) * .044))/1.25 "Cormorant Garamond", Georgia, serif;
  color: var(--ink);
}

/* The door itself: a button over the card, holding the leaves and the frame. The leaves are
   one picture, each showing its own half; they turn on their hinges, away into the room, and
   are gone once they are past edge-on. */
.ev-open {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  perspective: calc(var(--door-w) * 2.4);
  perspective-origin: 50% 54%;
  -webkit-tap-highlight-color: transparent;
}

.ev-open:focus-visible { outline: 0; }
.ev-open:focus-visible .ev-frame { filter: drop-shadow(0 0 3px var(--cobalt)) drop-shadow(0 0 1px var(--cobalt)); }

.ev-leaf {
  width: calc(var(--dw-w) / 2);
  background: var(--leaves) 0 0 / 200% 100% no-repeat;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.ev-leaf-l { left: var(--dw-l); transform-origin: 0 50%; }
.ev-leaf-r { left: calc(var(--dw-l) + var(--dw-w) / 2); background-position: 100% 0; transform-origin: 100% 50%; }

.ev.is-open .ev-leaf-l { transform: rotateY(100deg); }
.ev.is-open .ev-leaf-r { transform: rotateY(-100deg); }

.ev-frame {
  position: absolute;
  inset: 0;
  background: url(../assets/events/frame.webp) 0 0 / 100% 100% no-repeat;
  filter: drop-shadow(calc(var(--door-w) * .016) calc(var(--door-w) * .02) calc(var(--door-w) * .022) rgba(70, 40, 16, .32));
}

/* the lamplight from inside, out onto the marble step */
.ev-spill {
  left: calc(var(--dw-l) - var(--dw-w) * .2);
  width: calc(var(--dw-w) * 1.4);
  top: calc(var(--dw-t) + var(--dw-h) * .82);
  height: calc(var(--dw-h) * .3);
  background: radial-gradient(ellipse 50% 45% at 50% 50%, rgba(255, 206, 130, .55), rgba(255, 206, 130, 0) 72%);
  mix-blend-mode: soft-light;
  opacity: 0;
  pointer-events: none;
}

.ev.is-open .ev-spill { opacity: 1; }

/* ------------------------------------------------------------ the details, under the door */

.ev-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  flex: 1;                              /* so that side by side, the buttons line up */
  width: min(100cqi, var(--door-w) + var(--more-x, 40px));   /* a little wider than the door */
  margin-top: 14px;
}

.ev-more > * { margin: 0; }

.ev-venue { display: flex; flex-direction: column; gap: 2px; }

.ev-place {
  font: 700 clamp(17px, 5cqi, 20px)/1.2 "Cormorant Garamond", Georgia, serif;
  color: var(--ink);
}

.ev-addr {
  font: italic 500 clamp(15px, 4.3cqi, 17px)/1.3 "Cormorant Garamond", Georgia, serif;
  color: rgba(27, 42, 82, .82);
}

.ev-dress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font: 600 clamp(14.5px, 4.2cqi, 16.5px)/1.3 "Cormorant Garamond", Georgia, serif;
  color: var(--ink);
  text-wrap: balance;
}

.ev-dress-k {
  font: 700 11px/1.3 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .22em;
  padding-left: .22em;
  text-transform: uppercase;
  color: var(--kick);
}

/* the dress colours, as little drops of glaze */
.ev-sw { display: flex; gap: 5px; }

.ev-sw i {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 42%),
    var(--c);
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, .25), 0 0 0 1px rgba(80, 55, 25, .25);
}

.ev-note {
  font: italic 500 clamp(14.5px, 4.2cqi, 16.5px)/1.3 "Cormorant Garamond", Georgia, serif;
  color: rgba(27, 42, 82, .78);
  text-wrap: balance;
}

.ev-actions {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
  width: 100%;
  max-width: 330px;
  margin-top: auto !important;
  padding-top: 4px;
}

.ev-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  min-height: 38px;
  padding: 6px 10px;
  border: 1px solid rgba(176, 132, 58, .7);
  border-radius: 999px;
  background: rgba(255, 251, 240, .78);
  box-shadow: 0 1px 2px rgba(60, 40, 10, .14);
  color: var(--ink);
  font: 700 14px/1 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .04em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ev-btn svg {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: var(--tone-ink);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ev-btn:hover { background: #fffdf8; border-color: var(--tone-ink); }
.ev-btn:focus-visible,
.ev-cal-menu a:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }

/* the calendar choices, opening above the button */
.ev-cal-menu {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: calc(100% + 6px);
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  width: max-content;
  max-width: min(250px, 92vw);
  padding: 6px;
  border: 1px solid rgba(176, 132, 58, .7);
  border-radius: 12px;
  background: #fffaf0;
  box-shadow: 0 8px 22px rgba(20, 28, 60, .3);
  text-align: left;
}

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

.ev-cal-menu a {
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--ink);
  font: 700 15px/1.2 "Cormorant Garamond", Georgia, serif;
  text-decoration: none;
}

.ev-cal-menu a small {
  display: block;
  font: italic 500 13px/1.3 "Cormorant Garamond", Georgia, serif;
  color: rgba(27, 42, 82, .7);
}

.ev-cal-menu a:hover { background: rgba(176, 132, 58, .14); }

/* ------------------------------------------------------------ shut, and arriving */

/* Shut (with the script running), the details wait below the door, taking their room. With no
   script, every door stands open. */
.events.is-ready .ev:not(.is-open) .ev-more { visibility: hidden; }
.events:not(.is-ready) .ev-leaf { visibility: hidden; }
.events:not(.is-ready) .ev-spill { opacity: 1; }

.ev-door,
.ev-head { transition: opacity 1s ease, translate 1.3s cubic-bezier(.2, .7, .2, 1); }

.events.is-ready .ev:not(.is-seen) .ev-door { opacity: 0; translate: 0 24px; }
.events.is-ready:not(.is-seen) .ev-head { opacity: 0; }

/* ------------------------------------------------------------ the layouts */

/* Phones, and any column too narrow for two good-sized doors: one under another (.ev-list's
   own --door-w), the two buttons side by side. */

/* Upright tablets and the laptop column: two by two, where two doors of 280px fit, with the
   buttons one above the other: Directions the main one, filled in the function's colour, and
   Add to calendar smaller, under it. (Sideways tablets too.) */
html.is-tablet .events,
html:not(.is-tablet) .card .events { padding-inline: 32px; }

@media (max-aspect-ratio: 5/8) {
  html:not(.is-tablet) .card .events { padding-inline: 16px; }
}

@container (min-width: 600px) {
  html.is-tablet .ev-list,
  html:not(.is-tablet) .card .ev-list {
    --door-w: min((100cqi - 40px) / 2, 330px);
    --more-x: 20px;
    grid-template-columns: repeat(2, auto);
    gap: 52px 40px;
  }

  html.is-tablet .ev-actions,
  html:not(.is-tablet) .card .ev-actions {
    grid-auto-flow: row;
    justify-items: center;
    gap: 7px;
    max-width: 230px;
  }

  html.is-tablet .ev-actions > a.ev-btn,
  html:not(.is-tablet) .card .ev-actions > a.ev-btn {
    width: 100%;
    min-height: 40px;
    border-color: color-mix(in srgb, var(--tone-ink), #000 18%);
    background: linear-gradient(180deg, color-mix(in srgb, var(--tone-ink), #fff 14%), var(--tone-ink) 70%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 2px 5px rgba(40, 25, 8, .24);
    color: #fdf6e6;
    font-size: 14.5px;
  }

  html.is-tablet .ev-actions > a.ev-btn svg,
  html:not(.is-tablet) .card .ev-actions > a.ev-btn svg { stroke: #fdf6e6; }

  html.is-tablet .ev-actions > a.ev-btn:hover,
  html:not(.is-tablet) .card .ev-actions > a.ev-btn:hover { background: var(--tone-ink); }

  html.is-tablet .ev-btn-cal,
  html:not(.is-tablet) .card .ev-btn-cal {
    min-height: 30px;
    padding: 4px 13px;
    background: rgba(255, 251, 240, .55);
    border-color: rgba(176, 132, 58, .5);
    box-shadow: none;
    font-size: 12.5px;
    letter-spacing: .05em;
  }
}

/* Sideways tablets: the four in a row, the section filling the screen. */
@media (min-aspect-ratio: 6/5) {
  html.is-tablet .events {
    padding: calc(var(--seam-h) * .5 + 18px) 40px calc(var(--seam-h) * .5 + 24px);
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  html.is-tablet .ev-head { margin-bottom: 12px; }
  html.is-tablet .ev-title { font-size: clamp(46px, 7cqi, 66px); }

  @container (min-width: 880px) {
    html.is-tablet .ev-list {
      --door-w: min((100cqi - 3 * 30px) / 4, 300px, (100svh - 480px) * .75);
      --more-x: 22px;
      grid-template-columns: repeat(4, auto);
      gap: 0 30px;
    }
    html.is-tablet .ev-more { gap: 6px; margin-top: 10px; }
    html.is-tablet .ev-actions { max-width: 196px; }
    html.is-tablet .ev-place { font-size: 18px; }
    html.is-tablet .ev-addr,
    html.is-tablet .ev-dress,
    html.is-tablet .ev-note { font-size: 15px; }
  }
}

/* ------------------------------------------------------------ calm */

@media (prefers-reduced-motion: reduce) {
  .ev-door,
  .ev-head { transition: none; }
}