/* ==========================================================================
   KandaNews Africa — Editions (/editions, /editions/propose, homepage block)
   Builds on base.css tokens and the kno-* programme components in
   opportunities.css (hero, sections, kicker, process, callout). Mobile first.
   ========================================================================== */

/* ── Hero variant ── */
.kne-hero .kno-hero__title { max-width: 18ch; }
.kne-hero__nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.6rem; }
.kne-hero__nav a {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .5rem .9rem; border-radius: 50px; font-size: .85rem; font-weight: 700;
    color: #fff; text-decoration: none; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
    transition: background .2s;
}
.kne-hero__nav a:hover, .kne-hero__nav a:focus-visible { background: rgba(255, 255, 255, .16); }

/* ── Core edition families ── */
.kne-families { display: grid; gap: 1.1rem; margin-top: 1.8rem; }
.kne-family {
    position: relative; overflow: hidden; scroll-margin-top: 90px;
    display: flex; flex-direction: column; gap: .7rem;
    background: #fff; border: 1px solid var(--kn-border); border-radius: var(--kn-radius-xl, 20px);
    padding: 1.5rem 1.35rem 1.35rem;
}
.kne-family::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--fam, var(--kn-orange)); }
.kne-family__head { display: flex; align-items: center; gap: .85rem; }
.kne-family__icon {
    flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem;
    color: var(--fam, var(--kn-orange)); background: color-mix(in srgb, var(--fam, #f05a1a) 12%, #fff);
}
.kne-family__who { font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--kn-gray-500); }
.kne-family h3 { font-size: 1.22rem; font-weight: 900; color: var(--kn-navy); line-height: 1.2; }
.kne-family > p { font-size: .98rem; line-height: 1.65; color: var(--kn-gray-700); }
.kne-themes { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0; }
.kne-themes li {
    font-size: .8rem; font-weight: 600; color: var(--kn-gray-700);
    background: var(--kn-gray-100); border-radius: 50px; padding: .28rem .7rem;
}
.kne-family__foot {
    margin-top: auto; padding-top: .8rem; border-top: 1px dashed var(--kn-gray-200);
    display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; font-size: .86rem; color: var(--kn-gray-600);
}
.kne-avail { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; }
.kne-avail--live { color: var(--kn-success); }
.kne-avail--soon { color: var(--kn-gray-500); }

/* ── Countries note ── */
.kne-countries {
    display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; margin-top: 1.4rem;
    background: var(--kn-gray-50); border: 1px solid var(--kn-border); border-radius: var(--kn-radius-lg, 16px);
    padding: 1rem 1.2rem; font-size: .93rem; color: var(--kn-gray-700); line-height: 1.6;
}
.kne-countries strong { color: var(--kn-navy); }
.kne-country-chip {
    display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .75rem; border-radius: 50px;
    background: #fff; border: 1px solid var(--kn-border); font-weight: 700; color: var(--kn-navy); font-size: .86rem;
}

/* ── Series ── */
.kne-series-section { background: var(--kn-navy); color: #fff; }
.kne-series-section .kno-kicker { color: #ffb08f; }
.kne-series-section .kno-h2 { color: #fff; }
.kne-series-section .kno-prose p { color: rgba(255, 255, 255, .82); }
.kne-series { display: grid; gap: 1rem; margin-top: 1.8rem; }
.kne-serie {
    position: relative; display: flex; flex-direction: column; gap: .7rem;
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--kn-radius-xl, 20px); padding: 1.4rem 1.3rem 1.3rem 1.5rem; overflow: hidden;
}
.kne-serie::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ser, var(--kn-orange)); }
.kne-serie__label { font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.kne-serie h3 { font-size: 1.3rem; font-weight: 900; line-height: 1.2; color: #fff; }
.kne-serie p { font-size: .96rem; line-height: 1.65; color: rgba(255, 255, 255, .84); }
.kne-serie__question {
    font-size: 1rem; font-style: italic; line-height: 1.55; color: #fff;
    border-left: 2px solid rgba(255, 255, 255, .3); padding-left: .85rem; margin: .1rem 0;
}
.kne-serie__tags { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; padding: 0; margin: 0; }
.kne-serie__tags li { font-size: .76rem; font-weight: 700; color: rgba(255, 255, 255, .85); border: 1px solid rgba(255, 255, 255, .22); border-radius: 50px; padding: .2rem .65rem; }
.kne-serie__foot { margin-top: auto; padding-top: .6rem; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; font-size: .88rem; color: rgba(255, 255, 255, .7); }
.kne-serie__foot a { color: #ffb08f; font-weight: 800; text-decoration: none; }
.kne-serie__foot a:hover, .kne-serie__foot a:focus-visible { text-decoration: underline; }

/* ── Library tiles (open the app's Library) ── */
.kne-library { display: grid; gap: .9rem; margin-top: 1.6rem; }
.kne-lib-tile {
    position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .45rem;
    background: #fff; border: 1px solid var(--kn-border); border-radius: var(--kn-radius-lg, 16px);
    padding: 1.2rem 1.2rem 1.1rem; text-decoration: none; color: inherit;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.kne-lib-tile::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--fam, var(--kn-orange)); }
.kne-lib-tile:hover, .kne-lib-tile:focus-visible { transform: translateY(-3px); box-shadow: var(--kn-shadow-md); border-color: color-mix(in srgb, var(--fam, #f05a1a) 45%, #fff); }
.kne-lib-tile strong { font-size: 1.08rem; font-weight: 900; color: var(--kn-navy); line-height: 1.25; }
.kne-lib-tile__meta { font-size: .84rem; font-weight: 600; color: var(--kn-gray-500); }
.kne-lib-tile__go { margin-top: auto; padding-top: .3rem; font-size: .88rem; font-weight: 800; color: var(--kn-orange); display: inline-flex; align-items: center; gap: .35rem; }
.kne-lib-tile--series { background: var(--kn-navy); border-color: var(--kn-navy); }
.kne-lib-tile--series::before { background: var(--kn-orange); }
.kne-lib-tile--series strong { color: #fff; font-size: 1.25rem; }
.kne-lib-tile__label { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #ffb08f; }
.kne-lib-tile--series .kne-lib-tile__meta { color: rgba(255, 255, 255, .7); }
.kne-lib-tile--series .kne-lib-tile__go { color: #ffb08f; }

/* ── The Kanda Lens ── */
.kne-lens { background: linear-gradient(160deg, #0f172a 0%, var(--kn-navy) 60%, #2a1a14 100%); color: #fff; }
.kne-lens .kno-kicker { color: #ffb08f; }
.kne-lens .kno-h2 { color: #fff; }
.kne-lens .kno-prose p { color: rgba(255, 255, 255, .82); }
.kne-lens__statement { margin: 1.8rem 0 2rem; padding: 0; list-style: none; display: grid; gap: .35rem; }
.kne-lens__statement li { font-size: clamp(1.25rem, 4.6vw, 2rem); font-weight: 900; line-height: 1.25; letter-spacing: -.01em; }
.kne-lens__statement li span { color: #ffb08f; }
.kne-lens__questions { display: grid; gap: .6rem; list-style: none; padding: 0; margin: 0; counter-reset: lq; }
.kne-lens__questions li {
    counter-increment: lq; position: relative; padding: .8rem .9rem .8rem 3rem;
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px;
    font-size: .96rem; line-height: 1.5; color: rgba(255, 255, 255, .9);
}
.kne-lens__questions li::before {
    content: counter(lq, decimal-leading-zero); position: absolute; left: .9rem; top: .8rem;
    font-weight: 900; color: #ffb08f; font-size: .9rem;
}
.kne-lens__questions li:last-child { background: rgba(240, 90, 26, .16); border-color: rgba(240, 90, 26, .45); color: #fff; font-weight: 700; }
.kne-lens__note { margin-top: 1.4rem; display: flex; gap: .8rem; align-items: flex-start; font-size: .96rem; line-height: 1.7; color: rgba(255, 255, 255, .86); }
.kne-lens__note i { color: #ffb08f; margin-top: .3rem; }

/* ── Principle / propose CTA ── */
.kne-principle { margin: 1.6rem 0 0; font-size: clamp(1.35rem, 5vw, 2.1rem); font-weight: 900; line-height: 1.22; color: var(--kn-navy); letter-spacing: -.01em; }
.kne-principle span { display: block; color: var(--kn-orange); }
.kne-propose {
    display: grid; gap: 1.2rem; align-items: center;
    background: linear-gradient(135deg, var(--kn-orange) 0%, #c2410c 100%); color: #fff;
    border-radius: var(--kn-radius-xl, 20px); padding: 1.8rem 1.5rem;
}
.kne-propose h2 { font-size: clamp(1.4rem, 5vw, 2rem); font-weight: 900; line-height: 1.15; color: #fff; }
.kne-propose p { font-size: 1rem; line-height: 1.65; color: rgba(255, 255, 255, .92); margin-top: .5rem; }
.kne-propose__line { font-weight: 800; color: #fff !important; }
.kne-propose .kn-btn { background: #fff; color: var(--kn-orange); justify-self: start; }
.kne-propose .kn-btn:hover, .kne-propose .kn-btn:focus-visible { background: var(--kn-navy); color: #fff; }

/* ── Relationships & independence ── */
.kne-relations { display: grid; gap: .9rem; margin-top: 1.6rem; }
.kne-relation { background: #fff; border: 1px solid var(--kn-border); border-radius: var(--kn-radius-lg, 16px); padding: 1.2rem 1.2rem; }
.kne-relation h3 { font-size: 1rem; font-weight: 900; color: var(--kn-navy); letter-spacing: .02em; text-transform: uppercase; }
.kne-relation p { font-size: .95rem; line-height: 1.65; color: var(--kn-gray-700); margin-top: .35rem; }
.kne-relation small { display: block; margin-top: .5rem; font-size: .84rem; font-weight: 700; color: var(--kn-orange); }
.kne-who { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; padding: 0; margin: 1.2rem 0 0; }
.kne-who li { display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; font-weight: 700; color: var(--kn-navy); background: #fff; border: 1px solid var(--kn-border); border-radius: 50px; padding: .4rem .85rem; }
.kne-who li i { color: var(--kn-orange); }
.kne-independence { display: grid; gap: 1.2rem; }
.kne-duties { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: .8rem 0 0; }
.kne-duties li { font-size: .84rem; font-weight: 800; color: #fff; background: var(--kn-navy); border-radius: 50px; padding: .3rem .8rem; }

/* ── Homepage block ── */
.kne-home-families { display: grid; gap: .8rem; margin-top: 1.6rem; }
.kne-home-family {
    display: flex; gap: .9rem; align-items: flex-start; text-decoration: none; color: inherit;
    background: #fff; border: 1px solid var(--kn-border); border-radius: var(--kn-radius-lg, 16px); padding: 1.1rem;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.kne-home-family:hover, .kne-home-family:focus-visible { transform: translateY(-3px); box-shadow: var(--kn-shadow-md); border-color: color-mix(in srgb, var(--fam, #f05a1a) 45%, #fff); }
.kne-home-family h3 { font-size: 1.02rem; font-weight: 900; color: var(--kn-navy); }
.kne-home-family p { font-size: .9rem; line-height: 1.55; color: var(--kn-gray-600); margin-top: .2rem; }
.kne-home-series { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 1rem 0 0; }
.kne-home-series li a {
    display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .9rem; border-radius: 50px; text-decoration: none;
    font-size: .88rem; font-weight: 700; color: var(--kn-navy); background: #fff; border: 1px solid var(--kn-border);
}
.kne-home-series li a::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ser, var(--kn-orange)); }

@media (min-width: 720px) {
    .kne-families, .kne-series, .kne-relations, .kne-home-families { grid-template-columns: repeat(2, 1fr); }
    .kne-library { grid-template-columns: repeat(2, 1fr); }
    .kne-lib-tile--series { grid-column: 1 / -1; }
    .kne-lens__questions { grid-template-columns: repeat(2, 1fr); }
    .kne-lens__questions li:last-child { grid-column: 1 / -1; }
    .kne-propose { grid-template-columns: 1fr auto; padding: 2.4rem 2.4rem; }
    .kne-propose .kn-btn { justify-self: end; }
    .kne-independence { grid-template-columns: 1.2fr 1fr; align-items: start; }
}
@media (min-width: 1080px) {
    .kne-library { grid-template-columns: repeat(3, 1fr); }
    .kne-lib-tile--series { grid-column: span 2; }
    .kne-home-families { grid-template-columns: repeat(4, 1fr); }
    .kne-home-family { flex-direction: column; }
}