/* landing5 — screen 5: the pattern story, bright spotlight section */

.pattern-story {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent) 85%, white) 0%,
    color-mix(in srgb, var(--gold) 78%, white) 48%,
    color-mix(in srgb, var(--pale) 82%, white) 100%
  );
}
.pattern-story .eyebrow { color: color-mix(in srgb, var(--navy) 82%, transparent); }
.pattern-story .eyebrow::before { background: var(--navy); opacity: 0.4; }
.pattern-story .h2 { color: var(--navy); }
.pattern-story .h2 .italic { color: color-mix(in srgb, var(--navy) 75%, var(--accent-deep)); }
.pattern-story .lead { color: color-mix(in srgb, var(--navy) 78%, transparent); }

.pattern-carousel {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(0.65rem, 2vw, 1.25rem);
  padding-inline: clamp(0.75rem, 2.5vw, 1.5rem);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.pattern-carousel__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(58.333vw, 780px);
  gap: 1.35rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(calc((100vw - min(58.333vw, 780px)) / 2), 1rem);
  padding: 0.25rem max(calc((100vw - min(58.333vw, 780px)) / 2), 1rem) 0.75rem;
  scrollbar-width: none;
}
.pattern-carousel__rail::-webkit-scrollbar { display: none; }
.pattern-slide {
  scroll-snap-align: center;
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.4rem);
}
.pattern-slide__media {
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  box-shadow:
    0 2px 4px rgba(16, 16, 24, 0.06),
    0 16px 32px -8px rgba(16, 16, 24, 0.28),
    0 40px 64px -20px rgba(16, 16, 24, 0.22);
  overflow: hidden;
  transform: translateY(0);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.pattern-slide:hover .pattern-slide__media {
  transform: translateY(-6px);
  box-shadow:
    0 4px 8px rgba(16, 16, 24, 0.08),
    0 24px 48px -10px rgba(16, 16, 24, 0.34),
    0 56px 88px -24px rgba(16, 16, 24, 0.28);
}
.pattern-slide__media--a { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%); }
.pattern-slide__media--b { background: linear-gradient(135deg, var(--navy) 0%, var(--pale) 130%); }
.pattern-slide__media--c { background: linear-gradient(135deg, var(--gold) 0%, var(--dark-gold) 100%); }
.pattern-slide__media--d { background: linear-gradient(135deg, var(--pale) 0%, var(--accent) 120%); }
.pattern-slide__copy { padding: 0 clamp(0.15rem, 0.6vw, 0.35rem); }
.pattern-slide__kicker {
  display: block;
  margin-bottom: 0.55rem;
  font: 600 0.68rem/1 var(--font-mono);
  letter-spacing: 0.18em;
  color: color-mix(in srgb, var(--navy) 65%, transparent);
}
.pattern-slide h3 {
  font-family: var(--font-display);
  font-weight: 560;
  font-size: clamp(1.45rem, 2.2vw, 1.85rem);
  line-height: 1.06;
  color: var(--navy);
  margin-bottom: 0.55rem;
}
.pattern-slide p {
  color: color-mix(in srgb, var(--navy) 78%, transparent);
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  font-weight: 500;
  line-height: 1.5;
  max-width: 58ch;
}
.pattern-carousel__nav {
  z-index: 2;
  padding: 0.35rem;
  border: 0;
  background: transparent;
  display: grid;
  place-items: center;
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}
.pattern-carousel__nav svg {
  height: clamp(42px, 5vw, 56px);
  overflow: visible;
  filter: drop-shadow(0 10px 18px rgba(16, 16, 24, 0.28));
}
.pattern-carousel__nav--prev svg { height: clamp(48px, 5.5vw, 62px); }
.pattern-carousel__rhomb { stroke-width: 1.5; transition: fill 0.2s var(--ease), stroke 0.2s var(--ease); }
.pattern-carousel__rhomb--thin { fill: color-mix(in srgb, var(--navy) 14%, transparent); stroke: var(--navy); }
.pattern-carousel__rhomb--thick { fill: color-mix(in srgb, var(--navy) 20%, transparent); stroke: var(--navy); }
.pattern-carousel__nav:hover { transform: translateY(-2px); }
.pattern-carousel__nav:hover .pattern-carousel__rhomb--thin,
.pattern-carousel__nav:hover .pattern-carousel__rhomb--thick { fill: var(--navy); }
.pattern-carousel__nav:active { transform: translateY(1px); }

.pattern-story__foot { text-align: center; }
.btn--ghost {
  background: color-mix(in srgb, var(--navy) 10%, transparent);
  color: var(--navy);
  border: 1px solid color-mix(in srgb, var(--navy) 30%, transparent);
}
.btn--ghost:hover { background: color-mix(in srgb, var(--navy) 16%, transparent); }
.pattern-story .text-link { color: var(--navy); }
.pattern-story .text-link--external { font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; }

@media (max-width: 900px) {
  .pattern-carousel { grid-template-columns: 1fr; gap: 0.75rem; -webkit-mask-image: none; mask-image: none; }
  .pattern-carousel__nav { display: none; }
  .pattern-carousel__rail {
    grid-auto-columns: 88vw;
    scroll-padding-inline: 6vw;
    padding-inline: 6vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pattern-slide__media,
  .pattern-slide:hover .pattern-slide__media { transition: none; transform: none; }
}