/* ============================================================
   КАРТОЧКА АКЦИИ — promotion-card.css
   ============================================================
   @package Gambling_Theme
   @version 1.0.0
   @created 2026-04-23

   Контексты:
     .promotion-card--archive  → Вариант 1: Все акции / таксономии
     .promotion-card--casino   → Вариант 2: Страница казино
     .promotion-card--taxonomy → Вариант 3: Акции данного казино (с табами)
     .promotion-card--single   → Вариант 4: Горизонтальная карточка
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   СЕТКА — 3 КОЛОНКИ (варианты 1, 2, 3)
   ══════════════════════════════════════════════════════════════ */

.archive-promotion-cards-wrapper {
    display:               grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap:                   20px;
    margin-bottom:         40px;
    width:                 100%;
}

.archive-content__column--main .archive-promotion-cards-wrapper,
.promotion-casino-section .archive-promotion-cards-wrapper,
.layout-full .archive-promotion-cards-wrapper {
    grid-template-columns: repeat(3, 1fr) !important;
}

/* ── Адаптивные брейкпоинты сетки ──────────────────────────── */
@media (max-width: 1100px) {
    .archive-promotion-cards-wrapper,
    .archive-content__column--main .archive-promotion-cards-wrapper,
    .promotion-casino-section .archive-promotion-cards-wrapper,
    .layout-full .archive-promotion-cards-wrapper {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px;
    }
}

@media (max-width: 600px) {
    .archive-promotion-cards-wrapper,
    .archive-content__column--main .archive-promotion-cards-wrapper,
    .promotion-casino-section .archive-promotion-cards-wrapper,
    .layout-full .archive-promotion-cards-wrapper {
        grid-template-columns: 1fr !important;
        gap: 14px;
    }
}

/* ══════════════════════════════════════════════════════════════
   CSS ПЕРЕМЕННЫЕ
   ══════════════════════════════════════════════════════════════ */

.promotion-card {
    --pc-bg:           #1e1e2e;
    --pc-bg-hover:     #252538;
    --pc-border:       rgba(255, 255, 255, 0.08);
    --pc-border-hover: rgba(255, 255, 255, 0.14);
    --pc-text:         #b0b0c8;
    --pc-title:        #ffffff;
    --pc-accent:       #d97706;
    --pc-accent-hover: #b45309;
    --pc-shadow:       0 4px 12px rgba(0, 0, 0, 0.15);
    --pc-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.25);
    --pc-radius:       12px;
    --pc-transition:   all 0.3s ease;

    /* Цвета бейджей типов акций */
    --badge-casino:    #e53e3e;
    --badge-sport:     #10b981;
    --badge-poker:     #3b82f6;
    --badge-live:      #8b5cf6;
    --badge-slots:     #f59e0b;
    --badge-esport:    #06b6d4;
    --badge-lottery:   #ec4899;
    --badge-default:   #6b7280;
}

/* ══════════════════════════════════════════════════════════════
   ОСНОВНАЯ КАРТОЧКА (варианты 1, 2, 3)
   ══════════════════════════════════════════════════════════════ */

.promotion-card {
    display:        flex;
    flex-direction: column;
    background:     var(--pc-bg);
    border:         1px solid var(--pc-border);
    border-radius:  var(--pc-radius);
    overflow:       hidden;
    transition:     var(--pc-transition);
    height:         100%;
    box-shadow:     var(--pc-shadow);
}

.promotion-card:hover {
    background:   var(--pc-bg-hover);
    border-color: var(--pc-border-hover);
    transform:    translateY(-4px);
    box-shadow:   var(--pc-shadow-hover);
}

/* ══════════════════════════════════════════════════════════════
   БАННЕР
   ══════════════════════════════════════════════════════════════ */

.promotion-card__banner {
    position:    relative;
    width:       100%;
    height:      170px;
    background:  linear-gradient(135deg, #1e1e2e 0%, #2a2a3d 100%);
    overflow:    hidden;
    flex-shrink: 0;
}

.promotion-card__img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform 0.3s ease;
}

.promotion-card:hover .promotion-card__img {
    transform: scale(1.05);
}

