/* ============================================================
   BuildX Learning Center Page
   Same responsive pattern as Floor Plans:
   Sidebar filters on wide screens, horizontal bar below 1460px
   3-col → 2-col → 1-col card grid
   ============================================================ */

/* ── Page Hero ──────────────────────────────────────────────── */
.lc-hero {
    background: url('/assets/images/hero-learning-center.avif') center/cover no-repeat;
    padding: 56px 0 48px;
    position: relative;
}

.lc-hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.8);
}

.lc-hero__card {
    background: rgba(0, 0, 0, 0.92);
    border-radius: 20px;
    padding: 36px 32px;
    max-width: 340px;
    color: #fff;
}

.lc-hero h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: #fff;
}

.lc-hero p {
    font-size: 1.0625rem;
    color: rgba(255,255,255,0.8);
    max-width: 600px;
    line-height: 1.6;
}

/* ── Main Layout: Sidebar + Grid ────────────────────────────── */
.lc-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 32px;
    align-items: start;
}

/* ── Sidebar Filters ────────────────────────────────────────── */
.lc-sidebar {
    position: sticky;
    top: 100px;
    background: #fff;
    border-radius: 10px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.lc-sidebar__title {
    font-size: 0.875rem;
    font-weight: 700;
    color: #000000;
    margin-bottom: 16px;
}

.lc-search {
    margin-bottom: 20px;
}

.lc-search__input {
    width: 100%;
    padding: 10px 14px;
    font-size: 0.875rem;
    font-family: inherit;
    border: 1px solid #D0D0D0;
    border-radius: 6px;
    background: #FAFAFA;
    transition: border-color 0.2s;
}

.lc-search__input:focus {
    outline: none;
    border-color: #F5A623;
    box-shadow: 0 0 0 3px rgba(245,166,35,0.15);
}

.lc-fieldset {
    border: none;
    padding: 0;
    margin: 0 0 20px;
}

.lc-fieldset__legend {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #000000;
    margin-bottom: 10px;
    display: block;
}

.lc-fieldset__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lc-fieldset__list li {
    margin-bottom: 6px;
}

.lc-fieldset__list label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: #555;
    cursor: pointer;
    padding: 4px 0;
    transition: color 0.15s;
}

.lc-fieldset__list label:hover {
    color: #000000;
}

.lc-fieldset__list input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #F5A623;
    flex-shrink: 0;
}

.lc-reset {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #F5A623;
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
}

.lc-reset:hover {
    color: #E09510;
}

/* ── Horizontal Filter Bar (shown below 1460px) ─────────────── */
.lc-hbar {
    display: none;
    background: #fff;
    border-radius: 10px;
    padding: 20px 24px;
    margin-bottom: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.lc-hbar__row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}

.lc-hbar__group {
    flex: 1;
    min-width: 140px;
}

.lc-hbar__label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: #000000;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.lc-hbar__select {
    width: 100%;
    padding: 9px 12px;
    font-size: 0.875rem;
    font-family: inherit;
    border: 1px solid #D0D0D0;
    border-radius: 6px;
    background: #FAFAFA;
    cursor: pointer;
    appearance: auto;
}

.lc-hbar__select:focus {
    outline: none;
    border-color: #F5A623;
}

.lc-hbar__search {
    flex: 1.5;
    min-width: 180px;
}

.lc-hbar__search-input {
    width: 100%;
    padding: 9px 14px;
    font-size: 0.875rem;
    font-family: inherit;
    border: 1px solid #D0D0D0;
    border-radius: 6px;
    background: #FAFAFA;
}

.lc-hbar__search-input:focus {
    outline: none;
    border-color: #F5A623;
    box-shadow: 0 0 0 3px rgba(245,166,35,0.15);
}

.lc-hbar__actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ── Card Grid ──────────────────────────────────────────────── */
.lcp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.lcp-grid__empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px 20px;
    color: #595959;
    font-size: 1rem;
}

/* ── Learning Center Card ───────────────────────────────────── */
.lcp-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    transition: box-shadow 0.2s, transform 0.2s;
    display: flex;
    flex-direction: column;
}

.lcp-card:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}

.lcp-card[data-hidden="true"] {
    display: none;
}

.lcp-card__image-link {
    display: block;
}

.lcp-card__image {
    width: 100%;
    aspect-ratio: 8/5;
    object-fit: cover;
    display: block;
    background: #000000;
}

/* Podcast cards use 16:9 YouTube thumbnails */
.lcp-card[data-type="podcast"] .lcp-card__image {
    aspect-ratio: 16/9;
}

.lcp-card__body {
    padding: 16px 20px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.lcp-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.lcp-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    border: 1.5px solid;
    line-height: 1.4;
}

