/* =====================================================================
   M11 — THE EVENT LIFECYCLE (front end)
   inc/events.php · single-event.php

   Loaded only on the front page (the Past Events band + the "Add to
   calendar" buttons) and on /event/{slug}. Every token here is one of
   style.css's own — nothing new is invented, and --gs still drives the
   black-and-white switch on every photo.

   1. Add to calendar button   .eoi-cal
   2. Past Events band         .pastev / .pe-*
   3. Event page               .eventpage / .evp-*
   4. Print
   ===================================================================== */

/* =====================================================================
   1. ADD TO CALENDAR
   The same button appears on the dark Happenings band and on the light
   Past Events band, so it takes its colour from whatever it sits on and
   only the hairline is stated twice.
   ===================================================================== */
.eoi-cal{
  --cal-line:rgba(var(--ink-rgb),.28);
  --cal-fill:var(--ink);
  --cal-on:var(--bone);
  display:inline-flex;align-items:center;gap:9px;
  margin-top:18px;padding:11px 16px;
  border:1px solid var(--cal-line);
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:inherit;white-space:nowrap;
  transition:background var(--t-fast) ease,color var(--t-fast) ease,border-color var(--t-fast) ease;
}
.eoi-cal__ico{display:block;flex:0 0 auto;width:15px;height:15px}
.eoi-cal__ico svg{width:100%;height:100%;display:block}
.eoi-cal:hover,.eoi-cal:focus-visible{background:var(--cal-fill);color:var(--cal-on);border-color:var(--cal-fill)}

/* On the ink bands the hairline and the hover pair invert. */
.happenings .eoi-cal,
.eventpage .eoi-cal{--cal-line:var(--line-d);--cal-fill:var(--bone);--cal-on:var(--ink)}

/* Inside the compact event list the button must not shove the row apart. */
.event-row .eoi-cal{margin-top:0}
.event-info .eoi-cal{margin-top:20px}
/* The featured event already has a .cta on the same line — sit beside it. */
.event-info .cta + .eoi-cal{margin-left:18px}

@media(max-width:560px){
  .eoi-cal{width:100%;justify-content:center;white-space:normal}
  .event-info .cta + .eoi-cal{margin-left:0}
}

/* =====================================================================
   2. PAST EVENTS — the front-page band
   Bone, so it separates the ink Happenings band above it from whatever
   the client has ordered after it, without inventing a fourth surface.
   ===================================================================== */
.pastev{background:var(--bone)}
.pe-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,3.4vw,46px);padding-block:34px var(--sec-y);
}
.pe-card{display:flex;flex-direction:column;min-width:0}
.pe-fig{overflow:hidden;background:var(--paper);border:1px solid var(--line);margin-bottom:16px}
.pe-fig img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  filter:grayscale(var(--gs)) contrast(1.03);
  transition:transform var(--t-slow) var(--e-soft);
}
.pe-card:hover .pe-fig img{transform:scale(1.04)}
.pe-txt{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.pe-date{display:block;color:var(--ash-d)}
.pe-title{
  font-family:var(--display);font-weight:400;font-size:clamp(24px,2.6vw,36px);
  line-height:.94;letter-spacing:.03em;text-transform:uppercase;margin-top:9px;
  overflow-wrap:break-word;max-width:100%;
}
.pe-title a{border-bottom:1px solid transparent;transition:border-color var(--t-fast)}
.pe-title a:hover{border-bottom-color:var(--accent)}
.pe-venue{margin-top:10px;color:var(--ash-d);font-size:14px;line-height:1.6;max-width:44ch}
.pe-more{
  margin-top:14px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  border-bottom:1px solid var(--accent);padding-bottom:3px;transition:opacity var(--t-fast);
}
.pe-more:hover{opacity:.62}
.pe-card--noimg .pe-txt{border-top:1px solid var(--line);padding-top:16px}

@media(max-width:900px){.pe-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.pe-grid{grid-template-columns:minmax(0,1fr)}}

/* =====================================================================
   3. EVENT PAGE — /event/{slug}
   Built on the same ink shell as the talent page (style.css §17) so a
   visitor moving between the two never feels a change of house.
   ===================================================================== */
.eventpage{background:var(--ink);color:var(--bone);padding-top:clamp(96px,16vh,160px)}
.eventpage :focus-visible{outline-color:var(--accent-inv)}
.evp-crumb{padding-block:0 20px}
.evp-crumb a{color:var(--ash);transition:color var(--t-fast)}
.evp-crumb a:hover{color:var(--bone)}

.evp{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:var(--gap-lg);
  align-items:start;padding-block:clamp(20px,3vw,34px) clamp(30px,5vh,56px);
  border-top:1px solid var(--line-d);
}
.evp--nopost{grid-template-columns:minmax(0,1fr);max-width:900px}

/* The poster is artwork — shown whole, never cropped, exactly like the
   featured event on the front page. */
.evp-poster{
  background:var(--ink-2);border:1px solid var(--line-d);
  display:flex;align-items:center;justify-content:center;padding:14px;
}
.evp-poster img{max-height:620px;width:auto;max-width:100%;object-fit:contain;filter:grayscale(var(--gs)) contrast(1.03)}

.evp-info{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.evp-flag{color:var(--ash)}
.evp-title{
  font-family:var(--display);font-weight:400;font-size:clamp(38px,6.4vw,96px);line-height:.88;
  letter-spacing:.02em;text-transform:uppercase;margin-top:14px;overflow-wrap:break-word;max-width:100%;
}
.evp-title em{
  font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:-.01em;
  display:block;font-size:.5em;color:rgba(var(--bone-rgb),.92);margin-top:6px;
}
.evp-title em em{display:inline;font-size:1em;letter-spacing:inherit;color:inherit}

.evp-meta{
  display:flex;flex-direction:column;gap:5px;margin-top:clamp(20px,2.6vw,30px);
  font-family:var(--mono);font-size:12px;letter-spacing:.05em;line-height:1.7;color:var(--bone);
}
.evp-body{margin-top:20px;max-width:58ch;color:var(--ash);font-size:15px;line-height:1.75}
.evp-body p + p{margin-top:12px}
.evp-body--recap{color:rgba(var(--bone-rgb),.86)}
.evp-tickets{margin-top:18px;max-width:58ch;color:var(--ash);font-size:14px;line-height:1.65}
.evp-tickets p + p{margin-top:12px}

.evp-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:clamp(24px,3vw,34px)}
.evp-cta{
  background:var(--bone);color:var(--ink);
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  padding:15px 26px;transition:background var(--t-fast),color var(--t-fast);
}
.evp-cta:hover{background:var(--chalk);color:var(--accent)}
.evp-actions .eoi-cal{margin-top:0}

.evp-share{
  width:100%;margin-top:clamp(26px,3vw,36px);padding-top:16px;border-top:1px solid var(--line-d);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
}
.evp-share .meta{color:var(--ash)}
.evp-share a{
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:rgba(var(--bone-rgb),.9);
  border-bottom:1px solid var(--line-d);word-break:break-all;transition:color var(--t-fast);
}
.evp-share a:hover{color:var(--bone)}

/* --- the recap: video first, then the photographs ------------------- */
.evp-sub{display:block;margin-bottom:14px;color:var(--ash)}
.evp-video{padding-block:clamp(24px,4vh,44px) 0}
.evp-video__list{display:grid;gap:clamp(16px,2.4vw,28px)}
.evp-video__frame{position:relative;aspect-ratio:16/9;background:var(--ink-2);border:1px solid var(--line-d)}
.evp-video__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.evp-video__link{
  display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid var(--line-d);padding:12px 18px;transition:background var(--t-fast),color var(--t-fast);
}
.evp-video__link:hover{background:var(--bone);color:var(--ink)}

.evp-gallery{padding-block:clamp(28px,5vh,56px) 0}
.evp-gallery__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1px;background:var(--line-d);border:1px solid var(--line-d);
}
.evp-gallery__grid img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  filter:grayscale(var(--gs)) contrast(1.03);background:var(--ink);
  transition:transform var(--t-slow) var(--e-soft);
}
.evp-gallery__grid picture{display:contents}
.evp-gallery__grid img:hover{transform:scale(1.03)}
@media(max-width:520px){.evp-gallery__grid{grid-template-columns:1fr 1fr}}

