/* The top ad band (_ad_rail.html + static/js/ads.js): a slider across the whole window. Every ad sits on a white
   card exactly as wide as the main column below and centred over it (the script measures the columns and sets
   --band-slot, --band-h, --band-gap, --band-centre); the cards beside it are spaced like the columns, so they end
   where the left menu ends and start where the right column starts, and run on to the window edges.
   Cards are 3:1; a picture of another shape shows whole inside its card, never cropped or stretched. */
:root { --top-banner-ratio: 3 / 1; }
.ad-band,
.home-refresh .ad-band {
  --band-slot: min(900px, calc(100vw - 32px));   /* until the script has measured, or without it */
  --band-h: calc(var(--band-slot) / 3);
  --band-gap: 24px;
  --band-centre: 50%;
  position: relative;
  margin: 0;
  padding: 12px 0 0;
  border: 0;
  background: transparent;
}
/* On the home page the columns start right below, so the band brings the same gap the columns keep. */
.home-refresh .ad-band { padding-bottom: 12px; }
.ad-band-viewport {
  overflow: hidden;
  padding: 4px 0 12px;              /* room for the cards' shadow */
  touch-action: pan-y;
}
.ad-band-track {
  display: flex;
  justify-content: center;   /* before the script runs, or with a single ad */
  gap: var(--band-gap);
  height: var(--band-h);
  transition: transform 700ms cubic-bezier(.22, .8, .24, 1);
  will-change: transform;
}
.ad-band[data-ready] .ad-band-track { justify-content: flex-start; }
.ad-band-track.is-instant,
.ad-band-track.is-instant > * { transition: none; }
.ad-band-slide {
  flex: 0 0 var(--band-slot);
  display: block;
  width: var(--band-slot);
  height: var(--band-h);
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 0 0 1px #d9e6f4, 0 8px 20px -12px #17366540;
  -webkit-user-drag: none;
  transition: opacity 500ms ease, filter 500ms ease;
}
.ad-band-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
}
/* Once it is a slider, the ads at the sides fade back (full size, so their edges stay lined up). */
.ad-band[data-ready] .ad-band-slide:not(.is-current) { opacity: .55; filter: saturate(.85); cursor: pointer; }
.ad-band[data-ready] .ad-band-slide:not(.is-current):hover { opacity: .8; }
.ad-band-slide:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }

