/* Ad slots for the web Daily Hand page (#10), filled by js/daily-ads.js.
 *
 * daily.html has three slots, each found by its data-ad-slot-key and labelled
 * "Advertisement" as a complementary landmark:
 *   railLeft, railRight  two <aside> rails inside .page-shell, after the main
 *                        column (.daily-content), for wide screens;
 *   inline               a <div role="complementary"> in the Today panel,
 *                        between the result card and the Why breakdown, for
 *                        narrower screens, filled only once the hand is over.
 * Every slot starts hidden; the loader un-hides only the ones that have an
 * AdSense unit id.
 *
 * Rail geometry. The sidebar nav is 220px and the main column (.daily-content,
 * 720px max, see daily.css) starts right after it, so the column ends at
 * nav + 720px. Nothing sits to its left but the nav, so both rails go in the
 * free space to its right: 160px each, 16px from the column and from each
 * other, fixed so the table never shifts. Both fit from 1280px wide, except
 * that the second rail needs 1320px (nav 220 + column 720 + 16 + 160 + 16 +
 * 160 = 1292, plus a scrollbar). The loader uses the same two breakpoints.
 */
.daily-ad-rail,
.daily-ad-inline {
    --daily-ad-col-right: calc(var(--nav-width, 220px) + 720px);
}

.daily-ad-rail {
    position: fixed;
    top: 96px;
    width: 160px;
    min-height: 600px;
    display: none;
}

/* The [hidden] attribute must win over the display values below. */
.daily-ad-rail[hidden],
.daily-ad-inline[hidden] {
    display: none !important;
}

.daily-ad-inline {
    margin: 16px auto;
    min-height: 0;
}

@media (min-width: 1280px) {
    .daily-ad-rail--left {
        display: block;
        left: calc(var(--daily-ad-col-right) + 16px);
    }

    .daily-ad-inline {
        display: none;
    }
}

@media (min-width: 1320px) {
    .daily-ad-rail--right {
        display: block;
        left: calc(var(--daily-ad-col-right) + 16px + 160px + 16px);
    }
}