/* =====================================================================
   COUNTRY PAGE — shared stylesheet
   =====================================================================
   One stylesheet for every country landing page. The three original
   drafts (Brazil, Cambodia, Nepal) each carried ~10 KB of inline CSS
   that was 95% byte-identical; this replaces all of it.

   The ONLY per-country value is the background image, passed in as a
   custom property on the element:

       <div class="cn-country-bg" style="--cn-bg: url('/uploads/country/brazil/hero.webp');"></div>

   Contract and authoring rules: Document-test-script/COUNTRY-PAGE-SPEC.md

   Typography and colour follow the site (Roboto, teal #099a9a) rather
   than the drafts' Manrope / Space Grotesk, so a country page reads as
   part of the website. The hero stays dark because #0B2D31 is already
   the site's scrolled-header colour — it belongs to the palette.
   ===================================================================== */

.cn-country {
    --cn-ink:        #ffffff;
    --cn-ink-soft:   rgba(255, 255, 255, .82);
    --cn-ink-faint:  rgba(255, 255, 255, .58);
    --cn-ground:     #0b2d31;
    --cn-line:       rgba(255, 255, 255, .16);
    --cn-surface:    rgba(255, 255, 255, .07);
    --cn-surface-up: rgba(255, 255, 255, .12);
    --cn-accent:     #4ecdce;   /* teal lifted for legibility on dark */

    position: relative;
    isolation: isolate;
    background: var(--cn-ground);
    color: var(--cn-ink);
    overflow: hidden;
}

/* ── Background image + scrim ─────────────────────────────────────────
   The scrim is not decoration: text over an unmodified photograph fails
   contrast on the light areas. */
.cn-country-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--cn-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.cn-country-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
                rgba(11, 45, 49, .78) 0%,
                rgba(11, 45, 49, .88) 55%,
                rgba(11, 45, 49, .95) 100%);
}

.cn-country-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(56px, 8vw, 104px) 24px clamp(48px, 7vw, 88px);
}

/* ── Hero type ────────────────────────────────────────────────────── */
.cn-eyebrow {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--cn-accent);
    margin: 0 0 18px;
    text-transform: none;
}

.cn-country-title {
    font-size: clamp(30px, 5vw, 52px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.02em;
    color: var(--cn-ink);
    margin: 0 0 20px;
    max-width: 20ch;
    text-wrap: balance;
}

.cn-country-lede {
    font-size: clamp(16px, 1.6vw, 19px);
    line-height: 1.65;
    color: var(--cn-ink-soft);
    max-width: 62ch;
    margin: 0 0 14px;
}

.cn-country-lede.cn-strong {
    color: var(--cn-ink);
    font-weight: 600;
}

/* ── Calls to action ──────────────────────────────────────────────── */
.cn-country-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 32px 0 0;
}

.cn-country .cn-btn {
    display: inline-block;
    padding: 13px 30px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    background: #099a9a;
    color: #ffffff;
    border: 1px solid #099a9a;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.cn-country .cn-btn:hover,
.cn-country .cn-btn:focus-visible {
    background: #07807f;
    border-color: #07807f;
    color: #ffffff;
}

.cn-country .cn-btn-ghost {
    background: transparent;
    color: var(--cn-ink);
    border-color: var(--cn-line);
}

.cn-country .cn-btn-ghost:hover,
.cn-country .cn-btn-ghost:focus-visible {
    background: var(--cn-surface-up);
    border-color: var(--cn-accent);
    color: var(--cn-ink);
}

.cn-country a:focus-visible {
    outline: 2px solid var(--cn-accent);
    outline-offset: 3px;
}

/* ── Strength / challenge panel ───────────────────────────────────── */
.cn-country-panel {
    margin-top: clamp(40px, 6vw, 72px);
    border-top: 1px solid var(--cn-line);
    padding-top: clamp(28px, 4vw, 44px);
    display: flex;
    flex-direction: column;
    gap: clamp(26px, 4vw, 40px);
}

.cn-country-row {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 22px;
    align-items: start;
}

.cn-country-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cn-ink-faint);
    padding-top: 10px;
}

.cn-country-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
}

.cn-country-card {
    background: var(--cn-surface);
    border: 1px solid var(--cn-line);
    border-radius: 12px;
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.cn-country-card:hover {
    background: var(--cn-surface-up);
    border-color: var(--cn-accent);
    transform: translateY(-2px);
}

.cn-country-card img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    display: block;
}

.cn-country-card p {
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
    font-weight: 500;
    color: var(--cn-ink-soft);
}

/* ── Narrow screens ───────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .cn-country-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .cn-country-label { padding-top: 0; }
    .cn-country-cards { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .cn-country-card  { padding: 16px 14px; }
    .cn-country-cta .cn-btn { flex: 1 1 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .cn-country-card,
    .cn-country .cn-btn {
        transition: none;
    }
    .cn-country-card:hover { transform: none; }
}

/* ── Expandable card detail ───────────────────────────────────────────
   The caption is a summary; the researched paragraph and its citation sit
   in the DOM underneath it, collapsed by the browser rather than injected
   by script. That matters twice over: the copy is indexable, and a page
   keeps working with JavaScript disabled. No JS is loaded for this.

   An open card spans the full row so the prose gets a readable measure
   instead of a 190px column. */
.cn-country-card[open] {
    grid-column: 1 / -1;
    background: var(--cn-surface-up);
    border-color: var(--cn-accent);
}

/* Cards must not stretch to match the tallest sibling, or opening one
   would inflate every card on the row. */
.cn-country-cards { align-items: start; }

.cn-country-card > summary {
    display: flex;
    flex-direction: column;
    gap: 12px;
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-right: 26px;
}

/* Both spellings are needed: WebKit still uses the pseudo-element. */
.cn-country-card > summary::-webkit-details-marker { display: none; }
.cn-country-card > summary::marker { content: ""; }

/* Chevron. Rotates on open; a plain triangle would inherit the marker
   styling we just removed. */
.cn-country-card > summary::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 2px;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--cn-ink-faint);
    border-bottom: 2px solid var(--cn-ink-faint);
    transform: rotate(45deg);
    transition: transform .2s ease, border-color .2s ease;
}

.cn-country-card[open] > summary::after {
    transform: rotate(-135deg);
    border-color: var(--cn-accent);
}

.cn-country-card > summary:focus-visible {
    outline: 2px solid var(--cn-accent);
    outline-offset: 4px;
    border-radius: 6px;
}

.cn-country-card .cn-card-title {
    font-size: 15px;
    line-height: 1.45;
    font-weight: 500;
    color: var(--cn-ink-soft);
}

.cn-country-card[open] .cn-card-title {
    color: var(--cn-ink);
    font-weight: 600;
}

.cn-country-detail {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--cn-line);
}

.cn-country-detail p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--cn-ink-soft);
    max-width: 72ch;
}

.cn-country-source {
    margin-top: 12px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: var(--cn-ink-faint) !important;
}

.cn-country-source a {
    color: var(--cn-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* The hover lift reads as "this moves" on a card that now opens in place. */
.cn-country-card[open]:hover { transform: none; }

@media (max-width: 767.98px) {
    .cn-country-detail p { font-size: 14px; }
}