/* ============================================================
   ALPHIN CASE STUDY — alphin.css
   ─────────────────────────────────────────────────────────────
   Styles specific to the Alphin case study page.
   Uses the same font stack as the main portfolio.
   All values derived from Figma node 68:43 (1440px artboard).
   ============================================================ */

/* ── RESET & BASE ── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #ffffff;
    color: #1e1e1e;
    font-family: 'TestSohneMono', 'Space Mono', monospace;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Load Williwaw font (same as main portfolio) */
@font-face {
    font-family: 'Williwaw';
    src: url('../fonts/Williwaw-Book.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

/* ── HEADER ──
   Matches the Figma header: name + role on left, contact on right.
   Figma: name at top:40px left:97px, role at top:57px, contact at top:54px right */
.cs-header {
    position: fixed;         /* stays at top while scrolling */
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: #ffffff;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 40px 68px 20px 97px;
}

.cs-header-name {
    font-family: 'TestSohneMono', 'Space Mono', monospace;
    font-size: 12px;
    font-weight: 400;
    color: #1e1e1e;
    letter-spacing: -0.12px;
    line-height: 1.5;
    text-decoration: none;
}

.cs-header-role {
    font-family: 'TestSohneMono', 'Space Mono', monospace;
    font-size: 12px;
    font-weight: 400;
    color: #666;
    letter-spacing: -0.12px;
    line-height: 1.5;
    margin-top: 2px;
}

.cs-header-contact {
    font-family: 'TestSohneMono', 'Space Mono', monospace;
    font-size: 12px;
    font-weight: 400;
    color: #666;
    letter-spacing: -0.154px;
    line-height: 1.75;
    text-decoration: underline;
    margin-top: 14px;  /* aligns with Figma top:54px */
}

/* ── MAIN WRAPPER ──
   Starts below the fixed header (73px in Figma) */
.cs-main {
    padding-top: 73px;  /* header height */
    max-width: 1440px;
    margin: 0 auto;
}

/* ── BACK LINK ──
   Figma: "Link" node at top:66.5px left:96.5px within the main div */
.cs-back {
    display: inline-block;
    padding: 24px 0 0 96px;
    font-family: 'TestSohneMono', 'Space Mono', monospace;
    font-size: 14px;
    color: #666;
    text-decoration: none;
    letter-spacing: -0.154px;
}

.cs-back:hover {
    color: #1e1e1e;
}

/* ── KEYBOARD FOCUS STYLES ──
   Visible focus ring for keyboard and screen reader users.
   :focus-visible only shows when navigating by keyboard (not on mouse click),
   so it doesn't interfere with the mouse experience. */
a:focus-visible,
button:focus-visible {
    outline: 2px solid #1e1e1e;
    outline-offset: 3px;
    border-radius: 2px;
}

/* ── HEADER NAME: hint it's a link ──
   The name in the top-left navigates back to the homepage.
   An underline on hover signals this to users who explore. */
.cs-header-name:hover {
    text-decoration: underline;
}

/* ── TITLE AREA ──
   Row 1: company name | H1 title
   Row 2: meta row (Year / Industry / Scope) spanning both columns
   Figma: company name at 201px, H1 at 555px → left col = 555-96 = 459px */
.cs-title-area {
    display: grid;
    grid-template-columns: 459px 1fr;
    grid-template-rows: auto auto;
    padding: 92px 68px 0 96px;
    align-items: start;
    gap: 24px 0;
}

.cs-company-name {
    font-family: 'Williwaw', serif;
    font-size: 64px;
    font-weight: 400;
    color: #1e1e1e;
    letter-spacing: -0.176px;
    line-height: 1;
    padding-top: 26px;
    padding-left: 105px;  /* 96px grid + 105px = 201px from page (matches Figma) */
}

.cs-h1 {
    font-family: 'Williwaw', serif;
    font-size: 56px;
    font-weight: 400;
    color: #1e1e1e;
    letter-spacing: -1.056px;
    line-height: 1.1;
    max-width: 586px;  /* flexible: won't overflow on narrower viewports */
}

/* ── METADATA ROW ──
   Spans both grid columns so Year aligns under the company name.
   padding-left: 105px → Year starts at 96+105=201px from page (= company name x)
   min-width: 354px per item → Industry starts at 201+354=555px (= H1 x) */
.cs-meta {
    grid-column: 1 / -1;   /* span both title-area columns */
    display: flex;
    gap: 0;
    padding-left: 105px;
    color: #666;
    font-size: 14px;
    letter-spacing: -0.176px;
    line-height: 1.4;
}

.cs-meta-item {
    display: flex;
    flex-direction: column;
    width: 354px;   /* Year col: forces 354px wide → Industry aligns at 555px from page (= H1 x) */
}

.cs-meta-label {
    font-size: 14px;
    color: #666;
}

.cs-meta-value {
    font-size: 16px;
    color: #666;
}

/* ── FULL-WIDTH IMAGE CONTAINERS ──
   68px side margins match the content container left/right edge.
   overflow: hidden clips the image to the rounded corners.
   background-color is a skeleton placeholder — visible while the image loads. */
.cs-image-wrap {
    border-radius: 10px;
    margin: 92px 68px 0;  /* 68px sides = content container margin */
    overflow: hidden;
    background-color: #f0f0f0;
}

.cs-image-wrap img {
    width: 100%;        /* fills the full container width */
    height: auto;       /* lets the image keep its natural proportions */
    display: block;     /* removes the small gap that appears under inline images */
}

/* ── SECTION LAYOUT ──
   Two-column grid: label on left, content on right.
   Figma: container at 68px, h2 text at 132px (200px from page),
          content at 398px from container (466px from page).
   Label col = 398px; h2 text indented 132px within it. */
.cs-section {
    display: grid;
    grid-template-columns: 398px 1fr;   /* label col | content col */
    padding: 92px 68px 0 68px;          /* 68px = content container margin */
    gap: 0;
}

.cs-section-label h2 {
    font-family: 'TestSohneMono', 'Space Mono', monospace;
    font-size: 24px;
    font-weight: 400;
    color: #666;
    letter-spacing: -0.264px;
    line-height: 1.4;
    padding-left: 132px;  /* h2 text at 68+132=200px from page edge */
}

/* ── SECTION CONTENT ──
   Right column: paragraphs and sub-sections.
   max-width: 774px matches the Figma content column width. */
.cs-section-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 774px;
}

.cs-section-content p {
    font-size: 16px;
    color: #1e1e1e;
    letter-spacing: -0.176px;
    line-height: 1.5;
}

/* ── ORANGE LABEL (The Brief, Key Decisions) ──
   Figma: color:#fd5400, size:16px, tracking:-0.154px */
.cs-label-orange {
    font-size: 16px !important;
    color: #fd5400 !important;
    letter-spacing: -0.154px !important;
    line-height: 1.4 !important;
}

/* ── THE BRIEF block ──
   Small sub-section with orange label + larger body text */
.cs-brief {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 16px;
}

.cs-brief-text {
    font-size: 16px !important;   /* Figma: 16px — same as body text */
    color: #1e1e1e !important;
    letter-spacing: -0.176px !important;
    line-height: 1.4 !important;
}

/* ── KEY DECISIONS block ──
   Each decision: bold title + explanation */
.cs-decisions {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-top: 16px;
}

.cs-decision-title {
    font-size: 16px !important;
    font-weight: 400;
    color: #1e1e1e !important;
    letter-spacing: -0.176px !important;
    line-height: 1.7 !important;
}

/* ── IMPACT TABLE ──
   Metric / Before / After
   Figma: border:#e5e7eb, header bg:#f9fafb, border-radius:10px */
.cs-table-wrap {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
}

.cs-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'TestSohneMono', 'Space Mono', monospace;
    font-size: 14px;
}

