/* ============================================================
   Psy.nz — Advertising slots (v2)
   Loaded after style.css, so it overrides the older .sk-ad-* rules.
   Design goals:
     - an unsold slot must look designed, not broken
     - never a fixed pixel height on a phone
     - the "Ad" tag is quiet, not shouting
   ============================================================ */

/* ── Wrapper ────────────────────────────────────────────────── */
.sk-ad-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}
.sk-ad-wrap + .sk-ad-wrap { margin-top: 1rem; }

/* ── The slot itself ────────────────────────────────────────── */
.sk-ad {
  position: relative;
  width: 100%;
  border-radius: var(--r-md, 10px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sk-ad-link { display: block; width: 100%; height: 100%; }
.sk-ad-img  { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Quiet disclosure tag — required, but it shouldn't dominate */
.sk-ad-tag {
  position: absolute; top: 6px; right: 6px;
  font-size: .56rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase;
  color: #fff; background: rgba(15, 23, 42, .38);
  backdrop-filter: blur(2px);
  border-radius: 3px; padding: 1px 5px;
  pointer-events: none;
}

/* Minimum heights per format, so an empty slot still has presence.
   aspect-ratio (set inline from the spot's real dimensions) does the
   rest, and collapses gracefully as the column narrows. */
.sk-ad--leaderboard { min-height: 90px; }
.sk-ad--billboard   { min-height: 180px; }
.sk-ad--rectangle   { min-height: 250px; }
.sk-ad--skyscraper  { min-height: 400px; }
.sk-ad--flex        { min-height: 90px; }

/* ============================================================
   HOUSE ADS — internal promos filling unsold inventory
   ============================================================ */
.sk-ad--house {
  border: 1px solid var(--c-border, #e4e8f5);
  background: linear-gradient(135deg, var(--c-indigo-50, #eef2ff), #ffffff 70%);
}
.sk-ad--house.sk-ad--mint {
  background: linear-gradient(135deg, var(--c-mint-50, #f0fdfa), #ffffff 70%);
  border-color: var(--c-mint-100, #ccfbf1);
}

.sk-ad-house {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%; height: 100%;
  padding: 1rem 1.25rem;
  text-decoration: none;
  color: var(--c-text, #1e293b);
  transition: var(--t-fast, .15s ease);
}
.sk-ad-house:hover { color: var(--c-text, #1e293b); background: rgba(255,255,255,.55); }

.sk-ad-house-icon {
  flex-shrink: 0;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-full, 999px);
  background: var(--c-indigo-100, #e0e7ff);
  color: var(--c-indigo-600, #4f46e5);
  font-size: 1.15rem;
}
.sk-ad--mint .sk-ad-house-icon {
  background: var(--c-mint-100, #ccfbf1);
  color: var(--c-mint-700, #0d9488);
}

.sk-ad-house-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1; }

.sk-ad-house-kicker {
  font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-indigo-600, #4f46e5);
}
.sk-ad--mint .sk-ad-house-kicker { color: var(--c-mint-700, #0d9488); }

.sk-ad-house-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem; font-weight: 800; line-height: 1.25;
}
.sk-ad-house-text {
  font-size: .82rem; color: var(--c-muted, #64748b); line-height: 1.45;
}

.sk-ad-house-cta {
  flex-shrink: 0;
  font-size: .78rem; font-weight: 700;
  color: var(--c-indigo-600, #4f46e5);
  white-space: nowrap;
}
.sk-ad--mint .sk-ad-house-cta { color: var(--c-mint-700, #0d9488); }
.sk-ad-house:hover .sk-ad-house-cta i { transform: translateX(3px); }
.sk-ad-house-cta i { transition: transform .15s ease; display: inline-block; }

/* Tall + square formats stack vertically and centre */
.sk-ad--skyscraper .sk-ad-house,
.sk-ad--rectangle  .sk-ad-house,
.sk-ad--billboard  .sk-ad-house {
  flex-direction: column;
  text-align: center;
  justify-content: center;
  gap: .75rem;
  padding: 1.5rem 1.25rem;
}
.sk-ad--skyscraper .sk-ad-house-body,
.sk-ad--rectangle  .sk-ad-house-body,
.sk-ad--billboard  .sk-ad-house-body { align-items: center; flex: 0 0 auto; }

.sk-ad--skyscraper .sk-ad-house-icon,
.sk-ad--rectangle  .sk-ad-house-icon,
.sk-ad--billboard  .sk-ad-house-icon { width: 54px; height: 54px; font-size: 1.5rem; }

.sk-ad--billboard .sk-ad-house-title { font-size: 1.35rem; }

/* Leaderboards are short — drop the body text, keep one crisp line */
.sk-ad--leaderboard .sk-ad-house { padding: .6rem 1.1rem; gap: .85rem; }
.sk-ad--leaderboard .sk-ad-house-icon { width: 34px; height: 34px; font-size: .95rem; }
.sk-ad--leaderboard .sk-ad-house-title { font-size: .92rem; }

/* Admin-authored text fallback */
.sk-ad--text .sk-ad-house-body { padding: 1rem 1.5rem; text-align: center; align-items: center; }
.sk-ad--text .sk-ad-house-title { font-size: .95rem; font-weight: 600; margin: 0; }

/* ============================================================
   AVAILABILITY CARD — "this space is for sale"
   Reads like a media kit, not like a 404.
   ============================================================ */
.sk-ad--available {
  border: 1.5px dashed var(--c-border-2, #c7d0ee);
  background:
    radial-gradient(circle at 100% 0%, var(--c-indigo-50, #eef2ff) 0%, transparent 55%),
    #fdfdff;
}

.sk-ad-avail {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%; height: 100%;
  padding: 1rem 1.25rem;
  text-decoration: none;
  color: var(--c-text, #1e293b);
  transition: var(--t-fast, .15s ease);
}
.sk-ad-avail:hover {
  color: var(--c-text, #1e293b);
  background: rgba(238, 242, 255, .5);
}
.sk-ad--available:hover { border-color: var(--c-indigo-400, #818cf8); }

.sk-ad-avail-badge {
  position: absolute; top: 8px; left: 8px;
  font-size: .58rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--c-success, #059669);
  background: var(--c-success-bg, #d1fae5);
  border-radius: var(--r-full, 999px);
  padding: 2px 8px;
}

.sk-ad-avail-body { display: flex; flex-direction: column; gap: .2rem; flex: 1; min-width: 0; }

.sk-ad-avail-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem; font-weight: 800; line-height: 1.25;
  color: var(--c-indigo-800, #2d2a7a);
}
.sk-ad-avail-meta {
  font-size: .72rem; color: var(--c-muted, #64748b);
  text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
}
.sk-ad-avail-rate {
  font-size: .88rem; font-weight: 800; color: var(--c-text, #1e293b);
}
.sk-ad-avail-per { font-size: .72rem; font-weight: 600; color: var(--c-muted, #64748b); }

.sk-ad-avail-cta {
  flex-shrink: 0;
  font-size: .75rem; font-weight: 700;
  color: #fff; background: var(--c-indigo-600, #4f46e5);
  padding: .4rem .85rem;
  border-radius: var(--r-full, 999px);
  white-space: nowrap;
}
.sk-ad-avail:hover .sk-ad-avail-cta { background: var(--c-indigo-700, #3730a3); }

/* Tall + square formats stack */
.sk-ad--skyscraper .sk-ad-avail,
.sk-ad--rectangle  .sk-ad-avail,
.sk-ad--billboard  .sk-ad-avail {
  flex-direction: column;
  text-align: center;
  justify-content: center;
  gap: .85rem;
  padding: 2rem 1.25rem 1.5rem;
}
.sk-ad--skyscraper .sk-ad-avail-body,
.sk-ad--rectangle  .sk-ad-avail-body,
.sk-ad--billboard  .sk-ad-avail-body { align-items: center; flex: 0 0 auto; }

.sk-ad--leaderboard .sk-ad-avail { padding: .6rem 1.1rem; }
.sk-ad--leaderboard .sk-ad-avail-title { font-size: .9rem; }
.sk-ad--leaderboard .sk-ad-avail-badge { position: static; margin-right: .25rem; }

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width: 767.98px) {
  /* Never let a desktop leaderboard squash to an unreadable sliver */
  .sk-ad--leaderboard,
  .sk-ad--billboard {
    aspect-ratio: auto !important;
    min-height: 0;
  }
  .sk-ad--leaderboard .sk-ad-house,
  .sk-ad--billboard   .sk-ad-house,
  .sk-ad--leaderboard .sk-ad-avail,
  .sk-ad--billboard   .sk-ad-avail {
    flex-direction: column;
    text-align: center;
    gap: .6rem;
    padding: 1rem;
  }
  .sk-ad--leaderboard .sk-ad-house-body,
  .sk-ad--billboard   .sk-ad-house-body,
  .sk-ad--leaderboard .sk-ad-avail-body,
  .sk-ad--billboard   .sk-ad-avail-body { align-items: center; }

  .sk-ad--leaderboard .sk-ad-house-text,
  .sk-ad--billboard   .sk-ad-house-text { display: none; }

  .sk-ad--skyscraper { min-height: 280px; aspect-ratio: auto !important; }

  /* Paid creative: keep the image legible rather than letterboxed */
  .sk-ad--paid { aspect-ratio: auto !important; }
  .sk-ad--paid .sk-ad-img { height: auto; }
}

/* Print / reduced motion housekeeping */
@media print { .sk-ad-wrap { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .sk-ad-house, .sk-ad-avail, .sk-ad-house-cta i { transition: none; }
}