/*
|--------------------------------------------------------------------------
| ToolVerse - Home Advertisement Section
|--------------------------------------------------------------------------
| Scope:
| - ONLY .tv-ad-section
| - No styles leak to other sections/pages
| - Reserved ad space to reduce layout shift
| - Responsive
|--------------------------------------------------------------------------
*/


/* ==========================================================================
   SECTION
   ========================================================================== */

.tv-ad-section {
    position: relative;

    width: 100%;

    padding:
        34px
        0
        38px;

    background:
        #ffffff;
}


/* ==========================================================================
   INNER WRAPPER
   ========================================================================== */

.tv-ad-section__inner {
    position: relative;

    width: 100%;

    max-width: 1000px;

    margin:
        0
        auto;
}


/* ==========================================================================
   ADVERTISEMENT LABEL
   ========================================================================== */

.tv-ad-section__label {
    margin-bottom: 8px;

    color:
        #98a1af;

    font-size: 8px;
    font-weight: 650;

    line-height: 1.3;

    letter-spacing: 0.75px;

    text-align: center;

    text-transform: uppercase;
}


/* ==========================================================================
   AD SLOT
   ========================================================================== */

/*
|--------------------------------------------------------------------------
| IMPORTANT
|--------------------------------------------------------------------------
|
| .tv-ad-slot is defined here because horizontal-ad.php is rendered inside
| this Home section.
|
| The reserved minimum height helps prevent the content below the ad from
| jumping significantly when an ad is eventually loaded.
|
*/

.tv-ad-section .tv-ad-slot {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    min-height: 112px;

    overflow: hidden;

    border:
        1px solid
        rgba(222, 227, 235, 0.82);

    border-radius: 14px;

    background:
        #fafbfc;
}


/* ==========================================================================
   DEVELOPMENT PLACEHOLDER
   ========================================================================== */

.tv-ad-section .tv-ad-slot__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    min-height: inherit;

    padding:
        18px
        20px;

    color:
        #a1a9b5;

    font-size: 9px;
    font-weight: 500;

    line-height: 1.5;

    letter-spacing: 0.15px;

    text-align: center;
}


/* ==========================================================================
   PLACEHOLDER DECORATION
   ========================================================================== */

.tv-ad-section .tv-ad-slot__placeholder::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 220px;
    height: 80px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(99, 91, 255, 0.035),
            transparent 70%
        );

    transform:
        translate(
            -50%,
            -50%
        );

    pointer-events: none;
}


/* ==========================================================================
   ADSENSE CONTAINER
   ========================================================================== */

.tv-ad-section .tv-ad-slot ins.adsbygoogle {
    display: block;

    width: 100%;

    min-height: 90px;

    margin:
        0
        auto;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1024px) {

    .tv-ad-section {
        padding:
            30px
            0
            34px;
    }

    .tv-ad-section__inner {
        max-width: 900px;
    }

    .tv-ad-section .tv-ad-slot {
        min-height: 105px;
    }
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    .tv-ad-section {
        padding:
            24px
            0
            28px;
    }

    .tv-ad-section__label {
        margin-bottom: 7px;

        font-size: 7px;
    }

    .tv-ad-section .tv-ad-slot {
        min-height: 100px;

        border-radius: 12px;
    }

    .tv-ad-section .tv-ad-slot__placeholder {
        padding:
            15px
            14px;

        font-size: 8px;
    }
}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 400px) {

    .tv-ad-section {
        padding:
            21px
            0
            25px;
    }

    .tv-ad-section .tv-ad-slot {
        min-height: 96px;
    }
}