.lcp-badge--type     { color: #E65100; border-color: #FFE0B2; background: #FFF3E0; }
.lcp-badge--topic    { color: #1565C0; border-color: #BBDEFB; background: #E3F2FD; }
.lcp-badge--audience { color: #6A1B9A; border-color: #E1BEE7; background: #F3E5F5; }

/* Featured (pinned) card -- driven by "featured": true in data/articles.json.
   Brand gold, since this is a BuildX editorial pick, not a data signal. */
.lcp-badge--featured {
    color: #111111;
    border-color: #F5A623;
    background: #F5A623;
}

.lcp-card--featured {
    border: 2px solid #F5A623;
    box-shadow: 0 4px 20px rgba(245, 166, 35, 0.18);
}

.lcp-card--featured:hover {
    box-shadow: 0 8px 28px rgba(245, 166, 35, 0.26);
}

/* Awaiting-artwork state for the media block. The card template omits the <img>
   entirely when a record has no "image", so this styles that empty div into a
   deliberate branded panel instead of a flat black rectangle. Harmless once the
   real featured image lands -- the <img> replaces this element. */
.lcp-card__image:empty {
    background:
        radial-gradient(circle at 30% 25%, rgba(245, 166, 35, 0.20), transparent 55%),
        linear-gradient(135deg, #141414 0%, #000000 100%);
    position: relative;
}

.lcp-card__image:empty::after {
    content: "BuildX";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: rgba(245, 166, 35, 0.55);
}

.lcp-card__date {
    display: block;
    font-size: 0.75rem;
    color: #999;
    margin-bottom: 6px;
    letter-spacing: 0.02em;
}

.lcp-card__title {
    font-size: 1.0625rem;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.35;
}

.lcp-card__title a {
    color: #000000;
    text-decoration: none;
}

.lcp-card__title a:hover {
    color: #F5A623;
}

.lcp-card__excerpt {
    font-size: 0.875rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
    flex: 1;
}

/* ── Responsive ─────────────────────────────────────────────── */

/* Below 1800px with sidebar: 2-col grid */
@media (max-width: 1800px) {
    .lcp-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Below 1460px: horizontal bar, hide sidebar, back to 3-col */
@media (max-width: 1460px) {
    .lc-layout {
        grid-template-columns: 1fr;
    }

    .lc-sidebar {
        display: none;
    }

    .lc-hbar {
        display: block;
    }

    .lcp-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Below 1220px: 2-col grid */
@media (max-width: 1220px) {
    .lcp-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Below 846px: single column */
@media (max-width: 846px) {
    .lcp-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* Below 640px: stacked filter dropdowns */
@media (max-width: 640px) {
    .lc-hero h1 {
        font-size: 1.75rem;
    }

    .lc-hbar__row {
        flex-direction: column;
        gap: 12px;
    }

    .lc-hbar__group {
        min-width: 100%;
    }
}

/* -- Pagination ------------------------------------------------ */
.fp-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 32px 0 16px;
    flex-wrap: wrap;
}

.fp-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    color: #333;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.fp-page-btn:hover {
    background: #f5f5f5;
    border-color: #595959;
}

.fp-page-btn--active {
    background: #000000;
    color: #fff;
    border-color: #000000;
}

.fp-page-btn--active:hover {
    background: #333;
}

.fp-page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 40px;
    color: #595959;
    font-size: 0.875rem;
}

/* -- Card media wrapper (for play button overlay) --------------- */
.lcp-card__media {
    position: relative;
}

/* -- Play Button ------------------------------------------------ */
.lcp-play {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(0,0,0,.6);
    border: 0;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: transform 0.15s, background 0.15s;
    z-index: 2;
}

.lcp-play:hover {
    transform: scale(1.08);
    background: rgba(0,0,0,.8);
}

.lcp-play__icon {
    display: block;
    width: 0;
    height: 0;
    margin-left: 3px;
    border-left: 14px solid #fff;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
}

/* -- Video Lightbox Modal --------------------------------------- */
.lc-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    padding: 24px;
}

.lc-modal[hidden] {
    display: none !important;
}

.lc-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.7);
}

.lc-modal__dialog {
    position: relative;
    background: #000;
    border-radius: 12px;
    box-shadow: 0 30px 80px rgba(0,0,0,.55);
    overflow: hidden;
    aspect-ratio: 16/9;
    width: min(92vw, 1100px);
    max-height: calc(100vh - 48px);
}

.lc-modal__player {
    width: 100%;
    height: 100%;
}

.lc-modal__player iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}

.lc-modal__close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.15);
    color: #fff;
    font-size: 22px;
    line-height: 36px;
    cursor: pointer;
    z-index: 2;
}

.lc-modal__close:hover {
    background: rgba(255,255,255,.25);
}

