/* template/css/encyclopedia.css
 *
 * Front-end styling for Encyclopedia pages — Section index (L2) and
 * Entry detail (L3). Wikipedia-flavoured: an article body on the left
 * with a floated infobox on the right, headings between sections, a
 * card grid for index pages.
 *
 * Self-contained — does not depend on any other tool's CSS.
 */

/* Layout container ---------------------------------------------------- */
.enc-page                 { display: block; }
/* flow-root creates a block formatting context — contains the floated
   infobox so it can't extend below the entry's last in-flow content
   (i.e. into the footer when sections are short). */
.enc-page-entry           { display: flow-root; }
.enc-page-index           { /* listing-shaped */ }

/* Breadcrumb / "back to category" link rendered above an entry by the
   entry_breadcrumb block. */
.enc-breadcrumb {
    margin: 0 0 1rem;
    font-size: 0.95rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
    align-items: baseline;
}
.enc-breadcrumb a          { color: #475569; text-decoration: none; }
.enc-breadcrumb a:hover    { color: #1e293b; text-decoration: underline; }
.enc-breadcrumb-back       { color: #64748b; }
[data-theme="dark"] .enc-breadcrumb a       { color: #94a3b8; }
[data-theme="dark"] .enc-breadcrumb a:hover { color: #e2e8f0; }

/* Prose block (body_html) inside the entry layout. Rendered by the
   entry_body_blocks shortcode block. Wraps around the floated infobox. */
.enc-prose                 { margin: 0 0 1rem; }
.enc-prose p:first-child   { margin-top: 0; }
.enc-prose p:last-child    { margin-bottom: 0; }

/* Auto-image hero block. Rendered by entry_auto_image. Has four
   presentation modes, picked from the layout block config:
     full           — full-width banner (default)
     float_right    — portrait floated to the right of the body
     float_left     — portrait floated to the left
     centered_small — centered at ~60% of the body width
*/
.enc-hero {
    margin: 0 0 1.25rem;
    border-radius: 8px;
    overflow: hidden;
    background: #f1f5f9;
}
.enc-hero img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}
.enc-hero figcaption {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: #f1f5f9;
    background: linear-gradient(0deg, rgba(15, 23, 42, 0.85) 0%, rgba(15, 23, 42, 0.6) 100%);
}
[data-theme="dark"] .enc-hero { background: #0f172a; }

/* Full width — large banner. The only mode that crops to a uniform
   height for visual consistency across the section's listing pages. */
.enc-hero-full img {
    max-height: 460px;
    object-fit: cover;
}

/* Float right — portrait alongside body text. Respects the image's
   natural aspect ratio (no crop) so portraits display tall and
   landscapes display short, just at the chosen container width.
   Selector is intentionally specific so it wins against any browser
   default `figure` margin-inline or any other base rule. */
figure.enc-hero.enc-hero-float-right {
    float: right;
    width: clamp(240px, 34%, 360px);
    margin: 0.25rem 0 1.5rem 2.5rem;
    padding: 0;
    background: transparent;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    /* shape-margin keeps wrapping text honest if the figure has a shape. */
    shape-margin: 1.5rem;
}
figure.enc-hero.enc-hero-float-right img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 600px;
    border-radius: 8px;
}
figure.enc-hero.enc-hero-float-right figcaption {
    background: transparent;
    color: #475569;
    font-size: 0.8rem;
    padding: 0.4rem 0.4rem 0.5rem;
    text-align: center;
    line-height: 1.4;
}

/* Float left — mirror of float right. */
figure.enc-hero.enc-hero-float-left {
    float: left;
    width: clamp(240px, 34%, 360px);
    margin: 0.25rem 2.5rem 1.5rem 0;
    padding: 0;
    background: transparent;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    shape-margin: 1.5rem;
}
figure.enc-hero.enc-hero-float-left img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 600px;
    border-radius: 8px;
}
figure.enc-hero.enc-hero-float-left figcaption {
    background: transparent;
    color: #475569;
    font-size: 0.8rem;
    padding: 0.4rem 0.4rem 0.5rem;
    text-align: center;
    line-height: 1.4;
}

/* Centered small — narrow, centred, no float. Natural aspect ratio. */
.enc-hero-centered-small {
    width: clamp(280px, 60%, 540px);
    margin: 0 auto 1.25rem;
    background: transparent;
}
.enc-hero-centered-small img {
    border-radius: 8px;
    height: auto;
    max-height: 600px;
}
.enc-hero-centered-small figcaption {
    background: transparent;
    color: #475569;
    font-size: 0.85rem;
    text-align: center;
    padding: 0.4rem 0;
}

/* Belt-and-braces: even if a downstream section block establishes its
   own block formatting context (display: flow-root etc.), don't let
   text run flush against the float. */
.enc-page-entry .enc-section,
.enc-page-entry .enc-prose { padding-left: 0; padding-right: 0; }

/* On narrow screens (phones / small tablets) every hero variant becomes
   a full-width banner so the hero never gets squeezed to a tiny thumb
   beside the text. Specificity must match the desktop rules above
   (figure.enc-hero.enc-hero-X) or the cascade ignores us. */
@media (max-width: 768px) {
    figure.enc-hero.enc-hero-float-right,
    figure.enc-hero.enc-hero-float-left,
    .enc-page-entry .enc-hero-centered-small {
        float: none;
        width: auto;
        max-width: 100%;
        margin: 0 0 1rem;
        box-shadow: none;
        shape-margin: 0;
    }
    figure.enc-hero.enc-hero-float-right img,
    figure.enc-hero.enc-hero-float-left img,
    .enc-page-entry .enc-hero-centered-small img {
        width: 100%;
        max-height: 360px;
        border-radius: 6px;
    }
}

/* Auto gallery block (entry_auto_gallery). Lazy-loaded responsive grid
   used for the secondary photos that follow the hero. */
.enc-section-gallery h2 { margin-bottom: 0.75rem; }
.enc-auto-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
    margin: 0 0 1.5rem;
}
.enc-auto-gal-item {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 6px;
    background: #e2e8f0;
    transition: transform 0.18s ease;
}
.enc-auto-gal-item:hover { transform: scale(1.02); }
.enc-auto-gal-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
[data-theme="dark"] .enc-auto-gal-item { background: #1e293b; }

/* Infobox ------------------------------------------------------------- */
.enc-infobox {
    float: right;
    clear: right;
    width: 22rem;
    max-width: 100%;
    margin: 0 0 1rem 1.5rem;
    padding: 0.75rem;
    background: #f9f9f9;
    border: 1px solid #d0d0d4;
    font-size: 0.92rem;
    line-height: 1.4;
}
.enc-infobox-title {
    margin: 0 0 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #d0d0d4;
    font-weight: 600; font-size: 1rem;
    text-align: center;
}
.enc-infobox table {
    width: 100%;
    border-collapse: collapse;
}
.enc-infobox th,
.enc-infobox td {
    text-align: left;
    padding: 0.3rem 0.4rem;
    vertical-align: top;
    border-bottom: 1px solid #ececef;
}
.enc-infobox th {
    width: 40%;
    font-weight: 600;
    color: #333;
}
.enc-infobox td a { word-break: break-word; }
.enc-infobox tr:last-child th,
.enc-infobox tr:last-child td { border-bottom: 0; }
.enc-infobox img { max-width: 100%; height: auto; }

@media (max-width: 720px) {
    .enc-infobox {
        float: none; width: auto;
        margin: 0 0 1rem 0;
    }
}

/* Hero image ---------------------------------------------------------- */
.enc-hero {
    margin: 0 0 1rem;
}
.enc-hero img {
    display: block;
    width: 100%; height: auto;
    border: 1px solid #d0d0d4;
}
.enc-hero figcaption {
    margin-top: 0.4rem;
    font-size: 0.88rem;
    color: #666;
    font-style: italic;
}

/* Article subsections ------------------------------------------------- */
.enc-section {
    margin: 1.25rem 0;
}
.enc-section h2 {
    margin: 0 0 0.5rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid #e0e0e6;
    font-size: 1.4rem;
    font-weight: 500;
}
.enc-section-body p:first-child { margin-top: 0; }
.enc-section-body p:last-child  { margin-bottom: 0; }

/* Numbering & names field ---------------------------------------------- */
.enc-numbering-ranges {
    margin-bottom: 1rem;
    font-size: 0.95rem;
    border-top: 1px solid #d0d0d8;
}
.enc-num-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 0 1rem;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid #e0e0e6;
    align-items: baseline;
    list-style: none;       /* details > summary marker control */
}
.enc-numbering-ranges.has-era .enc-num-row {
    grid-template-columns: 70px 1fr 2fr;
}
.enc-num-row-head {
    font-weight: 600;
    color: #444;
    background: #f7f7fa;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom-color: #d0d0d8;
}
.enc-num-detail summary.enc-num-row {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-left: 1.6rem;   /* room for the chevron */
}
.enc-num-detail summary.enc-num-row::-webkit-details-marker { display: none; }
.enc-num-detail summary.enc-num-row::marker { content: ''; }
.enc-num-detail summary.enc-num-row::before {
    content: '';
    position: absolute;
    left: 0.4rem;
    top: 0.7rem;
    width: 0; height: 0;
    border-left: 5px solid #94a3b8;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transform: rotate(0deg);
    transition: transform 0.15s ease;
}
.enc-num-detail[open] summary.enc-num-row::before { transform: rotate(90deg); }
.enc-num-detail summary.enc-num-row:hover { background: #f8fafc; }
.enc-num-row-static {
    padding-left: 1.6rem;   /* keep alignment with expandable rows */
}
.enc-num-era {
    font-weight: 500;
    color: #555;
}
.enc-num-code code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.95em;
    background: transparent;
    padding: 0;
}
.enc-num-notes { color: #475569; }
.enc-numbering-named h3 {
    margin: 0.5rem 0 0.4rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: #444;
}
.enc-numbering-named ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.25rem 1rem;
}
.enc-numbering-named li {
    padding: 0.15rem 0;
}
.enc-numbering-named strong {
    display: inline-block;
    min-width: 4em;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: #555;
}
.enc-numbering-notes {
    color: #555;
    font-size: 0.95rem;
    margin: 0.6rem 0 0;
}
[data-theme="dark"] .enc-numbering-ranges th {
    background: #1f2937;
    color: #cbd5e1;
    border-bottom-color: #334155;
}
[data-theme="dark"] .enc-numbering-ranges td { border-bottom-color: #334155; }
[data-theme="dark"] .enc-numbering-named h3,
[data-theme="dark"] .enc-numbering-named strong,
[data-theme="dark"] .enc-numbering-notes { color: #cbd5e1; }

.enc-num-alt code { color: #94a3b8; }
.enc-num-badge {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 3px;
}
[data-theme="dark"] .enc-num-badge { background: #1e293b; color: #94a3b8; }

/* Per-number list shown when a range row is expanded.
   Newspaper-style columns so numbers read 4901, 4902, 4903 down each column
   before flowing into the next — natural for sequential cab numbers. */
.enc-num-list {
    list-style: none;
    margin: 0.4rem 0 0.6rem 1.6rem;
    padding: 0.5rem 0.6rem;
    background: #fafbfc;
    border-bottom: 1px solid #e0e0e6;
    columns: 180px;
    column-gap: 0.75rem;
    font-size: 0.9rem;
}
.enc-num-list li {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.1rem 0.3rem;
    break-inside: avoid;        /* don't split a number/name pair across columns */
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
}
.enc-num-list li:has(.enc-num-name) {
    background: #fef9e7;
    border-radius: 3px;
}
.enc-num-num {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 600;
    color: #475569;
    min-width: 4em;
}
.enc-num-name { color: #0f172a; font-style: italic; }

[data-theme="dark"] .enc-numbering-ranges,
[data-theme="dark"] .enc-num-row { border-color: #334155; }
[data-theme="dark"] .enc-num-row-head { background: #1e293b; color: #cbd5e1; border-bottom-color: #334155; }
[data-theme="dark"] .enc-num-detail summary.enc-num-row:hover { background: #1e293b; }
[data-theme="dark"] .enc-num-era { color: #cbd5e1; }
[data-theme="dark"] .enc-num-notes { color: #cbd5e1; }
[data-theme="dark"] .enc-num-list { background: #0f172a; border-bottom-color: #334155; }
[data-theme="dark"] .enc-num-list li:has(.enc-num-name) { background: rgba(180,140,40,0.18); }
[data-theme="dark"] .enc-num-num { color: #94a3b8; }
[data-theme="dark"] .enc-num-name { color: #f1f5f9; }

/* Gallery ------------------------------------------------------------- */
.enc-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.5rem;
    margin: 1.25rem 0;
}
.enc-gal-item {
    display: block;
    overflow: hidden;
    border: 1px solid #d0d0d4;
}
.enc-gal-item img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Related panel ------------------------------------------------------- */
.enc-related {
    clear: both;
    margin: 2rem 0 1rem;
    padding: 1rem;
    background: #f5f7fb;
    border-left: 4px solid #2563eb;
}
.enc-related h2 {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
    font-weight: 600;
}
.enc-related ul {
    margin: 0; padding-left: 1.25rem;
}
.enc-related li {
    margin: 0.25rem 0;
    line-height: 1.5;
}
.enc-rel-summary {
    color: #555;
    font-size: 0.92rem;
}
[data-theme="dark"] .enc-rel-summary { color: #cbd5e1; }

/* Backlinks panel ------------------------------------------------------ */
.enc-backlinks {
    clear: both;
    margin: 1.5rem 0 1rem;
    padding: 1rem;
    background: #f7f7fa;
    border-left: 4px solid #6b7280;
}
.enc-backlinks h2 {
    margin: 0 0 0.5rem;
    font-size: 1.15rem; font-weight: 600;
}
.enc-backlinks-group {
    margin: 0.4rem 0;
}
.enc-backlinks-group h3 {
    margin: 0.4rem 0 0.25rem;
    font-size: 0.95rem; font-weight: 600;
    color: #374151;
}
.enc-backlinks-group ul {
    margin: 0; padding-left: 1.25rem;
}
.enc-backlinks-group li {
    margin: 0.15rem 0;
    line-height: 1.5;
}
[data-theme="dark"] .enc-backlinks         { background: #1a2436; }
[data-theme="dark"] .enc-backlinks-group h3 { color: #d1d5db; }

/* Generic card grid ----------------------------------------------------- *
 * Used by static body content that hand-writes <div class="enc-card-grid">
 * with <a class="enc-card"> children — primarily the homepage's "Browse
 * the encyclopedia" panel and any editorial page that wants to lay out
 * a few cross-link tiles. The L2 entries listing has its own mode-aware
 * styling further down. */
.enc-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}
.enc-card {
    display: block;
    padding: 1rem;
    border: 1px solid #d0d0d4;
    border-radius: 6px;
    background: var(--bg, #fff);
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.15s, transform 0.05s;
}
.enc-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}
.enc-card h3 {
    margin: 0 0 0.4rem;
    font-size: 1.1rem;
    color: #2563eb;
}
.enc-card p {
    margin: 0;
    font-size: 0.92rem;
    color: var(--muted, #555);
    line-height: 1.5;
}
[data-theme="dark"] .enc-card { background: #1a2436; border-color: #334155; }

/* L2 listing ------------------------------------------------------------- *
 * Single set of HTML rendered once per Section. Wrapper carries an
 * is-mode-* class that drives the visual mode entirely from CSS so the
 * user can flip view without a page reload.
 */

.enc-listing {
    margin: 1.5rem 0;
}

/* Mode-switcher toolbar */
.enc-listing-toolbar {
    display: inline-flex;
    gap: 0;
    margin: 0 0 0.85rem;
    background: #fff;
    border: 1px solid #d0d0d4;
    border-radius: 6px;
    overflow: hidden;
}
.enc-listing-mode {
    padding: 0.4rem 0.85rem;
    border: 0;
    background: transparent;
    color: #1f2937;
    cursor: pointer;
    font-size: 0.88rem;
    border-right: 1px solid #e0e0e6;
    line-height: 1.2;
}
.enc-listing-mode:last-child { border-right: 0; }
.enc-listing-mode:hover      { background: #f0f0f3; }
.enc-listing-mode.is-active  { background: #2563eb; color: #fff; }
.enc-listing-mode.is-active:hover { background: #1d4fcf; }

/* On mobile, stretch the toolbar to fill the row and make every button
   share the width equally so all four labels fit neatly without leaving
   white space on the right. Slightly smaller font + tighter padding so
   "Cards and photo" still fits its quarter. */
@media (max-width: 768px) {
    .enc-listing-toolbar {
        display: flex;
        width: 100%;
    }
    .enc-listing-mode {
        flex: 1 1 0;
        min-width: 0;
        padding: 0.45rem 0.4rem;
        font-size: 0.78rem;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Each Entry — one structural block, mode hides what each mode doesn't need */
.enc-entry {
    position: relative;     /* anchor for the title's overlay link */
    display: block;
    color: inherit;
    transition: box-shadow 0.15s, transform 0.05s;
}
/* Filter JS sets [hidden] on entries that don't match the filter selection.
   The author-level .enc-entry { display: block } rule above would otherwise
   beat the user-agent's default [hidden] { display: none } at the same
   specificity, so make hiding explicit and bulletproof. */
.enc-entry[hidden] { display: none !important; }
.enc-entry-image,
.enc-entry-summary,
.enc-entry-detail {
    display: block;
}
.enc-entry-image { background: #ececef; overflow: hidden; }
.enc-entry-image img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
}
.enc-entry-title {
    display: block;
    color: #2563eb;
    font-weight: 500;
    text-decoration: none;
}
.enc-entry-title:hover { text-decoration: underline; }
/* Whole-entry click target — title's ::before overlay covers the parent. */
.enc-entry-title::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
}
/* Inner links (cross-references in the detail <dl>) sit above the overlay. */
.enc-entry-detail a {
    position: relative;
    z-index: 1;
    text-decoration: underline;
}
.enc-entry-summary {
    color: var(--muted, #555);
    font-size: 0.92rem;
    line-height: 1.5;
}
.enc-entry-detail {
    margin: 0.4rem 0 0;
    font-size: 0.88rem;
}
.enc-entry-detail dt { font-weight: 500; color: #555; }
.enc-entry-detail dd { margin: 0; }

/* ---- mode: cards (default) ---- */
.enc-listing.is-mode-cards .enc-listing-entries {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}
.enc-listing.is-mode-cards .enc-entry {
    padding: 1rem;
    border: 1px solid #d0d0d4;
    border-radius: 6px;
    background: var(--bg, #fff);
}
.enc-listing.is-mode-cards .enc-entry:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}
.enc-listing.is-mode-cards .enc-entry-title  { font-size: 1.1rem; margin-bottom: 0.4rem; }
.enc-listing.is-mode-cards .enc-entry-image  { display: none; }
.enc-listing.is-mode-cards .enc-entry-detail { display: none; }

/* ---- mode: cards-with-image ---- */
.enc-listing.is-mode-cards-with-image .enc-listing-entries {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}
.enc-listing.is-mode-cards-with-image .enc-entry {
    border: 1px solid #d0d0d4;
    border-radius: 6px;
    background: var(--bg, #fff);
    overflow: hidden;
}
.enc-listing.is-mode-cards-with-image .enc-entry:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}
.enc-listing.is-mode-cards-with-image .enc-entry-image {
    aspect-ratio: 16 / 10;
}
.enc-listing.is-mode-cards-with-image .enc-entry-title {
    margin: 0.85rem 1rem 0.3rem;
    font-size: 1.1rem;
}
.enc-listing.is-mode-cards-with-image .enc-entry-summary {
    margin: 0 1rem 1rem;
}
.enc-listing.is-mode-cards-with-image .enc-entry-detail { display: none; }

/* When an entry has no image, swap in a soft placeholder so the grid stays even */
.enc-listing.is-mode-cards-with-image .enc-entry:not(:has(.enc-entry-image)) .enc-entry-title {
    margin-top: 1rem;
}

/* ---- mode: list ---- */
.enc-listing.is-mode-list .enc-listing-entries {
    display: block;
    border-top: 1px solid #e0e0e6;
}
.enc-listing.is-mode-list .enc-entry {
    padding: 0.55rem 0;
    border-bottom: 1px solid #e0e0e6;
}
.enc-listing.is-mode-list .enc-entry-title  { font-size: 1rem; }
.enc-listing.is-mode-list .enc-entry-image,
.enc-listing.is-mode-list .enc-entry-summary,
.enc-listing.is-mode-list .enc-entry-detail { display: none; }
.enc-listing.is-mode-list .enc-entry:hover .enc-entry-title { text-decoration: underline; }

/* ---- mode: list-detail ---- */
.enc-listing.is-mode-list-detail .enc-listing-entries {
    display: block;
    border-top: 1px solid #e0e0e6;
}
.enc-listing.is-mode-list-detail .enc-entry {
    padding: 0.85rem 0;
    border-bottom: 1px solid #e0e0e6;
}
.enc-listing.is-mode-list-detail .enc-entry-title { font-size: 1.05rem; margin-bottom: 0.2rem; }
.enc-listing.is-mode-list-detail .enc-entry-image { display: none; }
.enc-listing.is-mode-list-detail .enc-entry-summary { margin: 0 0 0.4rem; }
.enc-listing.is-mode-list-detail .enc-entry-detail {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 1rem;
    row-gap: 0.15rem;
}
.enc-listing.is-mode-list-detail .enc-entry:hover .enc-entry-title { text-decoration: underline; }

/* Filter form — only the dropdowns row remains here. The search input
   is hoisted into the listing toolbar at page load (see encyclopedia.js)
   so it sits inline with the view-mode pills (Cards / List / etc.). */
.enc-filter {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0.5rem 0 1rem;
    font-size: 0.88rem;
}
.enc-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1rem;
}

/* Filters row: dropdowns line up; clear button + count push to the right. */
.enc-filter-row-fields .enc-filter-control { flex: 0 0 auto; }
.enc-filter-row-fields .enc-filter-count   { margin-left: auto; }

/* When the filter form's search input has been hoisted into the listing
   as a sibling of the toolbar, lay them out side-by-side. The toolbar
   keeps its own existing styling — search lives OUTSIDE its border. */
.enc-listing.has-inline-search {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1rem;
    row-gap: 0.5rem;
    align-items: center;
}
.enc-listing.has-inline-search > .enc-listing-toolbar { grid-column: 1; }
.enc-listing.has-inline-search > [data-enc-search-host] {
    grid-column: 2;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
}
.enc-listing.has-inline-search > [data-enc-search-host] input[type="search"] {
    min-width: 14rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid #c0c0c6;
    border-radius: 4px;
    background: #fff;
    color: #1f2937;
    font: inherit;
    /* 16px = iOS Safari auto-zoom threshold; smaller values trigger
       a viewport zoom on focus that's hard to recover from on phones. */
    font-size: 16px;
}
.enc-listing.has-inline-search > .enc-listing-entries { grid-column: 1 / -1; }

.enc-filter-control {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.enc-filter-label  { color: #555; }
.enc-filter select,
.enc-filter input[type="search"] {
    padding: 0.35rem 0.6rem;
    border: 1px solid #c0c0c6;
    border-radius: 4px;
    background: #fff;
    color: #1f2937;
    font-size: 0.9rem;
    font-family: inherit;
}
.enc-filter-count { color: #888; }
.enc-filter-clear {
    padding: 0.3rem 0.7rem;
    border: 1px solid #c0c0c6;
    background: #fff;
    color: #1f2937;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
}
.enc-filter-clear:hover { background: #f0f0f3; }

/* Mobile: rows stay stacked (default flex-direction column on .enc-filter)
   and within each row, controls wrap as needed. The hoisted search input
   drops below the mode pills rather than sitting beside them. */
@media (max-width: 720px) {
    .enc-filter-row-fields .enc-filter-control { flex: 1 1 100%; }
    .enc-filter-row-fields .enc-filter-control select { width: 100%; }
    .enc-filter-row-fields .enc-filter-count   { margin-left: 0; }

    .enc-listing.has-inline-search { grid-template-columns: 1fr; }
    .enc-listing.has-inline-search > .enc-listing-toolbar { grid-column: 1; }
    .enc-listing.has-inline-search > [data-enc-search-host] {
        grid-column: 1; justify-self: stretch; width: 100%;
    }
    .enc-listing.has-inline-search > [data-enc-search-host] input[type="search"] {
        width: 100%; min-width: 0;
    }
}

[data-theme="dark"] .enc-listing-toolbar { background: #1f2937; border-color: #475569; }
[data-theme="dark"] .enc-listing-mode { color: #f1f5f9; border-right-color: #334155; }
[data-theme="dark"] .enc-listing-mode:hover { background: #2d3a4f; }
[data-theme="dark"] .enc-listing.is-mode-cards .enc-entry,
[data-theme="dark"] .enc-listing.is-mode-cards-with-image .enc-entry { background: #1a2436; border-color: #334155; }
[data-theme="dark"] .enc-listing.is-mode-list .enc-listing-entries,
[data-theme="dark"] .enc-listing.is-mode-list-detail .enc-listing-entries,
[data-theme="dark"] .enc-listing.is-mode-list .enc-entry,
[data-theme="dark"] .enc-listing.is-mode-list-detail .enc-entry { border-color: #334155; }
[data-theme="dark"] .enc-filter select,
[data-theme="dark"] .enc-filter input[type="search"] {
    background: #1f2937; color: #f1f5f9; border-color: #475569;
}
[data-theme="dark"] .enc-filter-clear  { background: #1f2937; color: #f1f5f9; border-color: #475569; }

.enc-empty {
    padding: 2rem;
    text-align: center;
    color: #888;
    font-style: italic;
}

/* Dark mode tweaks (matches default-head's --bg etc. token system) ---- */
[data-theme="dark"] .enc-infobox     { background: #1a2436; border-color: #334155; }
[data-theme="dark"] .enc-infobox-title { border-bottom-color: #334155; }
[data-theme="dark"] .enc-infobox th,
[data-theme="dark"] .enc-infobox td  { border-bottom-color: #2a3548; color: #cbd5e1; }
[data-theme="dark"] .enc-section h2  { border-bottom-color: #334155; }
[data-theme="dark"] .enc-related     { background: #1a2436; }
[data-theme="dark"] .enc-card        { border-color: #334155; }

/* ============================================================
   Layout-mode alternatives for entry_infobox and entry_related.
   These are picked from the layout block's `mode` config in the
   Layout designer. Each Section can mix-and-match.
   ============================================================ */

/* ---- entry_infobox mode: quickfacts_top ----
   Horizontal "Quick facts" strip designed to live near the top
   of an entry page. Wraps on narrow screens. */
.enc-quickfacts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.5rem 1rem;
    margin: 0 0 1.25rem;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}
.enc-quickfacts-item dt {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    font-weight: 600;
    margin: 0 0 0.15rem;
}
.enc-quickfacts-item dd {
    margin: 0;
    font-size: 1rem;
    line-height: 1.35;
    color: #0f172a;
}
.enc-quickfacts-item dd a {
    color: #1e40af;
    text-decoration: none;
}
.enc-quickfacts-item dd a:hover { text-decoration: underline; }
[data-theme="dark"] .enc-quickfacts {
    background: #0f172a; border-color: #1e293b;
}
[data-theme="dark"] .enc-quickfacts-item dt  { color: #94a3b8; }
[data-theme="dark"] .enc-quickfacts-item dd  { color: #e2e8f0; }
[data-theme="dark"] .enc-quickfacts-item dd a { color: #93c5fd; }

/* ---- entry_infobox mode: full_below ----
   Non-floated full specifications table. Sits in normal flow,
   typically placed below the body so it doesn't dominate. */
.enc-fullspecs                    { margin: 1.5rem 0; }
.enc-fullspecs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    background: #fff;
    border: 1px solid #e2e8f0;
}
.enc-fullspecs-table th,
.enc-fullspecs-table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #f1f5f9;
}
.enc-fullspecs-table th {
    width: 30%;
    background: #f8fafc;
    font-weight: 600;
    color: #334155;
}
.enc-fullspecs-table tr:last-child th,
.enc-fullspecs-table tr:last-child td { border-bottom: 0; }
[data-theme="dark"] .enc-fullspecs-table {
    background: #0f172a; border-color: #1e293b;
}
[data-theme="dark"] .enc-fullspecs-table th {
    background: #1e293b; color: #cbd5e1;
}
[data-theme="dark"] .enc-fullspecs-table th,
[data-theme="dark"] .enc-fullspecs-table td { border-bottom-color: #1e293b; }

/* ---- entry_related mode: cards ---- */
.enc-related-cards { margin: 1.5rem 0; }
.enc-rel-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}
.enc-rel-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.enc-rel-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
}
.enc-rel-card-thumb {
    aspect-ratio: 4 / 3;
    background: #f1f5f9;
    overflow: hidden;
}
.enc-rel-card-thumb img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.enc-rel-card-noimg .enc-rel-card-thumb { display: none; }
.enc-rel-card-body {
    padding: 0.6rem 0.75rem 0.8rem;
    flex: 1;
    display: flex; flex-direction: column; gap: 0.25rem;
}
.enc-rel-card-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: #0f172a;
    line-height: 1.3;
}
.enc-rel-card-summary {
    font-size: 0.85rem;
    color: #475569;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
[data-theme="dark"] .enc-rel-card { background: #0f172a; border-color: #1e293b; color: #e2e8f0; }
[data-theme="dark"] .enc-rel-card-title   { color: #f1f5f9; }
[data-theme="dark"] .enc-rel-card-summary { color: #94a3b8; }
[data-theme="dark"] .enc-rel-card-thumb   { background: #1e293b; }

/* ---- entry_related: extra facts shown alongside the link ---- */
.enc-rel-facts {
    display: inline;
    color: #64748b;
    font-size: 0.92em;
    margin-left: 0.5rem;
}
.enc-rel-fact {
    display: inline;
    margin-right: 0.6rem;
    white-space: nowrap;
}
.enc-rel-fact-icon {
    display: inline-block;
    vertical-align: -2px;
    margin-right: 0.2rem;
    opacity: 0.7;
}
.enc-rel-fact-current_location a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted #cbd5e1;
}
.enc-rel-fact-current_location a:hover {
    border-bottom-style: solid;
    color: #0f172a;
}
[data-theme="dark"] .enc-rel-facts { color: #94a3b8; }
[data-theme="dark"] .enc-rel-fact-current_location a { border-bottom-color: #334155; }
[data-theme="dark"] .enc-rel-fact-current_location a:hover { color: #f1f5f9; }

/* =====================================================================
   [gallery] shortcode — single / grid / masonry / strip modes.
   Used for any folder of media images dropped into a page via shortcode.
   ===================================================================== */
.enc-gal {
    --enc-gal-columns: 4;
    margin: 1.25rem 0;
}
.enc-gal-item {
    margin: 0;
    background: transparent;
}
.enc-gal-item img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
    background: #f1f5f9;
}
.enc-gal-item figcaption {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    color: #475569;
    line-height: 1.4;
    text-align: center;
}
.enc-gal-link {
    display: block;
    cursor: zoom-in;
}

/* Mode: single — one image per row, centred, max-readable width. */
.enc-gal-single {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
}
.enc-gal-single .enc-gal-item {
    max-width: min(720px, 100%);
    width: 100%;
}

/* Mode: grid — responsive uniform grid. */
.enc-gal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
}
.enc-gal-grid .enc-gal-item img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Mode: masonry — CSS multi-column, fills top-to-bottom column-by-column.
   Doesn't need JS. The "stone wall" pack of mixed portraits + landscapes. */
.enc-gal-masonry {
    column-count: var(--enc-gal-columns, 4);
    column-gap: 0.75rem;
}
.enc-gal-masonry .enc-gal-item {
    break-inside: avoid;
    margin-bottom: 0.75rem;
}
.enc-gal-masonry .enc-gal-item img { aspect-ratio: auto; }

/* Mode: strip — horizontal scrollable row of thumbnails. */
.enc-gal-strip {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scroll-snap-type: x mandatory;
}
.enc-gal-strip .enc-gal-item {
    flex: 0 0 auto;
    width: 240px;
    scroll-snap-align: start;
}
.enc-gal-strip .enc-gal-item img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Responsive break — fewer columns on tablet, single column on mobile. */
@media (max-width: 900px) {
    .enc-gal-masonry { column-count: max(2, calc(var(--enc-gal-columns, 4) - 1)); }
    .enc-gal-grid    { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}
@media (max-width: 600px) {
    .enc-gal-masonry { column-count: 2; }
    .enc-gal-grid    { grid-template-columns: repeat(2, 1fr); }
    .enc-gal-strip .enc-gal-item { width: 70vw; }
}

/* Lightbox overlay — opens when clicking a thumbnail in a gallery
   that has the .enc-gal-lightbox class. JS adds/removes the overlay
   and handles keyboard nav. */
.enc-gal-lightbox-overlay {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.92);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999;
    padding: 1rem;
}
.enc-gal-lightbox-overlay img {
    max-width: 95vw;
    max-height: 90vh;
    object-fit: contain;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
    border-radius: 4px;
}
.enc-gal-lightbox-close,
.enc-gal-lightbox-prev,
.enc-gal-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    width: 44px; height: 44px;
    font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.enc-gal-lightbox-close { top: 1rem; right: 1rem; transform: none; }
.enc-gal-lightbox-prev  { left: 1rem; }
.enc-gal-lightbox-next  { right: 1rem; }
.enc-gal-lightbox-caption {
    position: absolute;
    bottom: 1rem; left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.9);
    color: #0f172a;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    font-size: 0.85rem;
    max-width: 80vw;
    text-align: center;
}