/* ==========================================================================
   projects.css — Styles unique to projects.php (the live-tools showcase)
   --------------------------------------------------------------------------
   Requires: tokens.css, base.css (in that order, before this file).

   REBUILT 2026-07-15. The old page carried Bootstrap 5, Poppins, and a third
   palette (#0a2540 / #4f46e5 indigo) that matched nothing else on the site.
   All three are gone. Bootstrap in particular was ~200KB to lay out a grid
   that CSS grid does in six lines, and its .card/.container/.btn collide with
   base.css.

   Shared components come from base.css — do not redefine:
     .eyebrow / .seal, .lbl, .stitle, .container, .btn, .pill

   Contents:
     1. Hero
     2. Tool grid
     3. Tool card
     4. Approach strip
     5. CTA
     6. Responsive
   ========================================================================== */


/* ==========================================================================
   1. Hero
   ========================================================================== */
/* Centred + reduced to match speaker.php and advisor.php, 2026-07-15.

   The padding shorthand is safe here: it's on the <section>, which is not also
   a .container. Do NOT copy this rule onto an element that carries both — that
   is exactly what zeroed the gutter in speaker.css and shoved the headline off
   the left edge. Check the markup first. */
.proj-hero {
    position: relative;
    padding: 72px 0 64px;
    background: var(--gradient-brand-hero);
    color: var(--color-text-inverse);
    overflow: hidden;
    text-align: center;
}

.proj-hero .arcs {
    position: absolute;
    top: -14%;
    right: -6%;
    width: 560px;
    height: 560px;
    opacity: 0.5;
    pointer-events: none;
}

.proj-hero .container {
    position: relative;
    z-index: var(--z-base);
}

/* The section now carries .on-dark, so base.css flips the eyebrow and seal to
   brass. This only handles the centring: .eyebrow is an inline-flex, so the
   parent's text-align centres the box and justify-content centres what's in
   it. Both, or the seal drifts off the label. */
.proj-hero .eyebrow {
    justify-content: center;
}

.proj-hero h1 {
    /* Was max-width:18ch + clamp(34px, 5.2vw, 58px) — pinned at the 58px cap.
       text-align centres the LINES; margin:auto centres the BOX. A width-
       limited block needs both. */
    max-width: 20ch;
    margin: var(--space-5) auto 0;
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: clamp(30px, 4.4vw, 50px);
    line-height: 1.06;
    letter-spacing: -0.015em;
    color: var(--color-text-inverse);
    text-wrap: balance;
}

.proj-hero__sub {
    max-width: 58ch;
    margin-top: var(--space-4);
    margin-inline: auto;
    font-size: clamp(15px, 1.6vw, 18px);
    line-height: 1.6;
    color: #cdd6e6;
}


/* ==========================================================================
   2. Tool grid
   ========================================================================== */
.proj-tools {
    padding: var(--section-padding-y) 0;
    background: var(--color-bg);
}

.proj-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: var(--space-7);
    margin-top: 48px;
}


/* ==========================================================================
   3. Tool card
   --------------------------------------------------------------------------
   The whole card is a link. Every one of these opens something that runs —
   that's the entire point of the page, so nothing here is allowed to look
   clickable unless it is. The old page had "Live Demo" buttons wired to
   alert('Demo is being loaded...').
   ========================================================================== */
.tool {
    display: flex;
    flex-direction: column;
    background: var(--color-bg-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition:
        transform var(--duration-base) var(--ease),
        box-shadow var(--duration-base) var(--ease),
        border-color var(--duration-base) var(--ease);
}

.tool:hover,
.tool:focus-visible {
    transform: var(--lift-md);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--color-accent-soft);
}

/* Screenshot. Fixed ratio so a missing image doesn't collapse the card. */
.tool__shot {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top center;
    background: var(--navy-800);
    border-bottom: 1px solid var(--color-border);
}

