/* Ad slots and the cookie-consent banner that gates them.
   Uses the shared design tokens from base.css (--text-muted, --gray-border,
   --radius-md, --brand-primary, ...) so ad placements don't look bolted on. */

.ad-slot {
  margin: 1.5rem 0;
}

.ad-slot-label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.ad-slot-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90px;
  border: 1px dashed var(--gray-border);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 0.5rem;
}

/* Grid ad tile: sized to slot into the profile-tile grid on home.html
   (.row-cols-1 / .row-cols-md-2 / .row-cols-lg-3) without a layout jump. */
.ad-slot-grid-tile {
  margin: 0;
  height: 100%;
  min-height: 220px;
}

.ad-slot-grid-tile .ad-slot-placeholder {
  height: 100%;
  min-height: 220px;
}

/* Skyscraper rails in the margins beside the centered 1100px content column
   (see main .container in base.css). Hidden entirely below the breakpoint
   -- not just visually hidden, `display: none` so the ad network never
   requests/renders them on narrower screens.

   Breakpoint math: container is centered, so each side margin is
   (100vw - 1100px) / 2. A 160px-wide rail needs that margin to be at
   least 160px + 24px gap from the content edge + 16px from the viewport
   edge = 200px, which works out to a 1500px viewport. Below that -- most
   laptops, all tablets/phones -- neither rail renders. */
.ad-rail {
  display: none;
  position: fixed;
  top: 88px; /* clears the sticky navbar */
  width: 160px;
  z-index: 10; /* below the consent banner (1080) and navbar (bootstrap default 1020) */
}

.ad-rail .ad-slot-placeholder {
  min-height: 600px;
}

@media (min-width: 1500px) {
  .ad-rail {
    display: block;
  }

  .ad-rail-left {
    left: calc((100vw - 1100px) / 2 - 184px);
  }

  .ad-rail-right {
    right: calc((100vw - 1100px) / 2 - 184px);
  }
}

#adConsentBanner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1080;
  transform: translateY(100%);
  transition: transform 0.25s ease-out;
  background: var(--bg-white, #fff);
  border-top: 1px solid var(--gray-border);
  box-shadow: var(--shadow-card-hover);
  padding: 1rem;
}

#adConsentBanner.show {
  transform: translateY(0);
}

#adConsentBanner p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-primary);
}

#adConsentBanner .btn {
  white-space: nowrap;
}