/* ===========================
   CSS Custom Properties
   =========================== */
:root {
    --primary: #830c1a;
    --primary-dark: #6a0a15;
    --primary-light: #a61025;
    --card-footer-bg: #ededed;
    --card-border: #d4d4d4;
    --body-bg: #ffffff;
    --white: #ffffff;
    --black: #1a1a1a;
    --text-secondary: #6b7280;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.15);
    --radius: 0px;
    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --font: 'Montserrat', sans-serif;
}

/* ===========================
   Reset & Base
   =========================== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font);
    background: var(--body-bg);
    color: var(--black);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

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

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

.container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 40px;
}

/* ===========================
   Hero Section
   =========================== */
.hero {
    position: relative;
    background: var(--primary);
    background-image: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%);
    padding: 20px 24px 16px;
    text-align: center;
    overflow: hidden;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
}

.hero h1 {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 800;
    color: var(--white);
    letter-spacing: -0.5px;
    margin-bottom: 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ===========================
   Intro Section
   =========================== */
.intro-section {
    padding: 32px 0 8px;
    background: var(--white);
}

.intro-text {
    font-size: 0.95rem;
    color: var(--black);
    line-height: 1.7;
    max-width: 860px;
    margin: 0 auto 16px;
}

.intro-text:last-child {
    margin-bottom: 0;
}

.intro-link {
    color: #830c1a;
    font-weight: 600;
    text-decoration: underline;
    transition: color var(--transition);
}

.intro-link:hover {
    color: #c21731;
}

/* ===========================
   Section Header
   =========================== */
.projects-section {
    padding: 20px 0 24px;
}

.section-header {
    text-align: center;
    margin-bottom: 48px;
}

.section-header h2 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--black);
    margin-bottom: 8px;
}

.section-desc {
    font-size: 1rem;
    color: var(--text-secondary);
    max-width: 480px;
    margin: 0 auto;
}

/* ===========================
   Projects List (Vertical)
   =========================== */
.projects-list {
    display: flex;
    flex-direction: column;
    gap: 0;
	max-width: 960px; /* Constrains the width */
    margin: 0 auto;
}

/* Each project row: card on left, dev team on right */
.project-row {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 32px 0;
    border-bottom: 1px solid var(--card-border);
}

.project-row:first-child {
    border-top: 1px solid var(--card-border);
}

.project-row .project-card {
    width: 440px;
    flex-shrink: 0;
}

/* Development Team Panel */
.dev-team {
    flex: 1;
    min-width: 0;
}

.dev-team-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 10px;
}

.dev-team-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
}

.dev-team-list li {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

.dev-team-list li strong {
    color: var(--black);
    font-weight: 600;
}

/* ===========================
   Project Card
   =========================== */
.project-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--card-border);
    background: var(--white);
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition);
    box-shadow: var(--shadow-sm);
}

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

/* Image link area */
.card-image-link {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    cursor: pointer;
}

.card-image-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-card:hover .card-image-link img {
    transform: scale(1.05);
}

/* View project overlay */
.card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(131, 12, 26, 0.0);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition);
}

.card-overlay-text {
    color: var(--white);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--transition), transform var(--transition);
}

.project-card:hover .card-overlay {
    background: rgba(131, 12, 26, 0.55);
}

.project-card:hover .card-overlay-text {
    opacity: 1;
    transform: translateY(0);
}

/* Card footer (text + vote) */
.card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--card-footer-bg);
    gap: 12px;
}

.post-text {
    flex: 1;
    min-width: 0;
}

.post-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--black);
    line-height: 1.3;
}

.post-location {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* Vote Button */
.vote-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--primary);
    color: var(--white);
    border: 2px solid var(--primary);
    font-family: var(--font);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
}

.vote-btn:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    box-shadow: 0 4px 14px rgba(131, 12, 26, 0.35);
    transform: translateY(-1px);
}

.vote-btn:active {
    transform: translateY(0) scale(0.97);
}

