/* Gallery page — CTA band. The one dark `primary-900` section the design
   system allows per page (DESIGN.md), with a single terracotta highlight CTA.
   Mobile-first: one column, fluid widths only — no fixed px layout widths and
   no 100vw, so there is no horizontal scroll at 320px. Tablet (>=48em) lays the
   support points out as label/value rows; desktop (>=64em) becomes the 50/50
   split of copy and photograph. */

.gallery-cta {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-section);
  background-color: var(--color-primary-900);
  color: var(--color-text-on-dark);
}

/* Decorative leaf blob, matching the hero/footer treatment. */
.gallery-cta__blob {
  position: absolute;
  inset-block-start: -18%;
  inset-inline-start: -14%;
  width: min(26rem, 62%);
  height: auto;
  color: var(--color-primary-800);
  opacity: 0.55;
  pointer-events: none;
}

.gallery-cta__container {
  position: relative;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  display: grid;
  gap: var(--space-10);
  align-items: center;
}

.gallery-cta__copy {
  display: grid;
  gap: var(--space-5);
  max-width: var(--measure);
}

.gallery-cta__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--letter-wide);
  text-transform: uppercase;
  color: var(--color-accent-300);
}

.gallery-cta__heading {
  font-family: var(--font-heading);
  font-size: clamp(var(--text-2xl), 4vw + 0.5rem, var(--text-4xl));
  font-weight: var(--weight-bold);
  letter-spacing: var(--letter-tight);
  line-height: var(--leading-tight);
  color: var(--color-neutral-50);
}

.gallery-cta__subheading {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--color-neutral-200);
}

/* Support points: label / value rows, readable on the dark band. */
.gallery-cta__points {
  display: grid;
  gap: var(--space-1) var(--space-4);
  margin-block-start: var(--space-2);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid rgba(250, 250, 249, 0.2);
}

.gallery-cta__term {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--letter-wide);
  text-transform: uppercase;
  color: var(--color-accent-200);
}

.gallery-cta__detail {
  font-size: var(--text-base);
  color: var(--color-neutral-100);
}

.gallery-cta__detail + .gallery-cta__term {
  margin-block-start: var(--space-3);
}

/* Buttons: one terracotta highlight, one outlined secondary. */
.gallery-cta__group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  margin-block-start: var(--space-2);
}

.gallery-cta__group .btn {
  transition: background-color var(--duration-fast) var(--ease-default),
              transform var(--duration-fast) var(--ease-default);
}

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

.gallery-cta__group .btn--accent:hover {
  background-color: var(--color-accent-700);
  transform: translateY(-2px);
}

.gallery-cta__group .btn--secondary:hover {
  background-color: rgba(250, 250, 249, 0.12);
  transform: translateY(-2px);
}

/* Photograph half — fixed aspect ratio, so no layout shift as it loads. */
.gallery-cta__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3;
}

.gallery-cta__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Scroll-reveal: the halves enter with the design system's stagger. Opt-in via
   `is-animated`, so both halves are plainly visible when JS never runs. */
.gallery-cta__copy,
.gallery-cta__media {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .gallery-cta.is-animated .gallery-cta__copy,
  .gallery-cta.is-animated .gallery-cta__media {
    opacity: 0;
    transform: translateY(var(--reveal-distance));
  }

  .gallery-cta.is-animated.is-ready .gallery-cta__copy,
  .gallery-cta.is-animated.is-ready .gallery-cta__media {
    opacity: 1;
    transform: none;
    transition: opacity var(--duration-slow) var(--ease-out) var(--gallery-cta-delay, 0ms),
                transform var(--duration-slow) var(--ease-out) var(--gallery-cta-delay, 0ms);
  }
}

/* Tablet */
@media (min-width: 48em) {
  .gallery-cta__points {
    grid-template-columns: auto 1fr;
    align-items: baseline;
  }

  .gallery-cta__detail + .gallery-cta__term {
    margin-block-start: 0;
  }
}

/* Desktop: 50/50 split. Copy stays first in reading order; the photograph
   takes the right-hand column. */
@media (min-width: 64em) {
  .gallery-cta__container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-16);
  }

  .gallery-cta__media {
    aspect-ratio: 1 / 1;
  }
}