/* Kingdoms page specific styles — lightweight, uses base tokens */

.section { padding-block: var(--space-10); }
.section-header { margin-bottom: var(--space-7); }
.section-intro { color: var(--color-text-muted); }

/* Hero */
.hero { position: relative; padding-block: var(--space-10); }
.hero-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-8); align-items: center; }
.hero-media img { border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); border: 1px solid rgba(201,162,39,0.18); }
.hero-copy h1 { margin-block: var(--space-6) var(--space-4); }

/* Grids */
.feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hidden-gems { align-items: stretch; }
.myth-grid { align-items: start; }
.dest-grid { align-items: start; }

/* Ensure kingdom cards never overflow their container and break long words */
.card.kingdom, .kingdoms-grid .card.kingdom {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word; /* preferred */
  word-wrap: break-word;    /* legacy */
  overflow-wrap: anywhere;  /* aggressive breaking for very long tokens */
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  word-break: break-word; /* fallback for some engines */
}

/* Make sure child elements respect the card width */
.card.kingdom *, .kingdoms-grid .card.kingdom * { box-sizing: inherit; }

/* Prevent media inside the card from causing horizontal overflow */
.card.kingdom img, .card.kingdom video, .card.kingdom iframe, .card.kingdom embed {
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
}

/* Smaller blocks inside the card should wrap and not push layout */
.card.kingdom h3, .card.kingdom h4, .card.kingdom p, .card.kingdom .meta {
  max-width: 100%;
  overflow-wrap: break-word;
}

/* Breadcrumbs */
.breadcrumbs { margin-block: var(--space-6); }
.breadcrumbs .current { color: var(--gray-400); }

/* Quiz */
#quiz h3 { margin-top: 0; }
#quiz label { cursor: pointer; }
#quiz output { display: block; margin-top: var(--space-4); color: var(--gray-100); font-weight: 600; }

/* CTA row */
.cta-row { justify-content: center; flex-wrap: wrap; }

/* Responsive */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .feature-grid { grid-template-columns: 1fr; }
  .myth-grid, .dest-grid { grid-template-columns: 1fr; }
}

/* (Reverted) mobile-specific overrides for .card.kingdom were removed */