/*
 * August WordPress Theme - Ad Layout Stylesheet
 * Author URI: https://clearmoon.stars.ne.jp/
 * Styles for AdSense and other ad placements throughout the theme
 */

/* =============================================================================
   BASE AD CONTAINER
   ============================================================================= */

/**
 * Base container for all ad slots.
 * Prevents layout shift; hides empty slots.
 */
.ad-container {
    position: relative;
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Hide empty ad containers to prevent blank space / layout shift */
.ad-container:empty {
    display: none;
}

/* Prevent layout shift when AdSense is still loading */
.ad-container ins.adsbygoogle:not([data-ad-status]) {
    min-height: 0;
}

/* =============================================================================
   AD LABEL  ('スポンサーリンク')
   ============================================================================= */

.ad-label {
    display: block;
    margin-bottom: 4px;
    color: #94A3B8;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-align: center;
    line-height: 1.4;
    user-select: none;
}

/* =============================================================================
   AD SLOT: HEADER BANNER  (Leaderboard 970x90)
   ============================================================================= */

.ad-header-banner {
    max-width: 970px;
    margin: 0 auto 16px;
    min-height: 90px; /* leaderboard height — prevents layout shift */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* =============================================================================
   AD SLOT: BEFORE CONTENT  (Banner 728x90)
   ============================================================================= */

.ad-before-content {
    max-width: 728px;
    margin: 16px auto;
}

/* =============================================================================
   AD SLOT: AFTER VIDEO  (High CTR — 728x90 / 300x250)
   ============================================================================= */

.ad-after-video {
    max-width: 728px;
    margin: 20px auto;
}

/* =============================================================================
   AD SLOT: AFTER CONTENT  (728x90)
   ============================================================================= */

.ad-after-content {
    max-width: 728px;
    margin: 24px auto;
}

/* =============================================================================
   AD SLOT: IN-LOOP (inside video grid — full-width row)
   ============================================================================= */

.ad-in-loop {
    /* Spans all grid columns when inside a CSS Grid video-grid */
    grid-column: 1 / -1;
    max-width: 728px;
    margin: 0 auto 24px;
}

/* =============================================================================
   AD SLOT: SIDEBAR TOP
   ============================================================================= */

.ad-sidebar-top {
    width: 100%;
    margin-bottom: 24px;
}

/* =============================================================================
   AD SLOT: SIDEBAR BOTTOM
   ============================================================================= */

.ad-sidebar-bottom {
    width: 100%;
    margin-top: 24px;
}

/* =============================================================================
   AD SLOT: FOOTER  (Banner 728x90)
   ============================================================================= */

.ad-footer {
    max-width: 728px;
    margin: 24px auto;
}

/* =============================================================================
   STICKY SIDEBAR AD (follows scroll position)
   ============================================================================= */

/**
 * Applied to a wrapper inside the sidebar.
 * The top offset accounts for the sticky header height (~60px) + padding.
 */
.ad-sticky-sidebar {
    position: sticky;
    top: 80px; /* adjust if header height changes */
}

/* =============================================================================
   RESPONSIVE OVERRIDES — MOBILE (max-width: 767px)
   ============================================================================= */

@media (max-width: 767px) {

    /**
     * Header banner shrinks from leaderboard (970px) to mobile banner (320px).
     * This avoids showing a large empty leaderboard slot on small screens.
     */
    .ad-header-banner {
        max-width: 320px;
        min-height: 50px; /* mobile banner height */
    }

    /* Banner ads: reduce to mobile-friendly 320px */
    .ad-before-content,
    .ad-after-video,
    .ad-after-content,
    .ad-footer {
        max-width: 100%;  /* full width on narrow screens */
    }

    /* In-loop ads remain full-row */
    .ad-in-loop {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    /* Sidebar ads: full width when sidebar is stacked below content */
    .ad-sidebar-top,
    .ad-sidebar-bottom {
        width: 100%;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Sticky sidebar is not meaningful on mobile — disable */
    .ad-sticky-sidebar {
        position: static;
        top: auto;
    }
}

/* =============================================================================
   RESPONSIVE OVERRIDES — TABLET (768px - 1023px)
   ============================================================================= */

@media (min-width: 768px) and (max-width: 1023px) {

    .ad-header-banner {
        max-width: 728px;
        min-height: 90px;
    }

    .ad-sidebar-top,
    .ad-sidebar-bottom {
        width: 100%;
        max-width: 100%;
    }

    /* Sticky sidebar still not useful when sidebar is stacked */
    .ad-sticky-sidebar {
        position: static;
        top: auto;
    }
}

/* =============================================================================
   RESPONSIVE OVERRIDES — DESKTOP (1024px+)
   ============================================================================= */

@media (min-width: 1024px) {

    /* Sidebar ads use the sidebar column width */
    .ad-sidebar-top,
    .ad-sidebar-bottom {
        width: 100%;   /* fills sidebar column (300px on desktop) */
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Re-enable sticky behavior on desktop */
    .ad-sticky-sidebar {
        position: sticky;
        top: 80px;
    }
}

@media (min-width: 1280px) {

    /* Wider sidebar = wider ad slots */
    .ad-sidebar-top,
    .ad-sidebar-bottom {
        max-width: 340px;
    }
}

/* =============================================================================
   PRINT — HIDE ALL ADS
   ============================================================================= */

@media print {
    .ad-container,
    .ad-label,
    .ad-header-banner,
    .ad-before-content,
    .ad-after-video,
    .ad-after-content,
    .ad-in-loop,
    .ad-sidebar-top,
    .ad-sidebar-bottom,
    .ad-footer,
    .ad-sticky-sidebar {
        display: none !important;
    }
}