/**
 * 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. 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);
}

.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);
    }
}