/* Custom styles layered on top of Tailwind */

/* ----------------------------------------------------------------------------
   HERO — hardened so it ALWAYS has height + dark background + visible white
   text, even if the Tailwind Play CDN hasn't finished compiling utility
   classes (py-28, bg-brand-900, from-black/70, etc.). This is what fixes the
   "blank dark sliver" hero. These rules are plain CSS and load instantly.
---------------------------------------------------------------------------- */
#hero-section {
  position: relative;
  min-height: 320px;                 /* guaranteed band height */
  display: flex;
  align-items: center;
  /* deep brand gradient as a baseline; #hero-bg image (if any) layers on top */
  background: linear-gradient(135deg, #063b37 0%, #0b524c 55%, #0f766e 100%);
  overflow: hidden;
}

#hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* the dark scrim that sits over the bg image so white text stays legible */
#hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* the text column must sit ABOVE both background layers */
#hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

/* belt-and-suspenders: force the hero text colours/sizes regardless of CDN */
#hero-title {
  color: #ffffff;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.15;
  margin: 0;
}
#hero-package {
  color: rgba(244, 247, 247, 0.85);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-size: 0.8rem;
}
#hero-partner { color: rgba(255, 255, 255, 0.85); }
#hero-summary { color: rgba(255, 255, 255, 0.9); }

/* Caption editor focus ring */
.caption-editor:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.35);
}

/* Card selected state */
.ad-card.is-selected {
  border-color: #0f766e;
  box-shadow: 0 10px 30px -12px rgba(15, 118, 110, 0.45);
}
.ad-card.is-selected .select-btn {
  background-color: #0f766e;
  color: #fff;
}

/* Smooth save pulse on caption */
.saving-pulse {
  animation: savePulse 0.6s ease;
}
@keyframes savePulse {
  0%   { background-color: rgba(15,118,110,0.10); }
  100% { background-color: transparent; }
}

/* video aspect */
.video-wrap {
  position: relative;
  width: 100%;
  background: #000;
  border-radius: 0.75rem;
  overflow: hidden;
}
.video-wrap video { width: 100%; display: block; max-height: 70vh; }

/* platform pill */
.platform-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}

/* subject-line picker (Dedicated E-blast) */
.subject-row.is-chosen {
  border-color: #0f766e;
  background-color: rgba(15, 118, 110, 0.06);
}

/* subtle reveal */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s ease, transform .5s ease;
}
.reveal.in {
  opacity: 1;
  transform: none;
}