/* ============================================================
   EVENTS — placeholder page
   Lives on the shared tokens in style.css. Nothing here is
   page-chrome; header, footer and dock all come from style.css.
   ============================================================ */

.ev{
  padding:clamp(120px,16vh,180px) clamp(16px,5vw,64px) clamp(60px,8vh,100px);
  max-width:var(--maxw); margin-inline:auto;
}

.ev__eyebrow{
  font-size:var(--fs-3xs); letter-spacing:.24em; text-transform:uppercase;
  color:var(--orange); margin:0 0 .6rem;
}
.ev__title{
  font-family:var(--logo); font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold);
  font-size:clamp(2rem,6vw,3.6rem); line-height:1.06; margin:0;
}
.ev__lede{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.25rem,2.2vw,1.6rem); line-height:1.5;
  color:var(--sand); max-width:52ch; margin:1.2rem 0 0;
}

/* ---- the calendar slot ----------------------------------------------------
   This block is the whole point of the page. When the client's Google Calendar
   is live, the placeholder inside gets replaced by the iframe and the dashed
   border comes off. Sized so the swap does not move the rest of the page. */
.ev__slot{
  margin:clamp(36px,6vh,64px) 0 0;
  border:1px dashed rgba(232,184,75,.34); border-radius:4px;
  background:rgba(34,22,53,.55);
  min-height:clamp(340px,52vh,560px);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(28px,5vw,56px);
}
.ev__slot--live{ border:1px solid rgba(241,228,208,.12); padding:0; background:var(--sand); }
.ev__slot--live iframe{ width:100%; min-height:clamp(340px,52vh,560px); border:0; display:block; }

.ev__placeholder{ text-align:center; max-width:46ch; }
.ev__placeholder h2{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; font-size:var(--fs-xl); color:var(--sand); margin:0 0 .7rem;
}
.ev__placeholder p{ font-size:var(--fs-base); color:var(--sand); opacity:.88; margin:0 0 1rem; }
.ev__placeholder p:last-child{ margin-bottom:0; }

.ev__mark{ width:54px; height:auto; opacity:.55; margin:0 auto 1.4rem; display:block; }

/* ---- meanwhile ---- */
.ev__alt{ margin:clamp(40px,7vh,72px) 0 0; }
.ev__alt h2{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; font-size:var(--fs-lg); color:var(--apricot); margin:0 0 .4rem;
}
.ev__alt > p{ font-size:var(--fs-base); color:var(--sand); opacity:.9; max-width:60ch; margin:0 0 1.6rem; }

/* The source is portrait 1320x1604 and a room, not a portrait subject: run
   full height and it dominates a page whose real content is the three cards
   below it. Cropped to 3:2 in CSS instead of cutting a new asset, since the
   existing derivatives are already the right pixels. Biased slightly up so the
   mural stays in frame; centred, the crop takes the ceiling and loses it.
   Borrows the card's border and radius so it reads as part of the same set. */
.ev__shot{
  margin:0 0 1.6rem; max-width:620px;
  border:1px solid rgba(241,228,208,.12); border-radius:4px;
  overflow:hidden; background:rgba(34,22,53,.55);
}
.ev__shot img{
  display:block; width:100%; height:auto;
  aspect-ratio:3/2; object-fit:cover; object-position:center 42%;
}
.ev__shot figcaption{
  padding:.7rem 1rem;
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  letter-spacing:.08em; font-size:var(--fs-2xs); color:var(--gold);
}

.ev__cards{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  list-style:none; padding:0; margin:0;
}
.ev__card{
  border:1px solid rgba(241,228,208,.12); border-radius:4px;
  background:rgba(34,22,53,.55); padding:22px 24px;
}
.ev__card h3{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  letter-spacing:.08em; font-size:var(--fs-2xs); color:var(--gold); margin:0 0 .5rem;
}
.ev__card p{ font-size:var(--fs-sm); color:var(--sand); opacity:.88; margin:0 0 .9rem; }
.ev__card a{ color:var(--apricot); font-size:var(--fs-sm); font-weight:600; }
.ev__card a:hover{ color:var(--sand); }

/* ============================================================
   REGULAR NIGHTS

   Holds the page up while the calendar slot above is still a placeholder.
   Two cards, so it stays a single row on desktop and stacks cleanly; if a
   third standing night is added, the grid below already handles it.
   ============================================================ */
.ev-lineup{ margin:clamp(40px,7vh,72px) 0 0; }
.ev-lineup__h{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; font-size:var(--fs-lg); color:var(--apricot); margin:0 0 .4rem;
}
.ev-lineup__lede{
  font-size:var(--fs-base); color:var(--sand); opacity:.9;
  max-width:60ch; margin:0 0 1.6rem;
}
/* auto-fit rather than a fixed column count: the number of standing nights
   changes month to month, and a hard 2-up leaves a third card stranded in a
   half-empty row. */
.ev-lineup__list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(14px,2vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
}

.ev-night{
  display:flex; flex-direction:column;
  padding:clamp(22px,2.6vw,30px);
  border:1px solid rgba(241,228,208,.12); border-radius:4px;
  background:rgba(34,22,53,.55);
}
/* The time reads before the act: someone scanning this page is deciding which
   night to come, not which artist to see. */
.ev-night__when{
  margin:0 0 .5rem;
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  letter-spacing:.14em; font-size:var(--fs-3xs); color:var(--turquoise);
}
.ev-night__what{
  margin:0 0 .5rem;
  font-family:var(--serif); font-weight:600;
  font-size:var(--fs-xl); line-height:1.2; color:var(--sand);
}
.ev-night__who{
  margin:0 0 1rem; font-size:var(--fs-sm); line-height:1.65;
  color:var(--sand); opacity:.85;
}
/* Dates sit last and are the thing people come back to check, so they get the
   only boxed treatment in the card. */
.ev-night__dates{
  margin:auto 0 0; padding-top:.9rem;
  border-top:1px solid rgba(241,228,208,.12);
  font-size:var(--fs-sm); color:var(--sand);
  font-variant-numeric:tabular-nums;
}
.ev-night__dates span{
  display:inline-block; margin-right:.5rem;
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  letter-spacing:.12em; font-size:var(--fs-3xs); color:var(--apricot);
}
.ev-night__links{
  margin:.7rem 0 0; font-size:var(--fs-2xs);
}
.ev-night__links a{
  color:var(--turquoise); text-decoration:none;
  border-bottom:1px solid rgba(55,195,184,.4);
  transition:border-color .2s var(--ease);
}
.ev-night__links a:hover{ border-color:var(--turquoise); }