/* ==========================================================================
   WHY BOOK WITH US -- v8.0 "Proof of Operation" (Wavion Lanka, white theme)
   All var(--...) tokens verified against main.css. Section background and
   body copy follow the white theme (--bg-primary / --text-primary are the
   light-ivory / near-black pair); photo cards keep a dark gradient overlay
   under their captions since that's about photo legibility, not theme.
   ========================================================================== */

.wcu4 { position: relative; padding: var(--spacing-20) 0; background: var(--bg-primary); overflow: hidden; }
.wcu4__inner { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--spacing-6); }

[data-tt-animate] { opacity: 0; transform: translateY(22px); transition: var(--transition-premium); will-change: opacity, transform; }
[data-tt-animate].tt-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { [data-tt-animate] { opacity: 1; transform: none; transition: none; } }

/* INTRO */
.wcu4__header { max-width: 40rem; margin: 0 auto var(--spacing-6); text-align: center; }
.wcu4__label {
  display: inline-block; font-family: var(--font-primary); font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold); letter-spacing: var(--ls-widest);
  text-transform: uppercase; color: var(--color-gold-dark); margin-bottom: var(--spacing-3);
}
.wcu4__heading {
  font-family: var(--font-display); font-size: clamp(1.8rem, 3.8vw, 2.7rem);
  line-height: var(--leading-tight); color: var(--text-primary);
  font-weight: var(--font-weight-bold); margin: 0 0 var(--spacing-3);
}
.wcu4__heading em { font-style: italic; font-family: var(--font-elegant); color: var(--color-gold-dark); font-weight: var(--font-weight-medium); }
.wcu4__intro { font-family: var(--font-primary); font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--text-secondary); }

/* MASONRY GRID -- 4 cards across a 4-column / 2-row frame:
   Guest Service (lg, 2x2) + Field Guides (tall, 1x2) + Our Team (1x1) + Our Fleet (1x1) */
.wcu4-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 190px);
  gap: var(--spacing-4); margin-bottom: var(--spacing-10);
}
.wcu4-card {
  position: relative; border-radius: var(--radius-lg); overflow: hidden; cursor: default;
  border: 1px solid var(--border-primary); box-shadow: var(--shadow-md); transition: var(--transition-premium);
}
.wcu4-card:hover { box-shadow: var(--shadow-xl); transform: translateY(-3px); border-color: var(--border-gold); }
.wcu4-card--lg { grid-column: span 2; grid-row: span 2; }
.wcu4-card--tall { grid-row: span 2; }

.wcu4-card__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.wcu4-card__slide.is-active { opacity: 1; }
.wcu4-card__slide img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.001); }
@media (prefers-reduced-motion: reduce) { .wcu4-card__slide { transition: none; } }

/* Slow continuous zoom on the active photo -- a premium "always alive" feel
   without relying on cuts alone. */
.wcu4-card__slide.is-active img { animation: wcu4KenBurns 9s ease-in-out infinite alternate; }
@keyframes wcu4KenBurns { from { transform: scale(1); } to { transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) { .wcu4-card__slide.is-active img { animation: none; } }

.wcu4-card::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--gradient-overlay);
}
.wcu4-card__badge {
  position: absolute; top: var(--spacing-2-5); left: var(--spacing-2-5); z-index: 2;
  background: var(--color-dark-50); backdrop-filter: blur(6px); color: var(--color-gold-light);
  font-family: var(--font-primary); font-size: 0.64rem; font-weight: var(--font-weight-semibold);
  letter-spacing: var(--ls-wider); text-transform: uppercase; padding: var(--spacing-1) var(--spacing-2-5);
  border-radius: var(--radius-full); border: 1px solid var(--color-white-18);
}
.wcu4-card__count {
  position: absolute; top: var(--spacing-2-5); right: var(--spacing-2-5); z-index: 2;
  background: var(--color-dark-50); backdrop-filter: blur(6px); color: var(--color-white-90);
  font-family: var(--font-primary); font-size: 0.62rem; font-weight: var(--font-weight-semibold);
  padding: var(--spacing-0-5) var(--spacing-2); border-radius: var(--radius-full);
  border: 1px solid var(--color-white-18); letter-spacing: var(--ls-wide);
}

.wcu4-card__dots { position: absolute; bottom: var(--spacing-2-5); right: var(--spacing-2-5); z-index: 2; display: flex; gap: 4px; max-width: 60%; flex-wrap: wrap; justify-content: flex-end; }
.wcu4-card__pdot { width: 4px; height: 4px; border-radius: var(--radius-full); background: var(--color-white-40); transition: var(--transition-premium); }
.wcu4-card__pdot.is-active { background: var(--color-gold); width: 10px; border-radius: var(--radius-full); }

