/* Shared template for World landing cards.
 * Inherits tokens.css. Each World card can override --w-accent and --w-hero-bg.
 */

.w-hero {
  background: var(--w-hero-bg, linear-gradient(135deg, var(--gm-indigo) 0%, var(--gm-forest-mid) 100%));
  color: var(--gm-cream-warm);
  text-align: center;
  padding: var(--gm-sp-6) var(--gm-sp-3) var(--gm-sp-5);
}
.w-hero .pill {
  display: inline-block;
  background: rgba(212,168,75,0.2);
  border: 1px solid var(--w-accent, var(--gm-gold-bright));
  color: var(--w-accent, var(--gm-gold-bright));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: var(--gm-sp-2);
}
.w-hero h1 { color: var(--w-accent, var(--gm-gold-bright)); font-size: 2.6rem; margin: 0 0 var(--gm-sp-1); }
.w-hero .tag { font-style: italic; font-size: 1.2rem; margin: 0 0 var(--gm-sp-3); }
.w-hero .lead { max-width: 640px; margin: 0 auto var(--gm-sp-3); font-size: 1.05rem; line-height: 1.7; }

.w-section { padding: var(--gm-sp-5) var(--gm-sp-3); }
.w-section.cream { background: var(--gm-bg-cream); }
.w-section.warm { background: var(--gm-bg-warm); }
.w-section.panel { background: var(--gm-panel-fill); }
.w-section.forest { background: var(--gm-forest-mid); color: var(--gm-cream-warm); }
.w-section.forest h2 { color: var(--w-accent, var(--gm-gold-bright)); }
.w-inner { max-width: var(--gm-maxw-prose); margin: 0 auto; }
.w-inner.wide { max-width: var(--gm-maxw-wide); }
.w-section h2 { color: var(--gm-indigo); margin-bottom: var(--gm-sp-3); text-align: center; }
.w-section.warm h2 { color: var(--gm-gold-deep); }
.w-section h3 { color: var(--gm-indigo); font-size: 1.1rem; margin: 0 0 var(--gm-sp-1); }

.w-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gm-sp-2); }
@media (max-width: 800px) { .w-features { grid-template-columns: 1fr; } }
.w-fcard {
  background: var(--gm-bg-tan);
  border: 1px solid var(--gm-bg-stripe);
  border-radius: var(--gm-radius-soft);
  padding: var(--gm-sp-3);
}
.w-fcard h3 { font-size: 1.05rem; color: var(--gm-indigo); }
.w-fcard p { font-size: 0.95rem; margin: 0; line-height: 1.55; }

.w-circles { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gm-sp-2); }
@media (max-width: 600px) { .w-circles { grid-template-columns: 1fr; } }
.w-circle-tile {
  background: #fff;
  border: 1px solid var(--gm-bg-stripe);
  border-left: 4px solid var(--w-accent, var(--gm-gold));
  border-radius: var(--gm-radius-soft);
  padding: var(--gm-sp-2) var(--gm-sp-3);
}
.w-circle-tile strong { color: var(--gm-indigo); }
.w-circle-tile small { display: block; color: var(--gm-ink-soft); font-size: 0.85rem; margin-top: 2px; }

.w-callout {
  background: rgba(212,168,75,0.12);
  border: 1px solid var(--gm-gold);
  border-radius: var(--gm-radius-soft);
  padding: var(--gm-sp-2) var(--gm-sp-3);
  margin-top: var(--gm-sp-2);
  font-size: 0.95rem;
}

.w-cta { background: var(--gm-bg-cream); padding: var(--gm-sp-5) var(--gm-sp-3); text-align: center; }
.w-cta h2 { color: var(--gm-indigo); }

.w-foot {
  text-align: center;
  padding: var(--gm-sp-3);
  font-size: 0.85rem;
  color: var(--gm-ink-soft);
  background: var(--gm-bg-cream);
  border-top: 1px solid var(--gm-bg-stripe);
}
.w-foot a { text-decoration: none; }