/* ============================================================
   FOLD IT GROUP — Redesign Concepts
   Hub page + case-study chrome. Loaded on top of styles.css.
   ============================================================ */

/* ---------- Hub: concept cards ---------- */
.concepts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}

.concept-card {
    background: var(--card);
    padding: 40px 36px 32px;
    display: flex;
    flex-direction: column;
    min-height: 320px;
    transition: background var(--t-fast);
    position: relative;
}

.concept-card:hover { background: var(--card-hover); }

.concept-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
}

.concept-no {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--silver);
}

.concept-tag {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    border: 1px solid var(--line-strong);
    padding: 5px 11px;
    border-radius: 100px;
    white-space: nowrap;
}

.concept-name {
    font-size: 30px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 18px;
}

.concept-rule {
    height: 1px;
    background: var(--line);
    margin-bottom: 20px;
}

.concept-hook {
    font-size: 15px;
    line-height: 1.65;
    color: var(--silver);
    flex: 1;
}

.concept-card-bottom {
    margin-top: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.concept-status {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dim);
}

.concept-status.live { color: var(--silver); }

.concept-card .project-link { margin: 0; }

/* whole card clickable, link still keyboard-reachable */
.concept-card .stretched::after {
    content: '';
    position: absolute;
    inset: 0;
}

/* ---------- Hub: how it works ---------- */
.rules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 48px 56px;
    margin-top: 24px;
}

.rule-item .rule-mark {
    width: 40px;
    height: 2px;
    background: var(--line-strong);
    margin-bottom: 22px;
}

.rule-item h3 {
    font-size: 21px;
    font-weight: 500;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
}

.rule-item p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--muted);
}

/* ---------- Case pages: intro chrome ---------- */
.case-intro {
    padding: calc(var(--nav-h) + 72px) 0 64px;
    border-bottom: 1px solid var(--line);
}

.case-intro .back-link { margin-bottom: 40px; }

.case-intro-row {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}

.case-intro-title {
    font-size: clamp(38px, 6vw, 68px);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.02;
    margin: 24px 0 20px;
}

.case-intro-sub {
    font-size: 18px;
    line-height: 1.65;
    color: var(--silver);
    max-width: 620px;
}

.case-intro-meta {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding-top: 8px;
}

.case-intro-meta > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

.case-intro-meta .meta-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dim);
}

.case-intro-meta .meta-value {
    font-size: 15px;
    color: var(--white);
}

.case-disclaimer {
    margin-top: 44px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.7;
    letter-spacing: 0.03em;
    color: var(--dim);
    max-width: 720px;
}

/* ---------- Case pages: artwork stage ---------- */
.case-stage {
    background: var(--case-bg, #E5E0D7);
    padding: 56px 0;
    overflow: hidden;
}

.case-scaler {
    /* width and height are set by redesign.js to match the scaled canvas.
       Deliberately no max-width: in read mode the box is wider than the
       stage on purpose, and that overflow is what the stage pans across. */
    position: relative;
    margin: 0 auto;
}

.case-canvas {
    /* Scale from the top-left corner, not the centre. With origin at the
       centre the canvas computes its midpoint from its own 1400px width,
       so once scaled it sits far to the right of the scaler box and gets
       clipped away entirely. Top-left makes the scaled box occupy exactly
       0 → 1400 * scale, which is what the scaler is sized to. */
    transform-origin: top left;
    margin: 0;
    width: 1400px;
}

/* Case artwork ships its own type; keep site body styles from leaking in. */
.case-canvas :where(h1, h2, h3, h4, p, span, div, li) { line-height: inherit; }

@media (max-width: 1000px) {
    .case-intro-row { grid-template-columns: 1fr; gap: 36px; }
    .case-intro { padding-top: calc(var(--nav-h) + 48px); padding-bottom: 48px; }
    .case-stage { padding: 32px 0; }
}

@media (max-width: 560px) {
    .concept-card { padding: 32px 26px 26px; min-height: 0; }
    .rules-grid { gap: 36px; }
}

@media (prefers-reduced-motion: reduce) {
    .concept-card { transition: none; }
}

/* ---------- Pannable stage (phones) ----------
   Below the legibility floor the canvas stays larger than the
   screen and the stage scrolls sideways instead of shrinking
   the artwork into illegibility. */
.case-stage.is-pannable {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
}

.case-stage.is-pannable .case-scaler {
    margin: 0 auto;
}

.case-stage.is-pannable::-webkit-scrollbar { height: 6px; }
.case-stage.is-pannable::-webkit-scrollbar-track { background: transparent; }
.case-stage.is-pannable::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 100px;
}

/* Hint, shown only when the stage actually pans */
.case-hint {
    display: none;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dim);
    padding: 0 0 14px;
    align-items: center;
    gap: 8px;
}

