/* ══════════════════════════════════════════════════════════════
   South China Tours — Components
   ══════════════════════════════════════════════════════════════ */

/* =============================================================
   1. Navigation
   ============================================================= */

.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,0.95);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  padding: 0 var(--space-xl);
  min-height: 72px;
}

.logo {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  flex-shrink: 0;
}

.logo span { color: var(--accent); }

.nav-links {
  display: flex;
  list-style: none;
  gap: var(--space-sm);
  align-items: center;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 18px;
  text-decoration: none;
  color: var(--text-medium);
  font-size: var(--font-size-base);
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--primary);
  background: var(--bg-light);
}

.nav-right-group {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  flex-shrink: 0;
}

.nav-channel-desktop {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-search-desktop input,
.nav-search-mobile input {
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 8px 16px;
  font-size: 0.85rem;
  background: var(--bg-light);
  outline: none;
  width: 160px;
}

.nav-search-desktop input:focus {
  width: 220px;
  border-color: var(--accent);
}

.nav-channel-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  transition: var(--transition);
}

.nav-channel-pill:hover {
  background: var(--primary-light);
  color: #fff;
}

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(26,60,94,0.14);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--primary);
  border-radius: var(--radius-full);
}

.nav-search-mobile,
.nav-contact-mobile {
  display: none;
}

/* =============================================================
   2. Hero
   ============================================================= */

.hero {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 50%, var(--primary) 100%);
}

.hero-photo {
  background-size: cover;
  background-position: center;
}

.hero-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(26,60,94,0.7) 0%, rgba(42,90,138,0.4) 100%);
}

.hero-content {
  position: relative;
  max-width: 720px;
  padding: 0 var(--space-xl);
}

.hero-copy h1 {
  font-size: clamp(2.8rem, 7vw, 7.2rem);
  line-height: 0.92;
  color: #fff;
  margin-bottom: 22px;
  text-shadow: 0 18px 46px rgba(0,0,0,0.26);
}

.hero-copy h1 .hero-sub {
  display: block;
  font-size: 0.82em;
}

.hero-copy .eyebrow {
  color: var(--accent-light);
}

.hero-copy p {
  max-width: 58ch;
  margin: 0 0 24px;
  color: rgba(255,255,255,0.86);
  font-size: var(--font-size-lg);
}

/* ── Homepage specific hero ── */
.home-hero-shell {
  position: relative;
  background:
    linear-gradient(135deg, rgba(26,60,94,0.92) 0%, rgba(42,90,138,0.78) 50%, rgba(26,60,94,0.92) 100%),
    var(--hero-image) center / cover no-repeat;
}

.home-route-panel {
  background: rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  border: 1px solid rgba(255,255,255,0.15);
}

.home-route-panel p {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
  color: var(--accent-light);
}

.home-route-panel div {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.home-route-panel strong {
  font-size: 0.9rem;
  color: #fff;
}

.home-route-panel span {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.8);
}

/* ── Hero path cards ── */
.home-paths {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.home-paths a {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 18px 22px;
  background: rgba(255,255,255,0.12);
  border-radius: var(--radius);
  text-decoration: none;
  transition: var(--transition);
}

.home-paths a:hover {
  background: rgba(255,255,255,0.18);
}

.home-paths a span {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--accent-light);
  line-height: 1;
}

.home-paths a strong {
  display: block;
  font-size: 0.95rem;
  color: #fff;
  margin-bottom: 2px;
}

.home-paths a em {
  font-style: normal;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.7);
}

/* =============================================================
   3. Buttons
   ============================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 36px;
  border-radius: var(--radius-full);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: var(--transition);
  line-height: 1.2;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
}

.btn-primary:hover {
  background: var(--primary-light);
  color: #fff;
}

.btn-outline {
  background: transparent;
  border-color: var(--border);
  color: var(--text-dark);
}

.btn-outline:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--primary);
  text-decoration: none;
}

.text-link::after {
  content: '→';
  transition: transform var(--transition);
}

.text-link:hover::after {
  transform: translateX(4px);
}

/* =============================================================
   4. Cards — Generic
   ============================================================= */

.card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.card-image {
  width: 100%;
  object-fit: cover;
  display: block;
}

.card-body {
  padding: var(--space-lg);
}

.card-body h3 {
  font-size: 1.1rem;
  margin-bottom: 10px;
}

.card-body p {
  color: var(--text-medium);
  font-size: 0.9rem;
}

/* =============================================================
   5. Cards — Homepage Region Explorer
   ============================================================= */

.region-atlas {
  display: grid;
  gap: 26px;
}

.region-editorial-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 22px;
  align-items: start;
}

.region-feature {
  grid-row: span 2;
  position: relative;
  min-height: 520px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  display: block;
}

.region-feature img,
.region-side-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.region-feature::after,
.region-side-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,18,28,0.08) 0%, rgba(6,18,28,0.58) 42%, rgba(6,18,28,0.94) 100%);
  z-index: 1;
}

.region-feature-copy,
.region-side-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 24px 26px;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,0.42);
}

.region-feature-copy h3,
.region-side-copy h3 {
  font-size: 1.8rem;
  margin: 6px 0 10px;
  color: #fff;
  line-height: 1.02;
}

.region-feature-copy p,
.region-side-copy p {
  color: rgba(255,255,255,0.94);
  margin-bottom: 12px;
}

.region-feature-copy .eyebrow,
.region-side-copy .eyebrow {
  color: var(--accent-light) !important;
}

.region-feature-copy span {
  font-weight: 700;
  opacity: 0.96;
}

.region-side-stack {
  display: grid;
  gap: 22px;
}

.region-side-card {
  position: relative;
  min-height: 250px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  display: block;
}

.region-side-copy h3 {
  font-size: 1.3rem;
}

.region-note-panel {
  max-width: 520px;
  padding-top: 4px;
}

