/* ================================================================
   GhanaTRVL — Unpaid Event Detail Page Addon
   File: event-detail-addon-v4.css
   Depends on: custom-v4.css (tokens, base, .page-hero, buttons)

   Structure:
   01. Full Clear Hero Image — SUPERSEDED by §07 (title strip + split row), kept only
       for reference; not used since the 2026-07-16 A/B/C layout combination.
   02. Event Info Block (.evt-info-*) — rows reused inside the §08 panel
   03. Organiser / Article Cards (.evt-linkcard-*) — article cross-link only now;
       organiser moved to §09 (People & Places)
   04. Description (.evt-detail-desc)
   05. Map (.ent-map-wrap / .ent-map — copied from entities-addon-v4.css so this page
       doesn't need to load that whole file just for 3 small map-pin rules)
   06. Contact / Booking Block (.evt-contact-*) — reused inside the §08 panel
   07. Title Strip + Poster/Panel Split Row (design A + B combination, 2026-07-16)
   08. Info Panel (design B — col-5 panel: event details / booking / contact)
   09. People & Places (design C — TSP card row)
   10. Upcoming Events Sidebar Card (design B — compact ue-card)

   Last updated: 2026-07-16
================================================================ */


/* ================================================================
   01. FULL CLEAR HERO IMAGE
   ---------------------------------------------------------------
   Deliberately NOT a dark-covered/gradient hero — sits below the
   standard solid .page-hero band (__page_title.php) instead of
   replacing it, so the photo shows at full brightness.

   object-fit: contain (not cover) — event images are frequently
   portrait-orientation posters/flyers, not landscape photos.
   cover + a fixed max-height crops the top/bottom off a tall poster,
   hiding most of its content. contain always shows the whole image,
   letterboxed against --wh2 rather than cropped, regardless of
   orientation. Fixed 2026-07-16 — was cropping posters badly.
================================================================ */

.evt-detail-hero-img {
  padding: 24px 0 0;
}

.evt-detail-hero-img img {
  width: 100%;
  max-height: 720px;
  object-fit: contain;
  background: var(--wh2);
  border-radius: 6px;
  display: block;
}

@media (max-width: 767px) {
  .evt-detail-hero-img img { max-height: 320px; border-radius: 4px; }
}


/* ================================================================
   02. EVENT INFO BLOCK
   ---------------------------------------------------------------
   Category, dates, time, location — a compact meta strip directly
   below the hero image. No price/ticket-cost display (unpaid page).
================================================================ */

/* .evt-info-strip (horizontal white card) retired 2026-07-16 — these rows now render
   vertically inside the §08 panel's "Event Details" section instead. Row/label/value
   styles below are reused there. */

.evt-info-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 5px 0;
}

.evt-info-item i {
  color: var(--mv);
  font-size: 15px;
  margin-top: 3px;
  flex-shrink: 0;
}

.evt-info-item-label {
  font-family: var(--ff-h);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mu);
  margin-bottom: 2px;
}

.evt-info-item-value {
  font-family: var(--ff-h);
  font-size: .92rem;
  font-weight: 700;
  color: var(--dv);
  line-height: 1.3;
}

.evt-info-cat-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(var(--events-rgb), .1);
  color: var(--events);
  font-family: var(--ff-h);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 20px;
}

/* Free-entry / online tags — sit alongside the category badge */
.evt-info-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-h);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 20px;
}
.evt-info-tag--free {
  background: rgba(197,220,100,.18);
  color: #4d6b1a;
}
.evt-info-tag--online {
  background: rgba(89,45,140,.1);
  color: var(--mv);
}

/* Date-to-be-confirmed qualifier, inline with the date value */
.evt-info-tbc {
  display: inline-block;
  font-family: var(--ff-h);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mu);
  background: var(--wh2);
  border: 1px solid var(--rule);
  padding: 2px 7px;
  border-radius: 2px;
  margin-left: 6px;
  vertical-align: middle;
}

/* Cancelled banner — full width, at the very top of the page body (above the title
   strip). Event stays fully visible (see memory:
   feedback_cancelled_content_stays_visible) — this only marks it. */
.evt-cancelled-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #a30000;
  color: #fff;
  font-family: var(--ff-h);
  font-size: .85rem;
  font-weight: 700;
  padding: 10px 18px;
}
.evt-cancelled-banner i { font-size: 16px; }


