/* ============================================================
   work.css — Work (portfolio) page
   Includes: work-hero, work-filter tabs, work-grid.
   The project cards themselves reuse the .hscroll__panel* photo-card
   component defined in css/home.css (same "Our Latest Work" design) —
   this file only overrides what needs to change for a grid layout
   instead of a horizontal-scroll track.
   Dock and footer are shared across every page and live in
   css/global.css instead of being duplicated here.
   ============================================================ */

/* ============================================================
   1. WORK-HERO — page intro
   ============================================================ */
/* Same two-column structure as .ab-hero (about.html): 50%/46% percentage
   flex-basis, not fixed px caps — percentages always fill their share of
   the row at any viewport width, so (unlike fixed px maxes) neither side
   can hit its cap early and leave dead trailing space in the row. This is
   the standard hero layout for every page banner on the site. */
.work-hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(32px, 6vw, 80px);
    background: #ffffff;
    overflow: hidden;
    padding: clamp(110px, 13vw, 160px) clamp(24px, 6vw, 96px) clamp(56px, 7vw, 88px);
}

.work-hero__deco {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.work-hero__inner {
    position: relative;
    z-index: 1;
    flex: 0 0 50%;
    max-width: 50%;
}

/* ---- right-side visual panel ---- */
.work-hero__visual {
    position: relative;
    z-index: 1;
    flex: 0 0 46%;
    max-width: 46%;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18);
    /* Initial state — wipes open top-to-bottom via js/work.js, same
       clip-path mechanic as .about__image-mask / .print-cta__visual. */
    clip-path: inset(0% 0 100% 0);
    will-change: clip-path;
}

.work-hero__visual-img {
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
}

.work-hero__breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 28px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-muted);
}
.work-hero__bc-link {
    color: var(--color-muted);
    text-decoration: none;
    transition: color 0.2s;
}
.work-hero__bc-link:hover { color: var(--color-fg); }
.work-hero__bc-sep { opacity: 0.4; }
.work-hero__bc-current { color: var(--color-fg); font-weight: 700; }

.work-hero__eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 20px;
}

.work-hero__headline {
    margin: 0 0 20px;
    font-family: "Karla", sans-serif;
    font-size: clamp(40px, 6vw, 80px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: var(--color-fg);
}
.work-hero__line { display: block; overflow: hidden; }
.work-hero__line-inner { display: block; }
.work-hero__headline em {
    font-style: italic;
    font-weight: 700;
    background: linear-gradient(135deg, #f7b42c 0%, #fc575e 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.work-hero__sub {
    margin: 0;
    font-size: clamp(15px, 1.6vw, 19px);
    line-height: 1.65;
    color: var(--color-muted);
    max-width: 560px;
}

/* ============================================================
   2. WORK-LIST — filter tabs + card grid
   ============================================================ */
.work-list {
    position: relative;
    background: #faf8f4;
    padding: clamp(40px, 6vw, 64px) clamp(24px, 6vw, 96px) clamp(96px, 10vw, 140px);
}

.work-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: clamp(32px, 4vw, 48px);
}

.work-filter__tab {
    padding: 10px 22px;
    border-radius: 999px;
    border: 1px solid rgba(14, 27, 51, 0.15);
    background: transparent;
    color: #0e1b33;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.work-filter__tab:hover {
    border-color: rgba(14, 27, 51, 0.3);
}

.work-filter__tab.is-active {
    background: linear-gradient(135deg, #f7b42c, #fc575e);
    border-color: transparent;
    color: #fff;
}

.work-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(18px, 2.4vw, 28px);
}

/* Grid-context override for the shared .hscroll__panel card component —
   on the home page it's a fixed-width flex child (for the horizontal
   scroll track); here it should just fill its grid cell. Also shorter
   than home's 3/5 portrait ratio — four columns of that tall a card
   reads as too narrow/cramped, so this grid uses a squarer 4/5. */
.work-grid .hscroll__panel {
    width: 100%;
    aspect-ratio: 4 / 5;
}

.work-card.is-hidden {
    display: none;
}

.work-grid__empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px 0;
    color: var(--color-muted);
    font-size: 15px;
}

/* ============================================================
   3. WORK-GALLERY — plain photo grid, same design as
      case-study.html's .cs-gallery
   ============================================================ */
.work-gallery {
    position: relative;
    background: #ffffff;
    padding: clamp(64px, 8vw, 100px) clamp(24px, 6vw, 96px);
}

.work-gallery__intro {
    max-width: 700px;
    margin: 0 auto clamp(40px, 5vw, 56px);
    text-align: center;
}

.work-gallery__eyebrow {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 14px;
}

.work-gallery__heading {
    margin: 0;
    font-family: "Karla", sans-serif;
    font-size: clamp(28px, 3.6vw, 42px);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--color-fg);
}

/* Collage/masonry layout — a CSS multi-column flow instead of a uniform
   grid, so each photo keeps its own natural aspect ratio and the row
   heights vary organically instead of every tile being force-cropped to
   the same shape. */
.work-gallery__grid {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 1200px;
    columns: 3 280px;
    column-gap: clamp(16px, 2.2vw, 24px);
}

.work-gallery__item {
    display: block;
    break-inside: avoid;
    margin-bottom: clamp(16px, 2.2vw, 24px);
    border-radius: 16px;
    overflow: hidden;
}

.work-gallery__item:nth-child(3n+2) { margin-top: 32px; }

.work-gallery__item img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 991.98px) {
    .work-gallery__grid {
        columns: 2 240px;
    }
    .work-gallery__item:nth-child(3n+2) {
        margin-top: 0;
    }
}

@media (max-width: 575.98px) {
    .work-gallery__grid {
        columns: 1;
    }
}

@media (max-width: 767.98px) {
    .work-hero {
        flex-direction: column;
    }
    .work-hero__inner {
        flex: none;
        max-width: 100%;
    }
    .work-hero__visual {
        flex: none;
        max-width: 100%;
        width: 100%;
    }
}

@media (max-width: 1199.98px) {
    .work-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991.98px) {
    .work-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .work-hero {
        padding: clamp(96px, 20vw, 140px) 20px 48px;
    }

    .work-list {
        padding: 32px 20px 80px;
    }
}