/* Sponsored slot layout
 * Loaded after styles.css so these rules win without `!important` wars.
 *
 * Goal: a sponsored card that is visually indistinguishable from a game
 * card in the same grid — identical width, height, thumbnail dimensions,
 * border, shadow, hover behavior, and clickability — except for the
 * "Sponsored" header chip.
 *
 * Strategy: the slot container takes on the same outer chrome as
 * .game-card (background / border / shadow / hover lift). The body uses
 * flex-column so the description and CTA can grow to fill, and the
 * thumbnail is locked to the same 250px height the game thumbnail uses,
 * with `object-fit: cover` so images never stretch or squash.
 */

/* ---------------- Slot container = game card ---------------- */
.ad-container.sponsored-slot {
    /* Inherit the game-card "look" so it lands in the grid as a peer. */
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid var(--primary);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    backdrop-filter: blur(5px);
    will-change: transform;
    transform: translateZ(0);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* Grid alignment */
    align-self: start;
    justify-self: stretch;
    width: 100%;
    max-width: 100%;

    /* Body layout */
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: auto;
}

.ad-container.sponsored-slot:hover {
    border-color: var(--secondary);
    box-shadow:
        0 0 80px var(--glow-color),
        0 0 60px var(--glow-color),
        0 0 40px var(--glow-color),
        0 0 25px var(--glow-color),
        0 0 15px var(--glow-color),
        0 0 10px var(--glow-color);
    transform: translate3d(0, -8px, 0);
}

@media (max-width: 768px) {
    .ad-container.sponsored-slot:hover {
        box-shadow:
            0 0 25px var(--glow-color-60),
            0 0 15px var(--glow-color-40);
    }
}

/* ---------------- Header chip ("Sponsored" label, top of every card) ---------------- */
.ad-container.sponsored-slot .ad-header {
    flex: 0 0 auto;
    width: 100%;
    text-align: center;
    background: rgba(0, 0, 0, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.9;
    padding: 0.6rem 0.75rem;
}

.ad-container.sponsored-slot .ad-header i {
    color: var(--primary);
    margin-right: 0.35rem;
    filter: drop-shadow(0 0 6px var(--glow-color-40));
}

/* ---------------- Content area (AdSense + fallback siblings) ----------------
 * We deliberately do NOT clip overflow here: when the sponsored card is the
 * tallest item in its row, clipping was hiding the body content (title +
 * description + CTA) below the image. Letting it expand naturally guarantees
 * every piece of the card renders. Overflow on the *outer* slot still
 * provides the card's rounded-corner crop. */
.ad-container.sponsored-slot .ad-content {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    padding: 0;
    overflow: visible;
}

.ad-container.sponsored-slot .ad-content .sponsored-adsense {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    max-height: none;
    margin: 0;
    display: block;
}

.ad-container.sponsored-slot .sponsored-fallback {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
}

.ad-container.sponsored-slot .sponsored-fallback[hidden] {
    display: none;
}

/* ---------------- The fallback "card" — same shape as .game-card ---------------- */
.ad-container.sponsored-slot .sponsored-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    position: relative;
}

/* Whole-card link wrapping the thumbnail + body so every part is clickable. */
.ad-container.sponsored-slot .sponsored-card-link {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    outline: none;
}

.ad-container.sponsored-slot .sponsored-card-link:focus-visible {
    box-shadow: inset 0 0 0 2px var(--secondary);
}

/* Thumbnail — match .game-thumbnail dimensions exactly. */
.ad-container.sponsored-slot .sponsored-card-thumb {
    width: 100%;
    height: 250px;
    aspect-ratio: auto;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 2px solid var(--primary);
    overflow: hidden;
    position: relative;
    flex: 0 0 auto;
}

.ad-container.sponsored-slot .sponsored-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease, opacity 0.3s ease;
}