.region-note-panel h3 {
  color: var(--primary);
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.region-note-panel p {
  color: rgba(44,44,44,0.76);
}

.region-compact-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}

.region-compact-card {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--bg-white);
  transition: border-color var(--transition);
}

.region-compact-card:hover {
  border-color: var(--primary);
}

.region-compact-card img {
  width: 100%;
  height: 100%;
  min-height: 130px;
  object-fit: cover;
}

.region-compact-card div {
  padding: 18px 16px 22px;
}

.region-compact-card strong {
  display: block;
  color: var(--primary);
  font-size: 0.95rem;
  margin-bottom: 6px;
}

.region-compact-card span {
  color: var(--text-medium);
  font-size: 0.82rem;
}

/* =============================================================
   6. Cards — Travel Types / Mode
   ============================================================= */

.mode-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.92fr) minmax(0, 1.08fr);
  gap: 40px;
  align-items: start;
}

.mode-intro {
  max-width: 500px;
}

.mode-list {
  display: grid;
}

.mode-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 20px;
  align-items: start;
  padding: 16px 0;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: var(--transition);
}

.mode-row:last-child {
  border-bottom: none;
}

.mode-row:hover {
  padding-left: 8px;
}

.mode-index {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}

.mode-copy strong {
  display: block;
  font-size: 1.05rem;
  color: var(--primary);
  margin-bottom: 4px;
}

.mode-copy p {
  font-size: 0.85rem;
  color: var(--text-medium);
}

.mode-row em {
  font-style: normal;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
  align-self: center;
}

/* =============================================================
   7. Cards — Guide Cards (Homepage + Blog)
   ============================================================= */

.guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.guide-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
}

.guide-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}

.guide-card-image-link {
  display: block;
  position: relative;
  overflow: hidden;
}

.guide-card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.guide-card:hover .guide-card-image {
  transform: scale(1.03);
}

.guide-card-label {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  backdrop-filter: blur(4px);
}

.guide-card-body {
  padding: var(--space-lg);
}

.guide-card-body h3 {
  font-size: 1.15rem;
  line-height: 1.35;
  margin-bottom: 10px;
}

.guide-card-body h3 a {
  color: var(--primary);
  text-decoration: none;
}

.guide-card-body p {
  color: var(--text-medium);
  font-size: 0.88rem;
}

/* =============================================================
   8. Cards — Blog Region Cards (Archive pages)
   ============================================================= */

.blog-region-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.blog-region-card {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  overflow: hidden;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
}

.blog-region-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.blog-region-media {
  display: block;
  min-height: 100%;
  overflow: hidden;
}

.blog-region-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.blog-region-card:hover .blog-region-media img {
  transform: scale(1.03);
}

.blog-region-copy {
  padding: var(--space-lg);
}

.blog-region-copy .eyebrow {
  color: var(--accent);
  font-size: 0.75rem;
}

.blog-region-copy h3 {
  font-size: 1.05rem;
  margin: 6px 0 10px;
  line-height: 1.35;
}

.blog-region-copy h3 a {
  color: var(--primary);
  text-decoration: none;
}

.blog-region-copy p {
  font-size: 0.85rem;
  color: var(--text-medium);
  line-height: 1.6;
}

.blog-card-footer {
  display: flex;
  gap: 12px;
  margin-top: 10px;
  font-size: 0.8rem;
  color: var(--text-light);
}

/* =============================================================
   9. Cards — Blog List (Home.php grid)
   ============================================================= */

.blog-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 22px;
}

.blog-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
}

.blog-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}

.blog-card-image-link {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #eef4f8;
}

.blog-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.blog-card:hover .blog-card-image {
  transform: scale(1.03);
}

.blog-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 22px 24px;
}

.blog-card-taxonomy {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.blog-chip {
  display: inline-flex;
  padding: 3px 12px;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--bg-light);
  color: var(--text-medium);
}

.blog-chip-region {
  background: var(--primary);
  color: #fff;
}

.blog-meta {
  font-size: 0.78rem;
  color: var(--text-light);
  margin-bottom: 8px;
}

.blog-dot {
  margin: 0 4px;
}

.blog-card-body h2 {
  font-size: 1.1rem;
  margin-bottom: 8px;
  line-height: 1.35;
}

.blog-card-body h2 a {
  color: var(--primary);
  text-decoration: none;
}

.blog-excerpt {
  font-size: 0.85rem;
  color: var(--text-medium);
  line-height: 1.6;
  margin-bottom: 12px;
  flex-grow: 1;
}

/* =============================================================
   10. Explorer Toolbar (Guides filter)
   ============================================================= */

.explorer-toolbar {
  max-width: 1480px;
  margin: 0 auto;
  padding: 26px 32px 30px;
  background: var(--bg-light);
  border-top: 1px solid rgba(15,23,42,0.1);
  border-bottom: 1px solid rgba(15,23,42,0.1);
}

.explorer-search-panel {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}

.explorer-search-panel label {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--primary);
}

.explorer-search-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.explorer-search-box input {
  width: 100%;
  border: 0;
  outline: 0;
  padding: 12px 18px;
  font-size: 0.9rem;
}

.explorer-search-box span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 20px;
  background: var(--primary);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
}

.explorer-filter-group {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin-top: 12px;
}

.explorer-filter-group p {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--primary);
  margin: 0;
}