.promotion-card__img-placeholder {
    width:           100%;
    height:          100%;
    background:      linear-gradient(135deg, #1e1e2e 0%, #2a2a3d 50%, #1e1e2e 100%);
    background-size: 200% 200%;
    animation:       pc-shimmer 2s infinite;
}

@keyframes pc-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ══════════════════════════════════════════════════════════════
   БЕЙДЖИ ТИПОВ АКЦИЙ
   ══════════════════════════════════════════════════════════════ */

.promotion-card__badge {
    position:       absolute;
    top:            10px;
    left:           10px;
    padding:        5px 10px;
    font-size:      10px;
    font-weight:    700;
    text-transform: uppercase;
    border-radius:  18px;
    letter-spacing: 0.5px;
    z-index:        2;
    box-shadow:     0 2px 8px rgba(0, 0, 0, 0.4);
    color:          #ffffff;
    background:     var(--badge-default);
    line-height:    1.3;
    white-space:    nowrap;
    max-width:      calc(100% - 20px);
    overflow:       hidden;
    text-overflow:  ellipsis;
}

/* Цвета бейджей по slug таксономии */
.promotion-card__badge--casino,
.promotion-card__badge--kazino      { background: var(--badge-casino);  }

.promotion-card__badge--sport,
.promotion-card__badge--sports,
.promotion-card__badge--betting     { background: var(--badge-sport);   }

.promotion-card__badge--poker,
.promotion-card__badge--poker-room  { background: var(--badge-poker);   }

.promotion-card__badge--live,
.promotion-card__badge--live-casino { background: var(--badge-live);    }

.promotion-card__badge--slots,
.promotion-card__badge--slot        { background: var(--badge-slots);   }

.promotion-card__badge--esport,
.promotion-card__badge--cybersport  { background: var(--badge-esport);  }

.promotion-card__badge--lottery,
.promotion-card__badge--lotto       { background: var(--badge-lottery); }

/* ══════════════════════════════════════════════════════════════
   ТЕЛО КАРТОЧКИ
   ══════════════════════════════════════════════════════════════ */

.promotion-card__body {
    padding:        15px;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    flex-grow:      1;
}

.promotion-card__title {
    font-size:     16px;
    font-weight:   700;
    color:         var(--pc-title);
    margin-bottom: 10px;
    line-height:   1.3;
    word-wrap:     break-word;
    width:         100%;
}

.promotion-card__description {
    font-size:     13px;
    color:         var(--pc-text);
    line-height:   1.5;
    margin-bottom: 12px;
    width:         100%;
    /* ✅ КЛЮЧЕВОЕ ИЗМЕНЕНИЕ: Описание растягивается и занимает всё доступное место */
    flex-grow:     1;
}

/* ══════════════════════════════════════════════════════════════
   ЛОГОТИП КАЗИНО (только вариант 1: archive)
   ══════════════════════════════════════════════════════════════ */

.promotion-card__casino-logo {
    height:          40px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin-bottom:   12px;
    padding:         0 8px;
    width:           100%;
}

.promotion-card__casino-logo img {
    max-height: 100%;
    max-width:  110px;
    object-fit: contain;
    filter:     drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* ══════════════════════════════════════════════════════════════
   БЛОК СТАТУСА / ВРЕМЕНИ
   ══════════════════════════════════════════════════════════════ */

.promotion-card__status {
    margin-top:      auto;
    width:           100%;
    padding:         8px 0 4px;
    border-top:      1px solid var(--pc-border);
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    align-items:     center;
    /* ✅ ИСПРАВЛЕНИЕ: Фиксированная высота для выравнивания верхней границы */
    height:          74px;
}

.promotion-card__status-label {
    font-size:      11px;
    color:          var(--pc-text);
    margin-bottom:  6px;
    font-weight:    500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.promotion-card__status-value {
    font-size:   20px;
    font-weight: 700;
    color:       var(--pc-title);
    line-height: 1.2;
}

.promotion-card__status-empty {
    height: 28px; /* распорка для карточек без времени */
}

/* Дни недели */
.promotion-card__weekdays {
    font-size:   13px;
    font-weight: 600;
    color:       var(--pc-title);
    line-height: 1.4;
    text-align:  center;
}

/* ══════════════════════════════════════════════════════════════
   ТАЙМЕР ОБРАТНОГО ОТСЧЁТА
   ══════════════════════════════════════════════════════════════ */

.promotion-card__timer {
    display:         flex;
    justify-content: center;
    align-items:     flex-start;
    gap:             3px;
}

/* Переиспользуем .timer-block, .timer-val, .timer-lbl, .timer-sep
   из tournament-card.css — они уже определены глобально.
   Дополнительных переопределений не нужно. */




/* ══════════════════════════════════════════════════════════════
   ТАБЫ / ФИЛЬТРЫ (вариант 3: taxonomy)
   ══════════════════════════════════════════════════════════════ */

.promotion-filters {
    display:         flex;
    flex-wrap:       wrap;
    gap:             8px;
    margin-bottom:   24px;
    align-items:     center;
    justify-content: center;
    width:           100%;
}

.promotion-filters__btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    padding:         8px 20px;
    border-radius:   6px;
    font-size:       13px;
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  0.5px;
    cursor:          pointer;
    border:          2px solid rgba(255, 255, 255, 0.15);
    background:      transparent;
    color:           rgba(255, 255, 255, 0.6);
    transition:      all 0.2s ease;
    white-space:     nowrap;
    line-height:     1;
    user-select:     none;
}

.promotion-filters__btn:hover {
    border-color: var(--text-on-red, rgba(255, 255, 255, 0.35));
    color:        #ffffff;
    background:   rgba(255, 255, 255, 0.05);
    transform:    translateY(-1px);
}

.promotion-filters__btn.is-active {
    background:   var(--pc-accent);
    border-color: var(--info, var(--pc-accent));
    color:        #ffffff;
    box-shadow:   0 2px 8px rgba(217, 119, 6, 0.35);
}

.promotion-filters__btn.is-active:hover {
    background:   var(--info, var(--pc-accent-hover));
    border-color: var(--info, var(--pc-accent-hover));
    box-shadow:   0 4px 12px rgba(217, 119, 6, 0.45);
    transform:    translateY(-2px);
}

/* ══════════════════════════════════════════════════════════════
   ВАРИАНТ 4: ГОРИЗОНТАЛЬНАЯ КАРТОЧКА (single)
   ══════════════════════════════════════════════════════════════ */

.promotion-card--single {
    flex-direction: row;
    align-items:    stretch;
    height:         auto;
    width:          100%;
    border-radius:  var(--pc-radius);
    overflow:       hidden;
}

/* Левая колонка — баннер */
.promotion-card--single .promotion-card__banner-col {
    flex:        0 0 280px;
    min-width:   0;
    position:    relative;
}

.promotion-card--single .promotion-card__banner {
    height: 100%;
    width:  100%;
}

/* Правая колонка — контент */
.promotion-card--single .promotion-card__content-col {
    flex:       1;
    padding:    24px;
    display:    flex;
    flex-direction: column;
    justify-content: center;
    border-left: 1px solid var(--pc-border);
}

.promotion-card--single .promotion-card__title {
    font-size:     22px;
    font-weight:   700;
    color:         var(--pc-title);
    margin-bottom: 12px;
    line-height:   1.3;
}

.promotion-card--single .promotion-card__description {
    font-size:   15px;
    color:       var(--pc-text);
    line-height: 1.6;
    margin:      0;
}

/* Горизонтальная карточка не трансформируется при hover */
.promotion-card--single:hover {
    transform: none;
}

/* ══════════════════════════════════════════════════════════════
   АДАПТИВНОСТЬ
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
    .promotion-card__title { font-size: 15px; }
}

@media (max-width: 768px) {
    /* Горизонтальная карточка → вертикальная на мобилке */
    .promotion-card--single {
        flex-direction: column;
    }

    .promotion-card--single .promotion-card__banner-col {
        flex:   0 0 auto;
        width:  100%;
        height: 200px;
    }

    .promotion-card--single .promotion-card__banner {
        height: 100%;
    }

    .promotion-card--single .promotion-card__content-col {
        border-left:  none;
        border-top:   1px solid var(--pc-border);
        padding:      20px;
    }

    .promotion-card--single .promotion-card__title {
        font-size: 18px;
    }
}

@media (max-width: 600px) {
    .promotion-card__banner          { height: 160px; }
    .promotion-card__title           { font-size: 15px; }
    .promotion-card__btn-main,
    .promotion-card__btn-all {
        padding:   11px 14px;
        font-size: 12px;
    }
    .promotion-filters {
        gap: 6px;
    }
    .promotion-filters__btn {
        padding:   7px 14px;
        font-size: 11px;
    }
}

/* ══════════════════════════════════════════════════════════════
   ДОПОЛНЕНИЕ: ВЫРАВНИВАНИЕ ЛОГОТИПА ПО ОДНОЙ ЛИНИИ
   ══════════════════════════════════════════════════════════════ */

/* Логотип прижимается к низу текстового блока */
.promotion-card__casino-logo {
    margin-top: auto;
}

/* Убираем двойной отступ между логотипом и статусом */
.promotion-card__casino-logo + .promotion-card__status {
    margin-top: 0;
}