/* ==========================================================================
   Piren — the event detail page.

   PAGE-SCOPED, like forms.css, prose.css and julbord.css: linked only by the
   two collection-route templates, which are the only pages that render a
   single event.
   ========================================================================== */

.event-detail{
  container-type:inline-size;
  container-name:eventdetail;
}

.event-detail__inner{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-snug);
}

/* Back to the listing. First thing in the source order as well as on screen:
   a detail page reached from a search result needs a way up. */
.event-detail__back{
  font-size:var(--type-sm);
}

.event-detail__row{
  inline-size:100%;
  display:flex;
  flex-flow:row wrap;
  justify-content:space-between;
  align-items:flex-start;
  gap:var(--space-snug);
}

/* The column IS the measure, so the eyebrow, the h1, the body and the buttons
   share one right edge — the same rule media-split follows. */
.event-detail__copy{
  flex:1;
  min-inline-size:min(100%, 24rem);
  max-inline-size:var(--measure-wide);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-tight);
}

.event-detail__dates{
  display:flex;
  flex-flow:row wrap;
  align-items:baseline;
  gap:.7ch;
  font-size:var(--type-sm);
  font-weight:var(--font-body-medium);
  letter-spacing:var(--letter-spacing-wide);
  text-transform:uppercase;
  color:var(--text-muted);
}
.event-detail__until{display:flex;align-items:baseline;gap:.7ch}

.event-detail__heading{
  font-size:var(--type-h1);
  line-height:var(--line-height-tight);
  color:var(--text-heading);
}

.event-detail__body{
  max-inline-size:var(--measure-prose);
  line-height:var(--line-height-relaxed);
}
.event-detail__body p{max-inline-size:none}

.event-detail__actions{
  display:flex;
  flex-flow:row wrap;
  align-items:center;
  gap:var(--space-tight);
  margin-block-start:var(--space-hair);
}

/* Square, and square in both layouts — the same cycle the nav cards and the
   event listing hit: an in-flow <img> with block-size:100% cannot resolve
   against a parent whose height comes from aspect-ratio, so it falls back to
   its intrinsic ratio and stretches the frame. Out of flow against a definite
   box is the fix. */
.event-detail__media{
  position:relative;
  flex:1;
  min-inline-size:min(100%, 20rem);
  max-inline-size:30rem;
  aspect-ratio:1;
  overflow:clip;
  background:var(--piren-sage) url("/assets/piren/events-glyph.4e73b7dbde54fb36.svg") 50% / 55% no-repeat;
}
.event-detail__img{
  position:absolute;
  inset:0;
  inline-size:100%;
  block-size:100%;
  object-fit:cover;
  display:block;
}

@container eventdetail (max-width: 44rem){
  .event-detail__row{gap:var(--space-tight)}
  .event-detail__actions{inline-size:100%}
  .event-detail__actions .btn{flex:1;min-inline-size:min(100%, 12rem)}
}