/* ═══════════════════════════════════════════════
   fce-styles.css — фронтенд картка кейсу
   csgo-news.com / ForceDrop Case Embed
═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@600;700&family=Exo+2:wght@300;400;600&display=swap');

:root {
    --fce-bg:      #13141f;
    --fce-border:  #1e2033;
    --fce-accent:  #f5a623;
    --fce-accent2: #e05c1a;
    --fce-text:    #e8eaf0;
    --fce-muted:   #6b7191;
    --fce-glow:    rgba(245, 166, 35, .18);
}

/* ── Обгортка ──────────────────────────────── */
.fce-card {
    display:         grid;
    grid-template-columns: 180px 1fr;
    border-radius:   14px;
    border:          1px solid var(--fce-border);
    background:      var(--fce-bg);
    overflow:        hidden;
    position:        relative;
    text-decoration: none;
    color:           var(--fce-text);
    font-family:     'Exo 2', sans-serif;
    max-width:       780px;
    margin:          24px 0;
    box-shadow:      0 4px 28px rgba(0, 0, 0, .5);
    transition:      border-color .25s, box-shadow .25s, transform .25s;
}

.fce-card:hover {
    border-color: var(--fce-accent);
    box-shadow:   0 0 0 1px var(--fce-accent), 0 8px 40px var(--fce-glow);
    transform:    translateY(-3px);
}

/* ── Ліва частина — зображення ─────────────── */
.fce-card__visual {
    position:        relative;
    background:      linear-gradient(135deg, #0f1019 0%, #1a1c2a 100%);
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         24px;
    overflow:        hidden;
}

.fce-card__visual::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: radial-gradient(circle at 50% 60%, rgba(245, 166, 35, .12) 0%, transparent 70%);
}

.fce-card__visual img {
    width:      130px;
    height:     130px;
    object-fit: contain;
    position:   relative;
    z-index:    1;
    filter:     drop-shadow(0 4px 18px rgba(245, 166, 35, .35));
    transition: transform .3s, filter .3s;
}

.fce-card:hover .fce-card__visual img {
    transform: scale(1.08) translateY(-4px);
    filter:    drop-shadow(0 8px 28px rgba(245, 166, 35, .65));
}

.fce-img-placeholder {
    font-size:  52px;
    opacity:    .5;
    position:   relative;
    z-index:    1;
    transition: transform .3s;
}

.fce-card:hover .fce-img-placeholder {
    transform: scale(1.1) translateY(-4px);
}

/* ── Права частина — вміст ─────────────────── */
.fce-card__body {
    padding:         26px 28px;
    display:         flex;
    flex-direction:  column;
    justify-content: space-between;
    gap:             14px;
    border-left:     1px solid var(--fce-border);
}

.fce-card__top {
    display:        flex;
    flex-direction: column;
    gap:            8px;
}

.fce-card__meta {
    display:     flex;
    align-items: center;
    gap:         8px;
}

.fce-badge {
    font-size:      10px;
    font-weight:    700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding:        3px 9px;
    border-radius:  3px;
    background:     rgba(245, 166, 35, .12);
    color:          var(--fce-accent);
    border:         1px solid rgba(245, 166, 35, .28);
}

.fce-site {
    font-size: 11px;
    color:     var(--fce-muted);
}

.fce-card__title {
    font-family:    'Rajdhani', sans-serif;
    font-size:      26px;
    font-weight:    700;
    letter-spacing: .03em;
    color:          var(--fce-text);
    line-height:    1.1;
    margin:         0;
}

.fce-card__desc {
    font-size:   13px;
    color:       var(--fce-muted);
    line-height: 1.6;
    margin:      0;
}

/* ── Футер — кнопка ────────────────────────── */
.fce-card__footer {
    display:     flex;
    align-items: center;
}

.fce-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    background:      linear-gradient(135deg, var(--fce-accent), var(--fce-accent2));
    color:           #0b0c12;
    font-family:     'Rajdhani', sans-serif;
    font-size:       14px;
    font-weight:     700;
    letter-spacing:  .06em;
    text-transform:  uppercase;
    padding:         10px 22px;
    border-radius:   6px;
    text-decoration: none;
    transition:      opacity .2s, transform .2s;
}

.fce-btn:hover {
    opacity:   .88;
    transform: scale(1.03);
    color:     #0b0c12;
}

.fce-btn svg {
    width:  13px;
    height: 13px;
    flex-shrink: 0;
}

/* ── Responsive ────────────────────────────── */
@media (max-width: 560px) {
    .fce-card {
        grid-template-columns: 1fr;
    }

    .fce-card__visual {
        height:      150px;
        padding:     20px;
        border-left: none;
        border-bottom: 1px solid var(--fce-border);
    }

    .fce-card__body {
        border-left: none;
        padding:     20px;
    }

    .fce-card__title {
        font-size: 22px;
    }
}