.vote-btn.voted {
    background: var(--white);
    color: var(--primary);
    border-color: var(--primary);
}

.vote-btn.voted:hover {
    background: #fef2f2;
    box-shadow: none;
    transform: none;
}

.vote-icon {
    display: inline-flex;
    font-size: 1.1rem;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.vote-btn.voted .vote-icon {
    transform: scale(1.15);
}

/* Vote animation keyframe */
@keyframes votePopIn {
    0% { transform: scale(0.6); opacity: 0; }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); opacity: 1; }
}

.vote-btn.just-voted .vote-icon {
    animation: votePopIn 0.4s ease forwards;
}

/* ===========================
   Footer
   =========================== */
.site-footer {
    background: var(--black);
    padding: 16px 0;
    text-align: center;
}

.site-footer p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
}

/* ===========================
   Responsive
   =========================== */
/* ===========================
   Thank You Overlay
   =========================== */
.thank-you-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    animation: fadeInOverlay 0.4s ease forwards;
}

@keyframes fadeInOverlay {
    to { opacity: 1; }
}

.thank-you-card {
    position: relative;
    background: var(--white);
    padding: 44px 40px 36px;
    text-align: center;
    max-width: 860px;      /* wide enough for LinkedIn + newsletter side by side */
    width: 92%;
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.ty-close-x {
    position: absolute; top: 10px; right: 16px;
    background: none; border: none;
    color: var(--text-secondary); font-size: 2rem; line-height: 1;
    cursor: pointer; padding: 4px;
    transition: color var(--transition);
    -webkit-tap-highlight-color: transparent;
}
.ty-close-x:hover { color: var(--black); }

/* LinkedIn | OR | newsletter columns */
.ty-columns {
    display: flex;
    align-items: stretch;
    gap: 24px;
    margin-top: 20px;
    text-align: center;
}
.ty-col { flex: 1; min-width: 0; }

.ty-divider {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    color: var(--text-secondary); font-size: 0.8rem; font-weight: 700; letter-spacing: 1.5px;
}
.ty-divider::before, .ty-divider::after { content: ""; flex: 1; width: 1px; background: var(--card-border); }

@media (max-width: 700px) {
    .ty-columns { flex-direction: column; gap: 18px; }
    .ty-divider { flex-direction: row; width: 100%; }
    .ty-divider::before, .ty-divider::after { width: auto; height: 1px; }
}

@keyframes slideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.thank-you-card .thank-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 16px;
}

.thank-you-card h3 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--black);
    margin-bottom: 12px;
}

.thank-you-card p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 8px;
}

.thank-you-card .linkedin-note {
    color: var(--primary);
    font-weight: 600;
    font-size: 0.9rem;
}

/* Newsletter signup inside the thank-you popup */
.nl-title { font-size: 1.1rem; font-weight: 800; color: var(--black); margin-bottom: 4px; }
/* matches .linkedin-note (needs .thank-you-card prefix to outrank the card's generic p rule) */
.thank-you-card .nl-sub { font-size: 0.9rem; font-weight: 600; color: var(--primary); margin-bottom: 14px; }

.nl-form input[type="email"],
.nl-form input[type="text"] {
    width: 100%; padding: 11px 12px; margin-bottom: 10px;
    border: 1px solid var(--card-border); border-radius: var(--radius);
    font-family: var(--font); font-size: 0.9rem; color: var(--black); background: var(--white);
}
.nl-form input:focus { outline: none; border-color: var(--primary); }
.nl-row { display: flex; gap: 10px; }
.nl-row input { flex: 1; min-width: 0; }

.nl-submit {
    width: 100%; padding: 12px;
    background: var(--primary); color: var(--white); border: none;
    font-family: var(--font); font-size: 0.9rem; font-weight: 700;
    letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer;
    transition: background var(--transition);
}
.nl-submit:hover { background: var(--primary-dark); }
.nl-submit[disabled] { opacity: 0.6; cursor: default; }

