/* ============================================================
   Portfolio Detail Page Styles
   ============================================================
   Extracted from portfolio/detail.html for cacheability and
   maintainability. Includes light/dark theme support.
   ============================================================ */

/* ============ Portfolio Detail Tokens ============ */
:root {
    --portfolio-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============ Background Glows ============ */
.portfolio-glow {
    position: fixed;
    width: 600px; height: 600px;
    border-radius: 50%;
    filter: blur(160px);
    opacity: 0.06;
    pointer-events: none;
    z-index: 0;
    transition: all 1.5s ease;
}
.portfolio-glow-1 { top: -200px; right: -100px; background: var(--color-accent, #c9a227); }
.portfolio-glow-2 { bottom: -200px; left: -100px; background: var(--color-clay, #b38b6d); }

[data-theme="dark"] .portfolio-glow { opacity: 0.04; }

/* ============ Main Layout ============ */
/* 从 body 层建立 flex 列布局：nav / main / footer 三段式，
   main 自动填满剩余空间，footer 永远贴底可见 */
body {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}
main.min-h-\[100dvh\] {
    min-height: auto !important;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.portfolio-main {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    padding: 32px 40px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: 58% 42%;
    gap: 64px;
    align-items: center;
}

/* ============ Left Column ============ */
.portfolio-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Breadcrumb */
.portfolio-breadcrumb {
    font-size: 0.78rem;
    color: var(--color-smoke, #808080);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.portfolio-breadcrumb a {
    color: var(--color-smoke, #808080);
    text-decoration: none;
    transition: color 0.3s var(--portfolio-ease);
}
.portfolio-breadcrumb a:hover {
    color: var(--color-ink, #171717);
}
.breadcrumb-sep {
    opacity: 0.4;
}

/* Type tag */
.type-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    background: rgba(179,139,109,0.10);
    color: var(--color-clay, #b38b6d);
    width: fit-content;
    border: 1px solid rgba(179,139,109,0.15);
}
.type-tag.website {
    background: rgba(201,162,39,0.10);
    color: var(--color-accent, #c9a227);
    border-color: rgba(201,162,39,0.15);
}
.type-tag.app {
    background: rgba(74,74,74,0.08);
    color: var(--color-iron, #4a4a4a);
    border-color: rgba(74,74,74,0.12);
}

[data-theme="dark"] .type-tag {
    background: rgba(179,139,109,0.15);
    border-color: rgba(179,139,109,0.20);
}
[data-theme="dark"] .type-tag.website {
    background: rgba(201,162,39,0.15);
    border-color: rgba(201,162,39,0.20);
}
[data-theme="dark"] .type-tag.app {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.10);
}

/* Project Header (type tag + title + QR) */
.project-header {
    display: flex;
    align-items: flex-start;
    gap: 28px;
}
.header-left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.project-title {
    font-family: var(--font-serif, 'Noto Serif SC', serif);
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--color-ink, #171717);
}

/* Description */
.project-desc {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--color-iron, #4a4a4a);
    max-width: 48ch;
    margin-top: 8px;
}

/* Detail */
.project-detail {
    font-size: 0.92rem;
    line-height: 1.85;
    color: var(--color-smoke, #808080);
    max-width: 52ch;
    margin-top: 4px;
}

/* Tech stack */
.tech-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.tech-tag {
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--color-iron, #4a4a4a);
    background: var(--color-sand, #f5f1e8);
    border: 1px solid var(--color-border, rgba(23,23,23,0.06));
    transition: all 0.3s var(--portfolio-ease);
}
.tech-tag:hover {
    background: rgba(179,139,109,0.08);
    border-color: rgba(179,139,109,0.15);
}

[data-theme="dark"] .tech-tag {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.08);
    color: #b0b0b0;
}
[data-theme="dark"] .tech-tag:hover {
    background: rgba(179,139,109,0.12);
    border-color: rgba(179,139,109,0.20);
}

/* Actions */
.actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
    margin-top: 12px;
}
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #fff;
    background: var(--color-accent, #c9a227);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s var(--portfolio-ease);
    box-shadow: 0 4px 16px rgba(201,162,39,0.25);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(201,162,39,0.32);
}
.btn-primary:active {
    transform: scale(0.97);
    box-shadow: 0 2px 8px rgba(201,162,39,0.20);
}

/* QR Aside (title-right) */
.qr-aside {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.qr-aside .qr-box {
    width: 140px; height: 140px;
    border-radius: 12px;
    background: white;
    border: 1px solid var(--color-border, rgba(23,23,23,0.06));
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.qr-aside .qr-box img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.qr-aside .qr-box svg {
    width: 70px; height: 70px;
    color: var(--color-smoke, #808080);
}
.qr-aside .qr-text {
    font-size: 0.7rem;
    color: var(--color-smoke, #808080);
    text-align: center;
    line-height: 1.3;
}

[data-theme="dark"] .qr-aside .qr-box {
    background: #2a2a2a;
    border-color: rgba(255,255,255,0.08);
}

/* Back link */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 32px;
    font-size: 0.85rem;
    color: var(--color-smoke, #808080);
    text-decoration: none;
    position: relative;
    transition: color 0.3s var(--portfolio-ease);
    width: fit-content;
}
.back-link:hover {
    color: var(--color-ink, #171717);
}
.back-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--color-accent, #c9a227);
    transition: width 0.4s var(--portfolio-ease);
}
.back-link:hover::after {
    width: 100%;
}
.back-link svg {
    width: 16px; height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    transition: transform 0.3s var(--portfolio-ease);
}
.back-link:hover svg {
    transform: translateX(-4px);
}

/* ============ Right Column ============ */
.portfolio-right {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 520px;
}

/* Phone Mockup */
.phone-frame {
    position: relative;
    width: 290px; height: 593px;
    background: linear-gradient(145deg, #2a2a2a 0%, #1a1a1a 50%, #111 100%);
    border-radius: 52px;
    padding: 8px;
    box-shadow:
        /* outer metallic ring */
        0 0 0 1px rgba(255,255,255,0.08),
        /* primary shadow */
        0 25px 65px -12px rgba(0,0,0,0.35),
        0 50px 100px -24px rgba(0,0,0,0.20),
        /* inner bezel highlight */
        inset 0 0 0 0.5px rgba(255,255,255,0.10),
        /* inner shadow for depth */
        inset 0 2px 4px rgba(255,255,255,0.03);
    flex-shrink: 0;
    transition: transform 0.5s var(--portfolio-ease), box-shadow 0.5s var(--portfolio-ease);
}
.phone-frame:hover {
    transform: translateY(-4px);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.10),
        0 35px 80px -12px rgba(0,0,0,0.40),
        0 60px 120px -24px rgba(0,0,0,0.25),
        inset 0 0 0 0.5px rgba(255,255,255,0.12),
        inset 0 2px 4px rgba(255,255,255,0.03);
}

/* Side buttons */
.phone-btn {
    position: absolute;
    background: linear-gradient(to bottom, #3a3a3a, #2a2a2a);
    border-radius: 2px;
}
/* Silent switch — left top */
.phone-btn-silent {
    left: -2.5px; top: 100px;
    width: 3px; height: 28px;
}
/* Volume up — left */
.phone-btn-vol-up {
    left: -2.5px; top: 155px;
    width: 3px; height: 38px;
}
/* Volume down — left */
.phone-btn-vol-down {
    left: -2.5px; top: 200px;
    width: 3px; height: 38px;
}
/* Power — right */
.phone-btn-power {
    right: -2.5px; top: 170px;
    width: 3px; height: 60px;
}

/* Dynamic Island */
.phone-island {
    position: absolute;
    top: 16px; left: 50%;
    transform: translateX(-50%);
    width: 100px; height: 30px;
    background: #000;
    border-radius: 20px;
    z-index: 20;
    box-shadow: 0 0 0 0.5px rgba(255,255,255,0.06);
}
/* Camera dot inside island */
.phone-island::before {
    content: '';
    position: absolute;
    right: 18px; top: 50%;
    transform: translateY(-50%);
    width: 10px; height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #1a2a4a, #0a0a1a);
    box-shadow: inset 0 0 2px rgba(0,0,150,0.3);
}

/* Screen */
.phone-screen {
    width: 100%; height: 100%;
    border-radius: 44px;
    overflow: hidden;
    background: #f5f5f5;
    position: relative;
}
.phone-screenshot {
    width: 100%; height: 100%;
    position: relative;
    overflow: hidden;
}
.phone-screenshot img {
    width: 100%; height: 100%;
    object-fit: cover;
    /* Offset to account for Dynamic Island area so image centers below it */
    transform: translateY(0);
}

/* Home indicator */
.phone-home {
    position: absolute;
    bottom: 10px; left: 50%;
    transform: translateX(-50%);
    width: 110px; height: 4px;
    border-radius: 3px;
    background: rgba(255,255,255,0.15);
    z-index: 15;
}

/* Dark theme */
[data-theme="dark"] .phone-frame {
    background: linear-gradient(145deg, #333 0%, #252525 50%, #1a1a1a 100%);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.06),
        0 25px 65px -12px rgba(0,0,0,0.55),
        0 50px 100px -24px rgba(0,0,0,0.40),
        inset 0 0 0 0.5px rgba(255,255,255,0.06),
        inset 0 2px 4px rgba(255,255,255,0.02);
}
[data-theme="dark"] .phone-frame:hover {
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.08),
        0 35px 80px -12px rgba(0,0,0,0.60),
        0 60px 120px -24px rgba(0,0,0,0.45),
        inset 0 0 0 0.5px rgba(255,255,255,0.08),
        inset 0 2px 4px rgba(255,255,255,0.02);
}
[data-theme="dark"] .phone-btn {
    background: linear-gradient(to bottom, #444, #333);
}
[data-theme="dark"] .phone-screen {
    background: #1e1e1e;
}

/* Browser Mockup */
.browser-frame {
    position: relative;
    width: 560px;
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.06),
        0 20px 60px -12px rgba(0,0,0,0.14),
        0 40px 80px -24px rgba(0,0,0,0.10);
    flex-shrink: 0;
}
.browser-chrome {
    height: 42px;
    background: #f5f5f5;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    padding: 0 14px;
    gap: 10px;
}
.browser-dots {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.browser-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
}
.browser-dot.red { background: #ff5f56; }
.browser-dot.yellow { background: #ffbd2e; }
.browser-dot.green { background: #27c93f; }
.browser-url {
    flex: 1;
    height: 26px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-size: 0.72rem;
    color: var(--color-smoke, #808080);
    font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, sans-serif);
}
.browser-content {
    width: 100%;
    aspect-ratio: 16 / 10;
    position: relative;
    overflow: hidden;
}
.browser-content img {
    width: 100%; height: 100%;
    object-fit: cover;
}

[data-theme="dark"] .browser-frame {
    background: #1e1e1e;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.08),
        0 20px 60px -12px rgba(0,0,0,0.40),
        0 40px 80px -24px rgba(0,0,0,0.30);
}
[data-theme="dark"] .browser-chrome {
    background: #2a2a2a;
    border-bottom-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .browser-url {
    background: #333;
    border-color: rgba(255,255,255,0.10);
    color: #aaa;
}

/* Screen gradient fallback */
.screen-gradient {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 12px;
    padding: 24px;
    text-align: center;
    color: rgba(255,255,255,0.95);
}
.screen-gradient.gradient-warm { background: linear-gradient(165deg, #5a6a7d 0%, #3d4a5c 100%); }
.screen-gradient.gradient-earth { background: linear-gradient(165deg, #8a7a60 0%, #6a5a42 100%); }
.screen-gradient.gradient-forest { background: linear-gradient(165deg, #5a7a6a 0%, #3d5a4c 100%); }

.screen-app-name {
    font-size: 15px;
    font-weight: 600;
}
.screen-app-sub {
    font-size: 11px;
    opacity: 0.65;
}

/* ============ Animations ============ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-in {
    opacity: 0;
    animation: fadeInUp 0.7s var(--portfolio-ease) forwards;
}

.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.12s; }
.stagger-3 { animation-delay: 0.20s; }
.stagger-4 { animation-delay: 0.28s; }
.stagger-5 { animation-delay: 0.36s; }
.stagger-6 { animation-delay: 0.44s; }
.stagger-7 { animation-delay: 0.52s; }
.stagger-8 { animation-delay: 0.60s; }

/* ============ Responsive ============ */
@media (max-width: 767px) {
    .portfolio-main {
        padding: 24px 20px;
    }
    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .portfolio-right {
        order: -1;
        min-height: auto;
    }
    .project-title {
        font-size: 2rem;
    }
    .project-header {
        flex-direction: column;
        gap: 16px;
    }
    .qr-aside {
        flex-direction: row;
        gap: 14px;
    }
    .qr-aside .qr-text {
        text-align: left;
    }
    .project-desc {
        font-size: 0.95rem;
    }
    .phone-frame {
        width: 228px; height: 450px;
        border-radius: 41px;
        padding: 6px;
    }
    .phone-island {
        top: 13px;
        width: 80px; height: 24px;
    }
    .phone-island::before {
        width: 8px; height: 8px;
        right: 14px;
    }
    .phone-screen {
        border-radius: 35px;
    }
    .phone-btn-silent { top: 80px; height: 22px; }
    .phone-btn-vol-up { top: 122px; height: 30px; }
    .phone-btn-vol-down { top: 158px; height: 30px; }
    .phone-btn-power { top: 135px; height: 48px; }
    .phone-home {
        width: 90px; height: 3px;
        bottom: 5px;
    }
    .browser-frame {
        width: 100%;
        max-width: 400px;
    }
    .browser-content {
        aspect-ratio: 16 / 11;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .portfolio-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
    .project-title {
        font-size: 2.2rem;
    }
    .browser-frame {
        width: 420px;
    }
}