/*
 * Enova Encyclopedia Components
 * -----------------------------
 * Plain CSS on purpose: served directly via {{asset}} like
 * gallery-extended.css — NOT part of the Vite/Tailwind build.
 *
 * Provides `ency-*` component classes for encyclopedia hub pages and
 * entry posts, so HTML cards in the Ghost editor stay small and
 * semantic. All values are lifted from Enova's design system:
 *
 *   grey scale ....... same zinc hex values as index.css @theme
 *   radius ........... rounded-xl (0.75rem) cards, rounded-lg (0.5rem) media
 *   card hover ....... -translate-y-1 + shadow-xl (matches post-card.hbs)
 *   accent ........... var(--color-brand) fills, var(--brand-readable) text
 *   headings ......... var(--font-heading) → Lora
 *   dark mode ........ .dark class prefix (Enova convention)
 *
 * Blocks in the editor only need class names — no inline styles — so a
 * future theme restyle automatically restyles the encyclopedia too.
 */

/* ── World card grid (encyclopedia index) ─────────────────────────── */

.ency-world-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem;
    margin: 1.5rem 0 2.5rem;
}

.ency-world-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e4e4e7;             /* grey-200 */
    border-radius: 0.75rem;                 /* rounded-xl */
    overflow: hidden;
    text-decoration: none !important;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);  /* shadow-sm */
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.dark .ency-world-card {
    background: #18181b;                    /* grey-800 */
    border-color: #27272a;                  /* grey-700 */
}

.ency-world-card:hover {
    transform: translateY(-0.25rem);        /* -translate-y-1 */
    box-shadow: 0 20px 25px -5px rgb(228 228 231 / 0.5),
                0 8px 10px -6px rgb(228 228 231 / 0.5);  /* shadow-xl shadow-grey-200/50 */
}

.dark .ency-world-card:hover {
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.5),
                0 8px 10px -6px rgb(0 0 0 / 0.5);
}

.ency-world-card figure {
    position: relative;
    margin: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f4f4f5;                    /* grey-100 */
}

.dark .ency-world-card figure {
    background: #27272a;
}

.ency-world-card figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 0.5s ease-out;
}

.ency-world-card:hover figure img {
    transform: scale(1.03);                 /* matches post-card image zoom */
}

.ency-world-card figure::after {
    /* inset hairline ring, same as post-card media */
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1);
    pointer-events: none;
}

.ency-world-card .ency-body {
    padding: 1.1rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.ency-world-card h3 {
    font-family: var(--font-heading, "Lora Variable", Georgia, serif);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    color: #09090b;                         /* grey-900 */
    margin: 0 0 0.35rem;
    transition: color 0.2s;
}

.dark .ency-world-card h3 { color: #fff; }

.ency-world-card:hover h3 { color: var(--brand-readable, var(--color-brand)); }

.ency-world-card .ency-genre {
    font-size: 0.8125rem;
    color: #71717a;                         /* grey-500 */
    margin-bottom: 0.5rem;
}

.ency-world-card .ency-stats {
    margin-top: auto;
    font-size: 0.75rem;
    color: #71717a;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.65rem;
}

.dark .ency-world-card .ency-genre,
.dark .ency-world-card .ency-stats { color: #a1a1aa; }  /* grey-400 */


/* ── Category tile grid (index + world hubs) ──────────────────────── */

.ency-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
    margin: 1.5rem 0 2rem;
}

.ency-cat-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    background: #fff;
    border: 1px solid #e4e4e7;
    border-radius: 0.75rem;
    padding: 1.15rem 0.75rem 1rem;
    text-align: center;
    text-decoration: none !important;
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, border-color 0.2s;
}

.dark .ency-cat-tile {
    background: #18181b;
    border-color: #27272a;
}

.ency-cat-tile:hover {
    transform: translateY(-0.25rem);
    box-shadow: 0 10px 15px -3px rgb(228 228 231 / 0.5),
                0 4px 6px -4px rgb(228 228 231 / 0.5);
}

.dark .ency-cat-tile:hover {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.5),
                0 4px 6px -4px rgb(0 0 0 / 0.5);
}

.ency-cat-tile .ency-icon {
    font-size: 1.4rem;
    line-height: 1;
}

/* When the icon slot holds an inline SVG (from the theme's Lucide set)
   rather than an emoji, match the nav-icon sizing. */
.ency-cat-tile .ency-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    stroke: currentColor;
    color: #a1a1aa;                         /* grey-400 — neutral default */
    transition: color 0.2s;
}

.ency-cat-tile:hover .ency-icon svg {
    color: var(--brand-readable, var(--color-brand));
}

.ency-cat-tile .ency-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #27272a;                         /* grey-700 */
    line-height: 1.25;
}