/* The arrows sit on the edges of the middle card. */
.ad-band-arrow {
  position: absolute;
  top: calc(16px + var(--band-h) / 2);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #d9e6f4;
  border-radius: 50%;
  background: #fffffff2;
  color: #203958;
  box-shadow: 0 6px 18px -8px #17366566;
  cursor: pointer;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 200ms ease, background 200ms ease;
}
.ad-band-arrow[hidden] { display: none; }
.ad-band-prev { left: calc(var(--band-centre) - var(--band-slot) / 2); }
.ad-band-next { left: calc(var(--band-centre) + var(--band-slot) / 2); }
.ad-band-arrow .icon { width: 22px; height: 22px; stroke-width: 2.2; }
.ad-band:hover .ad-band-arrow,
.ad-band-arrow:focus-visible { opacity: 1; }
.ad-band-arrow:hover { background: #fff; color: var(--blue-dark); }
.ad-band-arrow:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
@media (hover: none) { .ad-band-arrow { display: none; } }

@media (max-width: 620px) {
  .ad-band,
  .home-refresh .ad-band { padding-top: 10px; }
  .home-refresh .ad-band { padding-bottom: 4px; }
  .ad-band-viewport { padding-bottom: 8px; }
  .ad-band-slide { border-radius: 12px; }
  .ad-band-arrow { top: calc(14px + var(--band-h) / 2); }
}
@media (prefers-reduced-motion: reduce) {
  .ad-band-track, .ad-band-slide { transition: none; }
}

/* Keep dimension guidance outside the shallow banner so it stays readable. */
.ad-upload-guide { margin: 0 0 12px; padding: 14px 16px; border: 1px solid #dbe7f4; border-radius: 10px; background: #f3f8ff; }
.ad-upload-guide strong { display: block; color: #204879; font-size: 16px; line-height: 1.6; }
.ad-upload-guide p { margin: 6px 0 0; color: #5f6e86; font-size: 13px; line-height: 1.7; }
.ad-preview-spec { margin: 0 24px 16px; color: #425b7e; font-size: 14px; font-weight: 600; line-height: 1.6; }
.ad-preview-spec span { display: block; }
.ad-preview-spec [data-preview-placement] { color: #203958; margin-bottom: 4px; }
.ad-preview-spec [data-image-dimensions] { margin-top: 4px; color: #5f6e86; font-size: 13px; font-weight: 400; }
.ad-preview-spec [hidden] { display: none; }
.ad-forum-preview[data-placement="banner"] .ad-image-preview { aspect-ratio: var(--top-banner-ratio); border: 0; box-shadow: 0 0 0 1px #d5deea; }
.ad-forum-preview[data-placement="banner"] .ad-preview-board,
.ad-forum-preview[data-placement="banner"] .ad-preview-board + .ad-mock-rows { display: none; }
.ad-forum-preview[data-placement="rail"] .ad-image-preview { aspect-ratio: 1 / 3; max-width: 180px; margin-inline: auto; }
.ad-forum-preview[data-placement="dining"] .ad-image-preview { aspect-ratio: 3 / 1; }
.ad-forum-preview[data-placement="banner"] .ad-image-preview .ad-tag { display: none; }
.ad-forum-preview .ad-image-preview img { display: block; object-fit: contain; }
.ad-forum-preview .ad-image-preview img[hidden] { display: none; }
.ad-forum-preview .ad-image-preview figcaption[hidden] { display: none; }
.ad-forum-preview[data-placement="banner"] .ad-image-preview figcaption .icon { width: 20px; height: 20px; }
.ad-preview-example { display: block; margin: 14px 24px 0; font-size: 13px; color: #245abb; text-decoration: underline; text-underline-offset: 3px; }
.ad-preview-example[hidden] { display: none; }
.ad-template-download { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 16px 24px 24px; padding: 12px 16px; border: 1px solid #c7d9f5; border-radius: 10px; color: #2155a7; background: #f1f6ff; font-size: 14px; font-weight: 650; }
.ad-template-download:hover { background: #e7f0ff; border-color: #91b4ed; }
.ad-template-download .icon { width: 17px; height: 17px; transform: rotate(90deg); }

@media (max-width: 620px) {
  .ad-preview-spec { margin-inline: 20px; }
  .ad-preview-example { margin-inline: 20px; }
  .ad-template-download { margin-inline: 20px; }
}

/* The small ads in the right column (_sidebar_ads.html): the same 24px gap the page columns keep, and a soft
   shadow, so each card stands on its own (owner, 2026-10-07: "space out the smaller ads"). */
.rail-ads .sidebar-ad-stack,
.home-screen .rail-ads .sidebar-ad-stack,
.sidebar .rail-ads .sidebar-ad-stack { gap: 24px; }
.rail-ads .sidebar-ad { box-shadow: 0 8px 20px -14px #17366555; }
/* Wide screens: the right column's ads stick while the page scrolls, inside a box capped at the screen's height
   (editorial.css). When three cards were taller than that, the stack squeezed them into each other and cut them
   off. Each card is now sized so all three always fit with their gaps (a little smaller, as the owner asked),
   centred in the column; nothing is squeezed or clipped. */
@media (min-width: 1200px) {
  .sidebar .rail-ads .sidebar-ad-stack { max-height: none; overflow: visible; }
  .sidebar .rail-ads .sidebar-ad,
  .sidebar .rail-ads .rail-slot {
    justify-self: center;
    width: min(100%, calc((100vh - 220px) / 3 * 6 / 5));
  }
}