.cs-table thead {
    background: #f9fafb;
}

.cs-table thead th {
    font-size: 14px;
    font-weight: 400;
    color: #1e1e1e;
    letter-spacing: -0.154px;
    text-align: left;
    padding: 16px 24px;
}

.cs-table tbody tr {
    border-top: 1px solid #e5e7eb;
}

.cs-table tbody td {
    font-size: 16px;
    color: #1e1e1e;
    letter-spacing: -0.176px;
    padding: 16px 24px;
}

.cs-nda-note {
    color: #666;
    font-size: 14px;
    font-style: italic;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

/* ── FOOTER ──
   Role description + "Next / Previous" navigation.
   padding-left: 132px aligns text at 68+132=200px from page edge
   (same x-position as the h2 section labels). */
.cs-footer {
    margin: 42px 68px 0;        /* 42px from last section to role text */
    padding: 0 0 0 132px;       /* 68px margin + 132px = 200px from page = inside layout */
    display: flex;
    flex-direction: column;
    gap: 49px;                  /* 49px gap + 1px border + 42px padding = 92px role→nav */
}

.cs-footer-role {
    font-size: 14px;
    color: #666;
    letter-spacing: -0.154px;
    line-height: 1.6;
}

.cs-next-link {
    font-size: 16px;
    color: #1e1e1e;
    text-decoration: none;
    letter-spacing: -0.176px;
    border-top: 1px solid #e5e7eb;
    padding-top: 42px;                  /* 42px from line to nav text */
    display: block;
    max-width: 1040px;
}

.cs-next-link:hover {
    text-decoration: underline;
}

/* ── FOOTER NAV (two-way: prev + next) ──
   Used on pages with both directions.
   The border-top sits between the role text and the nav row. */
.cs-footer-nav {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #e5e7eb;
    padding-top: 42px;                  /* 42px from line to nav text */
    max-width: 1040px;
}

/* When links are inside a nav row, the nav container already has the border */
.cs-footer-nav .cs-next-link {
    border-top: none;
    padding-top: 0;
}

/* ── STEPS GUIDE BLOCK ──
   Used in Estylar Solution: a light gray rounded box listing
   the 4 illustrated scanning steps.
   bg:#f9fafb matches the table header color for visual consistency. */
.cs-steps-block {
    background: #f9fafb;
    border-radius: 10px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── BULLET LIST ──
   Used in Estylar Research and Solution sections.
   pl-[24px] matches Figma indentation. */
.cs-list {
    padding-left: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: disc;
}

.cs-list li {
    font-size: 16px;
    color: #1e1e1e;
    letter-spacing: -0.176px;
    line-height: 1.5;
}

/* ── ADJUST / AGROFY / ESTYLAR TITLE AREA OVERRIDES ──
   These projects have 56px company names (same size as H1).
   Column split: H1 at 614px → left col = 614-96 = 518px.
   Meta Year item: 614-201 = 413px so Industry aligns exactly under the H1. */
.cs-title-area--adjust {
    grid-template-columns: 518px 1fr;
}

.cs-title-area--adjust .cs-meta-item:first-child {
    width: 413px;   /* forces 413px wide → Industry aligns at 614px from page (= H1 x for adjust/estylar/agrofy) */
}

/* 56px for Adjust, Agrofy, Estylar company names (Alphin uses 64px) */
.cs-company-name--adjust {
    font-size: 56px;
    padding-top: 11.5px;
}

/* Wider H1 for longer titles (Adjust, Estylar, Agrofy) */
.cs-h1--adjust {
    width: 786px;
}


/* ── TWO-IMAGE SIDE BY SIDE (gray container) ──
   Used for research images (adjust6 + adjust7).
   Fixed height container, images fill 50% each. */
.cs-image-pair {
    margin: 92px 68px 0;                /* 68px sides = content container margin */
    height: 810px;
    border-radius: 10px;
    display: flex;
}

.cs-image-pair img {
    width: 50%;
    height: 100%;
    object-fit: contain;
}


/* ── MIRO BOARD EMBED ──
   Interactive iframe that lets visitors zoom and pan the Miro board.
   Matches the section side margins (96px left, 68px right).
   Height 600px gives enough room to read sticky notes without being overwhelming. */
.cs-miro-embed {
    margin: 92px 68px 0;            /* 68px sides = content container margin */
    border-radius: 10px;
    overflow: hidden;                /* clips iframe to rounded corners */
    height: 600px;                   /* taller = more of the board is visible in preview */
    position: relative;              /* needed so the ::after overlay is positioned inside */
}

/* Transparent overlay — sits on top of the iframe by default.
   This intercepts scroll events so they reach the page instead of
   zooming the Miro board while the user is just scrolling through.
   A subtle hint appears on hover to let the user know they can interact. */
.cs-miro-embed::after {
    content: 'Click to interact';
    position: absolute;
    inset: 0;                        /* covers the full iframe area */
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'TestSohneMono', 'Space Mono', monospace;
    font-size: 12px;
    letter-spacing: -0.12px;
    color: transparent;              /* text hidden until hover */
    background: transparent;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}

/* On hover: reveal a subtle hint so the user knows to click */
.cs-miro-embed:hover::after {
    color: #666;
    background: rgba(255, 255, 255, 0.5);
}

/* When the user has clicked to interact, hide the overlay entirely */
.cs-miro-embed.is-active::after {
    display: none;
}

.cs-miro-embed iframe {
    width: 100%;
    height: 100%;
    border: none;                    /* removes the default iframe border */
    display: block;                  /* removes the gap below inline iframes */
}


/* ── IMAGE CAPTION LINK ──
   Small link that sits below an image container (e.g. "Miro board link").
   Uses the same left padding as .cs-back (96px) to align with page content.
   Figma spec: TestSohneMono 14px, color #737373 */
.cs-image-caption-link {
    display: block;                          /* sits on its own line */
    margin-top: 12px;                        /* small gap below the image */
    padding-left: 96px;                      /* aligns with the rest of the page content */
    font-family: 'TestSohneMono', 'Space Mono', monospace;
    font-size: 14px;
    color: #737373;
    text-decoration: underline;
    letter-spacing: -0.154px;
}

.cs-image-caption-link:hover {
    color: #1e1e1e;                          /* darkens on hover for feedback */
}


/* ── SOLUTION GALLERY (white cards with drop shadows) ──
   Used for the redesigned product screenshots ("New Adjust" in Figma).
   Figma node 140:217: flex-col container, 42px gap between rows.
   Each image sits inside a white rounded card with a soft shadow. */
.cs-solution-gallery {
    margin: 92px 68px 0;                /* 92px top = consistent section spacing */
    display: flex;
    flex-direction: column;
    gap: 42px;              /* Figma: gap between the three rows */
}

/* One row = one horizontal group of cards */
.cs-solution-row {
    display: flex;
    gap: 24px;              /* Figma: gap between cards within a row */
    align-items: flex-start; /* cards grow to their own natural height */
}

/* Single-item row: left-aligned at half width.
   Matches Figma row 3: one card occupies the left half, right side is empty.
   calc(50% - 12px) = half the row width minus half the 24px gap. */
.cs-solution-row--single {
    max-width: calc(50% - 12px);
}

/* The white card that holds each screenshot.
   Shadow is on the card (not the img) so overflow:hidden doesn't clip it.
   background-color is a skeleton placeholder while the image loads. */
.cs-solution-card {
    flex: 1;
    background: #f0f0f0;
    border-radius: 10px;
    overflow: hidden;       /* clips image corners to match border-radius */
    box-shadow: 0px 15px 25px 0px rgba(0, 0, 0, 0.15);  /* Figma drop shadow */
    /* no padding — images fill edge-to-edge, matching Figma */
}

/* The screenshot image inside each card — fills the full card */
.cs-solution-card img {
    width: 100%;
    height: auto;
    display: block;         /* removes the small gap below inline images */
}


/* ── MOBILE RESPONSIVE ── */
@media (max-width: 768px) {
    .cs-header {
        padding: 24px 20px;
    }

    .cs-main {
        padding-top: 80px;
    }

    .cs-back {
        padding: 16px 0 0 20px;
    }

    .cs-title-area {
        grid-template-columns: 1fr;  /* stack vertically on mobile */
        padding: 40px 20px 0;
    }

    .cs-company-name {
        font-size: 40px;
        padding-top: 0;
        padding-left: 0;   /* remove desktop indent — title area padding handles spacing */
    }

    /* ── ADJUST / AGROFY title modifier — mobile overrides ──
       Desktop: 518px left column, 56px company name, 786px h1 max-width.
       Mobile: collapse to single column, same sizes as base title area. */
    .cs-title-area--adjust {
        grid-template-columns: 1fr;
    }

    .cs-title-area--adjust .cs-meta-item:first-child {
        width: auto;        /* remove fixed column width — flex handles it */
    }

    .cs-company-name--adjust {
        font-size: 40px;
        padding-left: 0;
    }

    .cs-h1--adjust {
        font-size: 32px;
        max-width: 100%;
    }

    .cs-h1 {
        font-size: 32px;
        width: 100%;
    }

    .cs-image-wrap {
        margin: 48px 20px 0;          /* mobile: 20px side margins */
    }

    .cs-section {
        grid-template-columns: 1fr;  /* stack label above content */
        padding: 48px 20px 0;
        gap: 16px;
    }

    .cs-section-label h2 {
        padding-left: 0;             /* remove desktop indent on mobile */
    }

    .cs-meta {
        flex-direction: column;
        gap: 12px;
        padding-left: 0;             /* remove indent — full width on mobile */
    }

    .cs-meta-item {
        min-width: unset;
    }

    .cs-footer {
        margin: 92px 20px 0;         /* 92px from last section to role text on mobile */
        padding: 0 0 48px 0;         /* remove desktop indent; margin handles top spacing */
        gap: 16px;                   /* compact gap between role and nav on mobile */
    }

    /* ── SITE FOOTER mobile styles moved below base .site-footer
       to avoid cascade override — see comment near .site-footer definition ── */

    /* New image layouts — stack vertically on mobile */
    .cs-image-pair {
        margin-top: 48px;             /* mobile: proportional to 92px desktop */
        flex-direction: column;
    }

    .cs-image-pair img {
        width: 100%;
    }

    .cs-solution-gallery {
        margin: 48px 20px 0;          /* mobile: proportional to 92px desktop */
        gap: 24px;
    }

    .cs-solution-row {
        flex-direction: column;
    }

    .cs-solution-row--single {
        max-width: 100%;
    }

    /* ── MIRO EMBED ── */
    .cs-miro-embed {
        height: 360px;          /* reduce from 600px — enough to show the board on mobile */
        margin: 48px 20px 0;
    }

    /* On mobile there is no hover state, so the "Click to interact" hint is invisible.
       Replace ::after content with a persistent badge so users know to tap. */
    .cs-miro-embed::after {
        content: 'Tap to explore board';
        font-size: 11px;
        color: #666;
        background: rgba(255, 255, 255, 0.85);
        padding: 6px 12px;
        border-radius: 20px;
        border: 1px solid #e5e7eb;
        /* Override desktop invisible-until-hover state */
        opacity: 1;
    }

    /* When active on mobile, hide the badge just like desktop */
    .cs-miro-embed.is-active::after {
        display: none;
    }

    /* ── IMPACT TABLE → CARD layout ──
       On mobile, each table row becomes its own card.
       The metric name (first td) acts as the card title.
       Before / After / Result values are labelled via data-label attribute. */
    .cs-table-wrap {
        border: none;           /* outer border removed — each row card has its own */
        border-radius: 0;
        overflow: visible;
        background: transparent;
    }

    .cs-table,
    .cs-table tbody {
        display: block;
        width: 100%;
    }

    .cs-table thead {
        display: none;          /* column headers hidden — data-label recreates context */
    }

    .cs-table tbody tr {
        display: block;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        padding: 16px;
        margin-bottom: 12px;
    }

    .cs-table tbody tr:last-child {
        margin-bottom: 0;
    }

    .cs-table tbody td {
        display: block;
        padding: 0;
        border: none;
    }

    /* First td = metric name — small grey label at the top of each card */
    .cs-table tbody td:first-child {
        font-size: 13px;
        color: #666;
        margin-bottom: 8px;
        letter-spacing: -0.12px;
    }

    /* Before / After / Result: show column name before the value */
    .cs-table tbody td[data-label]::before {
        content: attr(data-label) ': ';
        font-size: 11px;
        color: #999;
        display: block;
        margin-bottom: 2px;
        letter-spacing: 0;
    }

    /* Value cells — larger, prominent */
    .cs-table tbody td:not(:first-child) {
        font-size: 16px;
        color: #1e1e1e;
        margin-top: 8px;
    }

    /* ── BODY: reduce blur padding on mobile ── */
    body {
        padding-bottom: 80px;   /* less than 120px desktop — blur overlay is shorter too */
    }

    /* ── NEXT LINK: less padding-top on mobile ── */
    .cs-next-link {
        padding-top: 24px;
    }

    .cs-footer-nav {
        padding-top: 24px;
    }
}


/* ── SITE FOOTER — same visual as the index page footer ──
   200px padding each side matches the home page (13.9vw at 1440px)
   and keeps logos/credits inside the same layout column as the content. */
.site-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 112px;
    padding: 0 68px 2.5rem 200px;
    /* Left 200px = matches where the nav line and role text start (68px margin + 132px indent).
       Right 68px  = matches the cs-footer's right margin, so "Made it with" aligns
                     with the right edge of "Next →" / "← Previous". */
}

.footer-logos {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.footer-logos a {
    display: flex;
    align-items: center;
    transition: opacity 0.15s ease;
}

.footer-logos a:hover {
    opacity: 0.6;
}

.footer-logos img {
    width: 24px;
    height: 24px;
    display: block;
}

.footer-copy,
.footer-made {
    font-size: 0.875rem;
    color: #666;
    letter-spacing: -0.154px;
    line-height: 1.4;
    text-align: left;
}

/* "Claude Code" link inside the project page footer credits */
.footer-made a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── SITE FOOTER mobile override ──
   Must come AFTER the base .site-footer rule above, otherwise
   the cascade would let the desktop margin-top: 112px win on mobile. */
@media (max-width: 768px) {
    .site-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;              /* 16px between logos / copyright / credits */
        margin-top: 92px;       /* 92px from end of project content to site footer */
        padding: 0 20px 2.5rem;
    }
}


/* ── PROGRESSIVE BLUR OVERLAY ───────────────────────────────
   Fixed to the bottom of the viewport. The 8 inner divs are
   generated by blur.js — this just sets up the container.

   position: fixed  → stays at the bottom as you scroll
   pointer-events: none → you can still click through it
   z-index: 50 → sits above text but below any future modals */
#scroll-blur {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;   /* shorter so it doesn't cover the footer */
    pointer-events: none;
    z-index: 50;
}

/* Push page content up so the footer always clears the blur overlay */
body {
    padding-bottom: 120px;
}