html.lc-no-scroll,
body.lc-no-scroll {
    overflow: hidden;
}

/* -----------------------------------------------------------------------------
   BROWSE DIVIDER (2026-08-12, Ask AI merged into the Learning Center)
   Separates the Ask hero from the card grid so the page reads as two clear
   modes: ask a question, or browse everything.
   -------------------------------------------------------------------------- */

.lc-browse-divider {
    max-width: 640px;
    margin: 0 0 1.25rem;
    padding-top: 0.5rem;
    border-top: 1px solid #E8E8E8;
}

.lc-browse-divider__title {
    margin: 0.9rem 0 0.35rem;
    font-size: 1.3125rem;
    line-height: 1.25;
    color: #111111;
}

.lc-browse-divider__sub {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #666666;
}

.lc-browse-divider__sub a {
    color: #8A5A0B;
    font-weight: 600;
    text-decoration: underline;
}

.lc-browse-divider__sub a:hover { color: #111111; }

@media (max-width: 720px) {
    .lc-browse-divider__title { font-size: 1.125rem; }
    .lc-browse-divider__sub { font-size: 0.875rem; }
}

/* =============================================================================
   SPLIT HERO (2026-08-12) -- title card + AI Search card side by side.

   Aaron: "move that AI SEARCH card up into the hero ... it looks like there's too
   much stuff going on now." He was right: the hero promised an answer and then a
   second full-width card below repeated the same promise, with dead space between.

   Collapses to one column at 900px, deliberately ABOVE this page's existing 846px
   grid breakpoint, so the hero and the card grid never reflow on the same frame.
   ========================================================================== */

.lc-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
}

.lc-hero--split .lc-hero__grid {
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 28px;
}

/* The hero card no longer needs its own max-width once the grid owns the column,
   and stretching it to the column height keeps both cards visually aligned. */
.lc-hero--split .lc-hero__card {
    max-width: none;
}

/* Tighter hero padding: two cards need less vertical air than one. */
.lc-hero--split {
    padding: 40px 0 36px;
}

/* ---------------------------------------------------------------------------
   The ask card in hero position.
   The base .vask styling lives in video-ask.css; this only overrides what the
   hero context changes, so the two files cannot drift apart on shared rules.
   ------------------------------------------------------------------------ */

.vask--hero {
    max-width: none;
    margin: 0;
    padding: 1.5rem 1.5rem 1.35rem;
    /* Opaque: the hero sits on a photograph. */
    background: #FFFFFF;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 14px 40px rgba(0, 0, 0, 0.14);
}

.vask--hero .vask__head--compact {
    text-align: left;
    margin-bottom: 1rem;
}

.vask--hero .vask__title {
    font-size: 1.375rem;
    margin-bottom: 0.3rem;
}

.vask--hero .vask__sub {
    margin: 0;
    max-width: none;
    font-size: 0.875rem;
}

/* Answers appear inside the hero card. Cap the height and scroll, otherwise a
   full result set shoves the entire card grid down the page. */
.vask--hero .vask__results {
    max-height: 26rem;
    overflow-y: auto;
    margin-top: 1.1rem;
    padding-right: 0.25rem;
}

/* Slimmer rows in the narrower hero column. */
.vask--hero .vask__thumb { width: 104px; }
.vask--hero .vask__blurb,
.vask--hero .vask__quote { -webkit-line-clamp: 2; }

@media (max-width: 1220px) {
    .lc-hero--split .lc-hero__grid {
        grid-template-columns: 300px minmax(0, 1fr);
        gap: 22px;
    }

    .lc-hero--split .lc-hero__card { padding: 28px 24px; }
}

/* Stack at 900px: above the 846px grid breakpoint on purpose. */
@media (max-width: 900px) {
    .lc-hero--split .lc-hero__grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .lc-hero--split { padding: 28px 0 24px; }

    /* On a phone the search box is the reason to be here, so it must not sit
       below a tall title card. Ask first, title second. */
    .lc-hero--split .vask--hero { order: -1; }

    .lc-hero--split .lc-hero__card {
        padding: 22px 20px;
    }

    .vask--hero .vask__results { max-height: 22rem; }
}

@media (max-width: 640px) {
    .vask--hero { padding: 1.15rem 1rem 1rem; }
    .vask--hero .vask__title { font-size: 1.1875rem; }
    .vask--hero .vask__sub { font-size: 0.8125rem; }
}

