/* Site-wide promo slots (Stage 1).
   Spec: docs/superpowers/specs/2026-10-01-promo-slots-design.md
   Kept out of css/style.php so design-locked selectors stay untouched. */

/* Side rails: only on wide, tall screens; stay in view below the ticker. */
.qs2-rail { display: none; }

@media (min-width: 1600px) and (min-height: 720px) {
  :root {
    --qs2-rail-w: clamp(200px, calc((100vw - 1140px) / 2 - 40px), 300px);
    /* Distance from the window edge to a rail's outer edge (rails are centred in each margin). */
    --qs2-rail-edge: calc((100vw - 1140px) / 4 - var(--qs2-rail-w) / 2);
  }
  .qs2-rail {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;           /* a card that doesn't fit wraps to a hidden second column */
    align-content: flex-start;
    gap: 16px;
    position: fixed;
    top: 200px;      /* below the header and ticker */
    bottom: 120px;   /* ends above the chat orb (bottom-right) */
    width: var(--qs2-rail-w);
    overflow: hidden;
    z-index: 2;      /* the footer and band (z-index 3) slide over the rails */
  }
  .qs2-rail > .qs2-promo { width: 100%; }
  .qs2-rail .qs2-promo__img { height: 100px; }
  /* Centre each rail in the margin beside the 1140px content container. */
  .qs2-rail--left { left: var(--qs2-rail-edge); }
  .qs2-rail--right { right: var(--qs2-rail-edge); }

  /* Ticker contents (Menu + headlines) span from the left rail's outer edge to the
     right rail's, only on pages showing rails. Owner-approved unlock of this one
     ticker property on 2026-10-01 (recorded in DESIGN_LOCK.md); css/style.php untouched. */
  body:has(.qs2-rail) .qs2-ticker-bar__inner {
    max-width: none;
    padding-left: var(--qs2-rail-edge);
    padding-right: var(--qs2-rail-edge);
  }
  /* Same alignment for the logo / contact / Sign In row above the ticker
     (owner-approved 2026-10-01). Bootstrap row/column gutters cancel out, so the
     logo starts at the left rail's edge and Sign In ends at the right rail's. */
  body:has(.qs2-rail) #header .bg-white > .container {
    max-width: none;
    padding-left: var(--qs2-rail-edge);
    padding-right: var(--qs2-rail-edge);
  }
}

/* Only when rails are present (they are siblings just before #footer), lift the
   footer above them; other pages keep the footer's stacking exactly as before. */
.qs2-rail ~ #footer { position: relative; z-index: 3; }

/* Cards */
.qs2-promo {
  position: relative;
  flex: 0 0 auto;
  background: #fff;
  border: 1px solid #dbe3f3;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(25, 37, 204, 0.08);
  overflow: hidden;
  color: #1b2333;
  overflow-wrap: anywhere;
  font-family: var(--qs2-font, "Poppins", sans-serif);
}
/* Older site rules force <p> into Open Sans; promo text uses the redesign font like the headings. */
.qs2-promo p { font-family: inherit; }
.qs2-promo__img { display: block; width: 100%; height: 120px; object-fit: cover; }
.qs2-promo__body { padding: 14px 16px 16px; }
.qs2-promo__label {
  margin: 0 0 4px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7280;
}
.qs2-promo__title { margin: 0 0 6px; font-size: 16px; font-weight: 700; line-height: 1.3; }
.qs2-promo__text { margin: 0 0 12px; font-size: 14px; line-height: 1.45; color: #4b5563; }
.qs2-promo__btn {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 6px;
  background: var(--qs2-blue, #1925cc);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.qs2-promo__btn:hover,
.qs2-promo__btn:focus { color: #fff; text-decoration: none; filter: brightness(1.1); }
.qs2-promo__btn:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
/* Preview badge sits on its own line at the top of the card, never over the content. */
.qs2-promo__preview {
  display: inline-block;
  margin: 10px 16px 0;
  padding: 2px 8px;
  border-radius: 10px;
  background: #f59e0b;
  color: #111;
  font-size: 11px;
  font-weight: 700;
}

/* Footer band: every screen size, just above the footer. Blue gradient strip with
   white text and a white button, as in the owner-approved mockup. */
.qs2-promo-band {
  position: relative;
  z-index: 3;
  padding: 20px 0;
  background: linear-gradient(90deg, #1a2fbf, #1a5fd6);
}
.qs2-promo--band {
  display: flex;
  align-items: center;
  gap: 20px;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  color: #fff;
}
.qs2-promo--band .qs2-promo__preview { margin: 0; flex: 0 0 auto; }
.qs2-promo--band .qs2-promo__body { padding: 0; }
.qs2-promo--band .qs2-promo__img { border-radius: 8px; }
.qs2-promo--band .qs2-promo__label { color: rgba(255, 255, 255, 0.9); margin-bottom: 0; }
.qs2-promo--band .qs2-promo__title { color: #fff; margin-bottom: 0; }
.qs2-promo--band .qs2-promo__text { color: rgba(255, 255, 255, 0.9); }
.qs2-promo--band .qs2-promo__btn { background: #fff; color: #1a2fbf; }
.qs2-promo--band .qs2-promo__btn:hover,
.qs2-promo--band .qs2-promo__btn:focus { color: #1a2fbf; background: #eef2ff; filter: none; }
.qs2-promo--band .qs2-promo__btn:focus-visible { outline-color: #fde68a; }
.qs2-promo--band .qs2-promo__img { width: 220px; height: 120px; flex: 0 0 auto; }
.qs2-promo--band .qs2-promo__body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px 16px;
  flex-wrap: wrap;
}
.qs2-promo--band .qs2-promo__text { margin-bottom: 0; }
/* Label, title and text read as one line on the left; the button sits on the right. */
.qs2-promo--band .qs2-promo__btn { margin-left: auto; }

@media (max-width: 767px) {
  .qs2-promo--band { flex-direction: column; align-items: stretch; gap: 0; }
  .qs2-promo--band .qs2-promo__img { width: 100%; height: 140px; }
  .qs2-promo--band .qs2-promo__body { flex-direction: column; align-items: flex-start; }
  .qs2-promo--band .qs2-promo__btn { margin-left: 0; }
  .qs2-promo--band .qs2-promo__preview { align-self: flex-start; margin-bottom: 8px; }
}