/* File: assets/css/modules/00-foundation.css */

/* ==========================================================================
   01. Tokens and global reset
   02. Legacy shared layout and homepage foundation
   03. Auth pages
   04. Profile pages
   05. Wallet and transactions pages
   06. Marketplace, upload, library, and content pages
   07. Media viewer pages
   08. Creator and notifications
   09. Public page refresh
   ========================================================================== */

:root {
    --bg: #0f1117;
    --bg-soft: #171a22;
    --card: rgba(255, 255, 255, 0.06);
    --card-solid: #181c25;
    --text: #f3f4f6;
    --muted: #b8bfd0;
    --line: rgba(255, 255, 255, 0.08);
    --accent: #ff4fa3;
    --accent-2: #7b61ff;
    --white: #ffffff;
    --success: #2ecc71;
    --error: #ff5c5c;
    --shadow: 0 20px 40px rgba(0, 0, 0, 0.28);
    --radius: 20px;
    --radius-sm: 12px;
    --max-width: 1200px;
    --gradient: linear-gradient(135deg, #ff4fa3 0%, #7b61ff 100%);
}

/* ==========================================================================
   View Collection (Gallery) - Design Review Overrides
   ========================================================================== */

/* 1. Make the main stage feel like a premium, floating display frame */
.owned-collection-stage-image-shell {
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
    background: linear-gradient(180deg, #0b0d14 0%, #06070a 100%) !important;
}

/* 2. Dim inactive thumbnails to bring focus to the active one */
.owned-collection-thumb-btn {
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
    filter: brightness(0.6);
}

/* 3. Brighten thumbnails on hover and give the active one a glowing border */
.owned-collection-thumb-btn:hover {
    transform: translateY(-2px) !important;
    filter: brightness(1);
}

.owned-collection-thumb-btn.is-active {
    filter: brightness(1);
    box-shadow: 0 0 0 2px #ff4fa3, 0 8px 16px rgba(255, 79, 163, 0.3) !important;
    border-color: transparent !important;
}

/* 4. Make the sidebar stat cards tactile */
.owned-collection-stat-card {
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease !important;
}

.owned-collection-stat-card:hover {
    transform: translateY(-2px) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.owned-collection-stat-card:hover strong {
    color: #f7c9de !important;
}

/* 5. Add an interactive hover state to the creator profile badge */
.owned-collection-creator {
    transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease !important;
}

.owned-collection-creator:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    transform: translateY(-1px) !important;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    background:
        radial-gradient(circle at top left, rgba(255, 79, 163, 0.18), transparent 25%),
        radial-gradient(circle at top right, rgba(123, 97, 255, 0.20), transparent 25%),
        linear-gradient(180deg, #0e1015 0%, #121622 100%);
    color: var(--text);
}

a {
    color: inherit;
    text-decoration: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid rgba(255, 151, 198, 0.94);
    outline-offset: 3px;
}

img {
    max-width: 100%;
    display: block;
}

.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(14px);
    background: rgba(10, 11, 16, 0.7);
    border-bottom: 1px solid var(--line);
}

.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 260;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(9, 12, 18, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--white);
    font-size: 13px;
    font-weight: 700;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link:focus {
    top: 12px;
    left: 16px;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.site-main:focus {
    outline: none;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 24px;
    border-radius: 999px;
    background: var(--gradient);
    color: var(--white);
    font-weight: 700;
    border: none;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.btn:hover {
    transform: translateY(-1px);
    opacity: 0.96;
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--line);
    box-shadow: none;
}

.btn-small {
    min-height: 40px;
    padding: 0 18px;
}

.tx-credit {
    color: #8ff0b8;
}

.tx-debit {
    color: #ffb0b0;
}

.hero {
    padding: 80px 0 40px;
}

.hero-card {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 24px;
    align-items: center;
    background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
    border: 1px solid var(--line);
    border-radius: 28px;
    padding: 48px;
    box-shadow: var(--shadow);
    overflow: hidden;
    position: relative;
}

.hero-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 79, 163, 0.18), transparent 30%),
        radial-gradient(circle at 80% 40%, rgba(123, 97, 255, 0.18), transparent 30%);
    pointer-events: none;
}

.hero-copy {
    position: relative;
    z-index: 1;
}

.hero-kicker {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--line);
    color: #f7c9de;
    font-size: 13px;
    letter-spacing: 0.12em;
    margin-bottom: 18px;
}

.hero h1 {
    margin: 0 0 16px;
    font-size: 58px;
    line-height: 1.02;
    letter-spacing: -1.6px;
}

.hero p {
    margin: 0 0 28px;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.7;
    max-width: 620px;
}

.hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.hero-visual {
    position: relative;
    z-index: 1;
}

.hero-art {
    min-height: 420px;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
        url('https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?auto=format&fit=crop&w=1200&q=80') center/cover no-repeat;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.section {
    padding: 32px 0 12px;
}

.section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.section-head h2 {
    margin: 0;
    font-size: 32px;
    letter-spacing: -0.8px;
}

.section-head p {
    margin: 0;
    color: var(--muted);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.content-card,
.creator-card,
.step-card,
.cta-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
}

.thumb {
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, rgba(255,79,163,0.35), rgba(123,97,255,0.35));
}

.content-card-body,
.creator-card-body,
.step-card-body,
.cta-card-body {
    padding: 18px;
}

.content-title,
.creator-name {
    margin: 0 0 8px;
    font-size: 22px;
    letter-spacing: -0.4px;
}

.meta-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--muted);
    font-size: 14px;
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.step-icon {
    font-size: 44px;
    margin-bottom: 14px;
}

.cta {
    padding: 48px 0 80px;
}

.cta-card {
    text-align: center;
}

.cta-card-body {
    padding: 40px 24px;
}

.cta-card h2 {
    margin: 0 0 10px;
    font-size: 40px;
    letter-spacing: -1px;
}

.cta-card p {
    margin: 0 0 24px;
    color: var(--muted);
    font-size: 18px;
}

.flash-message {
    margin-top: 16px;
    padding: 14px 18px;
    border-radius: 12px;
    font-weight: 600;
}

.flash-success {
    background: rgba(46, 204, 113, 0.12);
    color: #8ff0b8;
    border: 1px solid rgba(46, 204, 113, 0.25);
}

.flash-error {
    background: rgba(255, 92, 92, 0.12);
    color: #ffb0b0;
    border: 1px solid rgba(255, 92, 92, 0.25);
}

.site-footer {
    border-top: 1px solid var(--line);
    background: rgba(0, 0, 0, 0.22);
}

.footer-wrap {
    padding: 34px 20px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    color: var(--muted);
}

.footer-brand {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.footer-brand img {
    display: block;
    width: clamp(132px, 11vw, 156px);
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

.footer-links {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    text-align: center;
}

@media (max-width: 1024px) {
    .hero-card,
    .card-grid,
    .steps-grid {
        grid-template-columns: 1fr 1fr;
    }

    .hero-card {
        padding: 34px;
    }

    .hero h1 {
        font-size: 44px;
    }
}

@media (max-width: 768px) {
    .footer-wrap,
    .card-grid,
    .steps-grid,
    .hero-card {
        display: block;
    }

    .hero h1 {
        font-size: 36px;
    }

    .hero-art {
        margin-top: 20px;
        min-height: 300px;
    }

    .footer-brand {
        justify-content: center;
        margin-bottom: 16px;
    }

    .footer-brand img {
        width: min(152px, 48vw);
    }

    .content-card,
    .creator-card,
    .step-card {
        margin-bottom: 18px;
    }
}