/**
 * House ad: the owner's own products, shown in a manual ad slot only when
 * AdSense reports it unfilled (https://support.google.com/adsense/answer/10762946).
 * Shared by every site, with the card in core/templates/core/ads/_house_ad.html
 * and the product data in core/ads/house.py. An affiliate partner's banner
 * (core/templates/core/ads/_affiliate_banner.html) takes the same .house-ad
 * wrapper, so it reveals, overlays and is measured exactly like a house ad. Design rationale:
 * sites/imperialismmap/docs/design/components.md, "House ad"; why it overlays:
 * sites/imperialismmap/docs/ADSENSE.md, "House Ads".
 *
 * Every {% ad_unit %} carries one, hidden until its slot reports unfilled.
 * The empty <ins> then stays where it is, invisible, and the house ad is laid
 * over the box. The box keeps exactly the height it had at push (the
 * reservation, or the <ins>'s own height where Google's is the taller), so a
 * reveal moves nothing whatever the card holds. Swapping the card in for the
 * <ins> would leave the box only as tall as the reservation.
 *
 * Multiplex is the one exception: its empty box is 580px (desktop) to 1635px
 * (phone) tall, so there the house ad replaces the <ins> and takes the
 * container's 250px reservation instead. A site's own multiplex collapse rule
 * must therefore skip a container that holds a house ad (:not(:has(.house-ad))).
 *
 * sites/imperialismmap/tests/e2e/ads.e2e.mjs (harness/houseAdFit.mjs) checks,
 * on each site and at every width it runs, that no reveal grows its box and no
 * card overflows. A container hidden by viewport stays hidden, house ad and all.
 *
 * Token contract. This file writes no raw values: a site that links it must
 * define every token below. ImperialismMap generates them
 * (sites/imperialismmap/docs/design/tokens/); VenueStats hand-writes the slice
 * (sites/venuestats/static/css/tokens.css), and each site's tests check that
 * every var() read here is defined.
 *   surface  border  text-primary  text-secondary  text-muted  on-surface-strong
 *   space-1 2 4 5 8  type-xs sm base 2xl  radius-card  radius-pill
 *   tracking-label  leading-heading  leading-body  font-display  mix-black
 *   ext-tc-primary  ext-mc-gray-300 400 600 700 800  ext-mc-orange-500 600
 *   ext-mc-white
 */

.ad-container .house-ad {
    display: none;
    width: 100%;
}

.ad-container:has(> ins.adsbygoogle[data-ad-status="unfilled"]) {
    position: relative;
}

.ad-container:has(> ins.adsbygoogle[data-ad-status="unfilled"]) > ins.adsbygoogle {
    visibility: hidden;
}

.ad-container:has(> ins.adsbygoogle[data-ad-status="unfilled"]) > .house-ad {
    display: flex;
    position: absolute;
    inset: 0;
}

/* Multiplex: the house ad replaces the empty <ins> instead (see above).
   !important to beat the <ins>'s inline style="display:block". */
.ad-container.ad-multiplex:has(> ins.adsbygoogle[data-ad-status="unfilled"]) > ins.adsbygoogle {
    display: none !important;
}

.ad-container.ad-multiplex:has(> ins.adsbygoogle[data-ad-status="unfilled"]) > .house-ad {
    position: static;
    align-self: stretch;
}

/* Each product's brand, as tokens the card reads. The brand belongs to the
   product (--ext-* in tokens.css), so these are the only place it enters. */
.house-ad[data-house-product="territory-creator"] {
    --house-bg: var(--surface);
    --house-edge: var(--border);
    --house-name: var(--text-primary);
    --house-pitch: var(--text-secondary);
    --house-eyebrow: var(--text-muted);
    --house-accent: var(--ext-tc-primary);
    --house-accent-hover: color-mix(in srgb, var(--ext-tc-primary) 85%, var(--mix-black));
    --house-on-accent: var(--on-surface-strong);
}

.house-ad[data-house-product="makecookbook"] {
    --house-bg: linear-gradient(135deg, var(--ext-mc-gray-800) 0%, var(--ext-mc-gray-700) 100%);
    --house-edge: var(--ext-mc-gray-600);
    --house-name: var(--ext-mc-white);
    --house-pitch: var(--ext-mc-gray-300);
    --house-eyebrow: var(--ext-mc-gray-400);
    --house-accent: var(--ext-mc-orange-500);
    --house-accent-hover: var(--ext-mc-orange-600);
    --house-on-accent: var(--ext-mc-white);
}

/* An affiliate partner's banner: the partner's creative carries its own brand,
   so the card is a plain frame and its disclosure line reads as page text. */
.house-ad[data-house-product="fanatics"] {
    --house-bg: var(--surface);
    --house-edge: var(--border);
    --house-eyebrow: var(--text-muted);
}

.house-ad {
    position: relative;
    container-type: inline-size;
    background: var(--house-bg);
    border: 1px solid var(--house-edge);
    border-radius: var(--radius-card);
}

/* Stacked by default: phones, the 336px in-content box and the rails. */
.house-ad__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-4);
    width: 100%;
    max-width: 52rem;
    margin-inline: auto;
    padding: var(--space-5);
}

.house-ad__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.house-ad__eyebrow {
    font-size: var(--type-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    color: var(--house-eyebrow);
}

.house-ad__name {
    font-family: var(--font-display);
    font-size: var(--type-2xl);
    font-weight: 800;
    line-height: var(--leading-heading);
    color: var(--house-name);
}

.house-ad__pitch {
    font-size: var(--type-base);
    line-height: var(--leading-body);
    color: var(--house-pitch);
}

.house-ad__cta {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    background: var(--house-accent);
    color: var(--house-on-accent);
    font-size: var(--type-sm);
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

/* The card is not a link, so the CTA's text is the anchor text; this
   stretches the CTA's hit area over the whole card. */
.house-ad__cta::before {
    content: "";
    position: absolute;
    inset: 0;
}

.house-ad:hover .house-ad__cta {
    background: var(--house-accent-hover);
    color: var(--house-on-accent);
}

/* Wide slots (banners, billboard): text left, CTA right. */
@container (min-width: 640px) {
    .house-ad__body {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-8);
        padding-inline: var(--space-8);
    }
}

/* Partner banner: the creative at its native size, centred, scaled down only
   to fit the box, with the disclosure line above it. size containment keeps the
   creative out of the card's own height, so the card is always the box (the
   overlay's inset, or multiplex's stretched 250px reservation) and a 300x250
   creative in a 250px box shrinks to leave its disclosure room rather than
   growing the slot. */
.house-ad__banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    width: 100%;
    min-width: 0;
    padding: var(--space-1);
    contain: size;
}

.house-ad__banner-link {
    display: flex;
    justify-content: center;
    min-height: 0;
    max-width: 100%;
}

.house-ad__banner-img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.house-ad__disclosure {
    flex: none;
    font-size: var(--type-xs);
    line-height: var(--leading-body);
    color: var(--house-eyebrow);
    text-align: center;
}