/* ===================================================================
   Page-specific: Single event (/events/<slug>/)

   Mirrors the visual language of single-room.css — full-bleed hero,
   two-column detail with a sticky info card — but lives in its own file
   so future event-specific tweaks (no booking widget, sold-out pill)
   don't bleed back into the room template.
=================================================================== */

/* HERO with event title + chips */
.event-hero{
  position:relative;
  background:var(--navy);
  color:var(--cream);
  min-height: 82vh;
  overflow:hidden;
  isolation:isolate;
  display:flex; flex-direction:column;
}
.event-hero-img{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center 45%;
  z-index:0;
}
.event-hero-veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(20,26,38,.55) 0%, rgba(20,26,38,.18) 30%, rgba(20,26,38,.55) 80%, rgba(20,26,38,.85) 100%);
  z-index:1;
}
.event-hero-inner{
  position:relative; z-index:2;
  flex:1;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding: clamp(140px, 18vh, 200px) clamp(32px,5vw,56px) clamp(48px, 6vh, 88px);
  max-width: var(--max-wide);
  margin: 0 auto;
  width:100%;
}

/* Reuse the .crumb pattern from single-room — duplicated here so
   the rule applies without single-room.css being loaded. */
.event-hero .crumb{
  font-family:var(--sans);
  font-size:11px; font-weight:500;
  letter-spacing:.36em; text-transform:uppercase;
  color:rgba(245,240,232,.78);
  display:flex; gap:10px; align-items:center;
  margin-bottom:22px;
  flex-wrap:wrap;
}
.event-hero .crumb a, .event-hero .crumb > span{ white-space:nowrap }
.event-hero .crumb a{ color:rgba(245,240,232,.78); border-bottom:1px solid transparent; padding-bottom:2px }
.event-hero .crumb a:hover{ color:var(--cream); border-bottom-color:rgba(245,240,232,.6) }
.event-hero .crumb .sep{ color:rgba(245,240,232,.4) }

.event-name{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(48px, 6.4vw, 104px);
  line-height:1.02;
  letter-spacing:-0.015em;
  color:var(--cream);
  margin:0;
  max-width:18ch;
  text-wrap:balance;
}
.event-name em{ font-style:italic; font-weight:400 }

.event-meta-row{
  margin-top: clamp(28px, 4vh, 44px);
  display:flex; flex-wrap:wrap; gap:0;
  border-top: 1px solid rgba(245,240,232,.25);
  padding-top: 24px;
}
.event-meta-row .item{
  flex: 1 1 180px;
  padding: 0 24px 0 0;
}
.event-meta-row .item + .item{
  border-left: 1px solid rgba(245,240,232,.18);
  padding-left: 24px;
}
.event-meta-row .lab{
  font-family:var(--sans);
  font-size:10px; font-weight:500;
  letter-spacing:.36em; text-transform:uppercase;
  color: rgba(245,240,232,.65);
  display:block; margin-bottom:6px;
}
.event-meta-row .val{
  font-family:var(--serif);
  font-style:italic;
  font-size: clamp(18px, 1.6vw, 24px);
  color: var(--cream);
  line-height:1.25;
}

/* DETAIL: description + sticky info card */
.event-detail{
  background:var(--cream);
  padding: clamp(80px, 10vh, 120px) 32px;
}
.event-detail-inner{
  max-width: var(--max);
  margin: 0 auto;
  display:grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
  align-items:start;
}
.event-desc-col{
  display:flex; flex-direction:column; gap:20px;
}
/* Astra's .entry-content wraps native blocks with constraint padding —
   gh-lough already strips it (see lough-hero.css). These resets just
   pin paragraph styling to the Lough body-copy treatment. */
.event-desc-col > *{ margin: 0 !important }
.event-desc-col p{
  font-family: var(--serif);
  font-size: clamp(17px, 1.25vw, 19px);
  line-height: 1.7;
  color: var(--ink, var(--navy));
  max-width: 64ch;
}
.event-desc-col ul,
.event-desc-col ol{
  font-family: var(--serif);
  font-size: clamp(17px, 1.25vw, 19px);
  line-height: 1.7;
  color: var(--ink, var(--navy));
  padding-left: 1.2em;
  max-width: 64ch;
}
.event-desc-col li + li{ margin-top: 6px }
.event-desc-col a{
  color: var(--navy);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1px;
}
.event-desc-col a:hover{ color: var(--gold) }

/* Sticky info card — same look as .book-card on single-room, but
   shows date/time/price chips instead of a booking form. */
.event-info-card{
  position:sticky;
  top: 110px;
  background:var(--navy);
  color:var(--cream);
  padding: 36px 32px;
  display:flex; flex-direction:column; gap: 18px;
}
.event-info-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(245,240,232,.14);
}
.event-info-row .lab{
  font-family:var(--sans);
  font-size:10px; font-weight:500;
  letter-spacing:.32em; text-transform:uppercase;
  color: rgba(245,240,232,.6);
}
.event-info-row .val{
  font-family:var(--serif); font-style:italic;
  font-size: 17px; color: var(--cream);
  text-align: right;
  line-height: 1.3;
}
.event-info-card hr{
  border:0; border-top:1px solid rgba(245,240,232,.18); margin: 4px 0;
}
.event-cta-lab{
  font-family:var(--sans);
  font-size:10px; font-weight:500;
  letter-spacing:.36em; text-transform:uppercase;
  color: rgba(245,240,232,.6);
  text-align: center;
  margin-bottom: -4px;
}
.event-phone-cta{
  display:flex; align-items:center; justify-content:center;
  min-height:64px;
  padding: 12px 16px;
  background:var(--cream); color:var(--navy-deep);
  font-family:var(--serif);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight:500;
  letter-spacing:.01em;
  border:0; cursor:pointer;
  text-decoration: none;
  text-align: center;
  line-height: 1.1;
  transition:background .2s, color .2s;
}
.event-phone-cta:hover{ background:#fff; color: var(--navy-deep) }
.event-sold-out{
  display:flex; align-items:center; justify-content:center;
  height:54px;
  background: transparent;
  color: rgba(245,240,232,.72);
  font-family:var(--sans);
  font-size:11px; font-weight:600;
  letter-spacing:.36em; text-transform:uppercase;
  border: 1px solid rgba(245,240,232,.35);
}
.event-info-foot{
  text-align:center;
  font-family:var(--sans);
  font-size:11px; letter-spacing:.04em; line-height:1.6;
  color: rgba(245,240,232,.6);
  margin: 0;
}
.event-info-foot a{
  color: var(--cream);
  border-bottom:1px solid rgba(245,240,232,.4);
  padding-bottom:1px;
}
.event-info-foot a:hover{ color: var(--gold); border-color: var(--gold) }

/* Responsive */
@media (max-width: 980px){
  .event-detail-inner{ grid-template-columns: 1fr; gap:48px }
  .event-info-card{ position:static }
  .event-meta-row .item{ flex: 1 1 50%; padding: 16px 0 }
  .event-meta-row .item + .item{ border-left:0; padding-left:0 }
}
@media (max-width: 600px){
  .event-meta-row .item{ flex: 1 1 100% }
}