/* Advertising surfaces added 2026-09-21: the rotating banner strip at the top of every page (_ad_rail.html)
   and the banner under an article body (_ad_inline.html). Loaded after the page's own stylesheet. */

.ad-rail {
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #fbfdff, #f3f7ff);
}

.ad-rail-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
}

.ad-rail-tag {
  flex-shrink: 0;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.ad-rail-stage {
  flex: 1;
  min-width: 0;
}

/* One turn: a wide image banner, the advertiser's or ours. */
.ad-rail-slide {
  position: relative;
  display: flex;
  overflow: hidden;
  align-items: center;
  height: 124px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 1px 2px #1736650a;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.ad-rail-slide:hover {
  border-color: #c3d6f8;
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

/* A booked creative fills the strip; anything not 8:1 is centred rather than stretched. */
.ad-rail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.ad-rail-business {
  position: absolute;
  right: 10px;
  bottom: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #182b50b8;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

/* House turns: the artwork sits on the right, its quiet side carries the words. */
.ad-rail-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

.ad-rail-house::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #fffefb 30%, #fffefbdb 46%, #fffefb45 64%, transparent 78%);
  content: "";
}

.ad-rail-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  padding-left: 24px;
  line-height: 1.35;
}

.ad-rail-copy strong { font-size: 20px; }

.ad-rail-copy > span {
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ad-rail-action {
  position: relative;
  z-index: 1;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  margin-right: 22px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.ad-rail-slide:hover .ad-rail-action { background: var(--blue-dark); }

.ad-rail-action .icon { width: 14px; height: 14px; }

.ad-rail-dots {
  display: flex;
  flex-shrink: 0;
  gap: 6px;
}

.ad-rail-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border-radius: 50%;
  background: #c8d4e8;
  transition: background 0.2s, transform 0.2s;
}

.ad-rail-dots button[aria-selected="true"] {
  background: var(--blue);
  transform: scale(1.35);
}

/* One turn fading into the next. The script adds this class for the length of the animation only. */
.ad-rail-slide.is-entering { animation: ad-rail-in 0.5s ease both; }

@keyframes ad-rail-in {
  from { opacity: 0; transform: translateY(8px); }
}

.inline-ad { margin: 26px 0 4px; }

.inline-ad a {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.inline-ad img { width: 100%; }

.inline-ad .ad-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #182b50cc;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

@media (max-width: 900px) {
  .ad-rail-slide { height: 110px; }
  .ad-rail-copy { padding-left: 18px; }
  .ad-rail-copy strong { font-size: 16px; }
  .ad-rail-action { margin-right: 16px; padding: 7px 13px; }
  .ad-rail-action .icon { display: none; }
}

@media (max-width: 560px) {
  .ad-rail-tag, .ad-rail-dots { display: none; }
  .ad-rail-inner { padding: 10px 0; }
  .ad-rail-slide { height: 96px; border-radius: 12px; }
  .ad-rail-copy { padding-left: 14px; }
  .ad-rail-copy strong { font-size: 15px; }
  .ad-rail-copy > span { font-size: 12px; }
  .ad-rail-action { margin-right: 12px; padding: 6px 11px; font-size: 12px; }
  .ad-rail-house::after,
  .ad-rail-house-crown::after { background: linear-gradient(90deg, #fffdf7 54%, #fffdf7b0 70%, transparent 88%); }
}

@media (prefers-reduced-motion: reduce) {
  .ad-rail-slide, .ad-rail-dots button { transition: none; }
  .ad-rail-slide.is-entering { animation: none; }
}

/* ------------------------------------------------- left rail (_ad_side.html) */
/* The menu and the tall ad under it travel together as one sticky column. */
.rail-column {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  align-self: start;
  gap: 14px;
}

.rail-column .category-rail { position: static; top: auto; }

.rail-ad a {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.rail-ad img { width: 100%; }

.rail-ad .ad-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #182b50cc;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.rail-ad-house a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px 14px 14px;
  border-style: dashed;
  border-color: #cfdffb;
  background: linear-gradient(170deg, #fff, var(--tint));
  transition: border-color 0.2s, box-shadow 0.2s;
}

.rail-ad-house a:hover {
  border-color: var(--blue);
  box-shadow: var(--shadow);
}

.rail-ad-eyebrow {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.rail-ad-house .icon {
  width: 24px;
  height: 24px;
  color: var(--blue);
}

.rail-ad-house strong {
  font-size: 15px;
  line-height: 1.35;
}

.rail-ad-text {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.rail-ad-action {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  color: var(--blue);
  font-size: 12.5px;
  font-weight: 700;
}

.rail-ad-action .icon { width: 13px; height: 13px; color: inherit; }

/* Below this width the menu becomes a horizontal strip, so the column steps out of the way. */
@media (max-width: 1199px) {
  .rail-column { display: contents; }
  .rail-ad { display: none; }
}