/* ═══════════════════════════════════════════════════════════════════════════
   CAMPAIGN CARD
   Rendered by js/campaign-renderer.js from the remote campaign config.

   Deliberately restrained: one card, no gradients-on-gradients, no floating
   decoration, no competing accent colours. ANHAD is a Gurbani product and a
   campaign should feel like an invitation, not an advertisement. The accent is
   campaign-supplied but falls back to the app's own gold so a config without
   themeTokens still looks native.

   Nothing here is loaded conditionally — the card simply does not exist in the
   DOM unless a campaign is active, so this file costs one small stylesheet and
   never affects the default experience.
═══════════════════════════════════════════════════════════════════════════ */

#campaignMount[hidden] {
  display: none;
}

.campaign-card {
  position: relative;
  margin: 0 0 var(--space-4, 16px);
  padding: 18px 20px 20px;
  border-radius: var(--radius-lg, 28px);
  background: var(--surface-primary, #FFFDF8);
  border: 1px solid var(--campaign-accent, rgba(212, 148, 58, 0.28));
  box-shadow: 0 8px 28px var(--campaign-accent-glow, rgba(212, 148, 58, 0.14));
}

.campaign-card__badge {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--campaign-badge-bg, linear-gradient(135deg, #8A6D3B 0%, #D4AF37 100%));
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.campaign-card__title {
  margin: 0;
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-primary, #1A1A1F);
}

.campaign-card__subtitle {
  margin: 6px 0 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text-secondary, #6E6E73);
}

.campaign-card__countdown {
  margin: 10px 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--campaign-accent, #8A6D3B);
}

.campaign-card__message {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-secondary, #6E6E73);
}

.campaign-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.campaign-card__cta,
.campaign-card__secondary {
  /* min-height keeps the WCAG 2.5.5 target size without the padding shorthand
     that mobile-accessibility.css used to force onto every button. */
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--duration-fast, 0.2s) ease, opacity var(--duration-fast, 0.2s) ease;
}

.campaign-card__cta {
  background: var(--campaign-badge-bg, linear-gradient(135deg, #8A6D3B 0%, #D4AF37 100%));
  color: #fff;
  border: none;
}

.campaign-card__secondary {
  background: transparent;
  color: var(--campaign-accent, #8A6D3B);
  border: 1px solid var(--campaign-accent, rgba(212, 148, 58, 0.4));
}

.campaign-card__cta:active,
.campaign-card__secondary:active {
  transform: scale(0.97);
}


/* ── Dark mode ── */
[data-theme="dark"] .campaign-card,
html.dark-mode .campaign-card {
  background: rgba(28, 28, 30, 0.92);
  border-color: var(--campaign-accent, rgba(212, 175, 55, 0.32));
}

[data-theme="dark"] .campaign-card__title,
html.dark-mode .campaign-card__title {
  color: #F5F5F7;
}

[data-theme="dark"] .campaign-card__message,
html.dark-mode .campaign-card__message {
  border-top-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .campaign-card__countdown,
html.dark-mode .campaign-card__countdown {
  color: var(--campaign-accent, #D4AF37);
}

/* ═══════════════════════════════════════════════════════════════════════════
   STATE B — the in-greeting announcement

   Reuses .greeting__slide's exact vocabulary (index.html:1233-1275): opacity +
   transform on `0.6s cubic-bezier(0.2,0.8,0.2,1)`, resting pose scale(0.6),
   active pose scale(1). Nothing new is invented.

   Both panes are position:absolute inside boxes whose size is already fixed —
   #guruSlider is `height: 172px !important` and .greeting__text is sized by its
   three in-flow lines — so arming the announcement cannot move a single pixel
   of Home. Zero layout shift is a property of this CSS, not of the copy length.
   Lives here rather than in index.html's inline <style> because Admin's Preview
   links this file and must exercise the identical rules.
   ═══════════════════════════════════════════════════════════════════════════ */

#greetingAnnounce[hidden],
#greetingAnnounceText[hidden] { display: none !important; }

/* The whole 172px box, so the halo and the pill can position against it. */
.greeting__announce {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 11;    /* above .greeting__slide--active (10) */
  opacity: 0;
  pointer-events: none;
  transform: scale(0.72);
  transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Soft gold aura behind the disc, matching the portrait slider's own ::before
   glow so State B keeps the same halo the Guru portraits sit in. */
.greeting__announce-halo {
  position: absolute;
  width: 196px;
  height: 196px;
  border-radius: 50%;
  background: radial-gradient(circle,
    var(--campaign-accent-glow, rgba(212, 175, 55, 0.34)) 0%,
    rgba(212, 175, 55, 0) 68%);
  filter: blur(2px);
  pointer-events: none;
}

.greeting__announce-disc {
  position: relative;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 12px;
  box-sizing: border-box;
  background: var(--campaign-badge-bg, linear-gradient(135deg, #8A6D3B 0%, #D4AF37 100%));
  /* Ring copied from .greeting__guru-portrait so the disc reads as the same
     kind of object as the portraits it replaces. */
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.20), inset 0 0 0 1.5px rgba(255, 255, 255, 0.34);
  color: #fff;
}

/* Real Amritvela artwork rather than a flat swatch — this is a Darbar Sahib
   Amritvela photograph, the same asset the Amritvela hero card uses. */
.greeting__announce-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

/* Legibility veil. The ੴ and the badge sit on a photograph, so they need a
   guaranteed contrast floor rather than luck with whatever the image does. */
.greeting__announce-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20, 12, 0, 0.18) 0%, rgba(20, 12, 0, 0.62) 100%),
    radial-gradient(circle at 50% 38%, rgba(212, 175, 55, 0.26) 0%, rgba(0, 0, 0, 0) 70%);
}

.greeting__announce-ik {
  position: relative;
  font-size: 2.5rem;
  line-height: 1;
  color: #FFF7E2;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.greeting__announce-badge {
  position: relative;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  max-width: 94%;
  text-align: center;
  line-height: 1.3;
  color: #FFE9A8;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

/* Small caption riding the bottom edge of the disc, the way the Gurpurab
   card's day-count badge does. Used for the live-samagam line. */
.greeting__announce-pill {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 96%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #3B2A00;
  background: linear-gradient(135deg, #FFE9A8 0%, #F0C64E 100%);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

.greeting__announce-pill[hidden] { display: none !important; }

.greeting__announce-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.94);
  transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* So inset:0 resolves against the text block. No layout effect of its own. */
.greeting__content .greeting__text { position: relative; }

/* Line caps are load-bearing, not cosmetic: an absolutely-positioned pane is
   not clipped by its parent and .greeting is overflow:visible, so an over-long
   remote string would spill onto the portrait and the progress bar. The JS
   clamps the strings as well — belt and braces. */
.greeting__announce-title {
  /* Same display serif the rest of the app uses for sacred headings
     (trendora-premium.css:2496), so State B does not read as a foreign
     marketing font dropped into the greeting. */
  font-family: 'Cinzel', 'Georgia', serif;
  font-size: 1.32rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.3px;
  color: var(--campaign-accent, #D4943A);
  margin-bottom: 5px;
  padding: 0 16px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.greeting__announce-line {
  font-family: var(--font-gurmukhi, 'Noto Sans Gurmukhi', sans-serif);
  font-size: 1.34rem;
  line-height: 1.35;
  padding: 0 16px;
  margin-top: -2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.greeting__announce-sub {
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  opacity: 0.82;
  margin-top: 4px;
  padding: 0 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── The state flip. Two attributes; no classes, no JS-written styles. ───── */
#guruSlider[data-campaign-state="b"] > .greeting__slider-track {
  opacity: 0;
  transform: scale(0.92);
  pointer-events: none;
  /* visibility is a perf measure only: stop compositing 11 portraits while
     they are invisible. Delayed 0.6s on the way out so the fade still plays. */
  visibility: hidden;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
              opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
              visibility 0s linear 0.6s !important;
}

#guruSlider[data-campaign-state="b"] > .greeting__announce {
  opacity: 1;
  transform: scale(1);
}

#guruSlider[data-campaign-state="b"] ~ .greeting__text .greeting__announce-text {
  opacity: 1;
  transform: scale(1);
}

/* !important is required, not decorative: #greetingTranslation carries an
   INLINE style="...opacity: 0.8..." in index.html, and an inline declaration
   beats any stylesheet rule that is not !important. Without it the translation
   stayed at 0.8 and rendered straight through the announcement copy. */
#guruSlider[data-campaign-state="b"] ~ .greeting__text > .greeting__salutation,
#guruSlider[data-campaign-state="b"] ~ .greeting__text > .greeting__gurbani,
#guruSlider[data-campaign-state="b"] ~ .greeting__text > .greeting__translation {
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ── Admin Preview ────────────────────────────────────────────────────────
   The preview host loads only admin.css + this file, so .greeting__portrait-
   slider has none of the sizing index.html gives it inline. Scope the fallback
   to #campaignMount so it can never reach Home's real slider. */
#campaignMount .greeting__portrait-slider {
  position: relative;
  height: 172px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#campaignMount .greeting__announce {
  opacity: 1;
  transform: scale(1);
}

.greeting__announce-text--preview {
  position: static;
  opacity: 1;
  transform: none;
  margin-top: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .campaign-card__cta,
  .campaign-card__secondary {
    transition: none;
  }
  /* The JS also slows the cadence and stops after one showing; this removes
     the movement itself. */
  .greeting__announce,
  .greeting__announce-text,
  #guruSlider[data-campaign-state] > .greeting__slider-track {
    transition: none !important;
  }
  .greeting__announce { transform: scale(1); }
  .greeting__announce-text { transform: none; }
}

#guruSlider[data-campaign-motion="reduce"] .greeting__announce,
#guruSlider[data-campaign-motion="reduce"] .greeting__announce-text,
#guruSlider[data-campaign-motion="reduce"] > .greeting__slider-track {
  transition: none !important;
}