/* =============================================================================
   Websly Projects — 5.1
   Layouts: cinematic-grid · bento · marquee-reveal · scroll-stack
   Modal: shared per block instance, iframe with screenshot fallback.
   ============================================================================= */

.ws-projects {
    padding-top: clamp(4rem, 8vw, 7rem);
    padding-bottom: clamp(4rem, 8vw, 7rem);
}

.ws-projects__header {
    text-align: center;
    margin-bottom: clamp(3rem, 6vw, 5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.ws-projects__eyebrow {
    display: inline-block;
    padding: 0.4em 1.1em;
    border-radius: 999px;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--theme-accent);
    background: rgba(var(--text-base-rgb, 255 255 255) / 0.04);
    border: 1px solid rgba(var(--text-base-rgb, 255 255 255) / 0.12);
}
.ws-projects__title {
    margin: 0;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--text-base);
}

/* ----- Shared card ----------------------------------------------------- */

.ws-project-card {
    --ws-card-radius: var(--radius-card, 1.5rem);
    appearance: none;
    background: rgba(0 0 0 / 0.5);
    border: 1px solid rgba(var(--text-base-rgb, 255 255 255) / 0.08);
    color: inherit;
    cursor: pointer;
    display: block;
    isolation: isolate;
    text-decoration: none;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.4s ease;
    will-change: transform;
}
.ws-project-card:hover,
.ws-project-card:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(var(--text-base-rgb, 255 255 255) / 0.18);
    box-shadow: 0 30px 80px -30px rgba(0 0 0 / 0.7),
                0 0 0 1px rgba(var(--text-base-rgb, 255 255 255) / 0.04);
    outline: none;
}

.ws-project-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: var(--ws-card-aspect, 4 / 5);
    overflow: hidden;
    background: rgba(0 0 0 / 0.85);
}

/* Hover live-site iframe — overlay, oversized for transform-based scroll */
.ws-project-card__live {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease;
    z-index: 1;
}
.ws-project-card.is-live-ready .ws-project-card__live { opacity: 1; }
.ws-project-card.is-live-ready .ws-project-card__img,
.ws-project-card.is-live-ready .ws-project-card__video { opacity: 0; }
.ws-project-card__live-iframe {
    position: absolute;
    top: var(--ws-chrome-h, 0px);
    left: 0;
    /* Iframe is rendered taller than its container so JS can translateY() through it.
       Scale-down keeps small text legible and roughly mimics a "zoomed-out" view. */
    height: 1800px;
    border: 0;
    transform: scale(0.85);
    transform-origin: top left;
    width: calc(100% / 0.85);
    /* JS sets --ws-live-y from 0 → -(distance) once the iframe loads + 1s delay */
    translate: 0 var(--ws-live-y, 0px);
}
.ws-project-card.is-live-scrolling .ws-project-card__live-iframe {
    transition: translate linear var(--ws-live-scroll-dur, 7000ms);
}
@media (prefers-reduced-motion: reduce) {
    .ws-project-card__live-iframe { transition: none !important; translate: 0 0 !important; }
}