/* ================================================================
   03. ORGANISER / ARTICLE CARDS (.evt-linkcard-*)
   ---------------------------------------------------------------
   Shared card style for the "part of this festival" article
   cross-link and the organiser card. Round image variant for the
   organiser (a portrait/logo), square for the article thumbnail.
================================================================ */

.evt-linkcard {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 16px 18px;
  margin-top: 18px;
  text-decoration: none;
  color: inherit;
  transition: transform .2s, box-shadow .2s;
}
.evt-linkcard:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(35,15,66,.1);
}

.evt-linkcard-img {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
  background: var(--wh2);
}
.evt-linkcard-img--round { border-radius: 50%; }
.evt-linkcard-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.evt-linkcard-body { flex: 1; min-width: 0; }

.evt-linkcard-eyebrow {
  display: block;
  font-family: var(--ff-h);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--events);
  margin-bottom: 4px;
}
.evt-linkcard--organiser .evt-linkcard-eyebrow { color: var(--mv); }

.evt-linkcard-title {
  font-family: var(--ff-h);
  font-size: 1rem;
  font-weight: 700;
  color: var(--dv);
  margin-bottom: 2px;
  line-height: 1.3;
}

.evt-linkcard-desc {
  font-size: .85rem;
  color: var(--mu);
  line-height: 1.6;
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.evt-linkcard-meta {
  font-family: var(--ff-h);
  font-size: 10.5px;
  color: var(--mu);
}

.evt-linkcard-arrow {
  flex-shrink: 0;
  color: rgba(89,45,140,.25);
  font-size: 14px;
  transition: color .2s, transform .2s;
}
.evt-linkcard:hover .evt-linkcard-arrow { color: var(--mv); transform: translateX(3px); }

/* Plain-text organiser (no linked TSP page) — no card chrome */
.evt-organiser-plain {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 14px 18px;
  background: var(--wh2);
  border-radius: 6px;
}
.evt-organiser-plain-name {
  font-family: var(--ff-h);
  font-weight: 700;
  color: var(--dv);
}


/* ================================================================
   04. DESCRIPTION (.evt-detail-desc / .evt-detail-section-head)
================================================================ */

.evt-detail-section {
  margin-top: 32px;
}

.evt-detail-section-head {
  font-family: var(--ff-h);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--dv);
  text-transform: uppercase;
  letter-spacing: -.01em;
  margin-bottom: 14px;
}

.evt-desc-eyebrow {
  font-family: var(--ff-h);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--events);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  margin-bottom: 8px;
}
.evt-desc-eyebrow::before {
  content: '';
  width: 14px;
  height: 2px;
  background: var(--events);
  display: block;
  flex-shrink: 0;
}

.evt-detail-desc {
  font-family: var(--ff-s, Georgia, serif);
  font-size: 1rem;
  line-height: 1.85;
  color: var(--bk);
}
.evt-detail-desc p { margin-bottom: 1.1rem; }


/* ================================================================
   05. MAP (.ent-map-wrap / .ent-map)
   ---------------------------------------------------------------
   Copied verbatim from entities-addon-v4.css (§ single-pin map) so
   this page doesn't need to load that entire stylesheet just for
   these few rules. Reused as-is by the shared $ShowMap_entity
   Leaflet init block in __javascript.php — same #entMap target,
   same .ent-map-pin / .ent-map-popup-* classes.
================================================================ */

.ent-map-wrap {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(35,15,66,.10);
  border: 1px solid var(--rule);
}

.ent-map {
  height: 400px;
  width: 100%;
  background: var(--wh);
}