.nl-msg { display: none; margin-top: 10px; font-size: 0.85rem; line-height: 1.5; }
.nl-msg.error { display: block; color: #b00020; }
.nl-success { padding: 10px 0; font-size: 0.92rem; font-weight: 600; color: #1a7f37; }

/* Voted card state (after voting, dim vote buttons) */
.vote-btn.disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

.vote-btn.voted.disabled {
    opacity: 1;
}

/* ===========================
   Responsive
   =========================== */
@media (max-width: 1024px) {
    .container {
        padding: 0 24px;
    }

    .project-row {
        gap: 24px;
    }

    .project-row .project-card {
        width: 360px;
    }
}

@media (max-width: 768px) {
    .project-row {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

    .project-row .project-card {
        width: 100%;
    }

    .hero {
        padding: 50px 20px 40px;
    }

    .projects-section {
        padding: 24px 0 48px;
    }

    .card-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .vote-btn {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .post-name {
        font-size: 0.95rem;
    }

    .vote-btn {
        padding: 10px 16px;
        font-size: 0.8rem;
    }
}

/* ===========================
   Q2 Carousel: card button, description, full-screen carousel
   Fixed height + fixed gap; each slide's WIDTH follows its media aspect ratio.
   =========================== */

.card-image-link { background: none; border: 0; padding: 0; width: 100%; font: inherit; color: inherit; }
.card-overlay { flex-direction: column; gap: 4px; }
.card-overlay-sub {
    color: var(--white); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.5px;
    text-transform: none; opacity: 0; transform: translateY(10px);
    transition: opacity var(--transition), transform var(--transition);
}
.project-card:hover .card-overlay-sub { opacity: 0.9; transform: translateY(0); }
.project-desc { font-size: 0.9rem; color: var(--black); line-height: 1.6; margin: 0 0 16px 0; }

/* ---- Full-screen carousel / lightbox ---- */
body.lb-open { overflow: hidden; }

.lightbox {
    position: fixed; inset: 0; z-index: 2000; background: rgba(0, 0, 0, 0.92);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    opacity: 0; animation: fadeInOverlay 0.25s ease forwards;
    --lb-h: 76vh;   /* media height shared by images and the tour */
}

.lb-viewport { width: 100%; height: calc(var(--lb-h) + 50px); overflow: hidden; }

/* Fixed height, fixed 24px gap. Slides size their width to their content. */
.lb-track {
    display: flex; height: 100%; align-items: center; gap: 24px;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform; touch-action: pan-y;
}

.lb-slide {
    position: relative; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; opacity: 0.4; transition: opacity 0.35s ease; cursor: pointer;
}
.lb-slide.is-active { opacity: 1; cursor: default; }

/* Images: full fixed height, width follows aspect ratio */
.lb-slide-image img {
    height: var(--lb-h); width: auto; max-width: 92vw; object-fit: contain;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
    user-select: none; -webkit-user-drag: none; transition: transform 0.18s ease;
}
.lb-slide-image.is-active img { cursor: zoom-in; }
.lb-slide-image img.zoomed { transform: scale(2.3); cursor: zoom-out; will-change: transform, transform-origin; }

/* Tour slide: same fixed height as images; the hint pill overlays the top of the tour
   so it adds no height (keeps the tour vertically aligned with the image slides). */
.tour-hint-top {
    position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 2;
    max-width: 90%; text-align: center; pointer-events: none;
    color: var(--white); font-size: 0.82rem; letter-spacing: 0.3px;
    background: rgba(0, 0, 0, 0.55); padding: 8px 16px; border-radius: 20px;
}
.tour-embed {
    position: relative; flex: 0 0 auto;
    height: var(--lb-h);
    width: calc(var(--lb-h) * 16 / 9);
    max-width: 92vw;
}
.tour-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.tour-overlay { position: absolute; inset: 0; cursor: pointer; }
/* Active tour is fully interactive (panning + the tour's own buttons). The overlay
   only remains on peeked neighbour slides so clicking one jumps to it. */
.lb-slide.is-active .tour-overlay { display: none; }

/* Full-screen button — touch devices only. Desktop users reach fullscreen via the
   tour's own controls (which this button would cover); on touch those can be fiddly
   and iOS needs the new-tab fallback, so the explicit button stays there. */
.tour-fs-btn {
    position: absolute; right: 12px; bottom: 12px; z-index: 3;
    display: none; align-items: center; gap: 6px;
    padding: 13px 18px; border: none; border-radius: 24px; /* ~44px tap target */
    background: rgba(0, 0, 0, 0.6); color: var(--white);
    font-family: var(--font); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.3px;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.tour-fs-btn svg { flex-shrink: 0; }
@media (hover: none) {
    .lb-slide.is-active .tour-fs-btn { display: inline-flex; }
}

.lb-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.16); color: var(--white); border: none;
    font-size: 2rem; line-height: 1; cursor: pointer; z-index: 3;
    transition: background var(--transition), opacity var(--transition);
    -webkit-tap-highlight-color: transparent;
}
.lb-nav:hover { background: rgba(255, 255, 255, 0.3); }
.lb-nav[disabled] { opacity: 0; pointer-events: none; }
.lb-prev { left: 16px; }
.lb-next { right: 16px; }

.lb-close {
    position: absolute; top: 14px; right: 22px; background: none; border: none;
    color: var(--white); font-size: 2.6rem; line-height: 1; cursor: pointer; z-index: 4;
    -webkit-tap-highlight-color: transparent;
}

.lb-footer { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; pointer-events: none; }
.lb-caption { color: var(--white); font-size: 0.9rem; letter-spacing: 0.5px; margin-bottom: 10px; }
.lb-dots { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding: 0 12px; pointer-events: auto; }
.lb-dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.35); cursor: pointer; transition: background var(--transition); }
.lb-dot.active { background: var(--white); }

/* ---- Mobile ---- */
@media (max-width: 768px) {
    .lightbox { --lb-h: 58vh; }
    .lb-track { gap: 14px; }
    .lb-nav { width: 40px; height: 40px; font-size: 1.5rem; background: rgba(255, 255, 255, 0.22); }
    .lb-prev { left: 6px; }
    .lb-next { right: 6px; }
    .lb-close { top: 8px; right: 12px; font-size: 2.2rem; }
    .lb-caption { font-size: 0.82rem; }
    .tour-hint-top { font-size: 0.74rem; }
}

/* Video slides (marketing videos) — fixed 16:9 box, exactly like the tour slide.
   The width is CSS-derived (not read from the <video>'s intrinsic size), so the slide
   has its correct dimensions from the very first paint — before the .mp4 metadata loads.
   This prevents the narrow, off-centre black box that otherwise flashes while the video
   downloads. object-fit: contain letterboxes any non-16:9 clip instead of distorting it. */
.lb-slide-video video {
    width: calc(var(--lb-h) * 16 / 9);
    max-width: 92vw;
    aspect-ratio: 16 / 9;      /* box height follows width, so no black bars when 92vw clamps it (mobile) */
    height: auto;
    max-height: var(--lb-h);
    object-fit: contain;
    background: #000;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
}
@media (max-width: 768px) {
    .lb-slide-video video { max-width: 94vw; }
}

/* Persistent "view gallery" cue on card thumbnails — visible without hover (mobile-friendly) */
.gallery-cue {
    position: absolute;
    left: 12px;
    bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.62);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    border-radius: 20px;
    pointer-events: none;
    z-index: 2;
    transition: opacity var(--transition);
}
.gallery-cue svg { flex-shrink: 0; }
.cue-touch { display: none; }
/* Desktop: pill fades on hover as the full "View Gallery" overlay takes over */
.project-card:hover .gallery-cue { opacity: 0; }
/* Touch devices (no hover): show the tap wording and keep the pill visible */
@media (hover: none) {
    .cue-hover { display: none; }
    .cue-touch { display: inline; }
    .project-card:hover .gallery-cue { opacity: 1; }
    .gallery-cue { font-size: 0.78rem; }
}