/**
 * @file: championship-poster.css
 * @description: Постеры чемпионатов на публичных карточках (cover-фон внутри карточки + theme overlay)
 * @created: 2026-07-20
 */

@layer components {
  .event-card--has-poster,
  .championship-list-card--has-poster {
    isolation: isolate;
    overflow: hidden;
  }

  .event-card-poster,
  .championship-list-card-poster {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background-image: var(--event-card-poster);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    pointer-events: none;
  }

  .event-card-poster-overlay,
  .championship-list-card-poster-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
  }

  /* Виньетка: затемнение слева под текст, справа постер виден */
  [data-theme="light"] .event-card-poster-overlay,
  [data-theme="light"] .championship-list-card-poster-overlay {
    background:
      linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.94) 0%,
        rgba(255, 255, 255, 0.78) 30%,
        rgba(255, 255, 255, 0.42) 52%,
        rgba(255, 255, 255, 0.12) 72%,
        transparent 88%
      ),
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.2) 0%,
        transparent 38%,
        transparent 72%,
        rgba(255, 255, 255, 0.18) 100%
      );
  }

  [data-theme="dark"] .event-card-poster-overlay,
  [data-theme="dark"] .championship-list-card-poster-overlay {
    background:
      linear-gradient(
        90deg,
        rgba(6, 8, 12, 0.93) 0%,
        rgba(6, 8, 12, 0.78) 26%,
        rgba(6, 8, 12, 0.48) 48%,
        rgba(6, 8, 12, 0.16) 68%,
        transparent 86%
      ),
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.28) 0%,
        transparent 34%,
        transparent 72%,
        rgba(0, 0, 0, 0.38) 100%
      );
  }

  .event-card--has-poster > :is(.event-card-header, .event-card-body, .event-card-footer),
  .championship-list-card--has-poster > :is(.card-header, .card-body, .card-footer) {
    position: relative;
    z-index: 1;
  }

  .event-card--has-poster.championship-card::before,
  .championship-list-card--has-poster::before {
    z-index: 2;
  }

  /* Без «мутных» плашек — только виньетка на постере */
  .event-card--has-poster .event-card-header,
  .event-card--has-poster .event-card-body,
  .event-card--has-poster .event-card-footer,
  .championship-list-card--has-poster .card-header,
  .championship-list-card--has-poster .card-body,
  .championship-list-card--has-poster .card-footer {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Без разделительных полос между секциями — постер идёт сплошным фоном */
  .event-card--has-poster .event-card-header {
    border-bottom: none !important;
  }

  .event-card--has-poster .event-card-footer {
    border-top: none !important;
  }

  .championship-list-card--has-poster .card-header {
    border-bottom: none !important;
  }

  .championship-list-card--has-poster .card-footer {
    border-top: none !important;
  }

  [data-theme="dark"] .event-card--has-poster::after {
    opacity: 0 !important;
  }

  .event-card--has-poster .event-card-title,
  .event-card--has-poster .event-card-title a {
    text-shadow:
      0 0 10px rgba(255, 255, 255, 0.92),
      0 1px 2px rgba(0, 0, 0, 0.28);
  }

  [data-theme="dark"] .event-card--has-poster .event-card-title,
  [data-theme="dark"] .event-card--has-poster .event-card-title a {
    text-shadow:
      0 0 10px rgba(0, 0, 0, 0.82),
      0 1px 3px rgba(0, 0, 0, 0.88);
  }

  /* Чипы поверх постера — плотный фон для читаемости */
  .event-card--has-poster .event-card-chip {
    backdrop-filter: blur(2px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  }

  [data-theme="light"] .event-card--has-poster .event-card-chip {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(0, 0, 0, 0.12);
  }

  [data-theme="dark"] .event-card--has-poster .event-card-chip {
    background: rgba(12, 16, 21, 0.78);
    border-color: rgba(255, 255, 255, 0.14);
    color: var(--text-secondary);
  }

  [data-theme="light"] .event-card--has-poster .event-card-chip--type {
    background: rgba(255, 255, 255, 0.9);
  }

  [data-theme="dark"] .event-card--has-poster .event-card-chip--type {
    background: color-mix(in srgb, var(--primary) 28%, rgba(12, 16, 21, 0.85));
    color: var(--text-primary);
  }

  /* Локальная подложка + тень у строк текста (без расширения виньетки) */
  .event-card--has-poster .event-info-item > :is(span:not(.badge), summary),
  .event-card--has-poster .event-cars-title > span {
    display: inline;
    padding: 0.08em 0.35em;
    border-radius: 4px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }

  [data-theme="light"] .event-card--has-poster .event-info-item > :is(span:not(.badge), summary),
  [data-theme="light"] .event-card--has-poster .event-cars-title > span {
    background: rgba(255, 255, 255, 0.68);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  }

  [data-theme="dark"] .event-card--has-poster .event-info-item > :is(span:not(.badge), summary),
  [data-theme="dark"] .event-card--has-poster .event-cars-title > span {
    background: rgba(8, 10, 14, 0.62);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
  }

  [data-theme="light"] .event-card--has-poster .event-card-doc-link {
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  }

  [data-theme="dark"] .event-card--has-poster .event-card-doc-link {
    background: rgba(12, 16, 21, 0.72);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
  }

  [data-theme="light"] .event-card--has-poster .event-car-tag {
    background: rgba(255, 255, 255, 0.78) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  }

  [data-theme="dark"] .event-card--has-poster .event-car-tag {
    background: rgba(12, 16, 21, 0.72) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
  }

  /* Кнопки футера: единый outline-primary стиль, плотный фон поверх постера */
  .event-card--has-poster .event-card-footer .btn-outline-primary,
  .championship-list-card--has-poster .card-footer .btn-outline-primary,
  .championship-list-card--has-poster .card-footer .btn-outline-secondary {
    position: relative;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  }

  [data-theme="light"] .event-card--has-poster .event-card-footer .btn-outline-primary,
  [data-theme="light"] .championship-list-card--has-poster .card-footer .btn-outline-primary,
  [data-theme="light"] .championship-list-card--has-poster .card-footer .btn-outline-secondary {
    background-color: rgba(255, 255, 255, 0.94) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
  }

  [data-theme="light"] .event-card--has-poster .event-card-footer .btn-outline-primary:hover,
  [data-theme="light"] .championship-list-card--has-poster .card-footer .btn-outline-primary:hover,
  [data-theme="light"] .championship-list-card--has-poster .card-footer .btn-outline-secondary:hover {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--on-primary, #fff) !important;
  }

  [data-theme="light"] .event-card--has-poster .event-card-footer .btn-outline-primary:hover i,
  [data-theme="light"] .championship-list-card--has-poster .card-footer .btn-outline-primary:hover i,
  [data-theme="light"] .championship-list-card--has-poster .card-footer .btn-outline-secondary:hover i {
    color: var(--on-primary, #fff) !important;
  }

  [data-theme="dark"] .event-card--has-poster .event-card-footer .btn-outline-primary,
  [data-theme="dark"] .championship-list-card--has-poster .card-footer .btn-outline-primary,
  [data-theme="dark"] .championship-list-card--has-poster .card-footer .btn-outline-secondary {
    background-color: rgba(12, 16, 21, 0.88) !important;
    border-color: rgba(255, 43, 43, 0.48) !important;
    color: #ff9a9a !important;
  }

  [data-theme="dark"] .event-card--has-poster .event-card-footer .btn-outline-primary:hover,
  [data-theme="dark"] .event-card--has-poster .event-card-footer .btn-outline-primary:focus-visible,
  [data-theme="dark"] .championship-list-card--has-poster .card-footer .btn-outline-primary:hover,
  [data-theme="dark"] .championship-list-card--has-poster .card-footer .btn-outline-primary:focus-visible,
  [data-theme="dark"] .championship-list-card--has-poster .card-footer .btn-outline-secondary:hover,
  [data-theme="dark"] .championship-list-card--has-poster .card-footer .btn-outline-secondary:focus-visible {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
  }

  [data-theme="dark"] .event-card--has-poster .event-card-footer .btn-outline-primary:hover i,
  [data-theme="dark"] .event-card--has-poster .event-card-footer .btn-outline-primary:focus-visible i,
  [data-theme="dark"] .championship-list-card--has-poster .card-footer .btn-outline-primary:hover i,
  [data-theme="dark"] .championship-list-card--has-poster .card-footer .btn-outline-primary:focus-visible i,
  [data-theme="dark"] .championship-list-card--has-poster .card-footer .btn-outline-secondary:hover i,
  [data-theme="dark"] .championship-list-card--has-poster .card-footer .btn-outline-secondary:focus-visible i {
    color: #fff !important;
  }

  .event-card--has-poster .event-card-footer :is(a.event-status-badge, .event-status-badge),
  .championship-list-card--has-poster .card-footer .ds-badge {
    position: relative;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }

  .championship-list-card--has-poster {
    position: relative;
  }

  .championship-poster-preview-wrap,
  .championship-poster-crop-live-preview-wrap {
    width: 100%;
    max-width: 462px;
  }

  .championship-poster-crop-live-preview-wrap {
    margin-inline: auto;
  }

  .championship-poster-preview-card {
    width: 100%;
  }

  .championship-poster-crop-layout {
    align-items: flex-start;
  }

  .championship-poster-crop-live-preview-wrap .championship-poster-preview-card {
    pointer-events: none;
  }

  .championship-poster-crop-modal__body {
    min-height: 320px;
    background: #111;
  }

  .championship-poster-crop-image {
    display: block;
    max-width: 100%;
    max-height: 60vh;
  }

  .championship-poster-crop-modal .cropper-container {
    max-height: 60vh;
  }

  .championship-poster-crop-modal .cropper-view-box,
  .championship-poster-crop-modal .cropper-face {
    border-radius: 0;
  }
}