.ent-map-pin {
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ent-map-pin .fa-location-dot {
  font-size: 2.25rem;
  color: var(--mv);
  filter: drop-shadow(0 2px 4px rgba(35,15,66,.35));
  line-height: 1;
}

.ent-map-popup-name {
  display: block;
  font-family: var(--ff-h);
  font-size: .875rem;
  font-weight: 700;
  color: var(--dv);
  margin-bottom: 2px;
}
.ent-map-popup-city {
  display: block;
  font-family: var(--ff-h);
  font-size: .775rem;
  color: var(--mu);
}


/* ================================================================
   06. CONTACT / BOOKING BLOCK (.evt-contact-*)
================================================================ */

.evt-contact-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.evt-contact-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1.5px solid var(--rule);
  border-radius: 24px;
  padding: 10px 18px;
  font-family: var(--ff-h);
  font-size: .85rem;
  font-weight: 700;
  color: var(--dv);
  text-decoration: none;
  transition: all .18s;
}
.evt-contact-item i { color: var(--mv); font-size: 14px; }
.evt-contact-item:hover {
  background: var(--mv);
  border-color: var(--mv);
  color: #fff;
}
.evt-contact-item:hover i { color: #fff; }

.evt-contact-item--primary {
  background: var(--ye);
  border-color: var(--ye);
  color: var(--dv);
}
.evt-contact-item--primary i { color: var(--dv); }
.evt-contact-item--primary:hover {
  background: var(--gr);
  border-color: var(--gr);
  color: var(--dv);
}
.evt-contact-item--primary:hover i { color: var(--dv); }

.evt-contact-disclaimer {
  font-size: 11.5px;
  color: var(--mu);
  line-height: 1.6;
  margin: 16px 0 0;
}


/* ================================================================
   07. TITLE STRIP + POSTER/PANEL SPLIT ROW
   ---------------------------------------------------------------
   Design A title strip (narrower than the full .page-hero band) +
   Design B poster/panel split. Bespoke to this page rather than a
   modification of the shared __page_title.php — the shape (category
   badge inline with breadcrumb, no subtitle/meta-pill row) is
   different enough from that shared component that adapting it would
   mean changing a component several other page types depend on.
================================================================ */

.evt-title-strip {
  background: var(--dv);
  padding: 22px 0 20px;
  position: relative;
  overflow: hidden;
}
.evt-title-strip::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(0deg, transparent 0, transparent 30px, rgba(246,238,39,.03) 30px, rgba(246,238,39,.03) 31px);
  pointer-events: none;
}
.evt-title-strip::after {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(to bottom, var(--ye), var(--gr));
}

.evt-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-family: var(--ff-h);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}
.evt-breadcrumb a { color: rgba(255,255,255,.4); text-decoration: none; }
.evt-breadcrumb a:hover { color: rgba(255,255,255,.7); }
.evt-breadcrumb .sep { color: rgba(255,255,255,.18); }
.evt-breadcrumb .current { color: rgba(255,255,255,.6); }

.evt-title-strip .evt-info-cat-badge {
  background: rgba(var(--events-rgb), .18);
  border: 1px solid rgba(var(--events-rgb), .4);
  color: #6db8ff;
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
}

.evt-strip-h1 {
  font-family: var(--ff-h);
  font-weight: 800;
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
  color: #fff;
  letter-spacing: -.025em;
  line-height: 1.05;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* Poster / panel split row — stretch so the poster fills the panel's height */
.evt-split-row {
  align-items: stretch;
}

.evt-poster-frame {
  background: #0d0520;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  height: 100%;
}
.evt-poster-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 991px) {
  .evt-poster-frame { min-height: 280px; height: auto; }
  .evt-poster-frame img { height: auto; max-height: 420px; }
}


/* ================================================================
   08. INFO PANEL (design B — col-5)
   ---------------------------------------------------------------
   Dark header (event name) + sectioned rows: Event Details, Tickets
   & Booking, Contact. Reuses .evt-info-item / .evt-contact-item
   (§02, §06) for the row-level styling; this section owns the
   panel chrome and per-section headings only.
================================================================ */

.evt-panel {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 6px;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.evt-panel-head {
  background: var(--dv);
  padding: 14px 18px;
}
.evt-panel-head-label {
  font-family: var(--ff-h);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin-bottom: 4px;
}
.evt-panel-head-name {
  font-family: var(--ff-h);
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -.015em;
}

.evt-panel-section {
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
}
.evt-panel-section:last-child { border-bottom: none; }

.evt-panel-section-title {
  font-family: var(--ff-h);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mu);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.evt-panel-section-title i { color: var(--mv); }

/* Panel-scoped size reductions — same classes as the full-width contact grid (§06),
   slightly smaller to suit the narrower col-5 column */
.evt-panel-section .evt-contact-grid { gap: 8px; }
.evt-panel-section .evt-contact-item {
  padding: 8px 14px;
  font-size: .8rem;
  border-radius: 20px;
}
.evt-panel-section .evt-info-item-value { font-size: .85rem; }


/* ================================================================
   09. PEOPLE & PLACES (design C — TSP card row)
   ---------------------------------------------------------------
   Organiser only for now — Venue and Featured Artists are held back
   pending real data (see _event_free_body.php docblock: venue_* SP
   fields currently duplicate the organiser's own join; artist linking
   doesn't exist in the schema yet, per Marcel "sometimes we have,
   sometimes we don't — optional box"). Cards render in a row so
   adding Venue/Artists later is a data change, not a redesign.
================================================================ */

.evt-tsp-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.evt-tsp-type-badge {
  font-family: var(--ff-h);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mu);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
}
.evt-tsp-type-badge i { color: var(--mv); font-size: 10px; }

