/* Guest-page sections of the event platform (phase 2 add-ons: programm,
   anfahrt, unterkunft, ics, phasen, livestream, dresscode, contacts, faq). They sit in the card's own flow
   (public/addons/lib/eventpage.js), so they use the card's palette and type
   (public/shared/card.css variables): cream pages like the reply page,
   script headings in gold, serif body. Mobile first; no external assets.
   The frame, title, intro, group heading and item spacing are the card's
   one compact system (public/shared/card.css «Compact sections»). */
.ep-shell { display: block; }
.ep-shell[hidden] { display: none; }
.ep-section { background: linear-gradient(135deg, var(--cream), var(--cream-2)); color: var(--ink); }
.ep-shell:nth-of-type(even) .ep-section { background: linear-gradient(135deg, var(--cream-2), var(--cream)); }
.ep-text { font-family: var(--serif); font-size: clamp(16px, 2.4vw, 18px); line-height: 1.5; margin: 0 0 var(--sp-2); overflow-wrap: anywhere; }
.ep-muted { font-size: 13px; color: var(--ink-soft); }
.ep-h3 { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.ep-card { background: rgba(255,255,255,0.72); border: 1px solid rgba(181,138,90,0.25); }

/* buttons + links */
.ep-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--gold);
  background: var(--gold); color: #fff; font-family: var(--sans); font-size: 14px; letter-spacing: 0.03em;
  text-decoration: none; cursor: pointer; transition: opacity 0.2s;
}
.ep-btn:hover { opacity: 0.9; }
.ep-btn:focus-visible, .ep-maps-opt:focus-visible, .ep-nav-link:focus-visible { outline: 2px solid var(--rose-2); outline-offset: 2px; }
.ep-btn-ghost { background: transparent; color: var(--ink); border-color: rgba(181,138,90,0.6); }
.ep-btn-sm { min-height: 32px; padding: 4px 12px; font-size: 13px; }
.ep-links { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }

/* a place: name, address, the maps-app links */
.ep-place { margin-top: var(--sp-1); }
.ep-card > .ep-h3:first-child { margin-top: 0; }
.ep-card > .ep-h3:first-child + .ep-place { margin-top: 0; }
.ep-place-name { font-weight: 500; }
.ep-place-addr { font-size: 14px; color: var(--ink-soft); }
/* the maps apps: three links per place, a tap opens that place in that app; compact on the phone, 44 px tap targets */
.ep-maps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: var(--sp-1); }
.ep-maps-opt { font: inherit; font-size: 13px; line-height: 1.2; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--line, #e3d7cf); border-radius: 999px; background: #fff; white-space: nowrap; }
.ep-maps-opt:hover { border-color: var(--gold); }
/* the card's venue on the inside page: its links once, centred under the address */
.ep-venue-maps { justify-content: center; margin-top: 6px; line-height: 1.2; }
@media (max-width: 420px) { .ep-maps { gap: 4px; } .ep-maps-opt { padding: 0 9px; font-size: 12.5px; flex: 1 1 auto; } }

/* "Auf dieser Seite": the section links IN the card's sticky header (#57,
   Karl 2026-10-15) — the header of the language switch (card.css .lang-bar)
   becomes one dark strip with the switch and the links side by side.
   Desktop: one row when it fits, else the links wrap inside the strip.
   Phone (below 700px, Karl 2026-10-22): a 44 px strip with the current
   section's name + ▾ (.ep-nav-cur), which opens all links as a list. */
/* doubled class: card.css .lang-bar may load after this file */
.lang-bar.lang-bar--nav {
  pointer-events: auto; flex-wrap: nowrap; align-items: center; justify-content: safe center;
  gap: 8px; padding: 4px 12px;
  background: rgba(20,10,14,0.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.lang-bar--nav .lang-switch {
  flex: 0 0 auto; max-width: 50%; background: transparent; border-color: rgba(255,255,255,0.22);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.lang-bar[data-ep-shown] .lang-switch { display: none; } /* a single-language card: the links alone */
.ep-nav { display: flex; flex: 0 1 auto; min-width: 0; }
.ep-nav-cur { display: none; }
.ep-nav-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.ep-nav-list > li { display: flex; }
.ep-nav-link {
  flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  border-radius: 999px; font-family: var(--sans); font-size: 13px; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.86); text-decoration: none; white-space: nowrap;
}
.ep-nav-link:hover { color: #fff; }
.ep-nav-link[aria-current] { color: #fff; background: rgba(255,255,255,0.18); }
.lang-bar--nav .ep-nav-link:focus-visible, .ep-nav-cur:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
@media (max-width: 699px) {
  .lang-bar.lang-bar--nav { height: 44px; padding: 0 8px; gap: 6px; justify-content: space-between; }
  .ep-nav { flex: 1 1 auto; order: -1; }
  .ep-nav-cur {
    display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; height: 44px; padding: 0 8px;
    background: none; border: 0; cursor: pointer; color: #fff;
    font-family: var(--sans); font-size: 15px; letter-spacing: 0.02em; text-align: start;
  }
  .ep-nav-cur-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .ep-nav-caret { flex: none; font-size: 12px; opacity: 0.85; transition: transform 0.2s; }
  .ep-nav--open .ep-nav-caret { transform: rotate(180deg); }
  .ep-nav-list {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; flex-wrap: nowrap; gap: 0; padding: 6px 0;
    max-height: calc(100vh - 60px); overflow-y: auto; overscroll-behavior: contain;
    background: #453b3d; /* opaque: the bar's own colour over the page (rgba(20,10,14,.78) on cream) */
    border-bottom: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 10px 24px rgba(0,0,0,0.25);
  }
  .ep-nav--open .ep-nav-list { display: flex; }
  .ep-nav-list .ep-nav-link { width: 100%; border-radius: 0; padding: 0 20px; font-size: 15px; white-space: normal; }
  .ep-nav-list .ep-nav-link[aria-current] { background: rgba(255,255,255,0.14); }
}
/* a jump lands clear of the header (its height: eventpage.js follow): the
   links put the section's heading 8 px under it, the plain anchor (no
   script) the section */
.ep-section, .card--rsvp { scroll-margin-top: var(--lang-bar-h, 64px); }
:is(.ep-section, .card--rsvp) :is(.ep-title, h2) { scroll-margin-top: calc(var(--lang-bar-h, 64px) + 8px); }

/* badges */
.ep-badge {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-family: var(--sans); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase; vertical-align: middle;
}
.ep-badge-new { background: #b3444d; color: #fff; }
.ep-badge-now { background: var(--gold); color: #fff; }
.ep-badge-next { border: 1px solid var(--gold); color: var(--gold); }

/* editor (both editors, under the add-on's switch) */
.ep-ed { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 4px; }
.ep-ed-box { border: 1px solid rgba(0,0,0,0.12); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.ep-ed-box > .row { margin: 0; }
/* a control never wider than its box: a select is as wide as its longest
   option («Never automatically (until you delete the card)») and pushed the
   event page sideways on a phone (#10c review) */
.ep-ed-box select, .ep-ed-box input, .ep-ed-box textarea { max-width: 100%; }
.ep-ed-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.ep-ed-grid > .row { margin: 0; }
.ep-ed-add { display: flex; gap: 6px; flex-wrap: wrap; }
.ep-ed-h { margin: 10px 0 0; font-size: 15px; }
.ep-ed-warn { color: #b3444d; font-size: 13px; margin: 0; }
.ep-ed-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ep-ed-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(0,0,0,0.2); font-size: 13px; cursor: pointer; background: #fff; }
.ep-ed-chip.on { background: #7c4650; border-color: #7c4650; color: #fff; }
.ep-ed-colors { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ep-ed-color { display: inline-flex; gap: 4px; align-items: center; }
.ep-ed-color .dress-ed-own { width: 10em; }

@media (prefers-reduced-motion: reduce) { .ep-btn { transition: none; } }

/* amount + unit (public/addons/lib/units.js) */
.amount-unit-line { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.amount-unit-line > .amount-unit-amount { flex: 1 1 90px; min-width: 0; width: auto; }
.amount-unit-line > .amount-unit-select { flex: 0 0 auto; width: auto; }
.amount-unit-line > .amount-unit-own { flex: 1 1 100%; min-width: 0; }
.amount-unit-line > .amount-unit-own[hidden] { display: none; }