/* =============================================================================
   WHITE-ON-WHITE GUARD (2026-08-12)

   The hero styles its own dark card with generic element selectors:
       .lc-hero p  { color: rgba(255,255,255,0.8); }
       .lc-hero h1 { color: #fff; }

   The ask card now lives INSIDE .lc-hero, and `.lc-hero p` (0,1,1) outranks
   `.vask__sub` (0,1,0), so the subhead rendered WHITE ON A WHITE CARD. It was in
   the DOM and simply invisible. Found by measuring computed style after the text
   failed to appear in a screenshot.

   These rules re-assert the card's own palette with enough specificity to win,
   without !important. Anything text-bearing that gets added to this card later
   should be covered here too.
   ========================================================================== */

.lc-hero--split .vask--hero .vask__title {
    color: #111111;
}

.lc-hero--split .vask--hero .vask__sub {
    color: #666666;
    font-size: 0.875rem;
    max-width: none;
}

/* #999 on white is 2.85:1 -- below the 4.5:1 AA floor. This color is inherited
   from video-ask.css and was ALWAYS this low; my contrast probe surfaced it, it
   is not a regression from moving the card. Darkened to #6B6B6B (5.7:1). */
.lc-hero--split .vask--hero .vask__examples-label {
    color: #6B6B6B;
}

.lc-hero--split .vask--hero .vask__eg {
    color: #555555;
}

.lc-hero--split .vask--hero .vask__eg:hover {
    color: #111111;
}

/* Result rows render inside the hero too, so guard their text as well. */
.lc-hero--split .vask--hero .vask__blurb {
    color: #6B6B6B;
}

.lc-hero--split .vask--hero .vask__quote {
    color: #5A5A5A;
}

.lc-hero--split .vask--hero .vask__name {
    color: #111111;
}

.lc-hero--split .vask--hero .vask__meta,
.lc-hero--split .vask--hero .vask__caveat {
    color: #555555;
}

.lc-hero--split .vask--hero .vask__meta strong,
.lc-hero--split .vask--hero .vask__caveat strong {
    color: #111111;
}

.lc-hero--split .vask--hero .vask__empty {
    color: #666666;
}

.lc-hero--split .vask--hero .vask__empty strong {
    color: #111111;
}

.lc-hero--split .vask--hero .vask__input {
    color: #1A1A1A;
}

/* =============================================================================
   MOBILE OVERFLOW FIX (2026-08-12)

   Aaron: "on mobile everything is a little too far to the right ... move
   everything to the left about 10 or 20 pixels."

   It was NOT an offset, it was an overflow. Measured at 412px:
       container content box = 341px
       .vask--hero min-content = 365px
   The card could not fit, so it grew past the right edge: left=37, right=14.

   Cause: grid items default to min-width:auto, so the track cannot shrink below
   the item's min-content. The horizontally scrolling chip row (min-content
   327px) propped the card open.

   min-width:0 lets the track shrink to the available space, which restores
   symmetric insets and moves the content left, which is what was asked for.
   Nudging with a margin would have hidden this on one phone and left the card
   overflowing at every other narrow width.
   ========================================================================== */

/* Applies at ALL widths, not just mobile: an item that cannot shrink is a bug
   at any size, and the two-column layout wants shrinkable tracks too. */
.lc-hero--split .lc-hero__grid > * {
    min-width: 0;
}

/* The scrolling chip row is the specific child that propped the card open. It
   already scrolls horizontally; this lets it actually be narrower than its
   content instead of forcing its parent wider. */
.vask--hero .vask__examples {
    min-width: 0;
}

/* Belt and braces: nothing inside the card may establish a floor wider than the
   card itself. The input is the other common culprit, since inputs carry a
   default intrinsic size that ignores the parent. */
.vask--hero .vask__form,
.vask--hero .vask__inputwrap,
.vask--hero .vask__input {
    min-width: 0;
}

/* Card padding is a little generous once the card is genuinely full width on a
   phone, so trim it to give the text more room without changing the outer
   alignment. */
@media (max-width: 480px) {
    .vask--hero {
        padding: 1.15rem 1.05rem 1rem;
    }

    .lc-hero--split .lc-hero__card {
        padding: 20px 18px;
    }
}

/* -----------------------------------------------------------------------------
   PIN THE CARD TO ITS TRACK (2026-08-12, second pass)

   min-width:0 on the grid items fixed the title card (279px, matching the
   container content box) but the ask card stayed at 296px against a 278.5px box
   at 360 viewport. The floor comes from inside the card, so constrain the card
   itself instead of hunting the descendant: it can never be wider than its
   column, whatever its content asks for.

   Correct at every width, including ones I cannot measure here.
   -------------------------------------------------------------------------- */

.lc-hero--split .vask--hero {
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

/* Same guarantee for the title card, so the two stay in lockstep. */
.lc-hero--split .lc-hero__card {
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

/* The chip row scrolls horizontally by design; this keeps its scroll container
   inside the card rather than letting its content set the card's width. */
.lc-hero--split .vask--hero .vask__examples {
    min-width: 0;
    max-width: 100%;
}