/* =============================================================================
   EVENT DETAIL — DJ BAND
   Full-width sage band with a centered Bootstrap .container: two col-6 columns.
   Left  = vertical tagline + duotone DJ portrait.
   Right = the DJ's bio statement + name/location + socials.
   The portrait duotone (sage highlights / charcoal shadows) is produced by the
   inline SVG filter in _djs.html, applied here via `filter: url(#dj-duotone)`.
   Loaded only by templates/events/events_detail_page.html via extra_css.
   ============================================================================= */

.event-djs {
  background-color: #7b7e68;
  /* Kill the global section vertical padding (which overrides Bootstrap p-0)
     so the portrait sits flush to the band's top and bottom edges. */
  padding-block: 0 !important;
}

/* Bootstrap's row gutter-y isn't zeroed by g-0 here (a global override sets it),
   leaving a 32px offset above the row. Zero it so the row is flush to the band. */
.event-djs .row {
  --bs-gutter-y: 0 !important;
  margin-top: 0 !important;
}

/* The SVG only carries a filter def — keep it out of layout entirely. */
.event-djs__filter-def {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---- LEFT: vertical tagline + duotone portrait (two halves) ---- */
.event-djs__showcase {
  display: flex;
  align-items: stretch;
}

.event-djs__tagline {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* Tight side padding — the column is narrow beside the full-height square. */
  padding: 0 clamp(0.75rem, 1.2vw, 1rem);
}

.event-djs__tagline-text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.2vw, 1.8rem);
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-align: left;
  overflow-wrap: normal;
  hyphens: none;
  color: rgba(var(--color-charcoal-rgb, 15, 12, 10), 0.85);
}

.event-djs__portrait {
  /* Square, sized to the full band height (driven by the statement), so it
     grows with the statement padding but stays 1:1. The img is absolutely
     positioned so it doesn't feed its natural size back into the band height.
     Mobile re-applies aspect-ratio: 1/1 + width:100% below. */
  position: relative;
  flex: 0 0 auto;
  align-self: stretch;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.event-djs__portrait-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Duotone: convert the RGB source to sage + Sarovyn charcoal. */
  filter: url(#dj-duotone);
}

/* ---- RIGHT: statement + attribution ---- */
.event-djs__statement {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* top/right/bottom/left — extra top & bottom, and extra left (next to the
     photo). !important beats Bootstrap's column gutter padding (.row > *). */
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 3.5rem)
    clamp(2.5rem, 5vw, 4rem) clamp(2.5rem, 4vw, 4.5rem) !important;
  color: var(--color-charcoal, #0f0c0a);
}

.event-djs__bio {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--color-charcoal, #0f0c0a);
}

.event-djs__bio p {
  margin: 0 0 1.25rem;
}

.event-djs__bio p:last-child {
  margin-bottom: 0;
}

.event-djs__bio a {
  color: var(--color-charcoal, #0f0c0a);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.event-djs__attribution {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 2.25rem;
}

.event-djs__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2rem;
  color: var(--color-charcoal, #0f0c0a);
}

.event-djs__role {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--color-charcoal-rgb, 15, 12, 10), 0.65);
}

/* ---- Desktop: larger tagline ---- */
@media (min-width: 992px) {
  .event-djs__tagline-text {
    font-size: 2.75rem;
  }
}

/* ---- Mobile: stack the showcase above the statement ---- */
@media (max-width: 991.98px) {
  /* Match the hero: use the normal section padding on mobile (the desktop
     flush 0 is overridden here). The top/bottom band spacing comes from the
     section, not the tagline/statement, so it's consistent with other sections. */
  .event-djs {
    padding-block: 3rem !important;
  }

  /* Full-bleed: drop the container/column side padding so the photo runs edge
     to edge. */
  .event-djs .container {
    padding-inline: 0;
  }
  .event-djs .row {
    --bs-gutter-x: 0;
  }

  .event-djs__showcase {
    flex-direction: column;
    min-height: 0;
  }

  .event-djs__tagline {
    flex: 0 0 auto;
    padding: 0 2.75rem 3.5rem;
  }

  .event-djs__tagline-text {
    font-size: 2.25rem;
  }

  .event-djs__portrait {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 1 / 1;
  }

  /* Top = gap from photo; section provides the bottom. !important to override
     the desktop statement padding (also !important). */
  .event-djs__statement {
    padding: 2.5rem 1.5rem 0 !important;
  }
}