/* ==========================================================================
   BLACKMURAL MEDIA — EVENTS HUB
   detail.css — single event view: hero, facts, organiser, socials, related

   event.php renders this server-side. The page shows only fields an organiser
   can set in the admin, so the rules for Highlights, Programme, the image
   strip and the gallery were removed with the markup that used them.
   ========================================================================== */

/* -------------------------------------------------------------- detail view */
.detail-back{
  display:inline-flex;align-items:center;gap:8px;margin:32px 0 0;
  font-family:'Barlow Condensed',sans-serif;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;font-size:.82rem;color:var(--muted);
}
.detail-back:hover{color:var(--gold);}
.detail-hero{padding:24px 0 40px;}
.detail-hero .grid{display:grid;gap:28px;}
@media(min-width:900px){.detail-hero .grid{grid-template-columns:1fr 1fr;gap:56px;align-items:start;}}
.detail-hero .poster{position:sticky;top:110px;}
.detail-hero h1{
  font-family:'Inter',sans-serif;font-weight:800;font-size:clamp(2rem,4.6vw,3.2rem);
  letter-spacing:-.02em;line-height:1.02;margin:14px 0 0;
}
.detail-hero .full-desc{margin-top:22px;color:var(--paper);opacity:.9;max-width:60ch;font-size:1.02rem;line-height:1.7;}

.detail-section{padding:36px 0;border-top:1px solid var(--line);}
.detail-section h4{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;font-size:.85rem;color:var(--gold);margin:0 0 20px;
}
.organiser{display:flex;gap:16px;align-items:flex-start;}
.organiser .mark{
  width:44px;height:44px;border:1px solid var(--gold);color:var(--gold);
  display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;
  font-weight:700;flex:none;
}
.organiser .name{font-weight:700;}

.related{padding:44px 0;border-top:1px solid var(--line);}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:22px;margin-top:20px;}
.related-card .poster{aspect-ratio:1/1;}
.related-card .name{font-weight:700;margin-top:10px;font-size:.98rem;}
.related-card .meta{color:var(--muted);font-size:.78rem;margin-top:2px;}

/* -------------------------------------------------------------- standalone section heading
   Same treatment as `.detail-section h4`, as a class for headings that sit
   outside a .detail-section (e.g. "Related & Upcoming"). */
.section-title{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;font-size:.85rem;color:var(--gold);margin:0 0 20px;
}

/* -------------------------------------------------------------- breadcrumb
   Single event page (event.php). */
.breadcrumb{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:28px 0 0;
  font-family:'Barlow Condensed',sans-serif;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;font-size:.78rem;
  color:var(--muted);
}
.breadcrumb a{color:var(--muted);}
.breadcrumb a:hover{color:var(--gold);}
.breadcrumb span[aria-hidden]{color:var(--muted-2);}
.breadcrumb > span:last-child{color:var(--paper);}

/* -------------------------------------------------------------- image strip */
.event-media{display:flex;flex-direction:column;gap:12px;}
@media(min-width:900px){.event-media{position:sticky;top:110px;}}
.event-media .poster{position:static;}

/* -------------------------------------------------------------- fact list */
.fact-list{
  display:grid;gap:0;margin:22px 0 0;padding:0;
  border-top:1px solid var(--line);
}
.fact-list .fact{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--line);
}
.fact-list dt{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;font-size:.76rem;
  color:var(--muted);margin:0;
}
.fact-list dd{
  font-family:'IBM Plex Mono',monospace;font-size:.82rem;
  color:var(--paper);margin:0;text-align:right;
}