/* ============================================
   AYIO Jobs - Advertising Styles
   ============================================ */

/* Ad containers — base */
.ad-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--gray-100, #f3f4f6);
    border-radius: var(--radius-md, 10px);
    overflow: hidden;
    margin: 20px auto;
    box-sizing: border-box;
    max-width: 100%;
}

.ad-container *,
.ad-container *::before,
.ad-container *::after {
    box-sizing: border-box;
}

.ad-container img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Inner link — allow it to fill container and wrap content */
.ad-container > a {
    display: flex;
    max-width: 100%;
    width: 100%;
    overflow: hidden;
    text-decoration: none;
    line-height: 1.4;
}

/* Small "Advertisement" label */
.ad-label {
    position: absolute;
    bottom: 4px;
    left: 4px;
    font-size: 0.6rem;
    color: var(--gray-500, #6b7280);
    background: rgba(255, 255, 255, 0.7);
    padding: 1px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    pointer-events: none;
    z-index: 2;
    line-height: 1.4;
}

/* Placeholder styling (admin-only dev preview) */
.ad-placeholder {
    border: 2px dashed var(--gray-300, #d1d5db);
    background: var(--gray-50, #f9fafb);
    color: var(--gray-400, #9ca3af);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 20px auto;
    border-radius: var(--radius-md, 10px);
    box-sizing: border-box;
    max-width: 100%;
}

.ad-placeholder span {
    padding: 8px 16px;
    text-align: center;
}

/* ============================================
   Size variants
   ============================================ */

/* Leaderboard (728x90) */
.ad-leaderboard {
    max-width: 728px;
    min-height: 90px;
}

/* Rectangle (300x250) */
.ad-rectangle {
    max-width: 300px;
    min-height: 250px;
}

/* Large Rectangle (336x280) */
.ad-large-rectangle {
    max-width: 336px;
    min-height: 280px;
}

/* Half Page (300x600) */
.ad-half-page {
    max-width: 300px;
    min-height: 600px;
}

/* Native / between listings */
.ad-native {
    max-width: 100%;
    background: transparent;
    border: 1px solid var(--gray-200, #e5e7eb);
    padding: 0;
}

/* ============================================
   Context-specific styles
   ============================================ */

/* Sidebar ads — fit within sidebar column */
.filters-sidebar .ad-container,
.filters-sidebar .ad-placeholder,
.jd-sidebar .ad-container,
.jd-sidebar .ad-placeholder,
.blog-sidebar .ad-container,
.blog-sidebar .ad-placeholder,
.dashboard-sidebar .ad-container,
.dashboard-sidebar .ad-placeholder {
    margin: 15px 0;
    max-width: 100%;
}

/* Blog between posts */
.ad-between-posts {
    margin: 25px 0;
}

.ad-between-posts .ad-container {
    margin: 0;
    background: transparent;
}

/* Error page ad */
.error-section .ad-container,
.error-section .ad-placeholder {
    margin: 30px auto;
}

/* Dashboard ad */
.dashboard-ad {
    margin: 20px 0;
}

/* Between job listings */
.ad-between-jobs {
    margin: 15px 0;
}

.ad-between-jobs .ad-container {
    margin: 0;
    background: transparent;
}

/* Homepage hero ad — centred with spacing */
.hero-section + .ad-container,
.hero-section + .ad-placeholder {
    margin-top: 30px;
    margin-bottom: 10px;
}

/* ============================================
   Dark mode
   ============================================ */
[data-theme="dark"] .ad-container {
    background: var(--gray-800, #1f2937);
}

[data-theme="dark"] .ad-label {
    background: rgba(0, 0, 0, 0.5);
    color: var(--gray-400, #9ca3af);
}

[data-theme="dark"] .ad-placeholder {
    border-color: var(--gray-600, #4b5563);
    background: var(--gray-800, #1f2937);
    color: var(--gray-500, #6b7280);
}

[data-theme="dark"] .ad-native {
    border-color: var(--gray-700, #374151);
}

/* ============================================
   Responsive
   ============================================ */

/* Tablet — leaderboards start shrinking */
@media (max-width: 768px) {
    /* Hide leaderboard ads on mobile — they don't work at 728px in <768px viewport */
    .ad-leaderboard {
        display: none !important;
    }

    /* Native ads that are really leaderboards — also hide */
    .ad-native {
        display: none !important;
    }

    /* Placeholders also hide */
    .ad-leaderboard.ad-placeholder,
    .ad-native.ad-placeholder {
        display: none !important;
    }

    /* Rectangle ads adapt to available width */
    .ad-rectangle,
    .ad-large-rectangle {
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
    }

    .ad-container,
    .ad-placeholder {
        margin: 15px auto;
    }

    /* Between-jobs wrapper still shows (for rectangle ads within it) */
    .ad-between-jobs,
    .ad-between-posts {
        margin: 10px 0;
    }
}

@media (max-width: 480px) {
    .ad-rectangle,
    .ad-large-rectangle {
        max-width: 100%;
    }
}