/* encyclopedia-listing-cards.css — site-specific override that turns
 * the basic encyclopedia L2 entry listing into the same colourful card
 * grid we use on the homepage. Kid-friendly, big tap targets, per-
 * section accent colours.
 *
 * Target markup (emitted by the shared template, never modify it):
 *
 *   <div class="enc-listing is-mode-cards" data-section="biomes">
 *     <div class="enc-listing-toolbar">...</div>     <-- hidden by us
 *     <div class="enc-listing-entries">
 *       <div class="enc-entry" data-topic_type="..." data-location="...">
 *         <a class="enc-entry-title" href="...">Title</a>
 *         <span class="enc-entry-summary">Summary...</span>
 *       </div>
 *       ...
 *     </div>
 *   </div>
 *
 * This file MUST stay in content/custom/css/ (site-specific). The
 * homepage section cards live in section-cards.css alongside it.
 */

/* ───── Container grid ─────────────────────────────────────────── */
.enc-listing-entries {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin: 1.5rem 0 2.5rem;
    padding: 0;
}

/* Hide the mode-toggle toolbar. The kid-friendly card view is the
 * only mode we want surfaced; power users can still switch via the
 * admin or dev tools if they really need to. */
.enc-listing-toolbar { display: none; }

/* ───── Each entry as a card ───────────────────────────────────── */
.enc-entry {
    --card-accent: #4A7286;    /* default; per-section colours below */

    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem 1.25rem 1.25rem;
    background: #ffffff;
    border: 2px solid transparent;
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(15, 30, 42, 0.07);
    overflow: hidden;
    transition: transform 0.18s ease,
                box-shadow 0.18s ease,
                border-color 0.18s ease;
}

/* Coloured accent strip down the left edge, matches homepage cards. */
.enc-entry::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 6px;
    background: var(--card-accent);
    transition: width 0.18s ease;
}

/* Lift + accent border on hover/focus. The whole card is clickable
 * via the title's <a> (see below). */
.enc-entry:hover,
.enc-entry:focus-within {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(15, 30, 42, 0.14);
    border-color: var(--card-accent);
}
.enc-entry:hover::before,
.enc-entry:focus-within::before {
    width: 10px;
}

/* ───── Title — large tap target, full-card click ───────────────
 *
 * The renderer only puts the <a> on the title text, so we expand
 * the anchor to cover the whole card via absolute positioning of
 * a pseudo-element. Visually nothing changes; the entire card now
 * works as one big tap target like the homepage cards do. */
.enc-entry-title {
    display: block;
    margin: 0 0 0.5rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: #1f2933;
    text-decoration: none;
    line-height: 1.25;
}
.enc-entry-title::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}
.enc-entry-title:hover,
.enc-entry-title:focus { color: var(--card-accent); text-decoration: none; }

