/* ============================================================
   Advertisement ads section — two rotating ad cards in one row.
   Page-scoped component CSS. Theme colours (navy + maroon).
   Assumes site base html font-size 62.5% (1rem = 10px).
   ============================================================ */
.ad-section { padding: 4.5rem 0 1rem; }
.ad-duo { --ad-ink: var(--headerBg, #00002a); --ad-red: var(--maroon, #d00c27); --ad-tint: #e3e6f5; display: grid; grid-template-columns: 1fr 1fr; gap: 2.2rem; }
.ad-duo.is-single { grid-template-columns: 1fr; }

.ad { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 1; background: var(--ad-tint); border-radius: 2.2rem; box-shadow: 0 .8rem 2rem rgba(0,0,42,.15); }
.ad:focus-visible { outline: .2rem solid var(--ad-red); outline-offset: .2rem; }
.ad:hover { opacity: .95; }
.ad-tag { position: absolute; top: 1.2rem; right: 1.4rem; z-index: 5; padding: .3rem .9rem; border-radius: .8rem; background: #fff; font-size: 1.05rem; font-weight: 700; color: var(--ad-ink); }
.ad-s { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.ad-s.on { opacity: 1; }
.ad img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ad-dots { position: absolute; left: 0; right: 0; bottom: 1rem; z-index: 5; display: flex; justify-content: center; gap: .6rem; }
.ad-dots i { width: .8rem; height: .8rem; border-radius: 1rem; background: rgba(255,255,255,.7); box-shadow: 0 .1rem .4rem rgba(0,0,42,.4); transition: width .3s, background .3s; }
.ad-dots i.on { width: 2.2rem; background: var(--ad-red); }

@media (max-width: 991px) { .ad-duo { grid-template-columns: 1fr; } }
@media (max-width: 575px) { .ad { aspect-ratio: 16 / 9; } }
@media (prefers-reduced-motion: reduce) { .ad-s { transition: none; } }