/* ==========================================
   ADSENSE – MINIMAL ISLAND FRAME
   Root:    .gh-ad
   Elements .gh-ad__bg / .gh-ad__body / .gh-ad__container
   Types:   .gh-ad--auto / --leaderboard / --banner / --square / --rectangle / --vertical / --fluid / --in-article
   ========================================== */

.gh-ad {
    position: relative;
    margin: var(--spacing-7, 2rem) 0;
    border-radius: var(--radius-4, 0.75rem);
    border: 1px dashed var(--color-border, hsla(0, 0%, 50%, .2));
    background: var(--color-background-100, #f3f3f3);
    overflow: hidden;
    box-sizing: border-box;
    isolation: isolate;
}

/* Subtle grid background */
.gh-ad__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right,
            color-mix(in srgb, var(--color-border, hsla(0, 0%, 50%, .2)) 60%, transparent 40%) 1px,
            transparent 1px),
        linear-gradient(to bottom,
            color-mix(in srgb, var(--color-border, hsla(0, 0%, 50%, .2)) 60%, transparent 40%) 1px,
            transparent 1px);
    background-size: 22px 22px;
    opacity: 0.25;
    mask-image: radial-gradient(circle at 50% 50%, black 0%, transparent 80%);
    z-index: 0;
}

/* Inner padding */
.gh-ad__body {
    position: relative;
    z-index: 1;
    padding: var(--spacing-4, 1rem);
}

/* Center ad and control frame size */
.gh-ad__container {
    width: 100%;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Ad element */
.gh-ad .adsbygoogle {
    display: block;
    width: 100%;
    height: 100%;
}

/* Hover micro-animation */
@media (hover: hover) {
    .gh-ad {
        transition:
            transform 140ms ease-out,
            box-shadow 140ms ease-out,
            border-color 140ms ease-out,
            background-color 140ms ease-out;
    }

    .gh-ad:hover {
        transform: translateY(-1px);
        box-shadow: 0 16px 32px rgba(0, 0, 0, 0.06);
        border-color: color-mix(in srgb,
                var(--color-border, hsla(0, 0%, 50%, .2)) 40%,
                var(--color-black, #000000) 8%);
        background: var(--color-background-200, #ededed);
    }
}

/* ==========================================
   TYPE-BASED SIZING
   ========================================== */

/* AUTO – generic frame */
.gh-ad--auto .gh-ad__container {
    max-width: 100%;
    min-height: 120px;
}

/* Leaderboard – 728x90-style frame */
.gh-ad--leaderboard .gh-ad__container {
    max-width: 728px;
    min-height: 90px;
}

/* Banner – 468x60-style frame */
.gh-ad--banner .gh-ad__container {
    max-width: 468px;
    min-height: 60px;
}

/* Square – 250/300 square frame */
.gh-ad--square .gh-ad__container {
    max-width: 320px;
    min-height: 250px;
}

/* Rectangle – 336x280 / fluid-ish box */
.gh-ad--rectangle .gh-ad__container {
    max-width: 400px;
    min-height: 280px;
}

/* Vertical – tall sidebar style */
.gh-ad--vertical .gh-ad__container {
    max-width: 300px;
    min-height: 600px;
}

/* Fluid – responsive area */
.gh-ad--fluid .gh-ad__container {
    max-width: 100%;
    min-height: 150px;
}

/* In-article – full-width content frame */
.gh-ad--in-article .gh-ad__container {
    max-width: 100%;
    min-height: 140px;
}

/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width: 768px) {
    .gh-ad {
        margin: var(--spacing-5, 1.25rem) 0;
        border-radius: var(--radius-3, 0.5rem);
    }

    .gh-ad__body {
        padding: var(--spacing-3, 0.75rem);
    }

    .gh-ad--auto .gh-ad__container {
        min-height: 110px;
    }

    .gh-ad--leaderboard .gh-ad__container {
        max-width: 100%;
        min-height: 70px;
    }

    .gh-ad--banner .gh-ad__container {
        max-width: 100%;
        min-height: 50px;
    }

    .gh-ad--square .gh-ad__container,
    .gh-ad--rectangle .gh-ad__container {
        max-width: 100%;
        min-height: 220px;
    }

    .gh-ad--vertical .gh-ad__container {
        max-width: 100%;
        min-height: 320px;
    }

    .gh-ad--fluid .gh-ad__container,
    .gh-ad--in-article .gh-ad__container {
        max-width: 100%;
        min-height: 120px;
    }
}

/* ==========================================
   DARK MODE
   ========================================== */

:root[data-color-scheme="dark"] .gh-ad {
    background: var(--color-background-200, #1f1f1f);
    border-color: rgba(255, 255, 255, 0.12);
}

:root[data-color-scheme="dark"] .gh-ad__bg {
    opacity: 0.22;
}

/* Every list item = grid cell */
.posts-list>.posts-list-item {
    height: 100%;
}

/* Ad card behaves like normal card */
.posts-list-item .card-post--ad {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Media area for ad – same role as feature image */
.card-post-media--ad {
    flex: 1 1 auto;
    display: flex;
    width: 100%;
    aspect-ratio: 16 / 9;
    /* change if your cards use another ratio */
}

/* Inside ad card, kill extra chrome so it fits the card */
.posts-list-item--ad .gh-ad {
    margin: 0;
    border-radius: inherit;
    border: 0;
    background: transparent;
    box-shadow: none;
    width: 100%;
    display: flex;
}

.posts-list-item--ad .gh-ad__body {
    padding: 0;
    width: 100%;
}

.posts-list-item--ad .gh-ad__container {
    width: 100%;
    height: 100%;
    display: flex;
}

.posts-list-item--ad .gh-ad .adsbygoogle {
    width: 100%;
    height: 100%;
}

/* Hook class if you want special tweaks later */
.ad-post-lists {
    /* e.g. margin adjustments, debug outline, etc */
}

/* Mobile */
@media (max-width: 768px) {
    .posts-list-item .card-post--ad {
        height: auto;
    }

    .card-post-media--ad {
        aspect-ratio: 16 / 9;
    }
}

.post-ad {
    margin: var(--spacing-7, 2rem) auto;
}

.post-ad--header {
    margin-top: var(--spacing-6, 1.5rem);
}

.post-ad--in-article {
    margin-top: var(--spacing-6, 1.5rem);
    margin-bottom: var(--spacing-6, 1.5rem);
}

.post-ad--below-content {
    margin-top: var(--spacing-7, 2rem);
    margin-bottom: var(--spacing-7, 2rem);
}

.sidebar-ad {
    margin: var(--spacing-6, 1.5rem) 0;
}

.layout-ad--below-content {
    margin: var(--spacing-8, 2.5rem) auto;
}