/* ═══════════════════════════════════════════════════════════════════════
   Uncommon Training — topo-map background, gold + white on the dark site
   (page top uses the shared .page-hero in css/site.css)
   ═══════════════════════════════════════════════════════════════════════ */

.un { --un-gold: #f2b83c; }

/* Hero: the Uncommon wordmark as the title (black art, flipped to white) */
.un-hero .eyebrow { color: var(--un-gold); }
.un-hero__title img { display: block; width: min(640px, 100%); height: auto; filter: invert(1); margin-top: 0.5rem; }
.un-hero .page-hero__lead b { color: #fff; }

.un-facts { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.un-facts li { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.6rem 0.95rem; border: 1px solid var(--line-strong); border-radius: 16px; background: rgba(13, 14, 13, 0.55); backdrop-filter: blur(6px); }
.un-facts span { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); }
.un-facts b { font-size: 1rem; }
.un-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

/* Shared headings */
.un-h { margin-top: 0.4rem; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.05; letter-spacing: -0.025em; max-width: 24ch; }
.un-lead { margin-top: 0.9rem; color: var(--fg-muted); font-size: 1.05rem; line-height: 1.6; max-width: 56ch; }

/* Why + Ethos definition */
.un-why__grid, .un-guides__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.un-def { margin: 0; padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: var(--radius-lg); border: 1px solid var(--line); background: radial-gradient(90% 140% at 100% 0%, color-mix(in srgb, var(--un-gold) 14%, transparent), transparent 60%), var(--bg-card); }
.un-def__word { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: 1; color: var(--un-gold); }
.un-def__word span { font-family: var(--font-body); font-weight: 400; font-size: 1rem; color: var(--fg-muted); margin-left: 0.4rem; }
.un-def blockquote { margin: 1rem 0 0; font-size: 1.1rem; line-height: 1.6; }
.un-def figcaption { margin-top: 1rem; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); }

/* The seven weeks */
.un-weeks { background: var(--bg-raised); }
.un-week-list { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 1rem; counter-reset: wk; }
.un-week { position: relative; padding: 1.4rem 1.4rem 1.5rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-card); }
.un-week::before { counter-increment: wk; content: 'Week ' counter(wk); display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--un-gold); }
.un-week h3 { margin-top: 0.5rem; font-size: 1.3rem; }
.un-week p { margin-top: 0.4rem; color: var(--fg-muted); line-height: 1.5; }
.un-week:last-child { background: radial-gradient(100% 140% at 0% 0%, color-mix(in srgb, var(--un-gold) 18%, transparent), transparent 65%), var(--bg-card); border-color: color-mix(in srgb, var(--un-gold) 45%, transparent); }

/* How it works */
.un-parts { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 0.85rem; }
.un-parts li { display: flex; flex-direction: column; gap: 0.3rem; padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-left: 3px solid var(--un-gold); border-radius: 16px; background: var(--bg-card); }
.un-parts b { font-size: 1.05rem; }
.un-parts span { color: var(--fg-muted); line-height: 1.5; font-size: 0.95rem; }

/* Five C's: a path from left to right */
.un-cs { padding-top: 0; }
.un-c-list { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.6rem; }
.un-c-list li { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.1rem 1rem; border-radius: 16px; text-align: center; border: 1px solid var(--line); background: color-mix(in srgb, var(--un-gold) var(--mix), var(--bg-card)); }
.un-c-list li:nth-child(1) { --mix: 0%; }
.un-c-list li:nth-child(2) { --mix: 8%; }
.un-c-list li:nth-child(3) { --mix: 16%; }
.un-c-list li:nth-child(4) { --mix: 26%; }
.un-c-list li:nth-child(5) { --mix: 100%; color: #161616; }
.un-c-list b { font-family: var(--font-display); font-weight: 900; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.02em; }
.un-c-list span { font-size: 0.9rem; line-height: 1.45; opacity: 0.8; }

/* Guides */
.un-guides { background: var(--bg-raised); }
.un-guide-is { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.un-guide-is li { padding: 0.75rem 1.2rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--un-gold) 50%, transparent); font-family: var(--font-display); font-size: clamp(1.1rem, 2.2vw, 1.5rem); color: var(--un-gold); }

/* Closing call */
.un-cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 3rem; align-items: center; margin-block: var(--section-y); padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--radius-lg); background: var(--un-gold); color: #161616; }
.un-cta__quote { margin: 0; }
.un-cta__quote p { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.3rem, 2.6vw, 1.8rem); line-height: 1.2; letter-spacing: -0.01em; }
.un-cta__quote cite { display: block; margin-top: 0.8rem; font-style: normal; font-size: 0.85rem; font-weight: 700; opacity: 0.7; }
.un-cta__title { font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.1; }
.un-cta p { margin-top: 0.6rem; font-weight: 600; line-height: 1.5; }
.btn--dark { --btn-bg: #161616; --btn-fg: #fff; }
.btn--dark-ghost { --btn-bg: transparent; --btn-fg: #161616; border-color: rgba(0, 0, 0, 0.6); }
.btn--dark-ghost:hover { background: rgba(0, 0, 0, 0.08); box-shadow: none; }

@media (max-width: 900px) {
  .un-c-list { grid-template-columns: minmax(0, 1fr); }
  .un-c-list li { flex-direction: row; align-items: baseline; gap: 0.8rem; text-align: left; }
  .un-c-list b { flex: 0 0 8.5rem; }
}
@media (max-width: 760px) {
  .un-why__grid, .un-guides__grid, .un-cta { grid-template-columns: minmax(0, 1fr); }
  .un-c-list li { flex-direction: column; gap: 0.25rem; }
  .un-c-list b { flex: none; }
}

/* Dates from the church calendar (js/uncommon.js) */
.un-facts li[hidden], .un-dates[hidden] { display: none; }
.un-facts li[data-un-start] { border-color: color-mix(in srgb, var(--un-gold) 60%, transparent); }
.un-facts li[data-un-start] b { color: var(--un-gold); }
.un-dates { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.un-dates__title { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); }
.un-dates__list { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 0.75rem; }
.un-date { display: flex; flex-direction: column; gap: 0.25rem; height: 100%; padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-card); color: inherit; text-decoration: none; transition: border-color 0.25s, background 0.25s; }
.un-date:hover { border-color: color-mix(in srgb, var(--un-gold) 55%, transparent); background: rgba(255, 255, 255, 0.06); }
.un-date__when { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--un-gold); }
.un-date__name { font-weight: 700; font-size: 1.05rem; line-height: 1.3; }
.un-date__name::after { content: ' →'; color: var(--un-gold); }
.un-date__where { font-size: 0.85rem; color: var(--fg-muted); }

/* Keep exploring (links at the bottom) */
.un-more { margin-top: calc(var(--section-y) * -0.5); margin-bottom: var(--section-y); }
.un-more__title { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); }
.un-more__list { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 0.85rem; }
.un-more__link { display: flex; flex-direction: column; gap: 0.3rem; height: 100%; padding: 1.25rem 1.4rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-card); color: inherit; text-decoration: none; transition: border-color 0.25s, transform 0.35s var(--ease); }
.un-more__link:hover { border-color: color-mix(in srgb, var(--un-gold) 55%, transparent); transform: translateY(-3px); }
.un-more__eyebrow { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--un-gold); }
.un-more__link b { font-family: var(--font-display); font-size: 1.4rem; }
.un-more__link b::after { content: ' →'; color: var(--un-gold); }
.un-more__link > span:last-child { color: var(--fg-muted); line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .un-more__link { transition: none; } .un-more__link:hover { transform: none; } }