/* ============================================================
   marketplace.css — landing pages for /marketplace + /marketplace/{slug}
   Per Faruq directive 2026-05-13: banner art as header background,
   dark-to-transparent gradient overlay, polished card grid + CTAs.
   Tokens come from design-system.css (--color-bg / --color-accent-cyan
   etc.). Styles are scoped to the .mp-* prefix so nothing else picks
   them up.
   ============================================================ */

:root {
    --mp-radius: 18px;
    --mp-radius-sm: 12px;
    --mp-shadow-soft: 0 8px 28px rgba(0, 0, 0, 0.32);
    --mp-shadow-lift: 0 18px 48px rgba(0, 0, 0, 0.45);
}

/* ====================== HERO (per-extension) ====================== */
.mp-hero {
    position: relative;
    min-height: 460px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    padding: 0;
    margin-bottom: 48px;
    isolation: isolate;
}

.mp-hero__bg {
    position: absolute;
    inset: 0;
    background-image: var(--mp-banner);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    transform: scale(1.04); /* tiny zoom so blur edges stay clean */
    filter: saturate(1.05);
}

/* Dark-to-transparent gradient blend.
   Gradient direction: top-left dark → bottom-right transparent.
   Plus a stronger top-strip so the nav stays crisp regardless of
   what banner art happens to be behind it. */
.mp-hero__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom,
            rgba(0, 0, 0, 0.85) 0%,
            rgba(0, 0, 0, 0.55) 18%,
            rgba(0, 0, 0, 0.32) 40%,
            rgba(0, 0, 0, 0.55) 75%,
            rgba(0, 0, 0, 0.92) 100%
        );
    z-index: 1;
}

.mp-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 24px 56px;
    color: #ffffff;
}

.mp-hero__chip-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.mp-hero__chip {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--mp-accent, rgba(0, 235, 255, 0.18));
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.mp-hero__chip--ghost {
    background: rgba(255, 255, 255, 0.08);
}

.mp-hero__title {
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 16px;
    color: #ffffff;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
}

.mp-hero__tagline {
    font-size: clamp(1.05rem, 1.8vw, 1.4rem);
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.86);
    max-width: 720px;
    margin: 0 0 28px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.mp-hero__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* ====================== INDEX HERO ====================== */
.mp-index-hero {
    padding: 96px 24px 56px;
    text-align: center;
    background:
        radial-gradient(ellipse 800px 400px at 50% 0%, rgba(0, 235, 255, 0.10), transparent 60%),
        radial-gradient(ellipse 700px 400px at 50% 100%, rgba(168, 139, 250, 0.08), transparent 60%);
}

.mp-index-hero__inner {
    max-width: 880px;
    margin: 0 auto;
}

.mp-index-hero__title {
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.02em;
    margin: 14px 0 18px;
    color: var(--color-text-primary);
}

.mp-index-hero__sub {
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    line-height: 1.55;
    color: var(--color-text-secondary);
    margin: 0 auto 32px;
    max-width: 680px;
}

.mp-index-hero__actions {
    display: inline-flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.mp-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-accent-cyan);
}

/* ====================== SECTIONS ====================== */
.mp-section {
    padding: 64px 24px;
}

.mp-section--narrow .mp-section__inner {
    max-width: 760px;
}

.mp-section--features {
    background: linear-gradient(180deg, transparent 0%, rgba(0, 235, 255, 0.03) 100%);
}

.mp-section--related {
    padding-top: 48px;
    padding-bottom: 64px;
}

.mp-section__inner {
    max-width: 1200px;
    margin: 0 auto;
}

.mp-prose__heading {
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--color-text-primary);
    margin: 0 0 22px;
}

.mp-prose__heading--center {
    text-align: center;
    margin-bottom: 36px;
}

.mp-prose__body {
    font-size: 1.1rem;
    line-height: 1.65;
    color: var(--color-text-secondary);
    margin: 0;
}

/* ====================== FEATURE BULLETS ====================== */
.mp-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.mp-feature {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    border-radius: var(--mp-radius-sm);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: background 0.18s ease, transform 0.18s ease;
}

[data-theme="light"] .mp-feature {
    background: rgba(10, 10, 10, 0.03);
    border-color: rgba(10, 10, 10, 0.08);
}

.mp-feature:hover {
    background: rgba(255, 255, 255, 0.07);
    transform: translateY(-2px);
}

