/* The Thursday Times: Advertising (page-templates/ads.php). Builds on about.css: same sections, kickers, reveals,
   map, end card and motion rules. */

/* ---------------------------------------------------------------------- hero */
.ad-hero { padding-block: clamp(80px, 11vw, 160px) clamp(64px, 8vw, 112px); }
.ad-hero__in { display: flex; flex-direction: column; align-items: flex-start; gap: var(--tt-space-5); }
.ad-hero__n { margin-top: var(--tt-space-4); }
.ad-hero__num { display: flex; align-items: flex-start; font-family: var(--font-display); font-weight: 900; font-size: clamp(64px, 12.5vw, 196px); line-height: 1; letter-spacing: -0.04em; }
.ad-hero__plus { margin-left: 0.04em; }
.ad-hero__unit { margin: var(--tt-space-3) 0 0; font-family: var(--font-ui); font-size: 18px; line-height: 24px; color: var(--tt-text-secondary); }
.ab-ready [data-ab-reveal="odo"] .ab-odo__reel { transition: transform 1.4s var(--ab-ease) calc(0.25s + var(--i) * 0.08s); }
.ab-ready [data-ab-reveal="odo"]:not(.is-in) .ab-odo__reel { transform: translateY(0); }
.ab-ready [data-ab-reveal="odo"] .ad-hero__plus, .ab-ready [data-ab-reveal="odo"] .ad-hero__unit { transition: opacity 0.6s var(--ab-ease) 1.5s; }
.ab-ready [data-ab-reveal="odo"]:not(.is-in) :is(.ad-hero__plus, .ad-hero__unit) { opacity: 0; }
.ad-title { margin: var(--tt-space-5) 0 0; max-width: 14em; font-family: var(--font-display); font-weight: 900; font-size: clamp(34px, 4.4vw, 60px); line-height: 1.02; letter-spacing: -0.025em; text-wrap: balance; }
.ad-hero__deck { margin: 0; max-width: 32em; font-family: var(--font-deck); font-size: clamp(21px, 2.1vw, 28px); line-height: 1.36; }
.ad-hero .tt-button--main { min-height: 52px; font-size: 17px; background: var(--tt-paper); color: var(--tt-ink); border-color: var(--tt-paper); }

/* ------------------------------------------------------------------- readers */
.ad-readers { padding-top: 0; }
.ad-reader { fill: var(--tt-paper); }
.ab-ready .ad-reader { transition: opacity 0.3s var(--ab-ease) calc(1.5s + var(--k) * 0.14s); }
.ab-ready .ab-map__fig:not(.is-in) .ad-reader { opacity: 0; }
.ad-countries { margin: var(--tt-space-6) 0 0; padding-top: var(--tt-space-5); border-top: 1px solid var(--tt-border); font-family: var(--font-ui); font-size: 17px; line-height: 30px; }
.ad-country { color: var(--tt-text-secondary); transition: color 0.4s var(--ab-ease); }
.ad-country.is-home { color: var(--tt-paper); font-weight: 700; }
.ad-sep { color: var(--tt-text-secondary); }
.ab-ready .ad-readers:has(.ab-map__fig.is-in) .ad-country { color: var(--tt-paper); transition-delay: calc(1.6s + var(--k) * 0.14s); }

/* ------------------------------------------------------------------- formats */
.ad-spots { list-style: none; margin: var(--tt-space-8) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tt-space-5); }
.ad-spot__frame { background: var(--tt-panel); }
.ad-spot__frame svg { display: block; width: 100%; height: auto; }
.ad-ink { fill: var(--tt-text); transform-box: fill-box; }
.ad-track { fill: var(--tt-border); }
.ad-rise { transform-origin: 50% 100%; }
.ad-ground, .ad-progress, .ad-line { transform-origin: 0 50%; }
.ad-spot__title { margin: var(--tt-space-4) 0 var(--tt-space-2); font-family: var(--font-display); font-weight: 900; font-size: 27px; line-height: 30px; letter-spacing: -0.025em; }
.ad-spot__line { margin: 0; max-width: 22em; font-family: var(--font-text); font-size: 17px; line-height: 26px; color: var(--tt-text-secondary); }
.ab-ready .ad-spot :is(.ad-spot__title, .ad-spot__line) { transition: opacity 0.6s var(--ab-ease) calc(0.2s + var(--i) * 0.12s), translate 0.6s var(--ab-ease) calc(0.2s + var(--i) * 0.12s); }
.ab-ready .ad-spot:not(.is-in) :is(.ad-spot__title, .ad-spot__line) { opacity: 0; translate: 0 20px; }
.ab-ready .ad-spot .ad-rise { transition: transform 0.6s var(--ab-ease) calc(0.4s + var(--j) * 0.12s); }
.ab-ready .ad-spot .ad-ground { transition: transform 0.6s var(--ab-ease) 0.2s; }
.ab-ready .ad-spot .ad-line { transition: transform 0.5s var(--ab-ease) calc(0.3s + var(--j) * 0.14s); }
.ab-ready .ad-spot .ad-progress { transition: transform 3s linear 0.6s; }
.ab-ready .ad-spot .ad-play, .ab-ready .ad-spot circle.ad-ink { transition: opacity 0.6s var(--ab-ease) 0.3s; }
.ab-ready .ad-spot:not(.is-in) .ad-rise { transform: scaleY(0); }
.ab-ready .ad-spot:not(.is-in) :is(.ad-ground, .ad-line, .ad-progress) { transform: scaleX(0); }
.ab-ready .ad-spot:not(.is-in) :is(.ad-play, circle.ad-ink) { opacity: 0; }

/* --------------------------------------------------------------------- rules */
.ad-rulelist { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--tt-border); }
.ad-rule { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--tt-space-4); align-items: baseline; padding: var(--tt-space-5) 0; }
.ad-rule::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: var(--tt-border); transform-origin: 0 50%; }
.ad-rule__n { font-family: var(--font-ui); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--tt-text-secondary); }
.ad-rule__text { font-family: var(--font-display); font-weight: 900; font-size: clamp(21px, 2vw, 27px); line-height: 1.15; letter-spacing: -0.02em; }
.ab-ready .ad-rule::before { transition: transform 0.7s var(--ab-ease) calc(var(--i) * 0.08s); }
.ab-ready .ad-rule > * { transition: opacity 0.6s var(--ab-ease) calc(0.15s + var(--i) * 0.08s), translate 0.6s var(--ab-ease) calc(0.15s + var(--i) * 0.08s); }
.ab-ready .ad-rule:not(.is-in)::before { transform: scaleX(0); }
.ab-ready .ad-rule:not(.is-in) > * { opacity: 0; translate: -24px 0; }
.ad-small { margin: var(--tt-space-5) 0 0; max-width: 36em; font-family: var(--font-ui); font-size: 15px; line-height: 22px; color: var(--tt-text-secondary); }

@media (max-width: 1023px) { .ad-spots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .ad-spots { grid-template-columns: minmax(0, 1fr); } }