/* ============================================================================
 * COMPONENT · tc-modal
 * ----------------------------------------------------------------------------
 * 5 Variants. Loest die historischen 4 parallelen Modal-Implementations ab:
 *   - dashboard #modal / openModal()
 *   - pathfinder-gm #pf-modal-overlay / GM.openModal()
 *   - dashboard-events-extension hero-mc / _openHeroModal()
 *   - pathfinder-item-configurator inline Modal / _openModal()
 *
 * Single JS-API in js/tc-ui.js:  TC.Modal.open({ ... })
 *
 * Joy-of-Use:
 *   - Scale + Slide-Bounce-Animation beim Oeffnen (cubic-bezier elegant)
 *   - Sanftes Fade-Out beim Schliessen
 *   - Backdrop-Click + ESC schliessen
 *   - Body-Scroll-Lock waehrend Modal offen
 *   - Hero-Variant mit 38/62 Banner-Split, stackt vertikal auf Mobile
 *
 * Version: 1.0 (29. Mai 2026, Phase 2 Tranche 2)
 * ============================================================================ */


/* ============================================================================
 * BASE — Overlay + Container
 * ============================================================================ */
.tc-modal {
  position: fixed;
  inset: 0;
  z-index: var(--tc-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--tc-space-4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--tc-ease-default);
}

.tc-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.tc-modal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--tc-bg-overlay);
  z-index: 0;
  cursor: pointer;
}

.tc-modal__container {
  position: relative;
  z-index: 1;
  background: var(--tc-bg-surface-2);
  border: 1px solid var(--tc-deco-ornament-border);
  border-radius: var(--tc-radius-lg);
  box-shadow: var(--tc-shadow-modal);
  max-width: var(--modal-md);
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(-20px) scale(0.95);
  opacity: 0;
  transition: transform var(--tc-motion-bounce),
              opacity 200ms var(--tc-ease-default);
}

.tc-modal.is-open .tc-modal__container {
  transform: translateY(0) scale(1);
  opacity: 1;
}


/* ============================================================================
 * SIZES
 * ============================================================================ */
.tc-modal--sm .tc-modal__container { max-width: var(--modal-sm); }
.tc-modal--md .tc-modal__container { max-width: var(--modal-md); }
.tc-modal--lg .tc-modal__container { max-width: var(--modal-lg); }
.tc-modal--xl .tc-modal__container { max-width: var(--modal-xl); }
.tc-modal--fullscreen .tc-modal__container {
  max-width: var(--modal-full);
  max-height: 95vh;
  height: 100%;
}


/* ============================================================================
 * SECTIONS — Header, Body, Footer, Tabs
 * ============================================================================ */
.tc-modal__header {
  display: flex;
  align-items: center;
  gap: var(--tc-space-3);
  padding: var(--tc-space-4) var(--tc-space-5);
  background: linear-gradient(135deg,
    var(--tc-secondary-glow),
    rgba(0, 0, 0, 0.05));
  border-bottom: 1px solid var(--tc-border-subtle);
  flex-shrink: 0;
}

.tc-modal__icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  line-height: 1;
}

.tc-modal__title {
  flex: 1;
  margin: 0;
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-xl);
  color: var(--tc-accent);
  letter-spacing: var(--tc-tracking-wide);
}

.tc-modal__close {
  background: none;
  border: none;
  color: var(--tc-text-muted);
  font-size: 1.6rem;
  cursor: pointer;
  padding: 0 var(--tc-space-2);
  line-height: 1;
  transition: color var(--tc-motion-fast),
              transform var(--tc-motion-fast);
  flex-shrink: 0;
}
.tc-modal__close:hover {
  color: var(--tc-text-strong);
  transform: scale(1.1);
}

.tc-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--tc-space-5);
  color: var(--tc-text-default);
}

.tc-modal__footer {
  display: flex;
  gap: var(--tc-space-2);
  justify-content: flex-end;
  align-items: center;
  padding: var(--tc-space-4) var(--tc-space-5);
  background: rgba(0, 0, 0, 0.15);
  border-top: 1px solid var(--tc-border-subtle);
  flex-shrink: 0;
  flex-wrap: wrap;
}


/* ============================================================================
 * VARIANT · Tabbed — Tab-Bar im Header
 * ============================================================================ */
.tc-modal__tabs {
  display: flex;
  gap: var(--tc-space-1);
  padding: 0 var(--tc-space-5);
  background: var(--tc-bg-surface-1);
  border-bottom: 1px solid var(--tc-border-subtle);
  overflow-x: auto;
  flex-shrink: 0;
}

.tc-modal__tab {
  background: none;
  border: none;
  padding: var(--tc-space-3) var(--tc-space-4);
  color: var(--tc-text-muted);
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-sm);
  font-weight: var(--tc-weight-medium);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--tc-motion-fast),
              border-color var(--tc-motion-fast);
  white-space: nowrap;
}
.tc-modal__tab:hover {
  color: var(--tc-text-default);
}
.tc-modal__tab.is-active {
  color: var(--tc-accent);
  border-bottom-color: var(--tc-accent);
}


/* ============================================================================
 * VARIANT · Hero — 38/62 Banner-Split
 * (loest hero-mc / _openHeroModal aus dashboard-events-extension ab)
 * ============================================================================ */
.tc-modal--hero .tc-modal__container {
  flex-direction: row;
  max-width: 1100px;
  height: 85vh;
  border-color: var(--tc-secondary);
}

.tc-modal__banner {
  flex: 0 0 38%;
  max-width: 38%;
  background: var(--tc-bg-base);
  overflow-y: auto;
  position: relative;
}

.tc-modal__banner-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.tc-modal--hero .tc-modal__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  max-height: 85vh;
}

.tc-modal--hero .tc-modal__header {
  background: linear-gradient(135deg,
    var(--tc-secondary-glow),
    rgba(60, 20, 20, 0.2));
}


/* ============================================================================
 * RESPONSIVE — Hero stackt vertikal auf Mobile
 * ============================================================================ */
@media (max-width: 900px) {
  .tc-modal--hero .tc-modal__container {
    flex-direction: column;
    height: 95vh;
    width: 95vw;
  }
  .tc-modal__banner {
    flex: none;
    max-width: 100%;
    max-height: 280px;
    overflow: hidden;
  }
  .tc-modal__banner-image {
    height: 280px;
    object-fit: cover;
    object-position: top center;
  }
  .tc-modal--hero .tc-modal__main {
    max-height: calc(95vh - 280px);
  }
}

@media (max-width: 600px) {
  .tc-modal { padding: var(--tc-space-2); }
  .tc-modal__header,
  .tc-modal__body,
  .tc-modal__footer {
    padding-left: var(--tc-space-4);
    padding-right: var(--tc-space-4);
  }
  .tc-modal__footer .tc-button {
    flex: 1;
  }
}


/* ============================================================================
 * BODY-SCROLL-LOCK — JS setzt diese Klasse beim Modal-Open
 * ============================================================================ */
body.tc-modal-open {
  overflow: hidden;
}