/* --- prev / all / next ---------------------------------------------- */
.evp-nav{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:16px 24px;
  padding-block:24px;margin-top:clamp(30px,5vh,56px);
  border-top:1px solid var(--line-d);margin-bottom:var(--sec-y);
}
.evp-nav a{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ash);transition:color var(--t-fast)}
.evp-nav a:hover,.evp-nav a:hover .nm{color:var(--bone)}
.evp-nav .nm{
  display:block;font-family:var(--display);font-size:22px;letter-spacing:.06em;text-transform:none;
  color:rgba(var(--bone-rgb),.86);margin-top:5px;transition:color var(--t-fast);
}
.evp-prev{justify-self:start}
.evp-all{justify-self:center;align-self:center}
.evp-next{justify-self:end;text-align:right}

/* An event page with no poster, no photos and no video is still a page —
   give the single column room rather than letting it run edge to edge. */
.eventpage--nopost .evp-info{max-width:900px}

@media(max-width:900px){
  .evp{grid-template-columns:minmax(0,1fr);gap:var(--gap-sm)}
  .evp-poster{max-width:520px}
}
@media(max-width:560px){
  .evp-nav{grid-template-columns:1fr 1fr;gap:14px}
  .evp-all{grid-column:1/-1;justify-self:start;order:-1}
  .evp-cta{width:100%;text-align:center}
}

/* =====================================================================
   4. PRINT
   Real black on real white, and nothing that cannot survive paper.
   ===================================================================== */
@media print{
  .eventpage{background:#fff!important;color:#000!important;padding-top:0!important}
  .eventpage .wrap{padding-inline:0}
  .eventpage .reveal{opacity:1!important;transform:none!important}
  .evp-crumb,.evp-nav,.evp-cta,.eoi-cal,.evp-share,.evp-video{display:none!important}
  .evp{grid-template-columns:44% 1fr;gap:10mm;border-top:0;padding:0;break-inside:avoid}
  .evp-poster{border:1px solid #ccc;background:#fff;padding:0}
  .evp-poster img,.evp-gallery__grid img{filter:none!important}
  .evp-title,.evp-meta,.evp-body{color:#000!important}
  .evp-gallery__grid{background:#fff;border-color:#ccc;gap:4mm;border:0}
  .pastev{background:#fff!important}
}

/* =====================================================================
   Reduced motion — the same contract style.css already signs.
   ===================================================================== */
@media(prefers-reduced-motion:reduce){
  .pe-card:hover .pe-fig img,
  .evp-gallery__grid img:hover{transform:none}
  .eoi-cal,.pe-fig img,.evp-gallery__grid img{transition:none}
}