/**
 * Flavor Theme — Section: dme-featured
 * Segue as convenções do Design System PlayStation.
 * Convenção de classe: .section-dme-featured__elemento
 */

/* ============================================
   SECTION WRAPPER
   A front-page.php envolve em:
   <section class="flavor-section flavor-section--dme-featured">
   ============================================ */
.flavor-section--dme-featured {
    background-color: #050C15;
    background-color: var(--color-bg-primary, #050C15);
    position: relative;
    overflow: hidden;
    padding: 80px 0 64px;
}

/* Gradiente de fundo sutil — atmosfera PS */
.flavor-section--dme-featured::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 55% 60% at 95% 40%, rgba(0, 112, 209, 0.07) 0%, transparent 65%),
        radial-gradient(ellipse 40% 50% at 5%  80%, rgba(0, 168, 232, 0.04) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

/* ============================================
   INNER
   ============================================ */
.section-dme-featured__inner {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* ============================================
   CALLOUT — banner de chamada
   ============================================ */
.section-dme-featured__callout {
    position: relative;
    overflow: hidden;

    background-color: #0D1A2A;
    background-color: var(--color-surface, #0D1A2A);

    /* Assinatura PS: borda esquerda accent */
    border: 1px solid #192D44;
    border: 1px solid var(--color-border, #192D44);
    border-left: 3px solid #00A8E8;
    border-left: 3px solid var(--color-accent, #00A8E8);

    border-radius: 4px;
    border-radius: var(--radius-sm, 4px);

    padding: 28px 32px 32px;

    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Linha neon sutil no topo */
.section-dme-featured__callout::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(0, 168, 232, 0),
        rgba(0, 168, 232, 0.45),
        rgba(0, 168, 232, 0)
    );
    pointer-events: none;
}

/* ============================================
   TAG "Ao Vivo Agora"
   ============================================ */
.section-dme-featured__tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;

    font-family: 'Barlow', var(--font-primary, sans-serif);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #00A8E8;
    color: var(--color-accent, #00A8E8);

    background: rgba(0, 168, 232, 0.08);
    border: 1px solid rgba(0, 168, 232, 0.22);
    border-radius: 9999px;
    padding: 5px 13px 5px 10px;
}

.section-dme-featured__tag-dot {
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: #00A8E8;
    background: var(--color-accent, #00A8E8);
    flex-shrink: 0;
    animation: dme-featured-pulse 2s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(0, 168, 232, 0.55);
}

@keyframes dme-featured-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(0, 168, 232, 0.55); }
    60%  { box-shadow: 0 0 0 6px rgba(0, 168, 232, 0);    }
    100% { box-shadow: 0 0 0 0   rgba(0, 168, 232, 0);    }
}

/* ============================================
   CALLOUT BODY — texto + CTA lado a lado
   ============================================ */
.section-dme-featured__callout-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

.section-dme-featured__callout-text {

    max-width: 620px;
}

/* Título — Barlow Condensed 800 uppercase (padrão heading PS) */
.section-dme-featured__callout-title {
    font-family: 'Barlow Condensed', var(--font-primary, sans-serif);
    font-size: 36px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.08;
    color: #FFFFFF;
    color: var(--color-text-primary, #FFFFFF);
    margin: 0 0 12px 0;
}

/* Trecho em destaque — neon accent */
.section-dme-featured__callout-title em {
    font-style: normal;
    color: #00A8E8;
    color: var(--color-accent, #00A8E8);
}

.section-dme-featured__callout-desc {
    font-family: 'Barlow', var(--font-primary, sans-serif);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.65;
    color: #8599B2;
    color: var(--color-text-secondary, #8599B2);
    margin: 0;
    max-width: 480px;
}

/* ============================================
   CTA — botão principal PS Blue
   ============================================ */
.section-dme-featured__callout-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;

    padding: 13px 26px;
    border-radius: 4px;
    border-radius: var(--radius-sm, 4px);

    background-color: #0070D1;
    background-color: var(--color-cta, #0070D1);
    color: #FFFFFF;
    text-decoration: none;

    font-family: 'Barlow', var(--font-primary, sans-serif);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    white-space: nowrap;

    transition:
        background-color 0.2s ease,
        transform        0.2s ease,
        box-shadow       0.2s ease;

    box-shadow: 0 4px 24px rgba(0, 112, 209, 0.30);
}

.section-dme-featured__callout-cta:hover {
    background-color: #0058A8;
    background-color: var(--color-cta-hover, #0058A8);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 112, 209, 0.50);
    color: #fff;
    text-decoration: none;
}

.section-dme-featured__callout-cta:active {
    background-color: #004486;
    transform: translateY(0);
    box-shadow: none;
}

.section-dme-featured__callout-cta svg {
    transition: transform 0.2s ease;
}

.section-dme-featured__callout-cta:hover svg {
    transform: translateX(3px);
}

/* ============================================
   DECORATIVOS — geometria PS (fora do fluxo)
   ============================================ */
.section-dme-featured__callout-deco {
    position: absolute;
    right: -24px;
    top:  -24px;
    width: 160px;
    height: 160px;
    border: 1px solid rgba(0, 168, 232, 0.10);
    border-radius: 2px;
    transform: rotate(18deg);
    pointer-events: none;
}

.section-dme-featured__callout-glow {
    position: absolute;
    right: 80px;
    top: 50%;
    transform: translateY(-50%);
    width: 220px;
    height: 220px;
    background: radial-gradient(
        circle,
        rgba(0, 168, 232, 0.09) 0%,
        transparent 70%
    );
    pointer-events: none;
}

/* ============================================
   GRID WRAP — isola o shortcode do plugin
   ============================================ */
.section-dme-featured__grid-wrap {
    /* zera qualquer margem extra que o wrapper do plugin possa ter */
    margin: 0;
}

/* Esconde o header interno do shortcode (já temos o callout) */
.section-dme-featured__grid-wrap .fc-dme-header,
.section-dme-featured__grid-wrap .fc-dme-title {
    display: none !important;
}

/* Harmoniza fundo dos cards do plugin com a seção */
.section-dme-featured__grid-wrap .fc-dme-card {
    background: #0D1A2A;
    background: var(--color-surface, #0D1A2A);
}

/* ============================================
   FOOTER LINK — "ver catálogo" secundário
   ============================================ */
.section-dme-featured__footer-link {
    display: flex;
    justify-content: center;
}

.section-dme-featured__see-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    font-family: 'Barlow', var(--font-primary, sans-serif);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #8599B2;
    color: var(--color-text-secondary, #8599B2);
    text-decoration: none;

    border-bottom: 1px solid rgba(133, 153, 178, 0.25);
    padding-bottom: 2px;

    transition: color 0.2s ease, border-color 0.2s ease;
}

.section-dme-featured__see-all:hover {
    color: #00A8E8;
    color: var(--color-accent, #00A8E8);
    border-color: rgba(0, 168, 232, 0.45);
    text-decoration: none;
}

.section-dme-featured__see-all svg {
    transition: transform 0.2s ease;
}

.section-dme-featured__see-all:hover svg {
    transform: translateX(2px);
}

/* ============================================
   RESPONSIVE — Tablet
   ============================================ */
@media (max-width: 1024px) {
    .flavor-section--dme-featured {
        padding: 60px 0 48px;
    }

    .section-dme-featured__callout-title {
        font-size: 30px;
    }
}

/* ============================================
   RESPONSIVE — Mobile
   ============================================ */
@media (max-width: 768px) {
    .flavor-section--dme-featured {
        padding: 48px 0 40px;
    }

    .section-dme-featured__inner {
        padding: 0 16px;
        gap: 24px;
    }

    .section-dme-featured__callout {
        padding: 22px 20px 24px;
    }

    .section-dme-featured__callout-body {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .section-dme-featured__callout-title {
        font-size: 26px;
    }

    .section-dme-featured__callout-desc {
        font-size: 13px;
    }

    .section-dme-featured__callout-cta {
        width: 100%;
        justify-content: center;
    }

    /* Remove decorativos no mobile */
    .section-dme-featured__callout-deco,
    .section-dme-featured__callout-glow {
        display: none;
    }
}

@media (max-width: 480px) {
    .section-dme-featured__callout-title {
        font-size: 22px;
    }

    .section-dme-featured__tag {
        font-size: 9px;
    }
}