[data-theme="light"] .mp-feature:hover {
    background: rgba(10, 10, 10, 0.05);
}

.mp-feature__check {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0, 235, 255, 0.16);
    color: var(--color-accent-cyan);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.mp-feature__copy {
    color: var(--color-text-primary);
    font-size: 0.98rem;
    line-height: 1.45;
}

/* ====================== INDEX GRID ====================== */
.mp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.mp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 280px;
    padding: 24px;
    border-radius: var(--mp-radius);
    overflow: hidden;
    text-decoration: none;
    color: #ffffff;
    isolation: isolate;
    box-shadow: var(--mp-shadow-soft);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.mp-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--mp-shadow-lift);
}

.mp-card__bg {
    position: absolute;
    inset: 0;
    background-image: var(--mp-banner);
    background-size: cover;
    background-position: center;
    z-index: 0;
    transition: transform 0.35s ease;
}

.mp-card:hover .mp-card__bg {
    transform: scale(1.06);
}

.mp-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.32) 0%,
        rgba(0, 0, 0, 0.55) 50%,
        rgba(0, 0, 0, 0.92) 100%);
    z-index: 1;
}

.mp-card > :not(.mp-card__bg):not(.mp-card__overlay) {
    position: relative;
    z-index: 2;
}

.mp-card__category {
    display: inline-block;
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--mp-accent, rgba(0, 235, 255, 0.18));
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    margin-bottom: 12px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.mp-card__title {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-bottom: 8px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.mp-card__tagline {
    font-size: 0.95rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.84);
    margin-bottom: 16px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.mp-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-accent-cyan);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.mp-card__cta svg {
    transition: transform 0.18s ease;
}

.mp-card:hover .mp-card__cta svg {
    transform: translateX(4px);
}

/* ====================== RELATED STRIP ====================== */
.mp-related-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.mp-related-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 200px;
    padding: 18px;
    border-radius: var(--mp-radius-sm);
    overflow: hidden;
    text-decoration: none;
    color: #ffffff;
    isolation: isolate;
    transition: transform 0.2s ease;
}

.mp-related-card:hover {
    transform: translateY(-3px);
}

.mp-related-card__bg {
    position: absolute;
    inset: 0;
    background-image: var(--mp-banner);
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.mp-related-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.30) 0%,
        rgba(0, 0, 0, 0.70) 65%,
        rgba(0, 0, 0, 0.94) 100%);
    z-index: 1;
}

.mp-related-card > :not(.mp-related-card__bg):not(.mp-related-card__overlay) {
    position: relative;
    z-index: 2;
}

.mp-related-card__category {
    display: inline-block;
    align-self: flex-start;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--mp-accent, rgba(0, 235, 255, 0.18));
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.02em;
    margin-bottom: 10px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.mp-related-card__title {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 6px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.mp-related-card__synopsis {
    font-size: 0.84rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.78);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ====================== CTA BLOCK ====================== */
.mp-cta {
    padding: 72px 24px 96px;
    background: radial-gradient(ellipse 700px 350px at 50% 50%, rgba(0, 235, 255, 0.10), transparent 70%);
    text-align: center;
}

.mp-cta__inner {
    max-width: 720px;
    margin: 0 auto;
}

.mp-cta__title {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--color-text-primary);
    margin: 0 0 14px;
}

.mp-cta__sub {
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
    margin: 0 0 28px;
}

.mp-cta__actions {
    display: inline-flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

/* ====================== MARKETPLACE DROPDOWN GRID ====================== */
/* 5-column / 4-row CSS Grid for the Marketplace mega-dropdown:
   Row 1-2: 5 extensions each (top 10 by priority)
   Row 3:   3 extensions (cols 1-3) + slider start (cols 4-5)
   Row 4:   2 utility cells (cols 1-2) + empty col 3 + slider continues
   Slider:  cols 4-5, spans rows 3-4 (rowspan 2)

   This makes every column visually "even across" — col 1 and 2 each
   carry 4 cells (rows 1-4), col 3 carries 4 cells, and cols 4-5 carry
   2 link cells + slider with rowspan 2 → all columns reach the same
   bottom edge.
   Per Faruq directive 2026-05-13: "make it four rows of links instead
   of just 2. Five in the first two rows, 3 and the third row and two
   in the fourth row." Total cells: 5+5+3+2 = 15 (13 extensions + 2
   utility cells); slider in cols 4-5 of rows 3-4. */
.nav-dropdown__menu--marketplace {
    /* Marketplace dropdown is wider than the default mega so a 5-col
       link grid + slider both breathe. */
    width: min(1080px, 96vw);
}

.nav-mp-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
        "mp0  mp1  mp2  mp3  mp4"
        "mp5  mp6  mp7  mp8  mp9"
        "mp10 mp11 mp12 mpSlider mpSlider"
        "mpAll mpSubmit . mpSlider mpSlider";
    gap: 6px;
    padding: 6px;
}

