/* /wiki overview (app/Views/wiki/index.php): Welcome card, Categories, Featured Guides,
   Recently updated. Dark VTLOG palette with orange accents, the same values the in-game
   overlay uses (pages/igoverlay/overlay.css: #0d0d0e / #151516 / #1b1b1d / #ff9900, #3f3f3f
   and #636363 borders). White headings, light-grey descriptions, subtle 1px borders, hard
   corners. The wiki nav and search above are wiki.css and stay untouched. */
.wkh {
    --wkh-border:   rgba(99,99,99,0.32);       /* #636363 at low strength: subtle */
    --wkh-border-h: rgba(255,153,0,0.45);
    --wkh-title:    #ffffff;
    --wkh-text:     rgba(224,224,224,0.72);   /* softer light grey, neutral (no blue lean) */
    --wkh-faint:    rgba(224,224,224,0.5);
    gap: 1.35rem;
}

/* Section heading: small caps label with an orange icon, as before but readable. */
.wkh .wkh-h {
    margin: 0 0 0.7rem;
    display: flex; align-items: center; gap: 0.55rem;
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--wkh-text);
}
.wkh .wkh-h i { color: var(--accent); font-size: 0.9rem; }

/* ── Welcome ─────────────────────────────────────────────────────────── */
/* Icon + heading + subtitle are one group, centred on the banner's full width: the grid's
   two outer columns are always equal, the group sits in the middle one and the button in
   the right one, so the button never pulls the group off centre. When the banner itself
   gets too narrow for that (a container query, so the sidebar is accounted for), the
   group and the button stack, both centred. */
