/* Wonderwild site — layout helpers, responsive rules, motion */
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream-100); -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }

@keyframes wwFade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes wwTabProgress { from { width: 0; } to { width: 100%; } }
@keyframes wwDrawerIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes wwBackdropIn { from { opacity: 0; } to { opacity: 1; } }

.ww-mob { display: none !important; }
.ww-book-icon { display: none !important; }
.ww-book-text { display: inline-flex !important; }

@media (max-width: 1200px) {
  .ww-cta-bar { gap: 0 16px !important; }
}
@media (max-width: 1040px) {
  .ww-tab-img-wrap { flex: none !important; width: 100% !important; }
  .ww-tab-img-wrap > div { aspect-ratio: 16/9 !important; }
  .ww-desk { display: none !important; }
  .ww-mob { display: inline-flex !important; }
  .ww-split { flex-direction: column !important; gap: 40px !important; }
  .ww-split[data-reverse] { flex-direction: column !important; }
  .ww-intro-grid, .ww-story-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  .ww-exp-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .ww-feat-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .ww-foot-grid { grid-template-columns: 1fr 1fr !important; }
  .ww-cards-3, .ww-cards-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .ww-amen { grid-template-columns: repeat(3, 1fr) !important; }
  .ww-cta-bar { gap: 0 12px !important; }
  .ww-top-banner-weather { display: none !important; }
}
@media (max-width: 900px) {
  .ww-cta-bar { display: none !important; }
  .ww-book-icon { display: inline-flex !important; }
  .ww-book-text { display: none !important; }
  .ww-menu-label { display: none !important; }
}
@media (max-width: 540px) {
  .ww-nav-search { display: none !important; }
  .ww-weather-days > div:nth-child(n+4) { display: none !important; }
}
@media (max-width: 620px) {
  .ww-exp-grid, .ww-feat-grid, .ww-foot-grid, .ww-inc-grid, .ww-cards-2, .ww-cards-3, .ww-cards-4 { grid-template-columns: 1fr !important; }
  .ww-amen { grid-template-columns: repeat(2, 1fr) !important; }
  .ww-top-banner { display: none !important; }
  .ww-nl-row { flex-direction: column !important; }
  .ww-nl-row > div, .ww-nl-row > button { min-width: 100% !important; width: 100% !important; }
}

@media (min-width: 901px) {
  .ww-logo-img { width: 64px !important; height: 64px !important; }
  .ww-logo-wordmark { font-size: 1.25rem !important; }
}

/* ---------- Intro editorial hero ---------- */
.ww-intro-hero { display: flex; align-items: center; gap: 72px; }
.ww-intro-img-col { flex: 0 0 52%; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-image); }
.ww-intro-text-col { flex: 1; display: flex; flex-direction: column; justify-content: center; }

@media (max-width: 900px) {
  .ww-intro-hero { flex-direction: column; gap: 40px; }
  .ww-intro-img-col { flex: none; width: 100%; }
}

/* ---------- Horizontal scroll utility ---------- */
.ww-scroll-x { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; }
.ww-scroll-x::-webkit-scrollbar { display: none; }

/* ---------- Experience horizontal scroll carousel ---------- */
.ww-exp-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; touch-action: pan-x; }
.ww-exp-scroll::-webkit-scrollbar { display: none; }
.ww-exp-track { display: flex; gap: 22px; padding: 0 clamp(20px, 5vw, 80px) 16px; justify-content: safe center; align-items: stretch; }
.ww-exp-card { width: clamp(220px, 70vw, 310px); flex-shrink: 0; display: flex; flex-direction: column; }

.ww-menu-cards::-webkit-scrollbar { display: none; }

@media (max-width: 680px) {
  .ww-footer-main { flex-direction: column !important; gap: 36px !important; align-items: stretch !important; }
  .ww-footer-main > div:last-child { border-top: 1px solid rgba(255,255,255,0.12) !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Scroll indicator ---------- */
@keyframes wwScrollBounce {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50%       { transform: translateY(5px); opacity: 0.85; }
}
.ww-scroll-indicator { animation: wwScrollBounce 2s ease-in-out infinite; }

/* ---------- Editorial page ---------- */
.ww-editorial-hero { display: grid; grid-template-columns: 2fr 1fr; background: white; border-bottom: 1px solid var(--cream-300); }
.ww-editorial-sidebar { border-left: 1px solid var(--cream-300); display: flex; flex-direction: column; }
.ww-editorial-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 52px 28px; }

@media (max-width: 960px) {
  .ww-editorial-hero { grid-template-columns: 1fr; }
  .ww-editorial-sidebar { border-left: none; border-top: 1px solid var(--cream-300); }
  .ww-editorial-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
}
@media (max-width: 600px) {
  .ww-editorial-grid { grid-template-columns: 1fr; gap: 44px; }
}

/* ---------- Article page ---------- */
.ww-article-wrap { display: grid; grid-template-columns: 56px 1fr 292px; gap: 0; max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }
.ww-article-share { position: sticky; top: 108px; height: fit-content; display: flex; flex-direction: column; gap: 20px; padding-top: 6px; }
.ww-article-content { padding: 0 clamp(24px, 3.5vw, 56px); border-right: 1px solid var(--cream-300); }
.ww-article-aside { padding: 0 0 0 clamp(20px, 3vw, 36px); }

@media (max-width: 860px) {
  .ww-article-wrap { grid-template-columns: 1fr; }
  .ww-article-share { position: static; flex-direction: row; gap: 16px; margin-bottom: 20px; }
  .ww-article-content { padding: 0; border-right: none; }
  .ww-article-aside { padding: 28px 0 0; border-top: 1px solid var(--cream-300); margin-top: 36px; }
}

/* ---------- Policy page TOC ---------- */
.ww-toc-accordion { display: none; }
@media (max-width: 760px) {
  .ww-policy-layout { flex-direction: column !important; gap: 0 !important; }
  .ww-toc-sidebar { display: none !important; }
  .ww-toc-accordion { display: block; width: 100%; margin-bottom: 28px; }
}