/* ───── Summary text ───────────────────────────────────────────── */
.enc-entry-summary {
    display: block;
    margin: 0 0 0.6rem;
    font-size: 0.92rem;
    line-height: 1.45;
    color: #4a5660;
    flex-grow: 1;             /* keeps cards equal-height when rows have unequal text */
    /* Clamp to 4 lines so very long summaries don't blow the card height */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ───── Faux CTA arrow at the bottom-right, picks up the accent ── */
.enc-entry::after {
    content: 'Explore \2192';
    align-self: flex-start;
    margin-top: auto;
    color: var(--card-accent);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    transition: transform 0.18s ease;
}
.enc-entry:hover::after,
.enc-entry:focus-within::after {
    transform: translateX(4px);
}

/* ───── Per-section accent colours ──────────────────────────────
 * Match the planet / element / homepage accent palette for visual
 * consistency. Falls back to the default --card-accent above. */

/* Geography family */
.enc-listing[data-section="biomes"]      .enc-entry { --card-accent: #5d8f5a; }   /* leaf green */
.enc-listing[data-section="deserts"]     .enc-entry { --card-accent: #d4a85a; }   /* sand */
.enc-listing[data-section="mountains"]   .enc-entry { --card-accent: #7a8a9a; }   /* slate */
.enc-listing[data-section="rainforests"] .enc-entry { --card-accent: #2e8b57; }   /* deep green */
.enc-listing[data-section="rivers"]      .enc-entry { --card-accent: #3a8acc; }   /* river blue */
.enc-listing[data-section="oceans"]      .enc-entry { --card-accent: #2a6f8f; }   /* deep blue */
.enc-listing[data-section="landmarks"]   .enc-entry { --card-accent: #c45a3a; }   /* brick */

/* Top-level Geography (when /geography lists its sub-sections via card listing) */
.enc-listing[data-section="geography"]   .enc-entry { --card-accent: #5d8f5a; }

/* Continents */
.enc-listing[data-section="countries"]      .enc-entry { --card-accent: #4A7286; }
.enc-listing[data-section="africa"]         .enc-entry { --card-accent: #b8743c; }
.enc-listing[data-section="asia"]           .enc-entry { --card-accent: #c45a4a; }
.enc-listing[data-section="europe"]         .enc-entry { --card-accent: #4a78a6; }
.enc-listing[data-section="north-america"]  .enc-entry { --card-accent: #5a8e7a; }
.enc-listing[data-section="south-america"]  .enc-entry { --card-accent: #c89030; }
.enc-listing[data-section="oceania"]        .enc-entry { --card-accent: #6a8eb8; }

/* Science family */
.enc-listing[data-section="science"]        .enc-entry { --card-accent: #3a8acc; }
.enc-listing[data-section="chemistry"]      .enc-entry { --card-accent: #5a8aaa; }
.enc-listing[data-section="periodic-table"] .enc-entry { --card-accent: #3a8acc; }
.enc-listing[data-section="physics"]        .enc-entry { --card-accent: #6a4aa0; }
.enc-listing[data-section="biology"]        .enc-entry { --card-accent: #3aa05a; }
.enc-listing[data-section="earth-science"]  .enc-entry { --card-accent: #8a6a3a; }
.enc-listing[data-section="astronomy"]      .enc-entry { --card-accent: #6b4a8c; }

/* Chemistry sub-topics */
.enc-listing[data-section="states-of-matter"]        .enc-entry { --card-accent: #5a8aaa; }
.enc-listing[data-section="atoms-and-molecules"]     .enc-entry { --card-accent: #5a8aaa; }
.enc-listing[data-section="chemical-reactions"]      .enc-entry { --card-accent: #c45a3a; }
.enc-listing[data-section="acids-and-bases"]         .enc-entry { --card-accent: #b8743c; }
.enc-listing[data-section="mixtures-and-solutions"]  .enc-entry { --card-accent: #5a8aaa; }
.enc-listing[data-section="common-compounds"]        .enc-entry { --card-accent: #3a8acc; }

/* Physics sub-topics */
.enc-listing[data-section="forces-and-motion"]          .enc-entry { --card-accent: #6a4aa0; }
.enc-listing[data-section="energy"]                     .enc-entry { --card-accent: #c89030; }
.enc-listing[data-section="gravity"]                    .enc-entry { --card-accent: #6a4aa0; }
.enc-listing[data-section="light-and-optics"]           .enc-entry { --card-accent: #c8a030; }
.enc-listing[data-section="sound-and-waves"]            .enc-entry { --card-accent: #6a4aa0; }
.enc-listing[data-section="electricity-and-magnetism"]  .enc-entry { --card-accent: #c89030; }
.enc-listing[data-section="simple-machines"]            .enc-entry { --card-accent: #7a8a9a; }

/* Biology sub-topics */
.enc-listing[data-section="human-body-systems"]            .enc-entry { --card-accent: #c45a4a; }
.enc-listing[data-section="cells"]                         .enc-entry { --card-accent: #3aa05a; }
.enc-listing[data-section="plants"]                        .enc-entry { --card-accent: #3aa05a; }
.enc-listing[data-section="animal-kingdom"]                .enc-entry { --card-accent: #b8743c; }
.enc-listing[data-section="ecosystems-and-food-chains"]    .enc-entry { --card-accent: #5d8f5a; }
.enc-listing[data-section="dna-and-genetics"]              .enc-entry { --card-accent: #6a4aa0; }
.enc-listing[data-section="evolution"]                     .enc-entry { --card-accent: #8a6a3a; }

/* Earth Science sub-topics */
.enc-listing[data-section="rocks-and-minerals"]                .enc-entry { --card-accent: #8a6a3a; }
.enc-listing[data-section="volcanoes"]                         .enc-entry { --card-accent: #c45a3a; }
.enc-listing[data-section="earthquakes-and-plate-tectonics"]   .enc-entry { --card-accent: #8a6a3a; }
.enc-listing[data-section="weather"]                           .enc-entry { --card-accent: #5a8aaa; }
.enc-listing[data-section="the-atmosphere"]                    .enc-entry { --card-accent: #6a8eb8; }
.enc-listing[data-section="water-cycle"]                       .enc-entry { --card-accent: #3a8acc; }
.enc-listing[data-section="fossils"]                           .enc-entry { --card-accent: #8a6a3a; }
.enc-listing[data-section="soil"]                              .enc-entry { --card-accent: #8a6a3a; }

/* Astronomy sub-topics */
.enc-listing[data-section="solar-system"]         .enc-entry { --card-accent: #6b4a8c; }
.enc-listing[data-section="stars"]                .enc-entry { --card-accent: #c8a030; }
.enc-listing[data-section="galaxies"]             .enc-entry { --card-accent: #6b4a8c; }
.enc-listing[data-section="the-universe"]         .enc-entry { --card-accent: #4a3a7a; }
.enc-listing[data-section="asteroids-and-comets"] .enc-entry { --card-accent: #7a8a9a; }
.enc-listing[data-section="black-holes"]          .enc-entry { --card-accent: #2a2a4a; }
.enc-listing[data-section="constellations"]       .enc-entry { --card-accent: #c8a030; }
.enc-listing[data-section="space-exploration"]    .enc-entry { --card-accent: #4a78a6; }

/* Environment */
.enc-listing[data-section="environment"]  .enc-entry { --card-accent: #2e8b6b; }

/* ───── Dark theme overrides ────────────────────────────────── */
[data-theme="dark"] .enc-entry          { background: #1e293b; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); }
[data-theme="dark"] .enc-entry-title    { color: #f1f5f9; }
[data-theme="dark"] .enc-entry-summary  { color: #cbd5e1; }

/* ───── Smaller cards on phones ─────────────────────────────── */
@media (max-width: 480px) {
    .enc-listing-entries {
        grid-template-columns: 1fr;
        gap: 0.9rem;
    }
    .enc-entry {
        padding: 1.1rem 1rem 1rem;
    }
    .enc-entry-title { font-size: 1.1rem; }
    .enc-entry-summary { font-size: 0.88rem; }
}

/* ===== CHILD-SECTION CARDS =====================================
 *
 * When an L2 page has child SECTIONS (not entries), the renderer
 * emits a separate component:
 *
 *   <div class="enc-child-sections">
 *     <h2 class="enc-child-sections-heading">In this section</h2>
 *     <div class="enc-child-sections-grid">
 *       <a class="enc-child-section-card" href="/geography/biomes">
 *         <span class="enc-child-section-name">Biomes</span>
 *       </a>
 *       ...one card per child section...
 *     </div>
 *   </div>
 *
 * No summary, no data-section attribute on the parent — just a link.
 * We style these with the same card look as the entry cards plus
 * an emoji icon picked by href so they read at a glance.
 */

.enc-child-sections {
    margin: 2rem 0;
}
.enc-child-sections-heading {
    margin: 0 0 1rem;
    font-size: 1.6rem;
    font-weight: 700;
    color: #1f2933;
}

.enc-child-sections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
    margin: 0 0 2rem;
}

.enc-child-section-card {
    --card-accent: #4A7286;

    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem 1.25rem 1.25rem;
    background: #ffffff;
    border: 2px solid transparent;
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(15, 30, 42, 0.07);
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.18s ease,
                box-shadow 0.18s ease,
                border-color 0.18s ease;
}
.enc-child-section-card::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 6px;
    background: var(--card-accent);
    transition: width 0.18s ease;
}
.enc-child-section-card:hover,
.enc-child-section-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(15, 30, 42, 0.14);
    border-color: var(--card-accent);
    outline: none;
    text-decoration: none;
}
.enc-child-section-card:hover::before,
.enc-child-section-card:focus-visible::before {
    width: 10px;
}

.enc-child-section-name {
    display: block;
    margin: 0 0 0.6rem;
    font-size: 1.3rem;
    font-weight: 700;
    color: #1f2933;
    line-height: 1.2;
}
.enc-child-section-card:hover .enc-child-section-name { color: var(--card-accent); }

/* CTA arrow at the bottom of every child-section card */
.enc-child-section-card::after {
    content: 'Explore \2192';
    color: var(--card-accent);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    transition: transform 0.18s ease;
}
.enc-child-section-card:hover::after,
.enc-child-section-card:focus-visible::after {
    transform: translateX(4px);
}

/* Per-section accent + emoji icon for each known child-section card.
 * Targeted by `href$="..."` (URL ends with that section slug). The
 * emoji is rendered into the card via an extra ::before-style trick
 * on the .enc-child-section-name (we already used ::before for the
 * accent strip on the link itself). */
.enc-child-section-name::before {
    display: block;
    font-size: 2.4rem;
    line-height: 1;
    margin-bottom: 0.5rem;
}

/* Geography family */
.enc-child-section-card[href$="/biomes"]      { --card-accent: #5d8f5a; }
.enc-child-section-card[href$="/deserts"]     { --card-accent: #d4a85a; }
.enc-child-section-card[href$="/mountains"]   { --card-accent: #7a8a9a; }
.enc-child-section-card[href$="/rainforests"] { --card-accent: #2e8b57; }
.enc-child-section-card[href$="/rivers"]      { --card-accent: #3a8acc; }
.enc-child-section-card[href$="/oceans"]      { --card-accent: #2a6f8f; }
.enc-child-section-card[href$="/landmarks"]   { --card-accent: #c45a3a; }

.enc-child-section-card[href$="/biomes"]      .enc-child-section-name::before { content: '🌿'; }
.enc-child-section-card[href$="/deserts"]     .enc-child-section-name::before { content: '🏜️'; }
.enc-child-section-card[href$="/mountains"]   .enc-child-section-name::before { content: '🏔️'; }
.enc-child-section-card[href$="/rainforests"] .enc-child-section-name::before { content: '🌳'; }
.enc-child-section-card[href$="/rivers"]      .enc-child-section-name::before { content: '🏞️'; }
.enc-child-section-card[href$="/oceans"]      .enc-child-section-name::before { content: '🌊'; }
.enc-child-section-card[href$="/landmarks"]   .enc-child-section-name::before { content: '🗽'; }

/* Continents */
.enc-child-section-card[href$="/africa"]        { --card-accent: #b8743c; }
.enc-child-section-card[href$="/asia"]          { --card-accent: #c45a4a; }
.enc-child-section-card[href$="/europe"]        { --card-accent: #4a78a6; }
.enc-child-section-card[href$="/north-america"] { --card-accent: #5a8e7a; }
.enc-child-section-card[href$="/south-america"] { --card-accent: #c89030; }
.enc-child-section-card[href$="/oceania"]       { --card-accent: #6a8eb8; }

.enc-child-section-card[href$="/africa"]        .enc-child-section-name::before { content: '🦁'; }
.enc-child-section-card[href$="/asia"]          .enc-child-section-name::before { content: '🐼'; }
.enc-child-section-card[href$="/europe"]        .enc-child-section-name::before { content: '🏰'; }
.enc-child-section-card[href$="/north-america"] .enc-child-section-name::before { content: '🦅'; }
.enc-child-section-card[href$="/south-america"] .enc-child-section-name::before { content: '🦜'; }
.enc-child-section-card[href$="/oceania"]       .enc-child-section-name::before { content: '🐨'; }

/* Science family */
.enc-child-section-card[href$="/chemistry"]      { --card-accent: #5a8aaa; }
.enc-child-section-card[href$="/periodic-table"] { --card-accent: #3a8acc; }
.enc-child-section-card[href$="/physics"]        { --card-accent: #6a4aa0; }
.enc-child-section-card[href$="/biology"]        { --card-accent: #3aa05a; }
.enc-child-section-card[href$="/earth-science"]  { --card-accent: #8a6a3a; }
.enc-child-section-card[href$="/astronomy"]      { --card-accent: #6b4a8c; }

.enc-child-section-card[href$="/chemistry"]      .enc-child-section-name::before { content: '⚗️'; }
.enc-child-section-card[href$="/periodic-table"] .enc-child-section-name::before { content: '🧪'; }
.enc-child-section-card[href$="/physics"]        .enc-child-section-name::before { content: '⚛️'; }
.enc-child-section-card[href$="/biology"]        .enc-child-section-name::before { content: '🧬'; }
.enc-child-section-card[href$="/earth-science"]  .enc-child-section-name::before { content: '🌎'; }
.enc-child-section-card[href$="/astronomy"]      .enc-child-section-name::before { content: '🪐'; }

/* Astronomy sub-topics */
.enc-child-section-card[href$="/solar-system"]         { --card-accent: #6b4a8c; }
.enc-child-section-card[href$="/stars"]                { --card-accent: #c8a030; }
.enc-child-section-card[href$="/galaxies"]             { --card-accent: #6b4a8c; }
.enc-child-section-card[href$="/the-universe"]         { --card-accent: #4a3a7a; }
.enc-child-section-card[href$="/asteroids-and-comets"] { --card-accent: #7a8a9a; }
.enc-child-section-card[href$="/black-holes"]          { --card-accent: #2a2a4a; }
.enc-child-section-card[href$="/constellations"]       { --card-accent: #c8a030; }
.enc-child-section-card[href$="/space-exploration"]    { --card-accent: #4a78a6; }

.enc-child-section-card[href$="/solar-system"]         .enc-child-section-name::before { content: '☀️'; }
.enc-child-section-card[href$="/stars"]                .enc-child-section-name::before { content: '⭐'; }
.enc-child-section-card[href$="/galaxies"]             .enc-child-section-name::before { content: '🌌'; }
.enc-child-section-card[href$="/the-universe"]         .enc-child-section-name::before { content: '✨'; }
.enc-child-section-card[href$="/asteroids-and-comets"] .enc-child-section-name::before { content: '☄️'; }
.enc-child-section-card[href$="/black-holes"]          .enc-child-section-name::before { content: '🕳️'; }
.enc-child-section-card[href$="/constellations"]       .enc-child-section-name::before { content: '🌟'; }
.enc-child-section-card[href$="/space-exploration"]    .enc-child-section-name::before { content: '🚀'; }

/* Chemistry sub-topics */
.enc-child-section-card[href$="/states-of-matter"]        { --card-accent: #5a8aaa; }
.enc-child-section-card[href$="/atoms-and-molecules"]     { --card-accent: #5a8aaa; }
.enc-child-section-card[href$="/chemical-reactions"]      { --card-accent: #c45a3a; }
.enc-child-section-card[href$="/acids-and-bases"]         { --card-accent: #b8743c; }
.enc-child-section-card[href$="/mixtures-and-solutions"]  { --card-accent: #5a8aaa; }
.enc-child-section-card[href$="/common-compounds"]        { --card-accent: #3a8acc; }

.enc-child-section-card[href$="/states-of-matter"]        .enc-child-section-name::before { content: '💧'; }
.enc-child-section-card[href$="/atoms-and-molecules"]     .enc-child-section-name::before { content: '⚛️'; }
.enc-child-section-card[href$="/chemical-reactions"]      .enc-child-section-name::before { content: '🧯'; }
.enc-child-section-card[href$="/acids-and-bases"]         .enc-child-section-name::before { content: '🧪'; }
.enc-child-section-card[href$="/mixtures-and-solutions"]  .enc-child-section-name::before { content: '🥤'; }
.enc-child-section-card[href$="/common-compounds"]        .enc-child-section-name::before { content: '💎'; }

/* Physics sub-topics */
.enc-child-section-card[href$="/forces-and-motion"]          .enc-child-section-name::before { content: '🏃'; }
.enc-child-section-card[href$="/energy"]                     .enc-child-section-name::before { content: '⚡'; }
.enc-child-section-card[href$="/gravity"]                    .enc-child-section-name::before { content: '🍎'; }
.enc-child-section-card[href$="/light-and-optics"]           .enc-child-section-name::before { content: '🔦'; }
.enc-child-section-card[href$="/sound-and-waves"]            .enc-child-section-name::before { content: '🔊'; }
.enc-child-section-card[href$="/electricity-and-magnetism"]  .enc-child-section-name::before { content: '🧲'; }
.enc-child-section-card[href$="/simple-machines"]            .enc-child-section-name::before { content: '⚙️'; }

/* Biology sub-topics */
.enc-child-section-card[href$="/human-body-systems"]         .enc-child-section-name::before { content: '🫀'; }
.enc-child-section-card[href$="/cells"]                      .enc-child-section-name::before { content: '🦠'; }
.enc-child-section-card[href$="/plants"]                     .enc-child-section-name::before { content: '🌱'; }
.enc-child-section-card[href$="/animal-kingdom"]             .enc-child-section-name::before { content: '🦒'; }
.enc-child-section-card[href$="/ecosystems-and-food-chains"] .enc-child-section-name::before { content: '🌿'; }
.enc-child-section-card[href$="/dna-and-genetics"]           .enc-child-section-name::before { content: '🧬'; }
.enc-child-section-card[href$="/evolution"]                  .enc-child-section-name::before { content: '🦖'; }

/* Earth Science sub-topics */
.enc-child-section-card[href$="/rocks-and-minerals"]                .enc-child-section-name::before { content: '🪨'; }
.enc-child-section-card[href$="/volcanoes"]                         .enc-child-section-name::before { content: '🌋'; }
.enc-child-section-card[href$="/earthquakes-and-plate-tectonics"]   .enc-child-section-name::before { content: '🫨'; }
.enc-child-section-card[href$="/weather"]                           .enc-child-section-name::before { content: '⛈️'; }
.enc-child-section-card[href$="/the-atmosphere"]                    .enc-child-section-name::before { content: '☁️'; }
.enc-child-section-card[href$="/water-cycle"]                       .enc-child-section-name::before { content: '💧'; }
.enc-child-section-card[href$="/fossils"]                           .enc-child-section-name::before { content: '🦴'; }
.enc-child-section-card[href$="/soil"]                              .enc-child-section-name::before { content: '🌾'; }

/* Environment */
.enc-child-section-card[href$="/environment"] { --card-accent: #2e8b6b; }
.enc-child-section-card[href$="/environment"] .enc-child-section-name::before { content: '🌱'; }

[data-theme="dark"] .enc-child-section-card  { background: #1e293b; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); }
[data-theme="dark"] .enc-child-section-name  { color: #f1f5f9; }
[data-theme="dark"] .enc-child-sections-heading { color: #f1f5f9; }

@media (max-width: 480px) {
    .enc-child-sections-grid { grid-template-columns: 1fr; gap: 0.9rem; }
    .enc-child-section-card  { padding: 1.1rem 1rem 1rem; }
    .enc-child-section-name  { font-size: 1.15rem; }
    .enc-child-section-name::before { font-size: 2rem; }
}