/* Compact variant of nav-mega__item for the dense grid — keeps the
   icon + copy pattern but tightens spacing so 4 rows × 5 cols fit
   without overwhelming. */
.nav-mp-grid__item {
    align-items: center;
    padding: 8px 10px;
}

.nav-mp-grid__item .nav-mega__title {
    font-size: 0.86rem;
    line-height: 1.2;
}

.nav-mp-grid__item .nav-mega__desc {
    font-size: 0.72rem;
    line-height: 1.25;
}

.nav-mp-grid__item--util {
    border-top: 1px dashed rgba(255, 255, 255, 0.10);
}

[data-theme="light"] .nav-mp-grid__item--util {
    border-top-color: rgba(10, 10, 10, 0.10);
}

/* ====================== NAV DROPDOWN SLIDER ====================== */
/* The Marketplace dropdown's right-side feature card is a slider that
   rotates through every extension on dropdown-open + on a 4s interval
   while open. Each slide animates left-to-right via CSS transform. */
.nav-mp-slider {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 200px;
    border-radius: var(--mp-radius-sm);
    overflow: hidden;
    text-decoration: none;
    isolation: isolate;
}

.nav-mp-slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 18px;
    color: #ffffff;
    background-image: var(--mp-banner);
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 0.45s ease, transform 0.45s ease;
    pointer-events: none;
    isolation: isolate;
}

.nav-mp-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.28) 0%,
        rgba(0, 0, 0, 0.65) 60%,
        rgba(0, 0, 0, 0.95) 100%);
    z-index: 0;
}

.nav-mp-slide > * {
    position: relative;
    z-index: 1;
}

.nav-mp-slide.is-active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.nav-mp-slide.is-leaving {
    opacity: 0;
    transform: translateX(-24px);
    pointer-events: none;
}

.nav-mp-slide__category {
    display: inline-block;
    align-self: flex-start;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--mp-accent, rgba(0, 235, 255, 0.18));
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.02em;
    margin-bottom: 10px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.nav-mp-slide__title {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.18;
    margin-bottom: 6px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.nav-mp-slide__synopsis {
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 10px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nav-mp-slide__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-accent-cyan);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

/* Dot indicators (which slide is active) */
.nav-mp-dots {
    position: absolute;
    bottom: 8px;
    right: 12px;
    display: flex;
    gap: 4px;
    z-index: 3;
}

.nav-mp-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.32);
    transition: background 0.2s ease, width 0.2s ease;
}

.nav-mp-dot.is-active {
    background: var(--color-accent-cyan, #00ebff);
    width: 14px;
    border-radius: 999px;
}

/* ====================== RESPONSIVE ====================== */
@media (max-width: 1024px) {
    /* Collapse 5-col Marketplace dropdown to 3 cols on tablets:
       3+3+3+3+1 layout, slider spans full width on row 5. */
    .nav-dropdown__menu--marketplace {
        width: min(720px, 96vw);
    }
    .nav-mp-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-areas:
            "mp0  mp1  mp2"
            "mp3  mp4  mp5"
            "mp6  mp7  mp8"
            "mp9  mp10 mp11"
            "mp12 mpAll mpSubmit"
            "mpSlider mpSlider mpSlider";
    }
    .nav-mp-slider {
        min-height: 180px;
    }
}

@media (max-width: 720px) {
    .mp-hero {
        min-height: 380px;
    }
    .mp-hero__inner {
        padding: 72px 20px 36px;
    }
    .mp-section {
        padding: 48px 20px;
    }
    .mp-grid {
        grid-template-columns: 1fr;
    }
    /* Marketplace dropdown collapses to 1-col on phones (rendered as
       a stacked drawer alongside the mobile nav toggle). */
    .nav-mp-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "mp0" "mp1" "mp2" "mp3" "mp4"
            "mp5" "mp6" "mp7" "mp8" "mp9"
            "mp10" "mp11" "mp12"
            "mpAll" "mpSubmit"
            "mpSlider";
    }
}