/* === 6: ads === (phase 6, point 42)
   Loaded only with ads in the slots (ADS_ENABLED=1 or ADS_ALZA_BANNERS) or ADS_PREVIEW=1 (templates/base.html.twig), so
   pages without ads get no extra bytes.
   The box of a reserved slot of ui.ad_slot() has a fixed height chosen by the width of the slot (container query),
   sized for the common banner formats: 970 × 210 (a full row in a card grid at least 970 px wide), 728 × 90 (at least
   728 px wide), otherwise 300 × 250 (250 × 250 below 300 px); the "side" slot is 300 × 600. public/js/alza.js puts the Alza banner of that
   size in the box.
   An ad never changes that height (no CLS), an unfilled slot keeps its house promo. Browsers without container queries
   get the 250 px box everywhere. */

.ad-slot { --ad-h: 250px; container-type: inline-size; display: grid; align-content: start; gap: 4px; margin: var(--section) 0 0; padding: 0; min-width: 0; list-style: none; }
.ad-slot__label { margin: 0; height: 16px; font-size: var(--step--2); line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ad-slot__box { position: relative; height: var(--ad-h); overflow: hidden; background: var(--surface); }
.ad-slot__box .adsbygoogle { display: block; width: 100%; height: var(--ad-h); }
.ad-slot__box .adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
.ad-slot__house { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: var(--s-3) var(--s-4); text-align: center; }
.ad-slot__house a { max-width: 46ch; color: var(--text); }
.ad-slot__house strong { display: block; margin-bottom: var(--s-1); color: var(--gold-strong); }
.ad-slot__box:has(.adsbygoogle[data-ad-status="filled"]) .ad-slot__house { display: none; }
.ad-slot--preview .ad-slot__box { border: 2px dashed var(--line-strong); background: var(--surface-2); }

/* Alza banner (public/js/alza.js): its fixed size centred in the box over the house promo, which shows only until it
   loads; a box narrower than the banner gets it scaled down from the top centre */
.ad-slot__alza { position: absolute; top: 0; left: 50%; z-index: 1; display: block; max-width: none; border: 0; transform: translateX(-50%); transform-origin: 50% 0; }
.ad-slot__box:has(.ad-slot__alza) .ad-slot__house { visibility: hidden; }

/* in a card grid: a full row; the grid gap is the spacing */
.ad-slot--row { grid-column: 1 / -1; margin: 0; }
/* detail: the column's gap (desktop: its margin rule in detail.css) is the spacing */
.detail__main > .ad-slot { margin-top: 0; }

/* the slot's own width decides (a detail column is narrower than the viewport) */
@container (min-width: 728px) {
    .ad-slot__box { --ad-h: 90px; }
    .ad-slot__house { padding-block: var(--s-2); }
    .ad-slot__house strong { display: inline; margin: 0 .4em 0 0; }
}
@container (min-width: 970px) {
    .ad-slot--row .ad-slot__box { --ad-h: 210px; }
    .ad-slot--row .ad-slot__house strong { display: block; margin: 0 0 var(--s-1); }
}

/* detail, right column under the plot and the credits (desktop only); the slot after "Podobné tituly" (narrow) takes
   its place below 1100 px, so the page keeps two slots */
.ad-slot--side { display: none; }
.ad-slot--side .ad-slot__box { --ad-h: 600px; max-width: 300px; }
@media (min-width: 1100px) {
    .ad-slot--side { display: grid; margin-top: var(--section); }
    .ad-wrap:has(> .ad-slot--narrow) { display: none; }
}

/* detail: one more row in the left column next to the plot (detail.css) */
@media (min-width: 1100px) {
    .detail__main:has(> .ad-slot) { grid-template-rows: repeat(12, auto) 1fr; }
}