/* ======================================================================
   IN-STORY ADVERT POPUP (blog/story_detail.html + blog/js/story-ads.js)
   A small card fixed to the bottom-left corner. The script builds it and
   appends it to <body>, so it takes no room in the reading column.

   Stacking (z-index): 150 here. That is above the page and the sticky
   header (100), and BELOW everything the reader can act on:
     200   floating social buttons (right corner)
     260   newsletter sheet
     1400  continue-reading popup  <- the advert always sits behind this one
   Colour comes only from the site's theme tokens (--surface, --ink,
   --brand-deep ...), which html[data-theme="dark"] already redefines, so the
   card follows the light/dark switch with no rules of its own.
   ====================================================================== */
.story-ad {
  --story-ad-img: 112px;
  position: fixed;
  left: calc(12px + env(safe-area-inset-left, 0px));
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 150;
  box-sizing: border-box;
  /* 84px: stay clear of the floating social buttons (46px wide, 16px from
     the right edge) on a narrow phone */
  width: min(340px, calc(100vw - 84px));
  background: var(--surface);
  border: 1px solid var(--line);
  border-color: color-mix(in srgb, var(--ink) 26%, transparent);
  box-shadow: var(--shadow-raised);
  overflow: hidden;
  animation: story-ad-in 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.story-ad:hover { border-color: var(--brand-deep); }

.story-ad.is-leaving {
  pointer-events: none;
  animation: story-ad-out 0.28s cubic-bezier(0.4, 0, 1, 1) both;
}

@keyframes story-ad-in {
  from { opacity: 0; transform: translateY(calc(100% + 24px)); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes story-ad-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(calc(100% + 24px)); }
}

/* ---------- one link around picture, label, heading and text ---------- */
.story-ad-link {
  display: flex;
  align-items: stretch;
  min-height: 92px;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
a.story-ad-link { cursor: pointer; }
a.story-ad-link:hover .story-ad-heading {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}
a.story-ad-link:focus-visible {
  outline: 2px solid var(--brand-deep);
  outline-offset: -3px;
}

.story-ad-media {
  position: relative;
  flex: none;
  display: block;
  width: var(--story-ad-img);
  background: var(--paper-dim);
}
.story-ad-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-ad-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  /* the extra bottom padding keeps text clear of the timer bar */
  padding: 10px 12px 14px;
}

/* the "Ads" label: the parallelogram chip the home page adverts already use,
   on the same pair of tokens, so it stays sharp in both themes */
.story-ad-tag {
  flex: none;
  padding: 1px 9px 1px 7px;
  background: var(--brand-deep);
  color: var(--paper);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.6;
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}

.story-ad-heading,
.story-ad-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: anywhere;
  color: var(--ink);
}
.story-ad-heading {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.28;
}
.story-ad-text {
  font-size: 0.8rem;
  line-height: 1.38;
}

/* ---------- close button ----------
   A square tab in the top-right corner, a sibling of the link (not inside
   it). 40x32 sits level with the "Ads" chip row, so it never covers the
   heading; coarse pointers (touch) get a bigger target. Solid --surface and
   --ink keep it sharp in both themes. */
.story-ad-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 32px;
  padding: 0;
  color: var(--ink);
  background: var(--surface);
  border: 0;
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-color: color-mix(in srgb, var(--ink) 26%, transparent);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.story-ad-close svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: square;
}
.story-ad-close:hover {
  color: var(--paper);
  background: var(--ink);
}
.story-ad-close:focus-visible {
  outline: 2px solid var(--brand-deep);
  outline-offset: -3px;
}
@media (pointer: coarse) {
  .story-ad-close { width: 44px; height: 36px; }
}

/* ---------- progress bar: full at first, drains right to left ----------
   The bar is anchored on the left and shrinks toward it, so its right end
   travels left. story-ads.js removes the popup on this animation's end. */
.story-ad-timer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  background: var(--line);
  background: color-mix(in srgb, var(--ink) 14%, transparent);
  pointer-events: none;
}
.story-ad-timer-bar {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--brand-deep);
  transform-origin: left center;
  animation: story-ad-drain var(--story-ad-show, 10s) linear forwards;
}
@keyframes story-ad-drain {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

/* ---------- small phones ---------- */
@media (max-width: 400px) {
  .story-ad { --story-ad-img: 84px; }
  .story-ad-link { min-height: 84px; }
  .story-ad-copy { padding: 8px 10px 13px; }
  .story-ad-heading { font-size: 0.85rem; }
  .story-ad-text { font-size: 0.76rem; }
}

/* ---------- floating social buttons laid out as a ROW ----------
   The reader can switch that stack from a column to a row (it then spreads
   left along the bottom edge and would sit over this card on a narrow
   screen), so on phones the card rises above it. 24px + 46px + a 12px gap. */
@media (max-width: 620px) {
  body:has(.fab-stack.is-horizontal) .story-ad {
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------- motion and print ----------
   Reduced motion: the popup fades instead of sliding. The bar keeps draining
   because it is the countdown the reader is told about, not decoration. */
@keyframes story-ad-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes story-ad-fade-out { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .story-ad { animation: story-ad-fade-in 0.2s ease both; }
  .story-ad.is-leaving { animation: story-ad-fade-out 0.2s ease both; }
}

@media print {
  .story-ad { display: none; }
}