/* --------------------------------------------------------------------------
   Placeholder, rendered by tool_shot() when the screenshot isn't on disk yet.
   Deliberately plain and a bit apologetic — it should look like something
   that's missing, not like a design choice, so it nags until it's replaced.
   -------------------------------------------------------------------------- */
.tool__shot--empty {
    display: grid;
    place-items: center;
    background:
        repeating-linear-gradient(
            45deg,
            rgba(176, 141, 79, 0.05) 0 12px,
            transparent 12px 24px
        ),
        var(--navy-800);
}

.tool__shot--empty span {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 14px;
    letter-spacing: var(--tracking-wide);
    color: rgba(205, 177, 130, 0.65);
}

.tool__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--space-7) var(--space-6) var(--space-6);
}

.tool__title {
    margin: var(--space-3) 0 var(--space-2);
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: 22px;
    line-height: 1.2;
    color: var(--color-brand);
}

.tool__desc {
    flex: 1;
    margin: 0 0 var(--space-5);
    color: var(--color-text-body);
    font-size: 15px;
    line-height: var(--leading-card);
}

.tool__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 var(--space-5);
    padding: 0;
    list-style: none;
}

.tool__tag {
    padding: 4px 10px;
    background: rgba(176, 141, 79, 0.1);
    border-radius: 2px;
    font-size: 11px;
    font-weight: var(--weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* Not a real button — the card is the link. Styled as an affordance only. */
.tool__open {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 14px;
    font-weight: var(--weight-bold);
    letter-spacing: 0.02em;
    color: var(--color-action);
}

.tool__open::after {
    content: "\2192";              /* → */
    transition: transform var(--duration-fast) var(--ease);
}

.tool:hover .tool__open::after {
    transform: translateX(4px);
}

/* Featured — the flagship tool gets the full width and a brass edge. */
.tool--featured {
    grid-column: 1 / -1;
    flex-direction: row;
    border-top: 3px solid var(--color-accent);
}

.tool--featured .tool__shot {
    width: 52%;
    aspect-ratio: auto;
    border-bottom: none;
    border-right: 1px solid var(--color-border);
}

.tool--featured .tool__body {
    padding: var(--space-9) var(--space-8);
    justify-content: center;
}

.tool--featured .tool__title {
    font-size: 30px;
}

.tool--featured .tool__desc {
    flex: none;
    font-size: 16px;
    max-width: 52ch;
}


/* ==========================================================================
   4. Approach strip
   ========================================================================== */
.proj-approach {
    padding: var(--section-padding-y) 0;
    background: linear-gradient(150deg, #0c1830 0%, var(--navy-800) 60%, var(--navy-900) 100%);
    color: var(--color-text-inverse);
}

.proj-approach__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-7);
    margin-top: 44px;
}

.proj-approach__item .bar {
    width: 34px;
    height: 2px;
    margin-bottom: var(--space-4);
    background: var(--color-accent);
}

.proj-approach__item h3 {
    margin-bottom: var(--space-3);
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: 19px;
    color: var(--color-text-inverse);
}

.proj-approach__item p {
    font-size: 14.5px;
    line-height: 1.6;
    color: #c8d2e4;
}


/* ==========================================================================
   5. CTA
   ========================================================================== */
.proj-cta {
    padding: 84px 0;
    background: var(--color-bg-raised);
    text-align: center;
}

.proj-cta p {
    max-width: 54ch;
    margin: var(--space-4) auto var(--space-7);
    font-size: 17px;
    line-height: 1.7;
    color: var(--color-text-body);
}


/* ==========================================================================
   6. Responsive
   ========================================================================== */
@media (max-width: 900px) {
    .tool--featured {
        flex-direction: column;
    }
    .tool--featured .tool__shot {
        width: 100%;
        aspect-ratio: 16 / 10;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }
    .tool--featured .tool__body {
        padding: var(--space-7) var(--space-6);
    }
    .tool--featured .tool__title { font-size: 24px; }
}

@media (max-width: 768px) {
    .proj-grid { grid-template-columns: 1fr; }
}