.dark .ency-cat-tile .ency-label { color: #f4f4f5; }

.ency-cat-tile:hover .ency-label { color: var(--brand-readable, var(--color-brand)); }

.ency-cat-tile .ency-count {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #a1a1aa;                         /* grey-400 */
    text-transform: uppercase;
}


/* ── Quick-reference panel (entry posts) ──────────────────────────── */

.ency-infobox {
    background: #fafafa;                    /* grey-50 */
    border: 1px solid #e4e4e7;
    border-radius: 0.75rem;
    padding: 0.4rem 1.4rem;
    margin: 0 0 2rem;
}

.dark .ency-infobox {
    background: #18181b;
    border-color: #27272a;
}

.ency-infobox table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 !important;
    font-size: 0.9375rem;
}

.ency-infobox tr + tr td {
    border-top: 1px solid #f4f4f5;          /* grey-100 hairline rows */
}

.dark .ency-infobox tr + tr td {
    border-top-color: #27272a;
}

.ency-infobox td {
    padding: 0.6rem 0;
    vertical-align: top;
}

.ency-infobox td:first-child {
    width: 8.5rem;
    padding-right: 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #a1a1aa;
    white-space: nowrap;
}

.ency-infobox td:last-child {
    color: #27272a;
    font-weight: 500;
}

.dark .ency-infobox td:last-child { color: #e4e4e7; }

.ency-infobox a {
    color: var(--brand-readable, var(--color-brand)) !important;
    text-decoration: none !important;
    font-weight: 600;
}

.ency-infobox a:hover { text-decoration: underline !important; }


/* ── Story list rows (world hubs) ─────────────────────────────────── */

.ency-story-list {
    margin: 1.5rem 0 0.5rem;
    border: 1px solid #e4e4e7;
    border-radius: 0.75rem;
    overflow: hidden;
    background: #fff;
}

.dark .ency-story-list {
    background: #18181b;
    border-color: #27272a;
}

.ency-story-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.25rem;
    text-decoration: none !important;
    transition: background 0.15s;
}

.ency-story-row + .ency-story-row {
    border-top: 1px solid #f4f4f5;
}

.dark .ency-story-row + .ency-story-row {
    border-top-color: #27272a;
}

.ency-story-row:hover { background: #fafafa; }
.dark .ency-story-row:hover { background: #27272a; }

.ency-story-row .ency-story-title {
    font-weight: 600;
    font-size: 0.9375rem;
    color: #09090b;
    line-height: 1.35;
    transition: color 0.2s;
}

.dark .ency-story-row .ency-story-title { color: #fff; }

.ency-story-row:hover .ency-story-title {
    color: var(--brand-readable, var(--color-brand));
}

.ency-story-row .ency-story-sub {
    font-size: 0.8125rem;
    color: #71717a;
    margin-top: 0.15rem;
}

.dark .ency-story-row .ency-story-sub { color: #a1a1aa; }

.ency-story-row .ency-badge { flex-shrink: 0; }


/* ── Badges (tones, tiers) ────────────────────────────────────────── */

.ency-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;                  /* pill, like Enova's tag pills */
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: #f4f4f5;
    color: #52525b;                         /* grey-600 */
}

.dark .ency-badge {
    background: #27272a;
    color: #a1a1aa;
}

/* Accent-tinted badge — uses the site accent so it recolours with
   whatever accent the admin picks, exactly like Enova's own tag pill. */
.ency-badge-brand {
    background: color-mix(in srgb, var(--color-brand) 12%, transparent);
    color: var(--brand-readable, var(--color-brand));
}

.dark .ency-badge-brand {
    background: color-mix(in srgb, var(--color-brand) 20%, transparent);
}


/* ── Access legend (index header) ─────────────────────────────────── */

.ency-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
    margin: 1rem 0 1.5rem;
    font-size: 0.8125rem;
    color: #52525b;
}

.dark .ency-legend { color: #a1a1aa; }

.ency-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.ency-legend .ency-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    flex-shrink: 0;
}

.ency-dot-free    { background: #22c55e; }
.ency-dot-scholar { background: var(--color-brand); }
.ency-dot-keeper  { background: #a855f7; }


/* ── Section label ────────────────────────────────────────────────── */

.ency-section-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #71717a;
    margin: 2.5rem 0 0.25rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #e4e4e7;
}

.dark .ency-section-label {
    color: #a1a1aa;
    border-bottom-color: #27272a;
}


/* ── Prose guards ─────────────────────────────────────────────────── */
/* Ghost wraps page content in .prose, whose typographic rules add
   link underlines, list markers, and margins we don't want inside the
   component blocks. These guards neutralise them locally. */

.gh-content .ency-world-grid a,
.gh-content .ency-cat-grid a,
.gh-content .ency-story-list a {
    text-decoration: none;
    font-weight: inherit;
}

.gh-content .ency-world-grid h3 {
    margin-top: 0;
}

.gh-content .ency-infobox table {
    font-size: 0.9375rem;
}

.gh-content .ency-infobox td {
    border-bottom: none;                    /* prose adds td borders — remove */
}