/*
 * ============================================================
 * InovEdu Controlled Advertising
 * Premium Placement Policy
 * ============================================================
 *
 * Advertising must remain secondary to educational content.
 *
 * Auto Ads are intentionally disabled.
 * Placements are controlled by class.adsense.inc.php.
 */

/* ------------------------------------------------------------
   Base container
   ------------------------------------------------------------ */

.inovedu-ad {
    position: relative;
    box-sizing: border-box;

    width: 100%;
    max-width: 100%;

    margin: 32px auto;

    overflow: hidden;
    clear: both;

    text-align: center;
}


/* ------------------------------------------------------------
   Advertising label
   ------------------------------------------------------------ */

.inovedu-ad__label {
    display: block;

    margin: 0 0 8px;

    font-size: 10px;
    font-weight: 500;
    line-height: 1.4;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    color: #8a94a6;
}


/* ------------------------------------------------------------
   Google container
   ------------------------------------------------------------ */

.inovedu-ad .adsbygoogle {
    display: block;

    width: 100%;
    max-width: 100%;

    margin-left: auto;
    margin-right: auto;
}


/* ------------------------------------------------------------
   Horizontal placements

   Keep advertising visually contained rather than allowing
   it to dominate large desktop screens.
   ------------------------------------------------------------ */

.inovedu-ad--horizontal {
    width: calc(100% - 32px);
    max-width: 1100px;

    margin-left: auto;
    margin-right: auto;
}


/* ------------------------------------------------------------
   Filled advertisement
   ------------------------------------------------------------ */

.inovedu-ad:has(
    .adsbygoogle[data-ad-status="filled"]
) {
    padding-top: 4px;
    padding-bottom: 4px;
}


/* ------------------------------------------------------------
   Unfilled advertisement

   Never leave a large empty monetization hole in the UI.
   JS provides the is-unfilled fallback as well.
   ------------------------------------------------------------ */

.inovedu-ad.is-unfilled,
.inovedu-ad:has(
    .adsbygoogle[data-ad-status="unfilled"]
) {
    display: none !important;

    margin: 0 !important;
    padding: 0 !important;

    height: 0 !important;
    min-height: 0 !important;
}


/* ------------------------------------------------------------
   HOME

   Only one controlled advertisement.
   ------------------------------------------------------------ */

.inovedu-ad[
    data-inovedu-ad="home_primary"
] {
    margin-top: 36px;
    margin-bottom: 36px;
}


/* ------------------------------------------------------------
   POSTS LISTING
   ------------------------------------------------------------ */

.inovedu-ad[
    data-inovedu-ad="posts_inline_01"
] {
    margin-top: 36px;
    margin-bottom: 28px;
}


/* ------------------------------------------------------------
   SINGLE ARTICLE

   Slightly narrower so the advertisement remains visually
   related to the reading column.
   ------------------------------------------------------------ */

.inovedu-ad[
    data-inovedu-ad="post_inline_01"
] {
    max-width: 900px;

    margin-top: 40px;
    margin-bottom: 30px;
}


/* ------------------------------------------------------------
   DIRECTORY
   ------------------------------------------------------------ */

.inovedu-ad[
    data-inovedu-ad="directory_inline_01"
] {
    margin-top: 32px;
    margin-bottom: 32px;
}


/* ------------------------------------------------------------
   TABLET
   ------------------------------------------------------------ */

@media (max-width: 1024px) {

    .inovedu-ad--horizontal {
        width: calc(100% - 24px);
    }

}


/* ------------------------------------------------------------
   MOBILE

   Advertising should consume less visual breathing room.
   ------------------------------------------------------------ */

@media (max-width: 768px) {

    .inovedu-ad {
        width: 100%;

        margin-top: 24px;
        margin-bottom: 24px;
    }

    .inovedu-ad--horizontal {
        width: 100%;
        max-width: 100%;
    }

    .inovedu-ad__label {
        margin-bottom: 6px;

        font-size: 9px;
    }

    .inovedu-ad[
        data-inovedu-ad="home_primary"
    ],
    .inovedu-ad[
        data-inovedu-ad="posts_inline_01"
    ],
    .inovedu-ad[
        data-inovedu-ad="post_inline_01"
    ],
    .inovedu-ad[
        data-inovedu-ad="directory_inline_01"
    ] {
        margin-top: 24px;
        margin-bottom: 24px;
    }

}


/* ------------------------------------------------------------
   Very small screens
   ------------------------------------------------------------ */

@media (max-width: 420px) {

    .inovedu-ad {
        margin-top: 20px;
        margin-bottom: 20px;
    }

}