/* ==========================================================================
   Affiliate banner component — Phase 11AF (infrastructure only)
   --------------------------------------------------------------------------
   A small, self-contained stylesheet for contextual affiliate BANNER units
   (distinct from the text/CTA `.aff` component in styles.css). Everything is
   namespaced under `.aff-banner`, so this file has ZERO effect until a page
   both links it AND includes the markup. No page does so in this phase.

   Design intent (matches the site's restrained, editorial affiliate style):
     - clearly identifiable as promotional (a plain "Sponsored" label + rule)
     - never mimics Google Ads or editorial cards; no fake ratings/urgency
     - creatives are shown at their true aspect ratio, never cropped/stretched
     - fully responsive: images cap at their intrinsic width and never overflow
       the article container or cause horizontal scroll on mobile.

   Tokens (--ink, --muted, --line, --cta, --radius-card, --container-*) are the
   site's existing design variables defined in :root in styles.css.
   ========================================================================== */

.aff-banner {
  /* Centred block that respects the article measure; margins give it breathing
     room without shouting. `width:fit-content` keeps the frame tight to the
     (capped) creative so small units aren't stranded in a wide empty box. */
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  margin: 2rem auto;
  padding: 14px 16px 12px;
  background: #fff;
  border: 1px solid var(--line, #dfe4e8);
  border-radius: var(--radius-card, 10px);
}

/* "Sponsored" eyebrow — small, muted, unmistakable, never dressed up. */
.aff-banner__label {
  margin: 0 0 .5rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted, #6b7280);
}

.aff-banner__link {
  display: block;
  line-height: 0;              /* removes descender gap under the image */
  border-radius: 6px;
}
.aff-banner__link:focus-visible {
  outline: 3px solid var(--price-blue, #14324a);
  outline-offset: 3px;
}

/* The creative itself. width/height attributes on the <img> supply the intrinsic
   ratio; these rules keep it fluid and undistorted at any container width. */
.aff-banner__img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;               /* preserves aspect ratio — no crop, no stretch */
}

.aff-banner__disclosure {
  margin: .7rem 0 0;
  padding-top: .6rem;
  border-top: 1px solid var(--line, #dfe4e8);
  font-size: .8rem;
  line-height: 1.5;
  color: var(--muted, #6b7280);
  max-width: 46ch;
}
/* Lead variant: disclosure shown ABOVE the creative (first/only unit on a page,
   so the disclosure precedes the affiliate link). No top divider needed here. */
.aff-banner__disclosure--lead {
  margin: 0 0 .7rem;
  padding-top: 0;
  border-top: 0;
}
.aff-banner__disclosure strong { color: var(--ink-soft, #45525f); }

/* --------------------------------------------------------------------------
   Page-level affiliate disclosure (Phase 12F). One concise, centred note per
   monetized article, placed just before the first sponsored unit. This
   replaces per-banner disclosure repetition: banner cards now carry only the
   "Sponsored" label + link, while transparency lives in this single, clearly
   visible page-level note (plus the site-wide footer disclosure). It is not a
   promotional element, so it is deliberately small and muted.
   -------------------------------------------------------------------------- */
.aff-page-disclosure {
  max-width: 62ch;
  margin: 2.25rem auto .25rem;
  text-align: center;
  font-size: .85rem;
  line-height: 1.55;
  color: var(--muted, #6b7280);
}
.aff-page-disclosure strong { color: var(--ink-soft, #45525f); }

/* --------------------------------------------------------------------------
   Shape variants — each caps the creative's *display* width so large square/
   landscape product images don't dominate the column, while the small IAB
   GIFs render at (or below) their native size. `max-width:100%` on the image
   always wins on narrow screens, so nothing ever overflows.
   -------------------------------------------------------------------------- */

/* PawBiotix 1080x1080 */
.aff-banner--square   .aff-banner__img { width: 420px; }
/* PawBiotix 1500x1000 */
.aff-banner--landscape .aff-banner__img { width: 560px; }
/* Brain Training 300x600 skyscraper — sidebar/inline tower */
.aff-banner--tower    .aff-banner__img { width: 300px; }
/* Brain Training 336x280 / 300x250 — compact in-content unit at native size */
.aff-banner--inline   .aff-banner__img { width: 336px; }
/* Wide editorial product banner (e.g. 1600x640 2.5:1 owner-supplied creatives).
   Prominent but capped to the article measure so it never becomes a storefront
   tile or overruns the reading column on desktop. */
.aff-banner--wide     .aff-banner__img { width: 640px; }

/* Optional visible text call-to-action shown beneath a clickable banner image.
   Ensures the unit does not rely on text baked into the creative for either
   accessibility or a real, focusable link target. Resets the link's line-height:0. */
.aff-banner__cta {
  display: inline-block;
  margin-top: .75rem;
  padding: .55rem 1.15rem;
  background: var(--cta, #e2683c);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.25;
  border-radius: 8px;
}
.aff-banner__link:hover .aff-banner__cta { background: var(--cta-hover, #c4552c); }

/* Optional sidebar affinity: when placed in a rail, keep the tower snug. */
.aff-banner--sidebar { margin-left: 0; margin-right: 0; }

/* --------------------------------------------------------------------------
   Responsive: on narrow viewports let every variant shrink to the column.
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .aff-banner { padding: 12px 12px 10px; }
  .aff-banner--square   .aff-banner__img,
  .aff-banner--landscape .aff-banner__img,
  .aff-banner--tower    .aff-banner__img,
  .aff-banner--wide     .aff-banner__img,
  .aff-banner--inline   .aff-banner__img { width: 100%; }
}

/* Respect reduced-motion preferences for animated GIF creatives is not
   possible via CSS (GIF animation can't be paused with CSS), so animated
   creatives are chosen deliberately at placement time, not forced everywhere. */