/**
 * Campaign card and page parts (early bird, dormant seasonal templates). Semantic tokens only; registered in
 * docs/design/ui-design-language.md section 3.2. Colours follow the subscription-page card of the extension:
 * brand frame, brand-soft code block, strike-through list price.
 */
.campaign-section {
  background: var(--background-alt);
}

.campaign-card {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--spacing-xl);
  border: 2px solid var(--ccn-brand);
  border-radius: var(--radius-xl);
  background: var(--card-bg);
  text-align: center;
  box-shadow: var(--shadow-md);
}

.campaign-card[hidden],
.campaign-card [hidden] {
  display: none;
}

.campaign-state-pill {
  display: inline-block;
  margin-bottom: var(--spacing-sm);
  padding: 2px var(--spacing-md);
  border-radius: var(--radius-full);
  border: 1px solid var(--border-hover);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.campaign-state-pill:empty {
  display: none;
}

.campaign-card[data-state="live"] .campaign-state-pill {
  border-color: var(--ccn-brand);
  color: var(--ccn-text-brand);
}

.campaign-badge {
  display: inline-block;
  margin: 0 0 var(--spacing-sm) var(--spacing-sm);
  padding: 2px var(--spacing-md);
  border-radius: var(--radius-full);
  background: var(--primary-light);
  color: var(--ccn-text-brand);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.campaign-title {
  margin: var(--spacing-sm) 0;
  font-size: var(--font-size-3xl);
  color: var(--text-primary);
}

.campaign-lead {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
}

.campaign-price {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: var(--spacing-md);
  margin: var(--spacing-md) 0 var(--spacing-sm);
}

.campaign-price-old {
  color: var(--text-muted);
  font-size: var(--font-size-xl);
  text-decoration: line-through;
}

/* same colour as the plan prices in the pricing block (.pricing-amount) */
.campaign-price-new {
  color: var(--primary-text);
  font-size: var(--font-size-5xl);
  font-weight: 700;
  line-height: 1.1;
}

.campaign-line {
  color: var(--ccn-text-brand);
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
}

.campaign-card[data-state="ended"] .campaign-line,
.campaign-card[data-state="ended"] .campaign-price-new {
  color: var(--text-muted);
}

.campaign-code {
  display: inline-block;
  margin: var(--spacing-sm) 0;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-md);
  background: var(--primary-light);
  color: var(--text-primary);
}

.campaign-code code {
  font-family: var(--ccn-font-mono);
  font-weight: 600;
  color: var(--ccn-text-brand);
  overflow-wrap: anywhere;
}

.campaign-note {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  margin: var(--spacing-xs) 0;
}

.campaign-card .btn {
  margin-top: var(--spacing-md);
}

.campaign-cta {
  text-align: center;
  margin-top: var(--spacing-xl);
}

.campaign-template-notice {
  max-width: 640px;
  margin: 0 auto var(--spacing-lg);
  padding: var(--spacing-md);
  border: 1px dashed var(--border-hover);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  text-align: center;
}

.campaign-none {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.campaign-none h2 {
  margin-bottom: var(--spacing-sm);
}

[data-campaign-rules] {
  margin-top: var(--spacing-xl);
}

@media (max-width: 480px) {
  .campaign-card {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  .campaign-price-new {
    font-size: var(--font-size-4xl);
  }
}

/* The hidden attribute must win over the display values above */
.campaign-section [hidden],
.campaign-card [hidden],
.campaign-card[hidden],
.campaign-template-notice[hidden],
.campaign-none[hidden],
.page-hero[hidden],
[data-campaign-rules][hidden],
.campaign-section[hidden] {
  display: none !important;
}

/* Offers page (campaign.html): one section per running campaign, the card first, then its rules */
/* the offers band has its own background: the card keeps one block gap below the page hero */
.page-hero-compact + .offer-section,
.page-hero-compact + .campaign-section {
  padding-top: var(--site-block-gap);
}

.offer-section .offer-title {
  margin: var(--spacing-xs) 0 var(--spacing-sm);
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--text-primary);
}

.offer-section .privacy-content {
  margin-top: var(--site-header-gap);
}

/* Home: the early-bird card shares the download block, compact and in two columns on wide screens */
.campaign-compact {
  margin-bottom: var(--site-header-gap);
}

.campaign-compact[hidden] {
  display: none;
}

.campaign-compact .campaign-card {
  max-width: 880px;
  padding: var(--spacing-lg);
}

.campaign-compact .campaign-title {
  font-size: var(--font-size-2xl);
  margin: var(--spacing-xs) 0;
}

.campaign-compact .campaign-lead {
  margin-bottom: 0;
  font-size: var(--font-size-sm);
}

.campaign-compact .campaign-price {
  margin: 0 0 var(--spacing-xs);
}

.campaign-compact .campaign-price-new {
  font-size: var(--font-size-4xl);
}

.campaign-compact .campaign-code {
  margin: var(--spacing-xs) 0;
}

.campaign-compact .campaign-card .btn {
  margin-top: var(--spacing-sm);
}

/* from the home pager gate up the card and the buy column sit side by side */
@media (min-width: 840px) {
  .campaign-compact .campaign-card {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: center;
    column-gap: var(--spacing-xl);
    text-align: left;
  }

  .campaign-compact .campaign-compact-buy {
    padding-left: var(--spacing-xl);
    border-left: 1px solid var(--border);
    text-align: center;
  }
}