/* CTA — Brutalist Tech (Minimal), tmpl-brutalist-tech--cta--minimal--16
   Layout: split-50-50, max-w-7xl container, 2 columns, min-height 50vh.
   Mobile: stack. Tablet: sidebar-collapse (copy wide, CTA rail under it).
   Visual: mesh-gradient background + radial-dark overlay, shadow lg, radius 2xl,
   no decorative shapes. Typography: 2xl heading (800 / 0.02em), left aligned,
   2xl subheading. Motion: fade-up 800ms, 80ms stagger, fade-on-scroll. */

.cta {
  --cta-container: 80rem;                     /* max-w-7xl */
  --cta-heading: var(--text-2xl);             /* 2xl */
  --cta-subheading: var(--text-2xl);          /* 2xl */
  --cta-duration: 800ms;                      /* fade-up duration */
  --cta-stagger: 80ms;                        /* between elements */
  --cta-radius: var(--radius-2xl);            /* 2xl */
  --cta-shadow: var(--shadow-lg);             /* lg */
  --cta-fade: 1;                              /* set by the fade-on-scroll effect */
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 50vh;
  display: flex;
  align-items: center;
  padding-block: var(--space-section);
  /* mesh-gradient: overlapping soft radial fields in the brand colours */
  background-color: var(--color-primary-900);
  background-image:
    radial-gradient(60% 55% at 10% 15%, rgba(47, 93, 70, 0.85) 0%, rgba(47, 93, 70, 0) 70%),
    radial-gradient(55% 50% at 90% 10%, rgba(191, 93, 63, 0.55) 0%, rgba(191, 93, 63, 0) 72%),
    radial-gradient(70% 60% at 80% 90%, rgba(95, 145, 116, 0.55) 0%, rgba(95, 145, 116, 0) 70%),
    radial-gradient(60% 55% at 15% 95%, rgba(162, 74, 49, 0.45) 0%, rgba(162, 74, 49, 0) 72%);
}

/* radial-dark overlay: keeps the headline legible over the mesh */
.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(
    120% 100% at 50% 50%,
    rgba(23, 44, 34, 0.45) 0%,
    rgba(23, 44, 34, 0.82) 100%
  );
}

.cta__container {
  width: 100%;
  max-width: var(--cta-container);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* The panel is the hoverable card and the fade-on-scroll target. */
.cta__panel {
  display: grid;
  grid-template-columns: 1fr;                  /* mobile: stack */
  gap: var(--space-8);
  align-items: center;
  padding: clamp(var(--space-6), 4vw, var(--space-12));
  border: 1px solid rgba(250, 250, 249, 0.16);
  border-radius: var(--cta-radius);
  background-color: rgba(23, 44, 34, 0.55);
  box-shadow: var(--cta-shadow);
  opacity: var(--cta-fade);
  transition:
    transform var(--duration-normal) var(--ease-default),
    box-shadow var(--duration-normal) var(--ease-default),
    opacity var(--duration-normal) var(--ease-out);
}

/* card hover: scale-up */
.cta__panel:hover,
.cta__panel:focus-within {
  transform: scale(1.02);
  box-shadow: var(--shadow-xl);
}

.cta__copy {
  text-align: left;
  display: grid;
  gap: var(--space-4);
}

.cta__heading {
  font-family: var(--font-heading);
  font-size: var(--cta-heading);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: var(--leading-tight);
  color: var(--color-text-on-dark);
  text-align: left;
}

.cta__subheading {
  font-size: var(--cta-subheading);
  line-height: var(--leading-snug);
  color: var(--color-neutral-200);
  text-align: left;
  max-width: 40ch;
}

/* cta_group — second column of the 50/50 split */
.cta__group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

.cta__group .btn { flex: 1 1 14rem; }

.cta__group .btn--primary {
  background-color: var(--color-accent-600);
  color: var(--color-neutral-50);
}

/* CTA hover: glow-pulse */
.cta__group .btn {
  transition:
    box-shadow var(--duration-normal) var(--ease-default),
    background-color var(--duration-fast) var(--ease-default);
}

.cta__group .btn:hover,
.cta__group .btn:focus-visible {
  animation: cta-glow-pulse 1400ms var(--ease-default) infinite;
}

@keyframes cta-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 154, 125, 0.55); }
  50% { box-shadow: 0 0 24px 6px rgba(224, 154, 125, 0.45); }
}

/* Tablet: sidebar-collapse — copy keeps the width, the CTA rail sits beneath it. */
@media (min-width: 48em) {
  .cta__panel { grid-template-columns: minmax(0, 1fr); }
  .cta__group { justify-content: flex-start; }
  .cta__group .btn { flex: 0 1 auto; }
}

/* Desktop: the declared 50/50 split. */
@media (min-width: 64em) {
  .cta__panel { grid-template-columns: 1fr 1fr; }
  .cta__group { justify-content: flex-end; }
}

/* Entrance: fade-up, 800ms, 80ms stagger. Without JS the markup stays visible. */
.cta--animate .cta__heading,
.cta--animate .cta__subheading,
.cta--animate .cta__group {
  opacity: 0;
}

.cta--animate.cta--shown .cta__heading,
.cta--animate.cta--shown .cta__subheading,
.cta--animate.cta--shown .cta__group {
  animation: cta-fade-up var(--cta-duration) var(--ease-out) both;
}

.cta--animate.cta--shown .cta__heading { animation-delay: 0ms; }
.cta--animate.cta--shown .cta__subheading { animation-delay: var(--cta-stagger); }
.cta--animate.cta--shown .cta__group { animation-delay: calc(var(--cta-stagger) * 2); }

@keyframes cta-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cta { --cta-duration: 0ms; --cta-stagger: 0ms; }
  .cta__panel { opacity: 1; transition: none; }
  .cta__panel:hover, .cta__panel:focus-within { transform: none; }
  .cta__group .btn:hover,
  .cta__group .btn:focus-visible { animation: none; box-shadow: var(--shadow-glow); }
  .cta--animate .cta__heading,
  .cta--animate .cta__subheading,
  .cta--animate .cta__group { opacity: 1; animation: none; }
}