@layer ec.pages {
  .ec-event-detail {
    min-width: 0;

    /* Identidade cromática por evento (Escopo B: herói + acentos).
       O template injeta --ec-event-* (derivadas do banner, com contraste AA
       garantido em Python). Aqui remapeamos os tokens de sistema da página
       para elas, com fallback cobalto quando o evento não tem cor discernível
       (os fallbacks são idênticos aos defaults do sistema).
       O CTA "solar" (--ec-sys-color-accent) e os tokens semânticos
       (success/warning/error) e o anel de foco NÃO são remapeados. */
    --ec-sys-color-primary: var(--ec-event-primary, var(--ec-ref-cobalt-700));
    --ec-sys-color-primary-hover: var(--ec-event-hover, var(--ec-ref-cobalt-800));
    --ec-sys-color-primary-pressed: var(--ec-event-pressed, var(--ec-ref-cobalt-900));
    --ec-sys-color-primary-container: var(--ec-event-container, var(--ec-ref-cobalt-200));
    --ec-sys-color-on-primary-container: var(--ec-event-on-container, var(--ec-ref-cobalt-900));
    --ec-sys-color-interactive: var(--ec-event-interactive, var(--ec-ref-cobalt-500));
    --ec-sys-color-interactive-subtle: var(--ec-event-subtle, var(--ec-ref-cobalt-100));
    --ec-sys-color-selection: var(--ec-event-container, var(--ec-ref-cobalt-200));
  }

  /* Herói (opção F): a arte 16:9 aparece INTEIRA e nítida (o banner carrega
     informação), sobre um fundo ambiente = a própria arte borrada e tingida com
     a cor do evento. O texto vai numa faixa clara (container) abaixo, com texto
     escuro (on-container) — par com contraste AA garantido. Nada cobre a arte. */
  .ec-event-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: var(--ec-space-6);
  }

  .ec-event-hero__ambient {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
  }

  .ec-event-hero__ambient-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.3);
    filter: blur(30px) saturate(1.05) brightness(0.66);
  }

  .ec-event-hero__ambient::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(
      120deg,
      color-mix(in srgb, var(--ec-sys-color-primary-pressed) 82%, transparent),
      color-mix(in srgb, var(--ec-sys-color-primary) 55%, transparent)
    );
  }

  .ec-event-hero__frame {
    max-width: min(100%, 60rem);
  }

  .ec-event-hero__banner {
    margin: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--ec-radius-xl) var(--ec-radius-xl) 0 0;
    background: var(--ec-sys-color-surface);
    box-shadow: var(--ec-elevation-4);
  }

  .ec-event-hero__banner-image {
    display: block;
    width: 100%;
    height: 100%;
    /* A arte é 16:9, então cover não corta; preserva toda a informação. */
    object-fit: cover;
  }

  .ec-event-hero__band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ec-space-4);
    padding: var(--ec-space-5) var(--ec-space-6);
    border-radius: 0 0 var(--ec-radius-xl) var(--ec-radius-xl);
    background: var(--ec-sys-color-primary-container);
    color: var(--ec-sys-color-on-primary-container);
  }

  .ec-event-hero__band-main {
    display: grid;
    min-width: 0;
    gap: var(--ec-space-3);
  }

  /* Ações do herói: compartilhar + CTA numa linha, à direita da faixa. */
  .ec-event-hero__band-actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--ec-space-3);
  }

  /* CTA de conversão no herói: leva o público direto ao seletor de ingressos.
     Rótulo por tipo de acesso (Ver ingressos / Inscrever-se / Contribuir…). */
  .ec-event-hero__cta {
    white-space: nowrap;
  }

  .ec-event-hero__title {
    margin: 0;
    color: var(--ec-sys-color-on-primary-container);
    font-size: var(--ec-type-heading-1-size);
    font-weight: var(--ec-font-weight-extrabold);
    line-height: var(--ec-type-heading-1-line);
    letter-spacing: -0.03em;
    text-wrap: balance;
  }

  .ec-event-hero__meta {
    display: grid;
    gap: var(--ec-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ec-event-hero__meta-item {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    align-items: start;
    gap: var(--ec-space-3);
    color: var(--ec-sys-color-on-primary-container);
    font-size: var(--ec-type-body-lg-size);
    line-height: var(--ec-type-body-lg-line);
  }

  .ec-event-hero__meta-icon {
    width: 1.25rem;
    height: 1.25rem;
    margin-block-start: 0.2rem;
    fill: currentColor;
  }

  .ec-event-hero__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ec-space-2);
  }

  .ec-event-hero__badge {
    background: color-mix(in srgb, var(--ec-sys-color-on-primary-container) 10%, transparent);
    color: var(--ec-sys-color-on-primary-container);
    border: var(--ec-border-width-thin) solid color-mix(in srgb, var(--ec-sys-color-on-primary-container) 30%, transparent);
  }

  .ec-event-hero__share {
    flex: none;
    display: inline-grid;
    width: var(--ec-touch-target-min);
    height: var(--ec-touch-target-min);
    padding: 0;
    place-items: center;
    border: var(--ec-border-width-thin) solid color-mix(in srgb, var(--ec-sys-color-on-primary-container) 30%, transparent);
    border-radius: var(--ec-radius-full);
    background: color-mix(in srgb, var(--ec-sys-color-on-primary-container) 6%, transparent);
    color: var(--ec-sys-color-on-primary-container);
    cursor: pointer;
  }

  .ec-event-hero__share:focus-visible {
    outline: var(--ec-border-width-thick, 2px) solid var(--ec-sys-color-focus-ring);
    outline-offset: 2px;
  }

  .ec-event-hero__share svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: currentColor;
  }

  .ec-event-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(21rem, 24rem);
    align-items: start;
    gap: var(--ec-space-7);
    padding-block: var(--ec-space-8) var(--ec-space-10);
  }

  .ec-event-main {
    display: grid;
    min-width: 0;
    gap: var(--ec-space-6);
  }

  .ec-event-aside {
    position: sticky;
    inset-block-start: calc(4.5rem + var(--ec-space-5));
    min-width: 0;
    /* Âncora do CTA do herói (#ingressos): não deixar o topo sob o header fixo. */
    scroll-margin-block-start: calc(4.5rem + var(--ec-space-4));
  }

  .ec-event-section {
    overflow: clip;
    border: var(--ec-border-width-thin) solid var(--ec-sys-color-outline-subtle);
    border-radius: var(--ec-radius-xl);
    background: var(--ec-sys-color-surface);
    box-shadow: var(--ec-elevation-1);
  }

  .ec-event-section__header {
    display: grid;
    gap: var(--ec-space-2);
    padding: var(--ec-space-5) var(--ec-space-5) 0;
  }

  .ec-event-section__eyebrow {
    color: var(--ec-sys-color-primary);
    font-size: var(--ec-type-label-md-size);
    font-weight: var(--ec-font-weight-extrabold);
    letter-spacing: 0.08em;
    line-height: var(--ec-type-label-md-line);
    text-transform: uppercase;
  }

  .ec-event-section__title {
    color: var(--ec-sys-color-on-surface-strong);
    font-size: var(--ec-type-heading-3-size);
    line-height: var(--ec-type-heading-3-line);
  }

  .ec-event-section__body {
    padding: var(--ec-space-5);
  }

  .ec-event-description {
    color: var(--ec-sys-color-on-surface);
    font-size: var(--ec-type-body-lg-size);
    line-height: var(--ec-type-body-lg-line);
  }

  .ec-event-description > * + * {
    margin-block-start: var(--ec-space-4);
  }

  /* Títulos DENTRO da descrição (h3 = "Título", h4 = "Subtítulo" do editor):
     ficam abaixo do título da seção (.ec-event-section__title, heading-3) para
     não competir com ele. Reforço de margem superior para separar do texto. */
  .ec-event-description :is(h3, h4) {
    color: var(--ec-sys-color-on-surface-strong);
    font-weight: var(--ec-font-weight-bold);
  }

  .ec-event-description :is(h3, h4):not(:first-child) {
    margin-block-start: var(--ec-space-5);
  }

  .ec-event-description h3 {
    font-size: var(--ec-type-title-md-size);
    line-height: var(--ec-type-title-md-line);
  }

  .ec-event-description h4 {
    font-size: var(--ec-type-body-lg-size);
    line-height: var(--ec-type-body-lg-line);
    letter-spacing: 0.01em;
    text-transform: uppercase;
  }

  .ec-event-description ul,
  .ec-event-description ol {
    padding-inline-start: var(--ec-space-6);
  }

  .ec-event-support-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ec-space-5);
  }

  .ec-event-facts {
    display: grid;
    gap: var(--ec-space-4);
    margin: 0;
  }

  .ec-event-fact {
    display: grid;
    gap: var(--ec-space-1);
    padding-block-end: var(--ec-space-4);
    border-block-end: var(--ec-border-width-thin) solid var(--ec-sys-color-divider);
  }

  .ec-event-fact:last-child {
    padding-block-end: 0;
    border-block-end: 0;
  }

  .ec-event-fact__label {
    color: var(--ec-sys-color-on-surface-muted);
    font-size: var(--ec-type-label-md-size);
    font-weight: var(--ec-font-weight-bold);
    letter-spacing: 0.04em;
    line-height: var(--ec-type-label-md-line);
    text-transform: uppercase;
  }

  .ec-event-fact__value {
    color: var(--ec-sys-color-on-surface-strong);
    font-size: var(--ec-type-body-lg-size);
    font-weight: var(--ec-font-weight-semibold);
    line-height: var(--ec-type-body-lg-line);
  }

  .ec-organizer {
    display: grid;
    gap: var(--ec-space-3);
  }

  .ec-organizer__name {
    color: var(--ec-sys-color-on-surface-strong);
    font-size: var(--ec-type-title-lg-size);
    font-weight: var(--ec-font-weight-bold);
    line-height: var(--ec-type-title-lg-line);
  }

  .ec-organizer__contact {
    display: grid;
    gap: var(--ec-space-1);
    color: var(--ec-sys-color-on-surface-muted);
    font-size: var(--ec-type-body-md-size);
    line-height: var(--ec-type-body-md-line);
  }

  .ec-organizer__disclaimer {
    margin: 0;
    padding: var(--ec-space-3);
    border-radius: var(--ec-radius-md);
    background: var(--ec-sys-color-info-container);
    color: var(--ec-sys-color-on-info-container);
    font-size: var(--ec-type-body-md-size);
    line-height: var(--ec-type-body-md-line);
  }

  .ec-policy {
    overflow: clip;
    border: var(--ec-border-width-thin) solid var(--ec-sys-color-outline-subtle);
    border-radius: var(--ec-radius-xl);
    background: var(--ec-sys-color-surface);
  }

  .ec-policy__summary {
    display: flex;
    min-height: var(--ec-touch-target-min);
    padding: var(--ec-space-5);
    align-items: center;
    justify-content: space-between;
    gap: var(--ec-space-4);
    color: var(--ec-sys-color-on-surface-strong);
    cursor: pointer;
    font-size: var(--ec-type-title-md-size);
    font-weight: var(--ec-font-weight-bold);
    line-height: var(--ec-type-title-md-line);
    list-style: none;
  }

  .ec-policy__summary::-webkit-details-marker {
    display: none;
  }

  .ec-policy__summary::after {
    content: "+";
    display: grid;
    width: var(--ec-touch-target-min);
    height: var(--ec-touch-target-min);
    place-items: center;
    border-radius: var(--ec-radius-full);
    background: var(--ec-sys-color-interactive-subtle);
    color: var(--ec-sys-color-primary);
    font-size: var(--ec-type-title-lg-size);
  }

  .ec-policy[open] .ec-policy__summary::after {
    content: "−";
  }

  .ec-policy__body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ec-space-5);
    padding: 0 var(--ec-space-5) var(--ec-space-5);
    border-block-start: var(--ec-border-width-thin) solid var(--ec-sys-color-divider);
  }

  .ec-policy__item {
    display: grid;
    align-content: start;
    gap: var(--ec-space-2);
    padding-block-start: var(--ec-space-5);
  }

  .ec-policy__title {
    color: var(--ec-sys-color-on-surface-strong);
    font-size: var(--ec-type-title-md-size);
    line-height: var(--ec-type-title-md-line);
  }

  .ec-policy__label {
    color: var(--ec-sys-color-primary);
    font-weight: var(--ec-font-weight-bold);
  }

  .ec-policy__description,
  .ec-policy__note {
    color: var(--ec-sys-color-on-surface-muted);
    font-size: var(--ec-type-body-md-size);
    line-height: var(--ec-type-body-md-line);
  }

  .ec-share-dialog {
    width: min(calc(100% - (2 * var(--ec-page-gutter))), 34rem);
    max-height: min(85vh, 44rem);
    padding: 0;
    border: 0;
    border-radius: var(--ec-radius-2xl);
    background: var(--ec-sys-color-surface);
    color: var(--ec-sys-color-on-surface);
    box-shadow: var(--ec-elevation-4);
  }

  .ec-share-dialog::backdrop {
    background: var(--ec-sys-color-scrim);
  }

  .ec-share-dialog__header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--ec-space-4);
    padding: var(--ec-space-5);
    border-block-end: var(--ec-border-width-thin) solid var(--ec-sys-color-divider);
  }

  .ec-share-dialog__title {
    color: var(--ec-sys-color-on-surface-strong);
    font-size: var(--ec-type-title-lg-size);
    line-height: var(--ec-type-title-lg-line);
  }

  .ec-share-dialog__close {
    display: inline-grid;
    width: var(--ec-touch-target-min);
    height: var(--ec-touch-target-min);
    padding: 0;
    place-items: center;
    border: var(--ec-border-width-thin) solid var(--ec-sys-color-outline-subtle);
    border-radius: var(--ec-radius-full);
    background: var(--ec-sys-color-surface);
    color: var(--ec-sys-color-on-surface);
    font-size: var(--ec-type-title-lg-size);
    cursor: pointer;
  }

  .ec-share-dialog__body {
    display: grid;
    gap: var(--ec-space-4);
    padding: var(--ec-space-5);
  }

  .ec-share-dialog__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ec-space-3);
  }

  .ec-share-dialog__status {
    min-height: var(--ec-type-body-md-line);
    color: var(--ec-sys-color-on-surface-muted);
    font-size: var(--ec-type-body-md-size);
    line-height: var(--ec-type-body-md-line);
  }

  @media (max-width: 1023px) {
    .ec-event-layout {
      grid-template-columns: minmax(0, 1fr) minmax(19rem, 21rem);
    }

    .ec-event-support-grid {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 767px) {
    .ec-event-detail:has(.ec-ticket-dock) {
      padding-block-end: calc(5rem + env(safe-area-inset-bottom));
    }

    .ec-event-hero {
      padding-block: var(--ec-space-5);
    }

    .ec-event-hero__band {
      flex-direction: column;
      align-items: stretch;
      padding: var(--ec-space-4) var(--ec-space-4);
    }

    /* Mobile: ações abaixo do texto; CTA ocupa a linha, compartilhar ao lado. */
    .ec-event-hero__band-actions {
      justify-content: space-between;
    }

    .ec-event-hero__cta {
      flex: 1;
      text-align: center;
    }

    .ec-event-layout {
      grid-template-columns: 1fr;
      gap: var(--ec-space-5);
      padding-block: var(--ec-space-6) var(--ec-space-9);
    }

    .ec-event-aside {
      position: static;
      order: -1;
    }

    .ec-event-main {
      gap: var(--ec-space-5);
    }

    .ec-event-support-grid,
    .ec-policy__body {
      grid-template-columns: 1fr;
    }

    .ec-event-section__header,
    .ec-event-section__body,
    .ec-policy__summary,
    .ec-share-dialog__header,
    .ec-share-dialog__body {
      padding-inline: var(--ec-space-4);
    }
  }

  @media (max-width: 479px) {
    .ec-event-hero__title {
      font-size: var(--ec-type-heading-1-size);
      line-height: var(--ec-type-heading-1-line);
    }

    .ec-share-dialog__actions {
      grid-template-columns: 1fr;
    }
  }

  @media (forced-colors: active) {
    .ec-event-section,
    .ec-policy,
    .ec-event-hero__banner,
    .ec-share-dialog {
      border: var(--ec-border-width-strong) solid CanvasText;
    }
  }
}