/* Ad rails — the sponsor slots that sit either side of the page.
   Injected by ads.js on content pages only (never lessons, quiz, games,
   practise or account pages: see RAIL_PAGES in ads.js).

   Two hard rules drive every choice below.

   1. NEVER MOVE THE ARTICLE. The rails are `position: fixed` in the margins
      and only exist above 1600px, where there is genuinely empty space
      either side of the text column. They cannot push, narrow or reflow the
      content, so they cost nothing in layout shift and nothing in reading
      width on a laptop.
   2. NEVER DELAY THE FIRST SCREEN. On phones there is no top strip — a
      banner above the article is the classic way to wreck LCP and the exact
      thing the whole page-experience bet depends on avoiding. Phones get a
      single compact strip pinned to the bottom instead, out of the way of
      the words. */

:root {
  --ad-rail-width: 176px;
  --ad-rail-gap: 14px;
  /* Half the widest content column on the site (.main-wide is 1180px), plus
     20px of clearance. Every rail offset is measured from this, so the rails
     cannot land on the words no matter which page they are on. */
  --ad-content-half: 610px;
}

/* --- Shared card ---------------------------------------------------------- */

.ad-card {
  display: block;
  text-decoration: none;
  /* An <a> with no colour of its own inherits the UA default — and the
     invite card was rendering in link blue because every other card happened
     to set colour on its children. Anchors in the rails must always declare
     one. */
  color: var(--navy, #1e3a5f);
  border-radius: 14px;
  padding: 18px 16px;
  text-align: center;
  border: 1px solid transparent;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.ad-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(41, 37, 36, 0.1);
}
.ad-card-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.75);
  font-size: 21px;
  margin-bottom: 10px;
}
.ad-card-ico img { width: 28px; height: 28px; border-radius: 7px; object-fit: cover; }
.ad-card-name {
  display: block;
  font-weight: 700;
  font-size: 15px;
  color: var(--navy, #1e3a5f);
  line-height: 1.3;
}
.ad-card-tag {
  display: block;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted, #78716c);
  margin-top: 5px;
}

/* Tones. Deliberately pale: these sit beside long-form reading, and a
   saturated block in the corner of the eye is what makes a page feel cheap. */
.ad-tone-saffron { background: #fdf1e0; }
.ad-tone-blue    { background: #e9eefb; }
.ad-tone-green   { background: #e8f5ec; }
.ad-tone-pink    { background: #fbeaf0; }
.ad-tone-purple  { background: #f0ebfa; }
.ad-tone-teal    { background: #e4f3f3; }
.ad-tone-grey    { background: #f1f0ee; }

/* The last card: buy the space. Dashed so it reads as an empty slot. */
/* Opaque, not transparent. The rails are fixed, so whatever is behind them
   scrolls — including the navy footer, against which a transparent card with
   dark text simply vanished. Every card in the rail carries its own
   background for that reason. */
.ad-card--invite {
  background: var(--warm-white, #FFFBF5);
  border: 1.5px dashed rgba(124, 45, 18, 0.28);
}
.ad-card--invite .ad-card-ico { background: rgba(124, 45, 18, 0.06); }
.ad-card--invite:hover { border-color: var(--saffron, #d97706); }
.ad-card-spots {
  display: block;
  font-size: 11.5px;
  color: var(--text-muted, #78716c);
  margin-top: 6px;
}

/* --- Desktop rails -------------------------------------------------------- */

.ad-rail { display: none; }

/* 1600px is where the arithmetic actually works: a 1180px article leaves
   210px of margin each side, and a 176px rail plus clearance needs all of it.
   Anything narrower — including a 1440 or 1536 laptop — gets the bottom strip
   instead. That is a deliberate trade: the alternative is narrowing the
   article on every page to make room, which would cost every reader column
   width to serve an advert. The words win. */
@media (min-width: 1600px) {
  .ad-rail {
    display: flex;
    flex-direction: column;
    gap: var(--ad-rail-gap);
    position: fixed;
    top: 96px;
    width: var(--ad-rail-width);
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    z-index: 20;
    /* Scrollbar only when it is actually needed, and never a visible track:
       a scrollbar in the margin looks like a bug. */
    scrollbar-width: none;
  }
  .ad-rail::-webkit-scrollbar { display: none; }
  .ad-rail-left { left: max(14px, calc(50vw - var(--ad-content-half) - var(--ad-rail-width))); }
  .ad-rail-right { right: max(14px, calc(50vw - var(--ad-content-half) - var(--ad-rail-width))); }

  /* Stand down over the footer. The rails are fixed and the footer is dark,
     so at the bottom of the page pale cards float on navy looking like a
     rendering fault. Rather than restyling every card for a second
     background, they retire when the reader reaches the end — which is also
     when they have finished doing their job. ads.js sets this class from an
     IntersectionObserver on the footer. */
  .ad-rail {
    transition: opacity 0.35s ease, transform 0.35s ease;
  }
  .ad-rail.ad-rail--retired {
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ad-rail { transition: opacity 0.01s linear; }
  .ad-rail.ad-rail--retired { transform: none; }
}

/* Very tall rails on short screens would clip the last card; fade the edge so
   it reads as scrollable rather than broken. */
@media (min-width: 1600px) {
  .ad-rail::after {
    content: "";
    display: block;
    min-height: 4px;
  }
}

/* --- Mobile / tablet strip ------------------------------------------------ */

.ad-strip {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  gap: 10px;
  padding: 9px 12px calc(9px + env(safe-area-inset-bottom, 0px));
  overflow-x: auto;
  background: rgba(255, 253, 247, 0.94);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(124, 45, 18, 0.12);
  scrollbar-width: none;
}
.ad-strip::-webkit-scrollbar { display: none; }

@media (min-width: 1600px) { .ad-strip { display: none; } }

.ad-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  text-decoration: none;
  border-radius: 999px;
  padding: 7px 15px 7px 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy, #1e3a5f);
  white-space: nowrap;
  border: 1px solid transparent;
}
.ad-pill-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
  font-size: 14px;
}
.ad-pill-ico img { width: 18px; height: 18px; border-radius: 5px; object-fit: cover; }
.ad-pill--invite { background: transparent; border: 1.5px dashed rgba(124, 45, 18, 0.3); }

/* The strip covers the last line of the page; give the document somewhere to
   end. Set on <body> by ads.js only when a strip is actually rendered. */
body.has-ad-strip { padding-bottom: 62px; }

/* The install prompt and feedback launcher live in the same corner — lift
   them above the strip so nothing is ever stacked on top of a paid slot. */
body.has-ad-strip .lp-nudge { bottom: 74px; }

@media print {
  .ad-rail, .ad-strip { display: none !important; }
}