/*
  Event component. Carries its own identity (.event) with semantic children:
  <img>, <header>, body text, <footer> with action link. The same markup
  works for the compact "preview card" on the events page and the full-page
  <article> on an event detail page.
*/

.event {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-subtle);
  overflow: hidden;
  color: var(--ink-body);
}

/* Image sits at the top; shrinks to fit when parent constrains block-size. */
.event > img {
  display: block;
  inline-size: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 2;
}

.event > header,
.event > p,
.event > footer {
  padding-inline: var(--space-sm);
}
.event > header { padding-block-start: var(--space-sm); }
.event > footer { padding-block-end: var(--space-sm); }

.event > header > p {
  font-family: var(--font-ui);
  font-size: .8rem;
  color: var(--ink-muted);
  margin: 0;
}
.event > header > p time { color: var(--brand); font-weight: 700; }
.event > header > p .type-label {
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .72rem;
  color: var(--ink-faint);
}
.event .venue-logo {
  float: right;
  block-size: 2em;
  inline-size: calc(2em * (213 / 61));   /* preserve the SVG's native aspect ratio */
  margin-inline-start: var(--space-sm);
  background-color: var(--brand);
  opacity: .75;
  -webkit-mask: url('/assets/partners/academie-du-climat.svg') no-repeat center / contain;
          mask: url('/assets/partners/academie-du-climat.svg') no-repeat center / contain;
}
.event > header > h1,
.event > header > h2,
.event > header > h3 {
  margin-block: .2rem 0;
  font-size: 1.05rem;
  line-height: 1.25;
}
.event > p {
  color: var(--ink-muted);
  font-size: .9rem;
  line-height: 1.45;
  margin-block: .5rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.event > footer { margin-block-start: auto; }
.event > footer > a {
  display: inline-block;
  padding: .4rem .8rem;
  background: var(--brand);
  color: white;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 700;
  font-size: .85rem;
}
.event > footer > a:hover { background: var(--brand-dark); color: white; }

/* Compact preview variant (events page sidebar): image fills remaining space;
   body elements stack below with their own opaque background so text is always
   readable even when the image shows through at narrow heights. */
.events-pane .event {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-block-size: 0;
}
.events-pane .event > img {
  block-size: 100%;
  min-block-size: 0;
  aspect-ratio: unset;
}
.events-pane .event > :not(img) {
  background: var(--bg-card);
  position: relative;    /* paint above anything that might bleed from row 1 */
  z-index: 1;
}
.events-pane .event > header { padding-block-start: var(--space-sm); }
.events-pane .event > p      { margin-block-start: 0; padding-block-start: .35rem; }
.events-pane .event > footer { padding-block: var(--space-xs) var(--space-sm); }

/* Foreign-language badge (tiny pill in the header meta line) */
.lang-badge {
  display: inline-block;
  margin-inline-start: .5rem;
  padding: 0 .3rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: .65rem;
  letter-spacing: .04em;
  background: var(--bg-tint-cream);
  color: var(--accent);
  border: 1px solid var(--accent);
  text-decoration: none;
  cursor: help;
}