/**
 * WTC Ads — Frontend Styles
 */

/* ── WRAPPER ─────────────────────────────────────────────────────────────── */

.wtc-ad-wrap {
    display: block;
    position: relative;
    margin: 1.5em auto;
    line-height: 0;
}

.wtc-ad-link {
    display: block;
    line-height: 0;
    border: none;
    text-decoration: none;
}

.wtc-ad-image {
    display: block;
    width: 100%;
    height: auto;
    border: none;
}

/* The 600×200 slot is fed a raw 1024×1024 square image straight from the
   image generator (Studio composes the important content into the middle
   third of that square, but never actually crops the file). Force a true
   3:1 banner crop here instead of letting the square aspect ratio through. */
.wtc-ad--600 .wtc-ad-image {
    aspect-ratio: 3 / 1;
    object-fit: cover;
    object-position: center;
}

/* ── COMMUNITY NOTICE LABEL ──────────────────────────────────────────────── */

.wtc-ad-notice-label {
    font-family: sans-serif;
    font-size: 9px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #666;
    text-align: right;
    padding: 0 2px 3px;
    line-height: 1;
    display: block;
}

/* ── SIZE VARIANTS ───────────────────────────────────────────────────────── */

.wtc-ad--300 {
    max-width: 300px;
}

.wtc-ad--600 {
    max-width: 600px;
}

/* ── SMALL PRINT ─────────────────────────────────────────────────────────── */

.wtc-ad-small-print {
    font-size: 0.65em;
    line-height: 1.4;
    color: #888;
    margin: 0.25em 0 0;
    text-align: center;
}

/* ── TEXT FALLBACK (when no image) ───────────────────────────────────────── */

.wtc-ad-text-fallback {
    background: #1a1a1a;
    color: #eee;
    padding: 1em;
    text-align: center;
    font-family: sans-serif;
}

.wtc-ad-headline {
    font-size: 1.1em;
    font-weight: bold;
    margin: 0 0 0.25em;
}

.wtc-ad-tagline {
    font-size: 0.9em;
    margin: 0 0 0.5em;
    opacity: 0.8;
}

.wtc-ad-cta {
    display: inline-block;
    background: #c4622d;
    color: #fff;
    padding: 0.4em 0.8em;
    font-size: 0.85em;
    border-radius: 2px;
}

/* ── IN-CONTENT ──────────────────────────────────────────────────────────── */

.wtc-ad--600 {
    margin: 2em auto;
}

@media ( max-width: 640px ) {
    .wtc-ad--600 {
        max-width: 300px;
    }
}

/* ── FOOTER STRIP ────────────────────────────────────────────────────────── */

.wtc-footer-ads {
    padding: 1.5em 1em 1em;
    background: #0d0d0d;
    border-top: 1px solid #222;
    margin-top: 2em;
}

.wtc-footer-ads-label {
    font-family: sans-serif;
    font-size: 0.6em;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #555;
    text-align: center;
    margin-bottom: 0.75em;
}

.wtc-footer-ads-row {
    display: flex;
    justify-content: center;
    gap: 1em;
    flex-wrap: wrap;
}

/* Footer ads use 600×200 — hide the per-ad Community Notice label in footer
   since the strip already has its own label */
.wtc-footer-ads .wtc-ad-notice-label {
    display: none;
}

.wtc-footer-ads .wtc-ad-wrap {
    margin: 0;
    flex: 1 1 300px;
    max-width: 600px;
}

@media ( max-width: 680px ) {
    .wtc-footer-ads-row {
        flex-direction: column;
        align-items: center;
    }
    .wtc-footer-ads .wtc-ad-wrap {
        flex: 0 0 auto;
        width: 100%;
        max-width: 600px;
    }
}

/* ── EASTER EGG REVEAL ───────────────────────────────────────────────────── */

.wtc-egg-reveal {
    position: absolute;
    bottom: calc( 100% + 6px );
    left: 50%;
    transform: translateX( -50% );
    background: rgba( 0, 0, 0, 0.88 );
    color: #fff;
    font-family: monospace;
    font-size: 0.75em;
    white-space: nowrap;
    padding: 0.4em 0.7em;
    border-radius: 3px;
    pointer-events: none;
    z-index: 9999;
    animation: wtc-egg-fadein 0.3s ease forwards;
}

.wtc-egg-reveal::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX( -50% );
    border: 5px solid transparent;
    border-top-color: rgba( 0, 0, 0, 0.88 );
}

@keyframes wtc-egg-fadein {
    from { opacity: 0; transform: translateX( -50% ) translateY( 4px ); }
    to   { opacity: 1; transform: translateX( -50% ) translateY( 0 );   }
}