/* components__EventDetail */
.ev-head:not(.mc-s) {
    padding-bottom: var(--space-xl);
  }

  .ev-head-grid:not(.mc-s) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
  }

  .ev-title:not(.mc-s) {
    margin-bottom: var(--space-2xs);
    font-size: var(--type-page);
    max-width: 22ch;
  }

  .ev-date:not(.mc-s) {
    margin: 0;
    color: var(--brick-dark);
    font-size: var(--type-body-lg);
    font-weight: 700;
  }

  .ev-media:not(.mc-s) {
    margin: 0;
  }

  .ev-media:not(.mc-s) img,
  .ev-media:not(.mc-s) .mosaic-media:not(.mc-s) {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius);
  }

  /* ---------- Fakty ---------- */

  .ev-facts-section:not(.mc-s) {
    padding-block: var(--space-xl);
  }

  .ev-facts:not(.mc-s) {
    display: grid;
    /* 11rem, nie 13rem: pięć faktów ma się zmieścić w jednym rzędzie na desktopie.
       Przy 13rem wchodziły cztery kolumny i piąty fakt zostawał sam w drugim
       rzędzie, obok trzech pustych pól — czytało się to jak błąd renderowania. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: var(--space-m) var(--space-l);
    margin: 0 0 var(--space-l);
  }

  .ev-facts:not(.mc-s) > div:not(.mc-s) {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-top: 0.9rem;
    border-top: 1px solid color-mix(in srgb, var(--paper-light) 22%, transparent);
  }

  .ev-facts:not(.mc-s) dt:not(.mc-s) {
    color: color-mix(in srgb, var(--paper-light) 62%, transparent);
    font-size: var(--type-micro);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .ev-facts:not(.mc-s) dd:not(.mc-s) {
    margin: 0;
    color: var(--paper-light);
    font-size: var(--type-body);
    font-weight: 600;
  }

  .ev-signup:not(.mc-s) {
    padding-top: var(--space-s);
  }

  .ev-open:not(.mc-s) {
    max-width: var(--measure);
    margin: 0;
  }

  .ev-open:not(.mc-s) strong:not(.mc-s) {
    color: var(--yellow);
  }

  /* ---------- Treść ---------- */

  .ev-body:not(.mc-s) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 19rem;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
  }

  .ev-body:not(.mc-s) .prose:not(.mc-s) h2:not(.mc-s) {
    margin-bottom: var(--space-s);
    font-size: clamp(1.5rem, 2.6vw, 2rem);
  }

  .ev-aside:not(.mc-s) {
    display: grid;
    gap: var(--space-s);
  }

  .ev-aside:not(.mc-s) .card:not(.mc-s) {
    padding: var(--space-m);
  }

  .ev-aside-label:not(.mc-s) {
    margin-bottom: 0.3rem;
    color: var(--teal);
    font-size: var(--type-micro);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .ev-speaker-name:not(.mc-s) {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
  }

  .ev-help:not(.mc-s) h3:not(.mc-s) {
    margin-bottom: 0.4rem;
    font-size: 1.1rem;
  }

  .ev-help:not(.mc-s) p:not(.mc-s) {
    margin-bottom: var(--space-s);
    color: var(--muted);
    font-size: 0.92rem;
  }

  .ev-back:not(.mc-s) {
    margin-top: 0;
    padding-top: 0;
  }

  .ev-back:not(.mc-s)::after {
    content: none;
  }

  .ev-back:not(.mc-s)::before {
    content: '←';
  }

  @media (max-width: 900px) {
    .ev-head-grid:not(.mc-s),
    .ev-body:not(.mc-s) {
      grid-template-columns: minmax(0, 1fr);
    }

    /* Zdjęcie schodzi pod tożsamość wydarzenia. Wcześniej stało nad tytułem
       (`order: -1`) i na telefonie tytuł zaczynał się dopiero na y≈650. */
    .ev-media:not(.mc-s) {
      max-width: 28rem;
    }
  }