.evt-tsp-name {
  font-family: var(--ff-h);
  font-size: .95rem;
  font-weight: 700;
  color: var(--dv);
  margin-bottom: 6px;
  line-height: 1.25;
}

.evt-tsp-desc {
  font-size: .82rem;
  color: var(--mu);
  line-height: 1.55;
  margin-bottom: 12px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.evt-tsp-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--ff-h);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mv);
  text-decoration: none;
  margin-top: auto;
}
.evt-tsp-link:hover { color: var(--dv); }
.evt-tsp-link i { font-size: 8px; }

/* Plain-text organiser (no linked TSP page) — same card chrome, no link/arrow */
.evt-tsp-card--plain .evt-tsp-name { margin-bottom: 0; }

/* Venue's "jump to map" link — separate from .evt-tsp-link since a venue card can
   show both side by side (view venue page + jump to the map further down) */
.evt-tsp-venue-map {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--ff-h);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--events);
  text-decoration: none;
  padding: 4px 9px;
  border: 1px solid rgba(var(--events-rgb), .25);
  border-radius: 3px;
}
.evt-tsp-venue-map:hover {
  background: rgba(var(--events-rgb), .06);
  color: var(--events);
}

/* Featured Partners — stacked list within one card (unbounded count, unlike the
   single Organiser/Venue cards), backed by the real events_partners junction table. */
.evt-partner-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: var(--bk);
  transition: color .15s;
}
.evt-partner-row:last-child { border-bottom: none; }
.evt-partner-row:hover { color: var(--mv); }

.evt-partner-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--wh2);
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mu);
  font-size: 12px;
  flex-shrink: 0;
}

.evt-partner-name {
  font-family: var(--ff-h);
  font-size: .82rem;
  font-weight: 700;
  color: inherit;
  line-height: 1.2;
}
.evt-partner-type {
  font-size: 9.5px;
  color: var(--mu);
  margin-top: 1px;
}

.evt-partner-arrow {
  margin-left: auto;
  font-size: 9px;
  color: rgba(89,45,140,.2);
  flex-shrink: 0;
}
.evt-partner-row:hover .evt-partner-arrow { color: var(--mv); }


/* ================================================================
   10. UPCOMING EVENTS SIDEBAR CARD (design B — col-4)
================================================================ */

.evt-ue-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: var(--bk);
  transition: color .15s;
}
.evt-ue-card:last-child { border-bottom: none; }
.evt-ue-card:hover { color: var(--mv); }

.evt-ue-thumb {
  width: 46px;
  height: 46px;
  border-radius: 3px;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--wh2);
}
.evt-ue-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.evt-ue-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mu);
  font-size: 14px;
}

.evt-ue-date {
  font-family: var(--ff-h);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--events);
  margin-bottom: 1px;
}
.evt-ue-title {
  font-family: var(--ff-h);
  font-size: .82rem;
  font-weight: 700;
  color: inherit;
  line-height: 1.25;
}
.evt-ue-loc {
  font-size: 10px;
  color: var(--mu);
  margin-top: 1px;
}
.evt-ue-see-all {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.evt-ue-see-all a {
  font-family: var(--ff-h);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mv);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Sidebar card chrome — dark header + white body, wraps .evt-ue-card rows */
.evt-sidebar-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 16px;
}
.evt-sidebar-card-head {
  background: var(--dv);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.evt-sidebar-card-head-title {
  font-family: var(--ff-h);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}
.evt-sidebar-card-head i { color: var(--ye); }
.evt-sidebar-card-body { padding: 14px; }

/* Sticky panel/sidebar on desktop */
@media (min-width: 992px) {
  .evt-col-side { position: sticky; top: 78px; height: fit-content; align-self: flex-start; }
}