/**
 * DIAKO public CTA / button design system.
 * Presentation only — does not change labels, hrefs, or section data.
 *
 * Shared tokens: --da-cta-* (also defined in design-system.css)
 * Applied to: Hero buttons, in-page CTA sections, global action strip,
 * custom CTA banners, and homepage hero buttons.
 */

:root {
  --da-cta-h: 48px;
  --da-cta-radius: 12px;
  --da-cta-pad-x: 1.35rem;
  --da-cta-font: 0.95rem;
  --da-cta-weight: 800;
  --da-cta-gap: 0.7rem;
  --da-cta-shift: 180ms ease;
  --da-cta-orange: #f97316;
  --da-cta-orange-deep: #ea580c;
}

/* ═══════════════════════════════════════════
   Shared button shape
   ═══════════════════════════════════════════ */
.ec-btn,
.wp-cta-btn,
.wp-cta-btn-secondary,
.gcta__btn,
.btn-hero-primary,
.btn-hero-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  box-sizing: border-box;
  min-height: var(--da-cta-h);
  padding: 0 var(--da-cta-pad-x);
  border-radius: var(--da-cta-radius);
  border: 1.5px solid transparent;
  font-size: var(--da-cta-font);
  font-weight: var(--da-cta-weight);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--da-cta-shift),
    color var(--da-cta-shift),
    border-color var(--da-cta-shift),
    box-shadow var(--da-cta-shift),
    transform var(--da-cta-shift);
}

/* Primary — orange solid */
.ec-btn--primary,
.wp-cta-btn,
.gcta__btn--primary,
.btn-hero-primary,
.wp-page .wp-designed .ec-btn--primary,
.wp-page .wp-designed .wp-cta-btn,
.wp-page--course .ec-btn--primary,
.wp-page--course .wp-cta-btn,
.ec-page--german .ec-btn--primary,
.ec-page--about .ec-btn--primary {
  background: var(--da-cta-orange) !important;
  background-image: none !important;
  color: #fff !important;
  border-color: var(--da-cta-orange) !important;
  box-shadow: none;
}

.ec-btn--primary:hover,
.wp-cta-btn:hover,
.gcta__btn--primary:hover,
.btn-hero-primary:hover,
.wp-page .wp-designed .ec-btn--primary:hover,
.wp-page .wp-designed .wp-cta-btn:hover,
.wp-page--course .ec-btn--primary:hover,
.wp-page--course .wp-cta-btn:hover,
.ec-page--german .ec-btn--primary:hover,
.ec-page--about .ec-btn--primary:hover {
  background: var(--da-cta-orange-deep) !important;
  border-color: var(--da-cta-orange-deep) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -10px rgba(234, 88, 12, 0.55);
}

/* Secondary — outline on white / content */
.ec-btn--ghost,
.wp-cta-btn-secondary,
.gcta__btn--secondary,
.wp-page--course .wp-hero--classic .ec-btn--ghost,
.ec-page--german .ec-btn--ghost,
.ec-page--about .ec-btn--ghost {
  background: #fff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
  box-shadow: none;
}

.ec-btn--ghost:hover,
.wp-cta-btn-secondary:hover,
.gcta__btn--secondary:hover,
.wp-page--course .wp-hero--classic .ec-btn--ghost:hover {
  background: #fff !important;
  color: var(--da-cta-orange-deep) !important;
  border-color: var(--da-cta-orange) !important;
  transform: translateY(-1px);
}

/* Secondary — glass on Hero image (same size as primary) */
.ec-hero .ec-btn--ghost,
.ec-hero .wp-cta-btn-secondary,
.ec-hero .ec-btn--light,
.wp-page--course .ec-hero:not(.wp-hero--classic) .ec-btn--ghost {
  background: rgba(15, 23, 42, 0.42) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.ec-hero .ec-btn--ghost:hover,
.ec-hero .wp-cta-btn-secondary:hover,
.ec-hero .ec-btn--light:hover,
.wp-page--course .ec-hero:not(.wp-hero--classic) .ec-btn--ghost:hover {
  background: rgba(15, 23, 42, 0.58) !important;
  color: #fff !important;
  border-color: #fff !important;
}

/* Homepage video hero keeps the light glass variant */
.dh-hero__buttons .btn-hero-outline,
.video-hero__buttons .btn-hero-outline {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.dh-hero__buttons .btn-hero-outline:hover,
.video-hero__buttons .btn-hero-outline:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.85) !important;
}

.wp-page .ec-hero.wp-designed .ec-actions .ec-btn--primary,
.wp-page .ec-hero.wp-designed .ec-actions .wp-cta-btn {
  color: #fff !important;
}

/* Action rows */
.ec-hero .ec-actions,
.wp-sec--cta .ec-actions,
.gcta__actions,
.dh-hero__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--da-cta-gap);
  align-items: center;
}

/* ═══════════════════════════════════════════
   In-page public CTA — compact glass box
   (not Hero, not Hero promo boxes)
   ═══════════════════════════════════════════ */
.wp-sec--cta,
.wp-page--course .wp-sec--cta,
.wp-page--course .ec-section--cta,
.gcta,
.gcta.ec-section,
.gcta.ec-section--soft,
.gcta.ec-section--navy {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  padding-block: 1.15rem;
}

.wp-page .wp-cta-banner,
.gcta__banner,
.gcta--soft .gcta__banner,
.gcta--dark .gcta__banner,
.wp-page .wp-cta-banner--dark {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  width: min(var(--wp-max, 1120px), 100%);
  margin-inline: auto;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 8px 22px rgba(15, 23, 42, 0.035);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align: center;
}

.wp-page .wp-cta-banner__copy,
.gcta__copy {
  flex: 0 1 auto;
  width: min(40rem, 100%);
  display: grid;
  gap: 0.55rem;
  text-align: center;
}

.wp-sec--cta .ec-h2,
.wp-sec--cta .wp-typo-heading,
.gcta__title {
  margin: 0;
  color: #0f172a;
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.wp-sec--cta .ec-kicker,
.wp-sec--cta .ec-lead,
.gcta__helper,
.gcta--dark .gcta__helper {
  margin: 0;
  color: #64748b;
  font-size: 0.75rem;
  line-height: 1.5;
}

.wp-sec--cta .ec-btn,
.wp-sec--cta .wp-cta-btn,
.wp-sec--cta .wp-cta-btn-secondary,
.gcta__btn,
.wp-page--course .wp-sec--cta .ec-btn,
.wp-page--course .ec-section--cta .ec-btn {
  min-height: 36px;
  height: 36px;
  padding: 0 1rem;
  border-radius: 10px;
  font-size: 0.8125rem;
  font-weight: 650;
}

.wp-sec--cta .ec-actions,
.gcta__actions,
.wp-page .wp-cta-banner .ec-actions {
  flex: 0 0 auto;
  justify-content: center;
}

@media (max-width: 720px) {
  .ec-hero .ec-actions,
  .wp-sec--cta .ec-actions,
  .gcta__actions,
  .dh-hero__buttons,
  .wp-page .ec-actions {
    width: 100%;
  }

  .ec-hero .ec-actions .ec-btn,
  .wp-sec--cta .ec-actions .ec-btn,
  .gcta__actions .gcta__btn,
  .dh-hero__buttons .btn,
  .wp-page .ec-actions .wp-cta-btn,
  .wp-page .ec-actions .ec-btn {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }
}