/* Hover effect matches .game-card:hover .game-thumbnail */
.ad-container.sponsored-slot:hover .sponsored-card-thumb img {
    transform: scale(1.04);
    opacity: 0.85;
}

.ad-container.sponsored-slot .sponsored-card.no-thumb .sponsored-card-thumb {
    display: none;
}

/* Body matches .game-info typography & padding */
.ad-container.sponsored-slot .sponsored-card-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-height: 0;
}

.ad-container.sponsored-slot .sponsored-card-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--accent, var(--primary));
    opacity: 0.85;
    font-weight: 600;
    margin: 0 0 0.25rem;
}

.ad-container.sponsored-slot .sponsored-card-title {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
    text-shadow: 0 0 5px rgba(192, 192, 192, 0.3);
    line-height: 1.25;
}

.ad-container.sponsored-slot .sponsored-card-desc {
    margin: 0 0 0.85rem;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--text);
    opacity: 0.9;

    /* Two-line clamp to keep heights aligned across rows */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 0 0 auto;
}

/* Render the CTA as a styled span (since the entire card is one link, we
   can't legally nest another anchor). It still reads as a button visually. */
.ad-container.sponsored-slot .sponsored-card-cta {
    align-self: flex-start;
    margin-top: auto;
    padding: 0.55rem 1rem;
    background: transparent;
    border: 1px solid var(--accent, var(--primary));
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    border-radius: 2px;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.ad-container.sponsored-slot .sponsored-card-link:hover .sponsored-card-cta,
.ad-container.sponsored-slot .sponsored-card-link:focus-visible .sponsored-card-cta {
    background: var(--accent, var(--primary));
    color: var(--background);
    transform: translateY(-1px);
}

/* ---------------- Grid alignment (was here before) ---------------- */
.games-grid.visible {
    grid-auto-rows: max-content;
    align-items: start;
}

.games-grid.visible > * {
    align-self: start;
}

/* ---------------- Responsive parity with .game-thumbnail ---------------- */
@media (max-width: 768px) {
    .ad-container.sponsored-slot .sponsored-card-thumb {
        height: 220px;
    }
    .ad-container.sponsored-slot .sponsored-card-body {
        padding: 1.1rem 1.1rem 1.2rem;
    }
    .ad-container.sponsored-slot .sponsored-card-title {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .ad-container.sponsored-slot .sponsored-card-thumb {
        height: 190px;
    }
    .ad-container.sponsored-slot .sponsored-card-body {
        padding: 0.9rem 1rem 1rem;
    }
}

/* ---------------- Promotional badges (optional, per card) ---------------- */
.ad-container.sponsored-slot .sponsored-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0 0 0.6rem;
}

.ad-container.sponsored-slot .sponsored-card-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.55rem;
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--accent, var(--primary));
    border-radius: 999px;
    line-height: 1.4;
    white-space: nowrap;
}

/* Badge accent variants — use class slugs generated from the badge label. */
.ad-container.sponsored-slot .sponsored-card-badge.is-new,
.ad-container.sponsored-slot .sponsored-card-badge.is-best-seller {
    background: var(--accent, var(--primary));
    color: var(--background);
    border-color: var(--accent, var(--primary));
    box-shadow: 0 0 10px var(--glow-color-40);
}

.ad-container.sponsored-slot .sponsored-card-badge.is-sale,
.ad-container.sponsored-slot .sponsored-card-badge.is-limited-edition {
    color: #ffe27a;
    border-color: #ffd34d;
    background: rgba(255, 211, 77, 0.08);
}

.ad-container.sponsored-slot .sponsored-card-badge.is-featured,
.ad-container.sponsored-slot .sponsored-card-badge.is-made-in-italy,
.ad-container.sponsored-slot .sponsored-card-badge.is-seasonal {
    color: var(--text);
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.05);
}

/* ---------------- Visually hidden helper (for the sr-only label) ----------------
 * Standard "visually hidden but still in the accessibility tree" pattern. */
.ad-container.sponsored-slot .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}