.wcu4-card__foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: var(--spacing-3); }
.wcu4-card__title {
  font-family: var(--font-display); color: var(--text-white); font-weight: var(--font-weight-bold);
  margin: 0 0 3px; line-height: var(--leading-snug); font-size: var(--text-base);
}
.wcu4-card--lg .wcu4-card__title { font-size: var(--text-xl); }
.wcu4-card--tall .wcu4-card__title { font-size: var(--text-base); }

/* Meta text crossfades and slides up in step with the photo underneath it */
.wcu4-card__meta { position: relative; height: 1.1rem; overflow: hidden; margin-top: 2px; }
.wcu4-card__meta-text {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: var(--spacing-1-5);
  font-family: var(--font-primary); font-size: 0.7rem; color: var(--color-white-70);
  opacity: 0; transform: translateY(10px); transition: opacity 550ms ease, transform 550ms cubic-bezier(.22,.8,.32,1);
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.wcu4-card__meta-text.is-active { opacity: 1; transform: translateY(0); }
.wcu4-card__meta-text.is-leaving { opacity: 0; transform: translateY(-10px); }
.wcu4-card__meta-text svg { width: 0.7rem; height: 0.7rem; color: var(--color-gold); flex: none; }
@media (prefers-reduced-motion: reduce) { .wcu4-card__meta-text { transition: none; } }

@media (max-width: 900px) {
  .wcu4-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; grid-auto-rows: 180px; }
  .wcu4-card--lg { grid-column: span 2; grid-row: span 2; }
  .wcu4-card--tall { grid-column: span 1; grid-row: span 2; }
}
@media (max-width: 560px) {
  .wcu4-grid { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .wcu4-card--lg, .wcu4-card--tall { grid-column: span 1; grid-row: span 1; }
}

/* STAT BAR */
.wcu4-stats {
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-lg);
  padding: var(--spacing-5) var(--spacing-4); margin-bottom: var(--spacing-8); text-align: center;
  box-shadow: var(--shadow-sm);
}
.wcu4-stats > div:not(:last-child) { border-right: 1px solid var(--border-primary); }
.wcu4-stat__num { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-gold-dark); font-weight: var(--font-weight-bold); display: block; transition: text-shadow 300ms ease; }
.wcu4-stat__num--glow { text-shadow: 0 0 18px var(--color-gold-glow), 0 0 4px var(--color-gold-glow-sm); }
.wcu4-stat__label { font-family: var(--font-primary); font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
@media (max-width: 700px) {
  .wcu4-stats { grid-template-columns: repeat(2, 1fr); }
  .wcu4-stats > div:nth-child(2n) { border-right: none; }
  .wcu4-stats > div:not(:nth-last-child(-n+2)) { border-bottom: 1px solid var(--border-primary); padding-bottom: var(--spacing-3); margin-bottom: var(--spacing-2); }
}

/* CTA PANEL -- deliberate dark-premium contrast block inside the white
   theme section (main.css --gradient-premium), same pattern main.css
   already uses for accent panels against light backgrounds. */
.wcu4-cta {
  background: var(--gradient-premium); border-radius: var(--radius-2xl); padding: var(--spacing-10);
  box-shadow: var(--shadow-premium);
}
.wcu4-cta__eyebrow { display: block; font-family: var(--font-primary); font-size: var(--text-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-gold-light); margin-bottom: var(--spacing-3); }
.wcu4-cta__heading { font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.8rem); color: var(--text-white); margin: 0 0 var(--spacing-2); }
.wcu4-cta__heading em { font-style: italic; font-family: var(--font-elegant); color: var(--color-gold-light); }
.wcu4-cta__sub { font-family: var(--font-primary); color: var(--color-white-80); margin: 0 0 var(--spacing-5); line-height: var(--leading-relaxed); font-size: var(--text-base); max-width: 34rem; }
.wcu4-cta__actions { display: flex; gap: var(--spacing-3); flex-wrap: wrap; }
.wcu4-cta__btn {
  font-family: var(--font-primary); font-weight: var(--font-weight-semibold); font-size: var(--text-sm);
  padding: var(--spacing-3) var(--spacing-6); border-radius: var(--radius-full); text-decoration: none;
  transition: var(--transition-premium); display: inline-flex; align-items: center;
}
.wcu4-cta__btn--primary { background: var(--gradient-gold); color: var(--color-navy-abyss); }
.wcu4-cta__btn--primary:hover { box-shadow: var(--glow-gold); transform: translateY(-1px); }
.wcu4-cta__btn--ghost { background: transparent; color: var(--text-white); border: 1px solid var(--color-white-30); }
.wcu4-cta__btn--ghost:hover { background: var(--color-white-10); }

@media (max-width: 640px) {
  .wcu4 { padding: var(--spacing-14) 0; }
  .wcu4-cta { padding: var(--spacing-6); }
}