/* Mac-style browser chrome (shared visual with the modal) */
.ws-project-card__chrome {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 32px;
    z-index: 3;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0 0.85rem;
    background: linear-gradient(180deg, rgba(35 36 42 / 0.95), rgba(22 23 28 / 0.95));
    color: rgba(255 255 255 / 0.7);
    font-size: 0.65rem;
    border-bottom: 1px solid rgba(255 255 255 / 0.06);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: none;
}
.ws-project-card__chrome-dots { display: inline-flex; gap: 0.3rem; }
.ws-project-card__chrome-dots i {
    width: 8px; height: 8px; border-radius: 999px; display: inline-block;
    background: rgba(255 255 255 / 0.2);
    box-shadow: inset 0 0 0 0.5px rgba(0 0 0 / 0.3);
}
.ws-project-card__chrome-dots i:first-child { background: #ff5f57; }
.ws-project-card__chrome-dots i:nth-child(2) { background: #febc2e; }
.ws-project-card__chrome-dots i:nth-child(3) { background: #28c840; }
.ws-project-card__chrome-url {
    justify-self: center;
    min-width: 0;
    max-width: 100%;
    padding: 0.18rem 0.7rem;
    border-radius: 999px;
    background: rgba(0 0 0 / 0.35);
    border: 1px solid rgba(255 255 255 / 0.04);
    color: rgba(255 255 255 / 0.78);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ws-project-card__chrome::after {
    content: "";
    width: 30px; /* keep URL optically centered against the dot cluster */
}

/* No-image default mode — iframe IS the thumbnail; dim + icon appear on hover */
.ws-project-card.is-live-default .ws-project-card__overlay {
    /* Lighter idle gradient so the live preview shows through */
    background: linear-gradient(180deg, rgba(0 0 0 / 0) 65%, rgba(0 0 0 / 0.4) 100%);
}
.ws-project-card.is-live-default:hover .ws-project-card__overlay,
.ws-project-card.is-live-default:focus-visible .ws-project-card__overlay {
    background: rgba(0 0 0 / 0.5);
}
.ws-project-card.is-live-default .ws-project-card__cta { display: none; }

.ws-project-card__live-icon {
    position: absolute;
    top: 50%; left: 50%;
    width: 56px; height: 56px;
    margin-top: -28px; margin-left: -28px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    border-radius: 999px;
    background: rgba(255 255 255 / 0.95);
    color: #111;
    opacity: 0;
    transform: translateY(8px) scale(0.92);
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 18px 40px -12px rgba(0 0 0 / 0.5);
}
.ws-project-card.is-live-default:hover .ws-project-card__live-icon,
.ws-project-card.is-live-default:focus-visible .ws-project-card__live-icon {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Modal chrome respects the same toggle */
[data-show-chrome="0"] .ws-projects-modal__embed-frame { display: none; }
[data-show-chrome="0"] .ws-projects-modal__embed-stage { border-radius: 0.75rem; }
.ws-project-card__img,
.ws-project-card__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.6s ease,
                filter 0.6s ease;
}
.ws-project-card__img {
    filter: grayscale(0.6) brightness(0.85);
}
.ws-project-card:hover .ws-project-card__img,
.ws-project-card:focus-visible .ws-project-card__img {
    transform: scale(1.06);
    filter: grayscale(0.05) brightness(1);
}
.ws-project-card__video {
    opacity: 0;
    pointer-events: none;
}
.ws-project-card.is-video-ready .ws-project-card__video {
    opacity: 1;
}
.ws-project-card.is-video-ready .ws-project-card__img {
    opacity: 0;
}

.ws-project-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(0 0 0 / 0) 35%,
        rgba(0 0 0 / 0.55) 75%,
        rgba(0 0 0 / 0.85) 100%);
    transition: opacity 0.6s ease;
    pointer-events: none;
    z-index: 1;
}

.ws-project-card__content {
    position: absolute;
    inset: auto 0 0 0;
    padding: clamp(1.25rem, 2vw, 2rem);
    z-index: 2;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.ws-project-card__cat {
    display: inline-block;
    width: max-content;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--theme-accent, #fff);
    font-weight: 600;
    opacity: 0.95;
}
.ws-project-card__index {
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.55;
    font-variant-numeric: tabular-nums;
}
.ws-project-card__title {
    margin: 0;
    font-size: clamp(1.4rem, 2.4vw, 2.1rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
    font-weight: 700;
}
.ws-project-card__tagline {
    margin: 0.25rem 0 0;
    font-size: 0.95rem;
    line-height: 1.45;
    color: rgba(255 255 255 / 0.78);
    max-width: 38ch;
    transform: translateY(8px);
    opacity: 0;
    transition: transform 0.6s ease, opacity 0.5s ease;
}
.ws-project-card:hover .ws-project-card__tagline,
.ws-project-card:focus-visible .ws-project-card__tagline {
    transform: translateY(0);
    opacity: 1;
}
.ws-project-card__cta {
    position: absolute;
    top: clamp(1rem, 2vw, 1.5rem);
    right: clamp(1rem, 2vw, 1.5rem);
    z-index: 3;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: #fff;
    background: rgba(0 0 0 / 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(255 255 255 / 0.18);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.ws-project-card:hover .ws-project-card__cta,
.ws-project-card:focus-visible .ws-project-card__cta {
    opacity: 1;
    transform: translateY(0);
}

/* ----- Layout: Cinematic Grid ------------------------------------------ */
/* Card aspect ratio is governed by --ws-card-aspect (set on section root). */

/* ----- Layout: Bento --------------------------------------------------- */

.ws-projects-bento {
    display: grid;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(220px, auto);
}
@media (min-width: 900px) {
    .ws-projects-bento {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: minmax(260px, auto);
    }
}
.ws-projects-bento .ws-project-card {
    grid-column: span 1;
    grid-row: span 1;
}
@media (min-width: 900px) {
    .ws-projects-bento .ws-project-card {
        grid-column: span 1;
        grid-row: span 1;
    }
    .ws-projects-bento .ws-project-card.ws-project-card--feature {
        grid-column: span 2;
        grid-row: span 2;
    }
}
.ws-projects-bento .ws-project-card__media {
    aspect-ratio: auto;
    height: 100%;
    min-height: 220px;
}
.ws-projects-bento .ws-project-card.ws-project-card--feature .ws-project-card__title {
    font-size: clamp(2rem, 3.4vw, 3rem);
}

/* ----- Layout: Marquee Reveal ----------------------------------------- */

.ws-projects-reveal {
    position: relative;
    isolation: isolate;
}
.ws-projects-reveal__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(var(--text-base-rgb, 255 255 255) / 0.12);
}
.ws-projects-reveal__row {
    border-bottom: 1px solid rgba(var(--text-base-rgb, 255 255 255) / 0.12);
}
.ws-projects-reveal__trigger {
    appearance: none;
    background: none;
    border: 0;
    color: inherit;
    width: 100%;
    text-align: left;
    cursor: pointer;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: baseline;
    gap: clamp(1rem, 3vw, 2.5rem);
    padding: clamp(1.4rem, 2.8vw, 2.4rem) clamp(1rem, 2vw, 1.5rem);
    color: var(--text-base);
    font-family: inherit;
    transition: padding-left 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                color 0.4s ease;
}
.ws-projects-reveal__trigger:hover,
.ws-projects-reveal__trigger:focus-visible {
    color: var(--theme-accent);
    padding-left: clamp(1.5rem, 3.5vw, 3.5rem);
    outline: none;
}
.ws-projects-reveal__index {
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    opacity: 0.5;
    letter-spacing: 0.1em;
}
.ws-projects-reveal__title {
    font-size: clamp(1.6rem, 3.5vw, 3rem);
    line-height: 1;
    letter-spacing: -0.02em;
    font-weight: 700;
}
.ws-projects-reveal__cat {
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.6;
}
.ws-projects-reveal__arrow {
    font-size: 1.5rem;
    opacity: 0;
    transform: translateX(-12px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.ws-projects-reveal__trigger:hover .ws-projects-reveal__arrow,
.ws-projects-reveal__trigger:focus-visible .ws-projects-reveal__arrow {
    opacity: 1;
    transform: translateX(0);
}
.ws-projects-reveal__preview {
    position: fixed;
    top: 0;
    left: 0;
    width: clamp(220px, 22vw, 360px);
    aspect-ratio: 4 / 5;
    margin: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: 0 30px 60px -20px rgba(0 0 0 / 0.6);
    transform: translate3d(-50%, -50%, 0) scale(0.92);
    opacity: 0;
    transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 60;
}
.ws-projects-reveal__preview.is-active {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(1);
}
.ws-projects-reveal__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (hover: none) {
    /* Touch — hide cursor preview, fall back to row tap */
    .ws-projects-reveal__preview { display: none; }
}

/* ----- Layout: Pinned Scroll-Stack ------------------------------------ */

.ws-projects-stack {
    position: relative;
    margin-inline: calc(-1 * clamp(1rem, 4vw, 3rem));
}
.ws-projects-stack__track {
    display: flex;
    gap: clamp(1rem, 2vw, 2rem);
    padding: clamp(1rem, 4vw, 3rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.ws-projects-stack__panel {
    flex: 0 0 min(80vw, 720px);
    scroll-snap-align: center;
}
.ws-projects-stack__panel .ws-project-card {
    height: 100%;
}
.ws-projects-stack__panel .ws-project-card__media {
    /* Stack panels honour the section-level aspect ratio too. */
    aspect-ratio: var(--ws-card-aspect, 16 / 10);
}
/* GSAP-driven: when JS attaches `is-pinned`, switch to pinned horizontal */
.ws-projects-stack.is-pinned .ws-projects-stack__track {
    overflow: visible;
    flex-wrap: nowrap;
    will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
    .ws-projects-stack.is-pinned .ws-projects-stack__track {
        transform: none !important;
    }
}

/* ----- Modal ----------------------------------------------------------- */

.ws-projects-modal {
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
}
.ws-projects-modal::backdrop {
    background: rgba(5 6 12 / 0.78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.ws-projects-modal[open] {
    display: grid;
    place-items: center;
    inset: 0;
    position: fixed;
}
.ws-projects-modal__backdrop {
    position: fixed;
    inset: 0;
    background: transparent;
    border: 0;
    cursor: zoom-out;
    z-index: 0;
}
.ws-projects-modal__panel {
    position: relative;
    z-index: 1;
    /* Mobile: nearly full width. Desktop: 94vw (always ≥80% of screen, no
       hard pixel cap so it scales with monitor size). */
    width: 96vw;
    max-height: 94vh;
    background: var(--page-bg-surface, #0b0c10);
    color: var(--text-base, #fff);
    border-radius: 1.5rem;
    overflow: hidden auto;
    box-shadow: 0 60px 120px -30px rgba(0 0 0 / 0.7);
    display: grid;
    animation: ws-projects-modal-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@media (min-width: 900px) {
    .ws-projects-modal__panel {
        width: 94vw;
    }
}
@keyframes ws-projects-modal-in {
    from { transform: translateY(20px) scale(0.97); opacity: 0; }
    to   { transform: translateY(0)     scale(1);    opacity: 1; }
}

/* ---- Modal layout: STACKED (new default) -------------------------------
   Premium "browser-window with sidebar" layout.
   - Mobile: iframe takes ~80% of screen height, then hero (image or text-hero),
             then body. The whole panel scrolls so users can read the description
             and tap the live link below the website.
   - Desktop ≥900px: 2-col grid. Iframe fills the left column from top to bottom
             (giving the website maximum room). Hero sits top-right, body slides
             below it on the right rail and scrolls internally. */
.ws-projects-modal[data-layout="stacked"] .ws-projects-modal__panel {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    grid-template-areas:
        "embed"
        "hero"
        "body";
}
.ws-projects-modal[data-layout="stacked"] .ws-projects-modal__hero  { grid-area: hero; aspect-ratio: 16 / 10; }
.ws-projects-modal[data-layout="stacked"] .ws-projects-modal__embed { grid-area: embed; }
.ws-projects-modal[data-layout="stacked"] .ws-projects-modal__body  { grid-area: body; }

/* Mobile iframe height — ~80% of viewport so the live site is the focal point */
.ws-projects-modal[data-layout="stacked"] .ws-projects-modal__embed-stage {
    aspect-ratio: auto;
    height: 80dvh;
    height: 80vh; /* fallback for browsers without dvh */
}

@media (min-width: 900px) {
    /* Desktop: embed (live website) is the dominant element on the left.
       Right rail shows the hero (image / text-hero) + body content.
       Panel is FORCED to 94vh tall (not just max-height) so the iframe column
       gets full vertical space — otherwise the panel would shrink to fit
       right-rail content and the website would look like a slit. */
    .ws-projects-modal[data-layout="stacked"] .ws-projects-modal__panel {
        grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "embed hero"
            "embed body";
        height: 94vh;
        max-height: 94vh;
        overflow: hidden; /* desktop: body handles internal scroll, panel doesn't */
    }
    .ws-projects-modal[data-layout="stacked"] .ws-projects-modal__embed {
        align-self: stretch;
        margin: clamp(1rem, 2vw, 1.5rem);
        margin-right: 0;
        display: flex;
        flex-direction: column;
        min-height: 0;
        height: 100%;
    }
    .ws-projects-modal[data-layout="stacked"] .ws-projects-modal__embed-stage {
        aspect-ratio: auto;
        flex: 1;
        height: auto;
        min-height: 0;
    }
    .ws-projects-modal[data-layout="stacked"] .ws-projects-modal__hero {
        margin: clamp(1rem, 2vw, 1.5rem);
        margin-bottom: 0;
        margin-right: clamp(3rem, 5vw, 4rem); /* keep clear of close button */
        border-radius: 0.75rem;
        overflow: hidden;
        aspect-ratio: 16 / 10;
    }
    .ws-projects-modal[data-layout="stacked"] .ws-projects-modal__body {
        overflow-y: auto;
        padding: clamp(1rem, 1.8vw, 1.4rem);
        padding-top: 1rem;
        gap: 0.9rem;
    }
    /* Tighter type for the narrower right rail */
    .ws-projects-modal[data-layout="stacked"] .ws-projects-modal__title {
        font-size: clamp(1.25rem, 1.7vw, 1.7rem);
    }
    .ws-projects-modal[data-layout="stacked"] .ws-projects-modal__tagline {
        font-size: 0.92rem;
    }
    .ws-projects-modal[data-layout="stacked"] .ws-projects-modal__chips li {
        font-size: 0.66rem;
    }
    .ws-projects-modal[data-layout="stacked"] .ws-projects-modal__desc {
        font-size: 0.9rem;
        line-height: 1.55;
    }
    /* Live website CTA pinned at the bottom of the right rail body */
    .ws-projects-modal[data-layout="stacked"] .ws-projects-modal__cta {
        font-size: 0.88rem;
        padding: 0.7rem 1.1rem;
    }

    /* Text hero in the right rail: scaled down so big titles don't overflow */
    .ws-projects-modal[data-layout="stacked"].is-text-hero .ws-projects-modal__hero {
        aspect-ratio: auto;
        min-height: 180px;
    }
    .ws-projects-modal[data-layout="stacked"].is-text-hero .ws-projects-modal__text-hero {
        padding: clamp(1.25rem, 2vw, 1.75rem);
        gap: 0.65rem;
    }
    .ws-projects-modal[data-layout="stacked"].is-text-hero .ws-projects-modal__text-hero-title {
        font-size: clamp(1.4rem, 1.9vw, 1.9rem);
        max-width: 100%;
    }
    .ws-projects-modal[data-layout="stacked"].is-text-hero .ws-projects-modal__text-hero-tagline {
        font-size: 0.92rem;
    }
    .ws-projects-modal[data-layout="stacked"].is-text-hero .ws-projects-modal__text-hero-chips li {
        font-size: 0.62rem;
    }
}

/* ---- Modal layout: SPLIT (legacy side-by-side) -------------------------
   Hero on the left, embed + body on the right. */
.ws-projects-modal[data-layout="split"] .ws-projects-modal__panel {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "hero"
        "embed"
        "body";
}
.ws-projects-modal[data-layout="split"] .ws-projects-modal__hero  { grid-area: hero;  min-height: 240px; aspect-ratio: 16 / 10; }
.ws-projects-modal[data-layout="split"] .ws-projects-modal__embed { grid-area: embed; }
.ws-projects-modal[data-layout="split"] .ws-projects-modal__body  { grid-area: body; }
.ws-projects-modal[data-layout="split"] .ws-projects-modal__embed-stage { aspect-ratio: 16 / 10; }
@media (min-width: 900px) {
    .ws-projects-modal[data-layout="split"] .ws-projects-modal__panel {
        grid-template-columns: 1.05fr 1fr;
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "hero embed"
            "hero body";
    }
    .ws-projects-modal[data-layout="split"] .ws-projects-modal__hero {
        aspect-ratio: auto;
        height: 100%;
    }
}
.ws-projects-modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 4;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(255 255 255 / 0.18);
    background: rgba(0 0 0 / 0.4);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}
.ws-projects-modal__close:hover { background: rgba(0 0 0 / 0.7); transform: rotate(90deg); }
.ws-projects-modal__hero {
    position: relative;
    overflow: hidden;
    background: #000;
    min-height: 240px;
}
.ws-projects-modal__img,
.ws-projects-modal__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ws-projects-modal__body {
    padding: clamp(1.4rem, 2.5vw, 2.4rem);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.ws-projects-modal__head { display: flex; flex-direction: column; gap: 0.4rem; }
.ws-projects-modal__cat {
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--theme-accent);
    font-weight: 600;
}
.ws-projects-modal__title {
    margin: 0;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--text-base);
}
.ws-projects-modal__tagline {
    margin: 0;
    font-size: 1rem;
    color: rgba(var(--text-base-rgb, 255 255 255) / 0.7);
    line-height: 1.5;
}
.ws-projects-modal__chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.ws-projects-modal__chips li {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    padding: 0.4em 0.85em;
    border-radius: 999px;
    background: rgba(var(--text-base-rgb, 255 255 255) / 0.06);
    border: 1px solid rgba(var(--text-base-rgb, 255 255 255) / 0.12);
    color: rgba(var(--text-base-rgb, 255 255 255) / 0.8);
    text-transform: uppercase;
}
.ws-projects-modal__desc {
    font-size: 0.96rem;
    line-height: 1.6;
    color: rgba(var(--text-base-rgb, 255 255 255) / 0.85);
}

/* Embed = unified "browser window" card: chrome bar + iframe stage in one frame */
.ws-projects-modal__embed {
    margin: 0 clamp(1rem, 2.5vw, 2rem);
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid rgba(var(--text-base-rgb, 255 255 255) / 0.1);
    box-shadow:
        0 1px 0 rgba(255 255 255 / 0.04) inset,
        0 18px 50px -16px rgba(0 0 0 / 0.5);
    background: rgba(0 0 0 / 0.4);
}
.ws-projects-modal__embed-frame {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.85rem;
    padding: 0.55rem 0.85rem;
    background: linear-gradient(180deg, rgba(35 36 42 / 0.95), rgba(22 23 28 / 0.95));
    border-bottom: 1px solid rgba(255 255 255 / 0.06);
    font-size: 0.72rem;
    color: rgba(255 255 255 / 0.7);
}
.ws-projects-modal__embed-dots { display: inline-flex; gap: 0.3rem; }
.ws-projects-modal__embed-dots i {
    width: 11px; height: 11px; border-radius: 999px; display: inline-block;
    background: rgba(255 255 255 / 0.2);
    box-shadow: inset 0 0 0 0.5px rgba(0 0 0 / 0.3);
}
.ws-projects-modal__embed-dots i:first-child { background: #ff5f57; }
.ws-projects-modal__embed-dots i:nth-child(2) { background: #febc2e; }
.ws-projects-modal__embed-dots i:nth-child(3) { background: #28c840; }
.ws-projects-modal__embed-url {
    justify-self: center;
    min-width: 0;
    max-width: 100%;
    padding: 0.3rem 0.95rem;
    border-radius: 999px;
    background: rgba(0 0 0 / 0.35);
    border: 1px solid rgba(255 255 255 / 0.05);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.01em;
    color: rgba(255 255 255 / 0.78);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ws-projects-modal__embed-frame::after {
    /* Right-side spacer so the URL pill stays optically centered */
    content: "";
    width: 50px;
}
.ws-projects-modal__embed-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #000;
}
.ws-projects-modal__iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.ws-projects-modal__embed-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: rgba(0 0 0 / 0.65);
    color: #fff;
    text-align: center;
    padding: 1.5rem;
}
.ws-projects-modal__embed-fallback-link {
    color: #fff;
    border: 1px solid rgba(255 255 255 / 0.5);
    padding: 0.6rem 1.2rem;
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.85rem;
}
.ws-projects-modal__embed-fallback-link:hover {
    background: #fff;
    color: #000;
}

.ws-projects-modal__actions { margin-top: auto; display: flex; gap: 0.75rem; }
.ws-projects-modal__cta {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.4rem;
    border-radius: 999px;
    background: var(--theme-accent);
    color: var(--page-bg, #000);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ws-projects-modal__cta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -10px rgba(0 0 0 / 0.4); }

/* ---- Modal: no-image fallback ("text hero")
   Replaces the hero image with a magazine-style intro panel showing the
   project's title, tagline, category and services. The body section below
   the embed loses its duplicate header (head + chips), keeping only the
   description and CTA so info isn't repeated. -------------------------- */
.ws-projects-modal__text-hero {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    padding: clamp(1.75rem, 5vw, 3.5rem);
    background:
        radial-gradient(80% 80% at 85% 15%, rgba(var(--text-base-rgb, 255 255 255) / 0.08), transparent 60%),
        radial-gradient(70% 70% at 15% 85%, rgba(var(--text-base-rgb, 255 255 255) / 0.05), transparent 60%),
        linear-gradient(165deg, rgba(var(--text-base-rgb, 255 255 255) / 0.02), rgba(0 0 0 / 0.4));
}
.ws-projects-modal__text-hero::after {
    /* subtle hairline accent in the corner — magazine-y */
    content: "";
    position: absolute;
    top: clamp(1rem, 3vw, 2rem);
    right: clamp(1rem, 3vw, 2rem);
    width: 60px;
    height: 1px;
    background: var(--theme-accent, #fff);
    opacity: 0.7;
}
.ws-projects-modal__text-hero-cat {
    display: inline-block;
    width: max-content;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--theme-accent, #fff);
    padding: 0.35em 0.95em;
    border-radius: 999px;
    background: rgba(var(--text-base-rgb, 255 255 255) / 0.05);
    border: 1px solid rgba(var(--text-base-rgb, 255 255 255) / 0.12);
}
.ws-projects-modal__text-hero-title {
    margin: 0;
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    line-height: 1;
    letter-spacing: -0.025em;
    font-weight: 700;
    color: var(--text-base, #fff);
    max-width: 22ch;
}
.ws-projects-modal__text-hero-tagline {
    margin: 0;
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    line-height: 1.45;
    color: rgba(var(--text-base-rgb, 255 255 255) / 0.72);
    max-width: 50ch;
}
.ws-projects-modal__text-hero-chips {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.ws-projects-modal__text-hero-chips li {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    padding: 0.4em 0.85em;
    border-radius: 999px;
    background: rgba(var(--text-base-rgb, 255 255 255) / 0.06);
    border: 1px solid rgba(var(--text-base-rgb, 255 255 255) / 0.14);
    color: rgba(var(--text-base-rgb, 255 255 255) / 0.85);
    text-transform: uppercase;
}

/* When text hero is active, the hero loses its strict 16/10 ratio so it can
   breathe with the text content. The body's duplicate header/chips are hidden. */
.ws-projects-modal.is-text-hero .ws-projects-modal__hero {
    aspect-ratio: auto;
    min-height: clamp(220px, 32vh, 360px);
}
.ws-projects-modal.is-text-hero .ws-projects-modal__head,
.ws-projects-modal.is-text-hero .ws-projects-modal__chips {
    display: none;
}

/* In SPLIT layout on wide viewports, the hero stretches to full panel height —
   text hero adapts to that gracefully too. */
@media (min-width: 900px) {
    .ws-projects-modal[data-layout="split"].is-text-hero .ws-projects-modal__hero {
        min-height: 100%;
    }
}

/* Body lock when modal open (set by JS via .ws-modal-open on <html>) */
html.ws-projects-modal-open { overflow: hidden; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ws-project-card,
    .ws-project-card__img,
    .ws-project-card__video,
    .ws-project-card__overlay,
    .ws-project-card__tagline,
    .ws-project-card__cta,
    .ws-projects-reveal__trigger,
    .ws-projects-reveal__preview,
    .ws-projects-modal__panel {
        transition: none !important;
        animation: none !important;
    }
}