/* ============================================================
   Affiliate ad card — shared by the event page and blog posts.

   Colours come from custom properties the *host page* defines: event.css
   declares them globally, and blog.css scopes them onto .bw-ad-slot. A page
   including this file without defining them still renders a usable card, just
   an unstyled-grey one.
   ============================================================ */

.bw-ad-recs{margin-bottom:.6rem}
.bw-aff-card{background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden}
.bw-aff-header{display:flex;align-items:center;justify-content:space-between;padding:.7rem 1rem .5rem}
.bw-aff-brand{display:flex;align-items:center;gap:.5rem}
.bw-aff-logo{color:#1b6b38;font-size:1.35rem;line-height:1}
.bw-aff-title{font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#1b6b38}
.bw-aff-nav-btn{background:none;border:1px solid var(--border);border-radius:99px;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-lt);font-size:.6rem;padding:0;transition:border-color .15s,color .15s;line-height:1}
.bw-aff-nav-btn:hover{border-color:var(--rust);color:var(--rust)}
.bw-aff-ad{display:flex;align-items:center;gap:1rem;padding:.35rem 1rem .9rem;text-decoration:none;color:inherit;transition:opacity .15s}
.bw-aff-ad:hover{opacity:.85}
.bw-aff-img-wrap{width:96px;height:96px;flex-shrink:0;border-radius:10px;background:#f5f0e8;overflow:hidden;display:flex;align-items:center;justify-content:center}
.bw-aff-ad-img{width:100%;height:100%;object-fit:cover}
.bw-aff-ad-placeholder{font-size:1.8rem;color:#ccc}
.bw-aff-ad-name{font-size:1.2rem;font-weight:700;color:var(--text);line-height:1.25}
.bw-aff-disclosure{border-top:1px solid var(--border);padding:.55rem 1rem;display:flex;gap:.5rem;align-items:flex-start;font-size:.65rem;color:var(--text-lt);line-height:1.5}
.bw-aff-disc-icon{flex-shrink:0;margin-top:.15rem}

/* skeleton */
.bw-aff-skel-body{display:flex;align-items:center;gap:1rem;padding:.35rem 1rem .9rem}
.bw-skel-block{border-radius:10px;background:linear-gradient(90deg,#ece8e2 25%,#f5f2ee 50%,#ece8e2 75%);background-size:200% 100%;animation:bwShimmer 1.5s ease-in-out infinite}
@keyframes bwShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Rail variant: the default card is a 96px image beside the text, which is
   cramped in a 300px column, so stack instead. */
.bw-aff-card--rail .bw-aff-ad{flex-direction:column;align-items:stretch;gap:.7rem}
.bw-aff-card--rail .bw-aff-img-wrap{width:100%;height:180px}
.bw-aff-card--rail .bw-aff-skel-body{flex-direction:column;align-items:stretch}
.bw-aff-card--rail .bw-aff-skel-body>.bw-skel-block:first-child{width:100%!important;height:180px!important}

/* Inline variant: sits mid-article at full measure, so it reads as a strip
   rather than a card — a 96px square beside two lines of text leaves a hole in
   the column at that width. */
.bw-aff-card--inline{margin:1.75rem 0}
.bw-aff-card--inline .bw-aff-ad{gap:.85rem;padding:.35rem .85rem .75rem}
.bw-aff-card--inline .bw-aff-img-wrap{width:64px;height:64px}
.bw-aff-card--inline .bw-aff-ad-name{font-size:1rem}
.bw-aff-card--inline .bw-aff-header{padding:.55rem .85rem .35rem}
.bw-aff-card--inline .bw-aff-disclosure{padding:.45rem .85rem}

/* The rotation control replaces the retired pager and reuses its button. */
.bw-aff-rotate{margin-left:auto;position:absolute;top:.7rem;right:1rem;text-decoration:none}
.bw-aff-card{position:relative}

/* A slot that matched nothing still ships its wrapper, so the swap has a target;
   it just takes up no room. */
.bw-ad-slot.is-empty{display:none}

/* An inline slot is a <span> in flowing text — CommonMark wraps a lone [ad]
   token in a <p> — so it has to be told to behave as a block. */
span.bw-ad-slot{display:block}