.explorer-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.explorer-chip {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid rgba(12,74,110,0.16);
  border-radius: var(--radius-full);
  background: #fff;
  color: var(--primary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.explorer-chip:hover,
.explorer-chip.is-active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* =============================================================
   11. Single Article
   ============================================================= */

.article-section {
  padding: var(--space-2xl) var(--space-xl);
  background: var(--bg-white);
}

.article-layout-shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 40px;
  max-width: 1160px;
  margin: 0 auto;
  align-items: start;
}

.article-side-rail {
  position: sticky;
  top: 100px;
}

.article-rail-card {
  background: var(--bg-light);
  border-radius: var(--radius);
  padding: var(--space-lg);
}

.article-rail-card .eyebrow {
  margin-bottom: 6px;
}

.article-rail-card h2 {
  font-size: 1rem;
  margin-bottom: var(--space-md);
  color: var(--primary);
}

.article-compass-list {
  list-style: none;
}

.article-compass-list li {
  padding: 8px 0;
  font-size: 0.85rem;
  color: var(--text-medium);
  border-top: 1px solid var(--border);
}

.article-compass-list li:first-child {
  border-top: none;
}

.article-compass-list li strong {
  color: var(--primary);
}

/* =============================================================
   12. Footer
   ============================================================= */

.footer {
  background: var(--primary);
  color: rgba(255,255,255,0.85);
  padding: var(--space-2xl) var(--space-xl) 0;
}

.footer-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.footer h4 {
  color: #fff;
  font-size: 0.9rem;
  margin-bottom: var(--space-md);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.footer a {
  display: block;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  font-size: 0.85rem;
  padding: 4px 0;
  transition: color var(--transition);
}

.footer a:hover {
  color: #fff;
}

.footer p {
  color: rgba(255,255,255,0.5);
  font-size: 0.82rem;
  margin-top: var(--space-sm);
}

.footer-social-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.footer-social-pill span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  font-weight: 700;
  font-size: 0.78rem;
}

.footer-bottom {
  text-align: center;
  padding: 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 0.8rem;
  color: rgba(255,255,255,0.4);
}

.footer-social-reserve {
  grid-column: 1 / -1;
}

/* =============================================================
   13. Client Proof / How It Works
   ============================================================= */

.client-proof-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.client-proof-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 0.8fr);
  gap: 18px;
  align-items: stretch;
}

.client-proof-card {
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}

.client-proof-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.client-proof-card div {
  padding: var(--space-lg);
}

.client-proof-card span {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent);
  margin-bottom: 6px;
}

.client-proof-card strong {
  display: block;
  font-size: 1.05rem;
  color: var(--primary);
  margin-bottom: 8px;
}

.client-proof-card p {
  font-size: 0.85rem;
  color: var(--text-medium);
}

.client-proof-offer {
  background: var(--primary);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-xl);
}

.client-proof-offer .eyebrow {
  color: var(--accent-light);
}

.client-proof-offer h3 {
  color: #fff;
  font-size: 1.3rem;
  margin-bottom: 10px;
}

.client-proof-offer p {
  color: rgba(255,255,255,0.85);
  font-size: 0.9rem;
  margin-bottom: var(--space-md);
}

.client-proof-offer .text-link {
  color: var(--accent-light);
}

/* =============================================================
   14. Intro Ribbon
   ============================================================= */

.intro-ribbon {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.intro-title h2 {
  font-size: 1.5rem;
  max-width: 800px;
  color: var(--primary);
}

.intro-lines > div {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.intro-lines strong {
  display: block;
  font-size: 0.95rem;
  color: var(--primary);
  margin-bottom: 4px;
}

.intro-lines span {
  font-size: 0.85rem;
  color: var(--text-medium);
}

/* =============================================================
   15. Forms
   ============================================================= */

.itinerary-form {
  display: grid;
  gap: 24px;
}

.itinerary-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.itinerary-form-grid label {
  display: block;
}

.itinerary-form-grid span {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text-medium);
}

.itinerary-form-grid input,
.itinerary-form-grid select {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9rem;
}

.itinerary-choice-block {
  background: var(--bg-light);
  border-radius: var(--radius);
  padding: var(--space-lg);
}

.itinerary-choice-block strong {
  display: block;
  margin-bottom: 12px;
  color: var(--primary);
}

.itinerary-check-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.itinerary-check-grid label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  cursor: pointer;
}

.itinerary-notes {
  display: block;
}

.itinerary-notes span {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text-medium);
}

.itinerary-notes textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  resize: vertical;
}

.itinerary-submit {
  justify-self: start;
}

.itinerary-message {
  padding: 14px 18px;
  border-radius: var(--radius);
  margin-bottom: var(--space-lg);
  font-size: 0.9rem;
}

.itinerary-message-success {
  background: #d4edda;
  color: #155724;
}

.itinerary-message-error {
  background: #f8d7da;
  color: #721c24;
}

/* =============================================================
   16. Home Intro Section
   ============================================================= */

.home-split-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  margin-bottom: var(--space-xl);
}

.home-mini-stat {
  padding: 12px 0;
  border-bottom: 1px solid rgba(16,47,70,0.12);
}

.home-mini-stat:last-child {
  border-bottom: none;
}

.home-mini-stat strong {
  display: block;
  font-size: 0.9rem;
  color: var(--primary);
  margin-bottom: 2px;
}

.home-mini-stat span {
  font-size: 0.85rem;
  color: var(--text-medium);
}

/* =============================================================
   17. Destinations Page
   ============================================================= */

.destinations-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: var(--space-xl);
  align-items: start;
}

.destinations-hero-panel {
  background: var(--bg-light);
  border-radius: var(--radius);
  padding: var(--space-lg);
}

.dest-hero-actions {
  display: flex;
  gap: 14px;
  margin-top: var(--space-lg);
}

/* =============================================================
   18. Empty State
   ============================================================= */

.empty-state {
  text-align: center;
  padding: 80px 20px;
}

.empty-state h2 {
  color: var(--primary);
  font-size: 1.3rem;
  margin-bottom: 12px;
}

.empty-state p {
  color: var(--text-medium);
  max-width: 480px;
  margin: 0 auto 24px;
}

.empty-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

/* =============================================================
   19. Pagination
   ============================================================= */

.blog-pagination {
  text-align: center;
  padding: var(--space-xl) 0;
}

.blog-pagination a,
.blog-pagination span {
  display: inline-block;
  padding: 8px 14px;
  margin: 0 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--text-medium);
}

