/* ==========================================================
   mod_eventsplit – fotka + obsah + info-panel události
   Tmavá varianta na DEER tokenech (typography.css / user.css).
   ========================================================== */

.mod-eventsplit {
  --evs-ink:        var(--c-forest-400, #23142D);
  --evs-ink-2:      var(--c-forest-300, #392745);
  --evs-light:      var(--c-surface, #F0F3FF);
  --evs-accent:     var(--c-grain-400, #C2A361);
  --evs-panel-bg:   color-mix(in srgb, var(--c-forest-300, #392745) 40%, var(--c-forest-400, #23142D));
  --evs-border:     color-mix(in srgb, var(--c-surface, #F0F3FF) 14%, transparent);

  --evs-radius:     var(--radius-card, 16px);
  --evs-gap:        clamp(24px, 4vw, 56px);

  color: var(--evs-light);
}

/* Pozadí se zapíná utilitou z pole „Třídy – pozadí“ (bg-forest-350 apod.),
   modul barvu nikde nedrží. Zde je jen mechanika: odsazení a breakout. */

/* Pozadí přes celou šířku obrazovky (vzorec jako .deer-events--fullbleed) */
.mod-eventsplit--bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Obsah zůstane v mřížce i když pozadí teče přes celou obrazovku */
.mod-eventsplit--bleed .mod-eventsplit__inner {
  padding-inline: var(--space-5);
  margin-inline: auto;
  max-inline-size: 1320px;
}

/* Když je pozadí zapnuté, obsah se ho nesmí dotýkat */
.mod-eventsplit--has-bg .mod-eventsplit__inner {
  padding-block: var(--space-5);
}

/* V šířce bloku vypadá pozadí lépe zaoblené; přes celou obrazovku ne. */
.mod-eventsplit--has-bg:not(.mod-eventsplit--bleed) {
  border-radius: var(--evs-radius);
}
.mod-eventsplit--has-bg:not(.mod-eventsplit--bleed) .mod-eventsplit__inner {
  padding-inline: var(--space-5);
}

.mod-eventsplit .evs-row {
  --bs-gutter-x: 0;
  column-gap: 0;
}

/* ---------- Média ---------- */
.mod-eventsplit .evs-media {
  height: 100%;
}
.mod-eventsplit .evs-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--evs-radius);
  min-height: clamp(260px, 34vw, 460px);
}

/* Odsazení mezi fotkou a obsahem podle pozice */
.mod-eventsplit .evs-col-media.order-lg-1 .evs-media { padding-right: 0; }
@media (min-width: 992px) {
  .mod-eventsplit .evs-col-content.order-lg-2 .evs-content { padding-left: var(--evs-gap); }
  .mod-eventsplit .evs-col-content.order-lg-1 .evs-content { padding-right: var(--evs-gap); }
}

/* ---------- Obsah ---------- */
.mod-eventsplit .evs-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Jen mechanika. Velikost/řádkování/váhu i font (serif) má Hx centrálně
   (typography.css + template.css); barvu řeší utilita v poli „Třída nadpisu“. */
.mod-eventsplit .evs-heading {
  margin: 0 0 var(--space-4);
}

.mod-eventsplit .evs-text {
  color: color-mix(in srgb, var(--evs-light) 82%, transparent);
  font-size: var(--typo-b1-fs, 16px);
  line-height: var(--typo-b1-lh, 24px);
  max-width: 52ch;
}
.mod-eventsplit .evs-text p { margin: 0 0 0.75rem; }
.mod-eventsplit .evs-text p:last-child { margin-bottom: 0; }
.mod-eventsplit .evs-text a {
  color: var(--evs-light);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color .15s ease;
}
.mod-eventsplit .evs-text a:hover {
  color: var(--evs-accent);
}

/* ---------- Info-panel události ---------- */
.mod-eventsplit .evs-panel {
  width: 100%;
  margin-top: clamp(24px, 3vw, 36px);
  background: var(--evs-panel-bg);
  border: 0;
  border-radius: 0;
  padding: clamp(20px, 2.2vw, 28px);
}

.mod-eventsplit .evs-panel__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
}
.mod-eventsplit .evs-panel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

.mod-eventsplit .evs-panel__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
  color: var(--evs-light);
  font-weight: var(--typo-w-sub);
  font-size: var(--typo-s3-fs, 18px);
  line-height: var(--typo-s3-lh, 26px);
}
.mod-eventsplit .evs-panel__sep {
  width: 1px;
  align-self: stretch;
  min-height: 1.1em;
  background: color-mix(in srgb, var(--evs-light) 30%, transparent);
}

.mod-eventsplit .evs-panel__desc {
  margin: 0 0 clamp(18px, 2vw, 22px);
  color: color-mix(in srgb, var(--evs-light) 70%, transparent);
  font-size: var(--typo-c1-fs, 14px);
  line-height: var(--typo-c1-lh, 22px);
}

/* Tlačítko používá nativní .btn systém webu (Space Mono, velikost, padding,
   uppercase, radius – vše z typography.css). Modul k němu nic nepřidává;
   variantu vybíráš v poli „Třída tlačítka“ (výchozí btn btn-canvas btn-outline).
   Jen odsazení dolů necháme na modulu. */
.mod-eventsplit .evs-panel__actions { margin-top: auto; }

/* ---------- Responsivita ---------- */
@media (max-width: 991.98px) {
  .mod-eventsplit .evs-content {
    padding: 0 !important;
    margin-top: clamp(20px, 5vw, 28px);
  }
  /* na mobilu fotka vždy nahoře */
  .mod-eventsplit .evs-col-media { order: 1 !important; }
  .mod-eventsplit .evs-col-content { order: 2 !important; }
}

@media (max-width: 575.98px) {
  .mod-eventsplit--has-bg .mod-eventsplit__inner { padding-inline: var(--space-4); }
  .mod-eventsplit .evs-panel__actions .btn { width: 100%; }
}