.wkh-welcome {
    container-type: inline-size;
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
    gap: 1rem 1.4rem;
    padding: 1.35rem 1.5rem 1.35rem calc(1.5rem - 2px);   /* -2px: evens out the 3px left border against the 1px right one, so the content box is centred */
    background:
        linear-gradient(90deg, rgba(255,153,0,0.10), rgba(255,153,0,0) 55%),
        var(--card);
    border: 1px solid var(--wkh-border);
    border-left: 3px solid var(--accent);
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.wkh-welcome-icon {
    width: 3.5rem; height: 3.5rem;
    display: grid; place-items: center;
    background: rgba(255,153,0,0.1); border: 1px solid rgba(255,153,0,0.4);
    color: var(--accent); font-size: 1.6rem;
}
.wkh-welcome-main { grid-column: 2; display: flex; align-items: center; gap: 1.1rem; min-width: 0; }
.wkh-welcome-main .wkh-welcome-icon { flex: none; }
.wkh-welcome .wkh-btn { grid-column: 3; justify-self: end; }
.wkh-welcome-copy { min-width: 0; }
.wkh-welcome-title {
    margin: 0;
    font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.9rem); font-weight: 700; line-height: 1.15;
    color: var(--wkh-title);
}
.wkh-welcome-title .ac { color: var(--accent); }
.wkh-welcome-desc { margin: 0.35rem 0 0; font-size: 1rem; color: var(--wkh-text); }
.wkh-btn {
    display: inline-flex; align-items: center; gap: 0.55rem;
    padding: 0.7rem 1.2rem;
    font-size: 0.95rem; font-weight: 700; letter-spacing: 0.02em;
    color: #0d0d0e; background: var(--accent);
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background 0.15s;
}
.wkh-btn:hover { background: #ffb84d; color: #0d0d0e; }

/* ── Counts ───────────────────────────────────────────────────────────── */
.wkh-stats { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: -0.35rem; }
.wkh-stat {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.35rem 0.85rem;
    font-size: 0.82rem; color: var(--wkh-text);
    background: var(--card); border: 1px solid var(--wkh-border); border-radius: 999px;
}
.wkh-stat strong { color: var(--wkh-title); font-variant-numeric: tabular-nums; }
.wkh-stat i { color: var(--accent); font-size: 0.78rem; }

/* ── Categories: three balanced columns, two on tablets, one on phones ── */
.wkh-cats { display: grid; gap: 0.85rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wkh-cat {
    display: flex; align-items: flex-start; gap: 0.95rem;
    padding: 1.1rem 1.15rem;
    background: var(--card); border: 1px solid var(--wkh-border);
    box-shadow: 0 4px 14px rgba(0,0,0,0.3);
    color: var(--ink); text-decoration: none; cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.wkh-cat:hover { background: var(--hover); border-color: var(--wkh-border-h); }
.wkh-cat-icon {
    flex: none; width: 2.75rem; height: 2.75rem;
    display: grid; place-items: center;
    background: var(--bg); border: 1px solid var(--wkh-border);
    color: var(--accent); font-size: 1.2rem;
}
.wkh-cat-copy { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.wkh-cat-title { font-size: 1.08rem; font-weight: 700; color: var(--wkh-title); line-height: 1.25; }
.wkh-cat:hover .wkh-cat-title { color: #ffb84d; }
.wkh-cat-count { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.wkh-cat-desc { margin-top: 0.25rem; font-size: 0.9rem; line-height: 1.45; color: var(--wkh-text); }

/* ── Featured Guides ──────────────────────────────────────────────────
   One two-column grid. The ranking pair is placed in the left column, every other guide
   in the right; `dense` lets the right column fill from the top, so row 1 is Truck |
   Ticket Center and row 2 Light Transport | Experience Table, and any further guide just
   continues down the right. `grid-auto-rows: 1fr` makes every row as tall as the tallest
   card, so all cards share one height and their bottom edges line up; cards stretch to
   fill their cell. Source order (ranking pair first) is the mobile stacking order. */
.wkh-guides {
    display: grid; gap: 0.85rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row dense;
    grid-auto-rows: 1fr;
}
.wkh-guides > .wkh-guide.is-ranking   { grid-column: 1; }
.wkh-guides > .wkh-guide:not(.is-ranking) { grid-column: 2; }
.wkh-guide {
    display: flex; align-items: flex-start; gap: 0.95rem;
    min-width: 0;
    padding: 1.05rem 1.15rem;
    background: var(--card); border: 1px solid var(--wkh-border);
    box-shadow: 0 4px 14px rgba(0,0,0,0.3);
    color: var(--ink); text-decoration: none; cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.wkh-guide:hover { background: var(--hover); border-color: var(--wkh-border-h); }
.wkh-guide.is-ranking {
    border-color: rgba(255,153,0,0.55);
    border-left: 3px solid var(--accent);
    background: linear-gradient(90deg, rgba(255,153,0,0.07), rgba(255,153,0,0) 60%), var(--card);
}
.wkh-guide.is-ranking:hover { border-color: var(--accent); background-color: var(--hover); }
.wkh-guide-icon {
    flex: none; width: 2.6rem; height: 2.6rem;
    display: grid; place-items: center;
    background: rgba(255,153,0,0.08); border: 1px solid rgba(255,153,0,0.3);
    color: var(--accent); font-size: 1.15rem;
}
.wkh-guide-copy { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; flex: 1 1 auto; }
.wkh-guide-title { font-size: 1.05rem; font-weight: 700; color: var(--wkh-title); line-height: 1.25; }
.wkh-guide-desc { font-size: 0.9rem; line-height: 1.45; color: var(--wkh-text); }
.wkh-guide-cat { margin-top: 0.2rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wkh-faint); }
.wkh-guide-cat.is-empty { visibility: hidden; }   /* keeps the line, so a guide without a category is not shorter */
.wkh-guide-go { flex: none; align-self: center; color: var(--wkh-faint); font-size: 0.9rem; transition: color 0.15s, transform 0.15s; }
.wkh-guide:hover .wkh-guide-go { color: var(--accent); transform: translateX(2px); }

/* ── Recently updated ─────────────────────────────────────────────────── */
.wkh-recent { background: var(--card); border: 1px solid var(--wkh-border); box-shadow: 0 4px 14px rgba(0,0,0,0.3); }
.wkh-recent-row {
    display: grid; grid-template-columns: 1.4rem minmax(0, auto) auto 1fr; align-items: center;
    column-gap: 0.75rem;
    padding: 0.8rem 1.15rem;
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink); text-decoration: none; cursor: pointer;
    transition: background 0.12s;
}
.wkh-recent-row:last-child { border-bottom: 0; }
.wkh-recent-row:hover { background: var(--hover); }
.wkh-recent-icon { color: var(--accent); font-size: 0.95rem; text-align: center; }
.wkh-recent-title { font-size: 0.98rem; font-weight: 600; color: var(--wkh-title); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wkh-recent-row:hover .wkh-recent-title { color: #ffb84d; }
.wkh-recent-cat {
    justify-self: start;
    padding: 0.12rem 0.55rem;
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--wkh-text); border: 1px solid var(--wkh-border); border-radius: 999px;
    white-space: nowrap;
}
.wkh-recent-date { justify-self: end; font-size: 0.85rem; color: var(--wkh-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }

.wkh-empty { padding: 2rem; text-align: center; color: var(--wkh-faint); }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1199.98px) {
    .wkh-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    /* One column in source order: Truck, Light Transport, Ticket Center, Experience Table.
       Rows size to their own content here; nothing sits beside a card to line up with. */
    .wkh-guides { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .wkh-guides > .wkh-guide.is-ranking,
    .wkh-guides > .wkh-guide:not(.is-ranking) { grid-column: 1; }
}
@media (max-width: 640px) {
    .wkh { gap: 1.1rem; }
    .wkh-cats { grid-template-columns: 1fr; }
    .wkh-welcome { padding: 1.1rem 1rem 1.1rem calc(1rem - 2px); }
    .wkh-welcome-icon { width: 2.9rem; height: 2.9rem; font-size: 1.3rem; }
    .wkh-recent-row { grid-template-columns: 1.4rem minmax(0, 1fr) auto; row-gap: 0.25rem; padding: 0.75rem 0.9rem; }
    .wkh-recent-cat { grid-column: 2; grid-row: 2; }
    .wkh-recent-date { grid-column: 3; grid-row: 1; }
}

/* Welcome banner, by the banner's own width: stacked and centred once the centred group and
   the button no longer fit side by side; on a phone the icon goes above the text too. */
@container (max-width: 980px) {
    .wkh-welcome-main { grid-column: 1 / -1; justify-self: center; }
    .wkh-welcome .wkh-btn { grid-column: 1 / -1; justify-self: center; }
}
@container (max-width: 460px) {
    .wkh-welcome-main { flex-direction: column; text-align: center; gap: 0.75rem; }
    .wkh-welcome .wkh-btn { justify-self: stretch; justify-content: center; }
}

/* Below desktop: no label under 11px. */
@media (max-width: 1199.98px) {
    .wkh-guide-cat { font-size: max(11px, 0.68rem); letter-spacing: 0.1em; }
    .wkh-recent-cat { font-size: max(11px, 0.66rem); letter-spacing: 0.08em; }
}