.blog-pagination .current {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* =============================================================
   20. Destinations Page (dp-* classes)
   ============================================================= */

.dp-section { padding:56px 32px; }
.dp-section-alt { background:var(--bg-light); }
.dp-inner { max-width:1240px; margin:0 auto; }
.dp-eyebrow { font-size:0.8rem; font-weight:600; text-transform:uppercase; letter-spacing:1px; color:var(--accent); margin-bottom:6px; }
.dp-title { font-size:1.75rem; line-height:1.3; margin-bottom:8px; color:var(--primary); }
.dp-sub { font-size:0.95rem; color:var(--text-medium); max-width:600px; line-height:1.65; }
.dp-center { text-align:center; }
.dp-center .dp-sub { margin-left:auto; margin-right:auto; }

.dp-hero { position:relative; min-height:480px; display:flex; align-items:center; justify-content:center; text-align:center; color:#fff; overflow:hidden; }
.dp-hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; z-index:0; }
.dp-hero-overlay { position:absolute; inset:0; background:linear-gradient(135deg,rgba(26,26,46,0.88) 0%,rgba(26,26,46,0.45) 100%); z-index:1; }
.dp-hero-content { position:relative; z-index:2; max-width:720px; padding:0 32px; }
.dp-hero h1 { font-size:clamp(2.2rem,5vw,3rem); margin-bottom:16px; color:#fff; }
.dp-hero p { font-size:1.1rem; opacity:0.9; margin-bottom:32px; line-height:1.8; color:rgba(255,255,255,0.9); }
.dp-hero-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:640px; margin:8px auto 0; position:relative; z-index:2; }
.dp-hero-stat { background:rgba(255,255,255,0.12); backdrop-filter:blur(8px); border-radius:12px; padding:18px 16px; }
.dp-hero-stat strong { display:block; font-size:1.2rem; color:#fff; margin-bottom:4px; }
.dp-hero-stat span { font-size:0.78rem; color:rgba(255,255,255,0.75); }

.dp-intro-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:start; }
.dp-intro-highlights { display:grid; gap:16px; }
.dp-intro-hl { display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:start; padding:14px 18px; background:#fff; border-radius:10px; border:1px solid var(--border); }
.dp-intro-hl h4 { font-size:0.9rem; color:var(--primary); margin-bottom:3px; }
.dp-intro-hl p { font-size:0.82rem; color:var(--text-medium); }

.dp-section-head { margin-bottom:28px; }
.dp-dest-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.dp-dest-card { display:block; text-decoration:none; color:inherit; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:#fff; transition:0.25s; }
.dp-dest-card:hover { box-shadow:0 6px 20px rgba(0,0,0,0.07); transform:translateY(-3px); border-color:var(--accent); }
.dp-dest-card img { width:100%; height:140px; object-fit:cover; display:block; }
.dp-dest-body { padding:14px 16px; }
.dp-dest-body h3 { font-size:0.95rem; margin-bottom:3px; color:var(--primary); }
.dp-dest-tag { font-size:0.78rem; color:var(--text-medium); margin-bottom:8px; }
.dp-dest-link { font-size:0.82rem; font-weight:600; color:var(--accent); text-decoration:none; display:inline-flex; align-items:center; gap:4px; }
.dp-dest-link:hover { text-decoration:underline; }

.dp-style-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.dp-style-card { display:block; text-decoration:none; color:inherit; padding:24px 12px; text-align:center; border:1px solid var(--border); border-radius:12px; background:#fff; transition:0.25s; }
.dp-style-card:hover { box-shadow:0 6px 20px rgba(0,0,0,0.07); transform:translateY(-3px); border-color:var(--accent); }
.dp-style-icon { font-size:1.8rem; margin-bottom:8px; display:block; }
.dp-style-card h3 { font-size:0.88rem; margin:0; font-weight:600; }

.dp-itin-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.dp-itin-card { display:block; text-decoration:none; color:inherit; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:#fff; transition:0.25s; }
.dp-itin-card:hover { box-shadow:0 6px 20px rgba(0,0,0,0.07); transform:translateY(-3px); border-color:var(--accent); }
.dp-itin-card img { width:100%; height:180px; object-fit:cover; display:block; }
.dp-itin-body { padding:16px 18px; }
.dp-itin-body h3 { font-size:1rem; margin-bottom:6px; color:var(--primary); }
.dp-itin-meta-line { font-size:0.8rem; color:var(--text-medium); margin-bottom:3px; }
.dp-itin-meta-line strong { color:var(--primary); font-weight:600; }
.dp-itin-empty { text-align:center; padding:48px 16px; color:var(--text-medium); font-size:0.9rem; }

.dp-cta-band { text-align:center; padding:64px 32px; background:var(--primary); color:#fff; border-radius:16px; }
.dp-cta-band .dp-eyebrow { color:var(--accent); }
.dp-cta-band h2 { font-size:1.8rem; margin-bottom:10px; color:#fff; }
.dp-cta-band p { font-size:0.95rem; opacity:0.85; max-width:480px; margin:0 auto 24px; line-height:1.6; color:rgba(255,255,255,0.9); }

@media (max-width:1024px) { .dp-dest-grid { grid-template-columns:repeat(3,1fr); } .dp-style-grid { grid-template-columns:repeat(4,1fr); } }
@media (max-width:900px) { .dp-intro-layout { grid-template-columns:1fr; gap:24px; } .dp-dest-grid { grid-template-columns:repeat(2,1fr); } .dp-style-grid { grid-template-columns:repeat(2,1fr); } .dp-itin-grid { grid-template-columns:1fr; } }
@media (max-width:768px) { .dp-hero h1 { font-size:2rem; } .dp-hero-stats { grid-template-columns:1fr; margin-top:-20px; } .dp-intro-highlights { grid-template-columns:1fr; } }
@media (max-width:480px) { .dp-dest-grid { grid-template-columns:1fr; } .dp-style-grid { grid-template-columns:repeat(2,1fr); } }

/* =============================================================
   21. Blog Homepage (home.php) — core-priority, expansion, shelf
   ============================================================= */

.blog-header-rich { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,360px); gap:40px; align-items:center; padding:56px 32px; max-width:1320px; margin:0 auto; }
.blog-header-copy .eyebrow { color:var(--accent); }
.blog-header-copy h1 { font-size:2rem; margin-bottom:12px; color:var(--primary); }
.blog-header-copy p { color:var(--text-medium); font-size:1rem; }
.blog-stat-grid { display:grid; gap:14px; }
.blog-stat-card { padding:16px 20px; background:var(--bg-light); border-radius:10px; }
.blog-stat-card strong { display:block; font-size:1.5rem; color:var(--primary); }
.blog-stat-card span { font-size:0.82rem; color:var(--text-medium); }
.south-core-priority-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.south-core-priority-card { position:relative; border-radius:12px; overflow:hidden; min-height:280px; display:block; text-decoration:none; }
.south-core-priority-card img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.south-core-priority-card::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,18,28,0.08),rgba(6,18,28,0.72)); }
.south-core-priority-copy { position:absolute; bottom:0; left:0; right:0; z-index:2; padding:24px 26px; color:#fff; }
.south-core-priority-copy .eyebrow { color:var(--accent-light) !important; }
.south-core-priority-copy h3 { font-size:1.4rem; color:#fff; margin:6px 0 10px; }
.south-core-priority-copy p { color:rgba(255,255,255,0.9); font-size:0.85rem; }
.expansion-priority-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:start; }
.expansion-priority-lines { display:grid; gap:8px; }
.expansion-priority-line { display:block; padding:16px 20px; border-radius:8px; background:#fff; text-decoration:none; transition:var(--transition); }
.expansion-priority-line:hover { background:var(--bg-white); box-shadow:var(--shadow); }
.expansion-priority-line h3 { font-size:1rem; color:var(--primary); margin-bottom:4px; }
.expansion-priority-line p { font-size:0.82rem; color:var(--text-medium); }
.blog-focus-shell { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:24px; align-items:start; max-width:1320px; margin:0 auto; padding:0 32px 40px; }
.blog-lead-story { border-radius:12px; overflow:hidden; background:#fff; box-shadow:var(--shadow); }
.blog-lead-media { display:block; overflow:hidden; }
.blog-lead-media img { width:100%; height:320px; object-fit:cover; display:block; }
.blog-lead-copy { padding:24px 26px; }
.blog-lead-copy .eyebrow { color:var(--accent); }
.blog-lead-copy h2 { font-size:1.3rem; margin:10px 0; }
.blog-lead-copy h2 a { color:var(--primary); text-decoration:none; }
.blog-lead-copy p { color:var(--text-medium); font-size:0.9rem; }
.blog-lead-meta { display:flex; gap:16px; margin-top:12px; font-size:0.8rem; color:var(--text-light); }
.blog-side-stack { display:grid; gap:16px; }
.blog-side-story { display:grid; grid-template-columns:160px minmax(0,1fr); gap:16px; background:#fff; border-radius:10px; overflow:hidden; box-shadow:var(--shadow); }
.blog-side-media img { width:100%; height:160px; object-fit:cover; }
.blog-side-copy { padding:14px 16px; }
.blog-side-copy h3 { font-size:0.95rem; margin-bottom:6px; }
.blog-side-copy h3 a { color:var(--primary); text-decoration:none; }
.blog-side-copy p { font-size:0.8rem; color:var(--text-medium); }
.blog-mini-meta { display:flex; gap:10px; font-size:0.75rem; color:var(--text-light); margin-top:6px; }
.blog-essential-section { padding:40px 32px; max-width:1320px; margin:0 auto; }
.blog-essential-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.blog-essential-head .eyebrow { color:var(--accent); }
.blog-essential-head h2 { font-size:1.3rem; color:var(--primary); }
.blog-essential-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.blog-essential-card { display:block; padding:18px 20px; background:#fff; border-radius:10px; text-decoration:none; border:1px solid var(--border); transition:var(--transition); }
.blog-essential-card:hover { border-color:var(--primary); box-shadow:var(--shadow); }
.blog-essential-card span { font-size:0.72rem; font-weight:600; color:var(--accent); text-transform:uppercase; }
.blog-essential-card strong { display:block; font-size:0.95rem; color:var(--primary); margin:6px 0; }
.blog-essential-card em { font-style:normal; font-size:0.78rem; color:var(--text-medium); }
.blog-shelf-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.blog-shelf-card { border-radius:12px; overflow:hidden; background:#fff; box-shadow:var(--shadow); }
.blog-shelf-head { padding:24px 24px 16px; }
.blog-shelf-head .eyebrow { color:var(--accent); }
.blog-shelf-head h3 { font-size:1.1rem; color:var(--primary); margin-bottom:6px; }
.blog-shelf-head p { font-size:0.85rem; color:var(--text-medium); }
.blog-shelf-posts { display:grid; gap:0; }
.blog-shelf-story { display:grid; grid-template-columns:100px minmax(0,1fr); gap:14px; padding:14px 24px; border-top:1px solid var(--border); }
.blog-shelf-story-media img { width:100%; height:80px; object-fit:cover; border-radius:6px; }
.blog-shelf-story-copy h4 { font-size:0.88rem; margin-bottom:4px; }
.blog-shelf-story-copy h4 a { color:var(--primary); text-decoration:none; }
.blog-shelf-story-copy p { font-size:0.78rem; color:var(--text-medium); }
.blog-shelf-card > .text-link { display:block; padding:14px 24px; border-top:1px solid var(--border); }
.blog-offer-strip { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:32px; align-items:center; padding:40px 32px; max-width:1320px; margin:0 auto; }
.blog-offer-card-feature { padding:28px; background:var(--primary); border-radius:14px; color:#fff; }
.blog-offer-card-feature .eyebrow { color:var(--accent-light); }
.blog-offer-card-feature h2 { font-size:1.4rem; color:#fff; margin-bottom:10px; }
.blog-offer-card-feature p { color:rgba(255,255,255,0.85); font-size:0.9rem; margin-bottom:18px; }
.blog-offer-steps { display:grid; gap:18px; }
.blog-offer-step { padding:18px; background:#fff; border-radius:10px; }
.blog-offer-step span { font-size:1.2rem; font-weight:800; color:var(--accent); display:block; margin-bottom:4px; }
.blog-offer-step strong { display:block; font-size:0.95rem; color:var(--primary); margin-bottom:4px; }
.blog-offer-step p { font-size:0.82rem; color:var(--text-medium); }
.blog-list.blog-list-rich .blog-card.blog-card-rich { display:flex; flex-direction:column; border-radius:16px; overflow:hidden; background:#071622; color:#fff; }
.blog-list.blog-list-rich .blog-card-image-link { aspect-ratio:4/3; background:#eef4f8; }
.blog-list.blog-list-rich .blog-card-image { width:100%; height:100%; object-fit:cover; }
.blog-list.blog-list-rich .blog-card-body { padding:22px 22px 24px; flex:1; display:flex; flex-direction:column; background:#071622; color:#fff; }
.blog-list.blog-list-rich h2 a { color:#fff; }
.blog-list.blog-list-rich .blog-meta { color:rgba(255,255,255,0.65); }
.blog-list.blog-list-rich .blog-excerpt { color:rgba(255,255,255,0.8); }

@media (max-width:1100px) { .blog-header-rich { grid-template-columns:1fr; } .blog-focus-shell { grid-template-columns:1fr; } .south-core-priority-grid { grid-template-columns:1fr; } .expansion-priority-layout { grid-template-columns:1fr; } .blog-essential-grid { grid-template-columns:1fr; } .blog-shelf-grid { grid-template-columns:1fr; } .blog-offer-strip { grid-template-columns:1fr; } }
@media (max-width:760px) { .blog-lead-media img { height:220px; } .blog-side-story { grid-template-columns:1fr; } .blog-side-media img { height:180px; } .blog-list.blog-list-rich .blog-card-body { padding:18px; } .blog-offer-strip { padding:24px 18px; } }




/* Travel Themes landing page */
.themes-hero { background: var(--bg-light); border-bottom: 1px solid var(--border); padding: 72px 32px 64px; }
.themes-hero h1 { color: var(--primary); font-size: clamp(2.2rem, 5vw, 4.2rem); max-width: 760px; margin-bottom: 16px; }
.themes-hero p:not(.eyebrow) { max-width: 680px; color: var(--text-medium); font-size: 1.08rem; }
.themes-section { background: #fff; }
.themes-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.theme-card { display: flex; min-height: 230px; flex-direction: column; padding: 28px 26px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-sm); color: var(--text-dark); text-decoration: none; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.theme-card:hover { border-color: var(--accent); box-shadow: var(--shadow); color: var(--text-dark); transform: translateY(-3px); }
.theme-card-label { color: var(--accent); font-size: .74rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.theme-card h2 { margin: 14px 0 10px; color: var(--primary); font-size: 1.2rem; }
.theme-card p { color: var(--text-medium); font-size: .92rem; line-height: 1.65; }
.theme-card-link { margin-top: auto; padding-top: 20px; color: var(--primary); font-size: .85rem; font-weight: 700; }
@media (max-width: 1000px) { .themes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .themes-hero { padding: 48px 20px; } .themes-grid { grid-template-columns: 1fr; } .article-inner { padding: 0 20px; } }

/* Production-wide layout normalization */
.article-section .article-inner { max-width: var(--content-max); padding: 0 var(--space-xl); }
.home-route-panel, .home-paths a { backdrop-filter: none !important; }
@media (max-width: 600px) { .article-section .article-inner { padding: 0 20px; } }


/* Commercial theme detail system — 2026-07-27 */
.theme-detail-page{overflow:hidden;background:#fff;color:#102d42}
.theme-detail-hero{position:relative;min-height:610px;display:flex;align-items:flex-end;isolation:isolate;background:#102d42}
.theme-detail-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.theme-detail-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(6,22,34,.94) 0%,rgba(6,22,34,.72) 48%,rgba(6,22,34,.18) 100%),linear-gradient(0deg,rgba(6,22,34,.65),transparent 48%)}
.theme-detail-hero-inner{width:100%;padding-top:110px;padding-bottom:78px}
.theme-detail-hero-copy{max-width:760px;color:#fff}.theme-detail-hero .eyebrow{color:#f0c86d!important}.theme-detail-hero h1{max-width:780px;margin:10px 0 22px;color:#fff;font-size:clamp(3.2rem,6.4vw,6.6rem);line-height:.96;letter-spacing:-.045em}.theme-detail-hero-copy>p:not(.eyebrow){max-width:700px;margin:0;color:rgba(255,255,255,.88);font-size:1.08rem;line-height:1.75}
.theme-detail-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}.theme-detail-actions .btn-outline{border:1px solid rgba(255,255,255,.75);color:#fff;background:rgba(7,22,34,.32)}
.theme-detail-facts{position:relative;z-index:3;margin-top:-1px;background:#102d42;color:#fff}.theme-detail-facts .section-inner{display:grid;grid-template-columns:repeat(3,1fr)}.theme-detail-facts .section-inner>div{display:grid;gap:7px;padding:28px 32px;border-right:1px solid rgba(255,255,255,.14)}.theme-detail-facts .section-inner>div:first-child{padding-left:0}.theme-detail-facts .section-inner>div:last-child{border:0}.theme-detail-facts span{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:#f0c86d}.theme-detail-facts strong{font-size:.94rem;line-height:1.45;color:#fff}
.theme-detail-focus,.theme-detail-content,.theme-detail-route,.theme-detail-more,.theme-detail-final{padding:82px 32px}.theme-detail-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.65fr);gap:64px;align-items:end;margin-bottom:34px}.theme-detail-heading h2,.theme-detail-route h2{max-width:760px;margin:6px 0 0;color:#102d42;font-size:clamp(2rem,3.7vw,3.6rem);line-height:1.06;letter-spacing:-.035em}.theme-detail-heading>p,.theme-detail-route-layout>div>p{margin:0;color:#526673;line-height:1.7}
.theme-detail-focus-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.theme-detail-focus-grid article{min-height:270px;padding:28px;border:1px solid #ddd7ca;border-radius:16px;background:#fff;box-shadow:0 12px 34px rgba(16,45,66,.06)}.theme-detail-focus-grid article>span{display:grid;width:42px;height:42px;place-items:center;border-radius:50%;background:#f4ead2;color:#765419;font-size:.78rem;font-weight:900}.theme-detail-focus-grid h3{margin:38px 0 10px;color:#102d42;font-size:1.08rem}.theme-detail-focus-grid p{margin:0;color:#526673;font-size:.88rem;line-height:1.68}
.theme-detail-content{background:#f6f3eb}.theme-detail-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.theme-detail-card{overflow:hidden;border:1px solid #ddd7ca;border-radius:16px;background:#fff;box-shadow:0 12px 34px rgba(16,45,66,.06)}.theme-detail-card-image{position:relative;display:block;height:235px;overflow:hidden}.theme-detail-card-image img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}.theme-detail-card:hover .theme-detail-card-image img{transform:scale(1.035)}.theme-detail-card-image>span{position:absolute;top:16px;left:16px;padding:7px 10px;border-radius:999px;background:#fff;color:#102d42;font-size:.69rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.theme-detail-card>div{padding:24px}.theme-detail-card-meta{margin:0 0 7px!important;color:#765419!important;font-size:.7rem!important;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.theme-detail-card h3{margin:0 0 9px;font-size:1.18rem;line-height:1.28}.theme-detail-card h3 a{color:#102d42;text-decoration:none}.theme-detail-card>div>p:not(.theme-detail-card-meta){min-height:48px;margin:0;color:#526673;font-size:.84rem;line-height:1.55}.theme-detail-card-link,.theme-detail-text-link{display:inline-block;margin-top:18px;color:#102d42;font-size:.82rem;font-weight:800;text-decoration:none}.theme-detail-editorial-note{padding:28px;border-left:4px solid #d1a94f;background:#fff}.theme-detail-editorial-note p{margin:8px 0 0;color:#526673}
.theme-detail-route-layout{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:80px;align-items:start}.theme-detail-route-steps{display:grid}.theme-detail-route-steps article{display:grid;grid-template-columns:62px 1fr;gap:20px;padding:25px 0;border-bottom:1px solid #ddd7ca}.theme-detail-route-steps article:first-child{padding-top:0}.theme-detail-route-steps article>span{color:#b4832f;font-size:1.3rem;font-weight:900}.theme-detail-route-steps h3{margin:0 0 7px;color:#102d42}.theme-detail-route-steps p{margin:0;color:#526673;line-height:1.65}
.theme-detail-more{background:#f6f3eb}.theme-detail-more .theme-detail-heading{align-items:center}.theme-detail-pills{display:flex;flex-wrap:wrap;gap:10px}.theme-detail-pills a{display:inline-flex;min-height:44px;align-items:center;padding:0 17px;border:1px solid #d7d0c2;border-radius:999px;background:#fff;color:#102d42;font-size:.82rem;font-weight:750;text-decoration:none}.theme-detail-pills a:hover{background:#102d42;color:#fff}.theme-detail-final{padding-top:58px}
@media(max-width:1050px){.theme-detail-focus-grid{grid-template-columns:repeat(2,1fr)}.theme-detail-card-grid{grid-template-columns:repeat(2,1fr)}.theme-detail-heading,.theme-detail-route-layout{grid-template-columns:1fr;gap:28px}.theme-detail-route-layout{gap:46px}}
@media(max-width:760px){.theme-detail-hero{min-height:560px}.theme-detail-hero-inner{padding:92px 18px 54px}.theme-detail-hero h1{font-size:clamp(2.65rem,14vw,4.2rem)}.theme-detail-hero-copy>p:not(.eyebrow){font-size:.96rem}.theme-detail-actions{display:grid}.theme-detail-actions .btn{width:100%;justify-content:center}.theme-detail-facts .section-inner{grid-template-columns:1fr;padding:0 18px}.theme-detail-facts .section-inner>div,.theme-detail-facts .section-inner>div:first-child{padding:18px 0;border-right:0;border-bottom:1px solid rgba(255,255,255,.14)}.theme-detail-focus,.theme-detail-content,.theme-detail-route,.theme-detail-more,.theme-detail-final{padding:58px 18px}.theme-detail-focus-grid,.theme-detail-card-grid{grid-template-columns:1fr}.theme-detail-focus-grid article{min-height:0}.theme-detail-focus-grid h3{margin-top:24px}.theme-detail-card-image{height:220px}.theme-detail-heading{margin-bottom:26px}.theme-detail-route-steps article{grid-template-columns:48px 1fr}.theme-detail-pills{display:grid}.theme-detail-pills a{justify-content:center;text-align:center}}


/* Connected commercial content pages — 2026-07-28 */
.single-guide,.single-place,.single-itinerary{padding:34px 24px 88px;background:linear-gradient(180deg,#f7f4ed 0,#fff 360px);color:#102d42;overflow:hidden}
.single-guide>article,.single-place>article,.single-itinerary>article{max-width:1120px;margin:0 auto}
.single-guide .breadcrumb,.single-place .breadcrumb,.single-itinerary .breadcrumb{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin:0 0 40px;color:#64737d;font-size:.78rem}.breadcrumb a{color:#102d42;text-decoration:none;font-weight:700}.breadcrumb-current{max-width:560px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.breadcrumb-sep{color:#b4832f}
.guide-header,.place-header,.itinerary-header{max-width:900px;margin:0 auto 32px;text-align:center}.guide-header h1,.place-header h1,.itinerary-header h1{margin:0;color:#102d42;font-size:clamp(2.45rem,5vw,5rem);line-height:1.02;letter-spacing:-.045em}.guide-summary,.place-summary{max-width:760px;margin:22px auto 0;color:#526673;font-size:1.08rem;line-height:1.75}.guide-meta,.itinerary-at-a-glance{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:22px}.guide-meta span,.iti-glance-item{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border:1px solid #ddd7ca;border-radius:999px;background:#fff;color:#526673;font-size:.76rem}
.guide-featured-image,.place-featured-image,.itinerary-featured-image{height:clamp(330px,48vw,580px);margin:34px 0 52px;border-radius:20px;overflow:hidden;background:#e8e5de;box-shadow:0 24px 64px rgba(16,45,66,.13)}.guide-featured-image img,.place-featured-image img,.itinerary-featured-image img{display:block;width:100%;height:100%;object-fit:cover}
.guide-answer-first{max-width:820px;margin:0 auto 34px;padding:24px 28px;border-left:4px solid #d1a94f;background:#fff;border-radius:0 14px 14px 0;box-shadow:0 10px 32px rgba(16,45,66,.06);color:#334d5c;line-height:1.7}.guide-answer-first p:first-child{margin-top:0}.guide-answer-first p:last-child{margin-bottom:0}
.guide-content,.place-content,.itinerary-content{max-width:790px;margin:0 auto;color:#334d5c;font-size:1rem;line-height:1.85}.guide-content h2,.place-content h2,.itinerary-content h2{margin:2.2em 0 .65em;color:#102d42;font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.15;letter-spacing:-.025em}.guide-content h3,.place-content h3,.itinerary-content h3{margin:1.8em 0 .55em;color:#102d42}.guide-content img,.place-content img,.itinerary-content img{max-width:100%;height:auto;border-radius:14px}.guide-content a,.place-content a,.itinerary-content a{color:#765419;text-decoration-thickness:1px;text-underline-offset:3px}
.place-quick-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;max-width:900px;margin:0 auto 48px;overflow:hidden;border:1px solid #ddd7ca;border-radius:16px;background:#ddd7ca}.place-quick-facts .fact-item{padding:17px 20px;background:#fff;color:#526673;font-size:.86rem;line-height:1.5}.place-quick-facts strong{display:block;margin-bottom:4px;color:#102d42;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
.place-topics{display:flex;flex-wrap:wrap;gap:9px;max-width:790px;margin:32px auto}.place-topics a{padding:8px 13px;border-radius:999px;background:#f4ead2;color:#765419;font-size:.76rem;font-weight:800;text-decoration:none}
.guide-journey-cta,.place-journey-cta,.itinerary-journey-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:790px;margin:52px auto;padding:28px;border-radius:16px;background:#f6f3eb;border:1px solid #ddd7ca}
.guide-related-places,.guide-related-guides,.place-nearby,.itinerary-places,.itinerary-day-by-day,.itinerary-transport-notes,.itinerary-alternatives{max-width:900px;margin:58px auto 0}.guide-related-places>h2,.guide-related-guides>h2,.place-nearby>h2,.itinerary-places>h2,.itinerary-day-by-day>h2,.itinerary-transport-notes>h2,.itinerary-alternatives>h2{color:#102d42;font-size:1.7rem}.related-cards-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.related-card{overflow:hidden;border:1px solid #ddd7ca;border-radius:14px;background:#fff}.related-card img{display:block;width:100%;height:190px;object-fit:cover}.related-card h3{margin:0;padding:18px;font-size:1rem;line-height:1.35}.related-card h3 a{color:#102d42;text-decoration:none}
.itinerary-day-by-day{display:grid;gap:14px}.itinerary-day-by-day>h2{margin-bottom:8px}.iti-day-card{padding:24px;border:1px solid #ddd7ca;border-left:4px solid #d1a94f;border-radius:0 14px 14px 0;background:#fff}.iti-day-card h3{margin:0 0 10px;color:#102d42}.iti-day-card p{color:#526673;line-height:1.7}.iti-day-places{display:flex;flex-wrap:wrap;gap:8px}.iti-place-link{padding:7px 11px;border-radius:999px;background:#f6f3eb;color:#102d42;font-size:.76rem;font-weight:700;text-decoration:none}.itinerary-transport-notes{padding:28px;border-radius:16px;background:#102d42;color:#fff}.itinerary-transport-notes h2{color:#f0c86d}.itinerary-transport-notes p{color:rgba(255,255,255,.82);line-height:1.7}
@media(max-width:760px){.single-guide,.single-place,.single-itinerary{padding:24px 18px 64px}.single-guide .breadcrumb,.single-place .breadcrumb,.single-itinerary .breadcrumb{margin-bottom:28px}.breadcrumb-current{max-width:220px}.guide-header h1,.place-header h1,.itinerary-header h1{font-size:clamp(2.2rem,12vw,3.45rem)}.guide-summary,.place-summary{font-size:.96rem}.guide-featured-image,.place-featured-image,.itinerary-featured-image{height:290px;margin:26px 0 38px;border-radius:14px}.place-quick-facts,.related-cards-grid{grid-template-columns:1fr}.guide-answer-first{padding:20px}.guide-journey-cta,.place-journey-cta,.itinerary-journey-cta{display:grid;padding:20px}.guide-journey-cta .btn,.place-journey-cta .btn,.itinerary-journey-cta .btn{width:100%;justify-content:center}.related-card{display:grid;grid-template-columns:120px 1fr}.related-card img{height:100%;min-height:110px}.related-card h3{align-self:center}.itinerary-at-a-glance{display:grid}.iti-glance-item{justify-content:center}}