/* Adventure page specific styles - built atop base.css */

/* Layout helpers */
.section { padding: var(--space-16) 0; }
.section.alt { background: var(--color-bg-secondary); }

/* Breadcrumbs */
.breadcrumb { margin: var(--space-6) 0 var(--space-2); font-size: var(--font-size-sm); color: var(--color-text-light); }
.breadcrumb ol { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.breadcrumb li { display: inline-flex; align-items: center; }
.breadcrumb li + li::before { content: "/"; color: var(--color-gray-400); margin: 0 var(--space-2); }

/* Hero */
.hero { background: linear-gradient(135deg, var(--color-bg-accent) 0%, var(--color-bg-secondary) 100%); }
.hero-grid { align-items: center; gap: var(--space-8); }
.hero-text p { font-size: var(--font-size-lg); color: var(--color-text-secondary); }
.hero-ctas { margin-top: var(--space-6); display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* Images */
.image-frame { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); }
.image-frame img { width: 100%; height: auto; }

/* Grids */
.loc-grid, .challenge-grid, .art-grid, .community-grid { gap: var(--space-8); align-items: center; }
.order-image { order: 2; }
.section-text { display: flex; flex-direction: column; gap: var(--space-4); }
.inline-links { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-4); }

/* Lists */
.feature-list { display: grid; gap: var(--space-3); }
.feature-list li { padding-left: var(--space-4); position: relative; }
.feature-list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 0 2px rgba(255,107,53,0.15); }

/* Cards */
.tip-card { background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent)); color: var(--color-text-inverse); }
.tip-card .card-title { color: var(--color-text-inverse); }

/* Reveal animation baseline for JS */
[data-animate] { opacity: 0; transform: translateY(16px); }
[data-animate].is-visible { opacity: 1; transform: none; transition: opacity var(--transition-base), transform var(--transition-base); }

/* Responsive */
@media (max-width: 768px) {
  .order-image { order: 0; }
}