.case-hint.is-visible { display: flex; }

/* ---------- Case viewer controls ---------- */
.case-bar {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 0 0 16px;
    min-height: 20px;
}

.case-zoom {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--silver);
    background: var(--card);
    border: 1px solid var(--line-strong);
    border-radius: 100px;
    padding: 11px 18px;
    min-height: 44px;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
    -webkit-tap-highlight-color: transparent;
}

.case-zoom:hover { background: var(--card-hover); color: var(--white); }
.case-zoom[aria-pressed="true"] { background: var(--white); color: #0a0a0c; border-color: var(--white); }
.case-zoom[hidden] { display: none; }

.case-zoom:focus-visible {
    outline: 2px solid var(--silver);
    outline-offset: 2px;
}

/* ============================================================
   Intro compare — drag-to-reveal
   An illustration of the thesis, not a screenshot of any real
   site: a generic committee-built corporate page on one side,
   the same page with room to breathe on the other.
   ============================================================ */
.compare {
    position: relative;
    margin: 0 0 88px;
    border: 1px solid var(--line);
    background: var(--card);
    overflow: hidden;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    cursor: ew-resize;
}

.compare-stage {
    position: relative;
    height: 420px;
    overflow: hidden;
}

.compare-pane {
    position: absolute;
    inset: 0;
    padding: 34px 40px;
    overflow: hidden;
}

/* BEFORE — the cluttered side */
.compare-before { background: #101318; }

/* AFTER — clipped by the divider, revealed as you drag left */
.compare-after {
    background: var(--bg);
    clip-path: inset(0 0 0 var(--split, 50%));
}

.compare-inner { width: 900px; max-width: 100%; }

/* --- shared mock chrome --- */
.mock-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.09);
    margin-bottom: 26px;
}
.mock-logo { width: 58px; height: 9px; background: rgba(255,255,255,0.55); }
.mock-navitem { height: 6px; background: rgba(255,255,255,0.2); }

/* BEFORE: crowded nav, dense blocks, boxes inside boxes */
.compare-before .mock-navitem { width: 40px; }
.compare-before .mock-bar { gap: 9px; }

.mock-clutter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.mock-box {
    border: 1px solid rgba(255,255,255,0.13);
    background: rgba(255,255,255,0.03);
    padding: 11px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mock-line { height: 5px; background: rgba(255,255,255,0.17); }
.mock-line.s { width: 55%; }
.mock-line.m { width: 78%; }
.mock-badge { height: 14px; width: 46px; background: rgba(120,150,200,0.4); }

.mock-strip { display: flex; gap: 9px; margin-top: 9px; }
.mock-strip .mock-box { flex: 1; }

/* AFTER: one statement, one action, air */
.compare-after .mock-navitem { width: 34px; }
.compare-after .mock-bar { gap: 26px; border-bottom-color: var(--line); }

.mock-headline {
    height: 26px;
    width: 62%;
    background: var(--white);
    margin: 44px 0 14px;
}
.mock-headline.two { width: 44%; margin-top: 0; }
.mock-sub { height: 7px; width: 38%; background: var(--muted); margin-bottom: 34px; }
.mock-cta { height: 34px; width: 132px; background: var(--white); }

/* --- labels --- */
.compare-label {
    position: absolute;
    top: 20px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 6px 12px;
    border: 1px solid rgba(255,255,255,0.16);
    color: var(--silver);
    background: rgba(0,0,0,0.4);
    z-index: 3;
    pointer-events: none;
}
.compare-label.left { left: 20px; }
.compare-label.right { right: 20px; color: var(--white); border-color: var(--line-strong); }

/* --- divider --- */
.compare-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--split, 50%);
    width: 1px;
    background: var(--white);
    z-index: 4;
    pointer-events: none;
}

.compare-handle {
    position: absolute;
    top: 50%;
    left: var(--split, 50%);
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--white);
    color: #0a0a0c;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    border: none;
    cursor: ew-resize;
    padding: 0;
}

.compare-handle:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 4px;
}

.compare-caption {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dim);
    background: var(--surface);
}

@media (max-width: 768px) {
    .compare-stage { height: 300px; }
    .compare-pane { padding: 20px 22px; }
    .compare-inner { width: 620px; }
    .mock-clutter { grid-template-columns: repeat(3, 1fr); }
    .mock-headline { height: 20px; margin: 26px 0 12px; }
    .compare-label { top: 12px; font-size: 9px; padding: 5px 9px; }
    .compare-label.left { left: 12px; }
    .compare-label.right { right: 12px; }
    .compare-handle { width: 44px; height: 44px; }
    .compare { margin-bottom: 56px; }
}

@media (prefers-reduced-motion: reduce) {
    .compare-handle { transition: none; }
}