/* ── Project hero ────────────────────────────────────────────── */
.wd-hero { }

.wd-hero__left { width: 100%; }

.wd-title {
    margin-bottom: var(--_spacing---space--5);
    max-width: 18ch;
    font-size: clamp(2rem, 4.5vw, 4rem);
}

.wd-hero__meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--_spacing---space--4);
    flex-wrap: wrap;
}

.wd-tags {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.wd-tags li {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(0,0,0,0.45);
}

.wd-visit-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--swatch--dark-900);
    text-decoration: none;
    transition: gap 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
}
.wd-visit-link:hover { gap: 0.85rem; color: var(--swatch--brand-500); }

/* ── Images ──────────────────────────────────────────────────── */
.wd-image {
    background: var(--swatch--light-200);
    border-radius: var(--radius--main);
    overflow: hidden;
}
.wd-image--full {
    width: 100%;
    aspect-ratio: 16 / 7;
    margin-bottom: 0;
}
.wd-image--half {
    width: 100%;
    aspect-ratio: 4 / 3;
}

/* Parallax image — natural height (auto), starts at top:0,
   drifts upward on scroll. Container clips with overflow:hidden. */
.wd-image--full img,
.wd-image--half img {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    top: 0;
    will-change: transform;
}

/* ── Text block ──────────────────────────────────────────────── */
.wd-text-block { max-width: 60ch; }

.wd-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(0,0,0,0.35);
    margin: 0 0 var(--_spacing---space--3);
}

/* ── Split layout ────────────────────────────────────────────── */
.wd-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--_spacing---space--7);
    align-items: center;
}
.wd-split--reverse { direction: rtl; }
.wd-split--reverse > * { direction: ltr; }

@media (max-width: 767px) {
    .wd-split { grid-template-columns: 1fr; }
    .wd-split--reverse { direction: ltr; }
}

/* ── Stats ───────────────────────────────────────────────────── */
.wd-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--_spacing---space--6);
}
@media (max-width: 767px) {
    .wd-stats { grid-template-columns: repeat(2, 1fr); }
}

.wd-stat__number {
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--swatch--accent-500);
    margin: 0 0 0.5rem;
}
.wd-stat__label {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0;
}

/* end work-detail.css */

/* ── Challenge grid ──────────────────────────────────────────── */
.wd-challenges-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--_spacing---space--6) var(--_spacing---space--8);
}
@media (max-width: 767px) {
    .wd-challenges-grid { grid-template-columns: 1fr; gap: var(--_spacing---space--5); }
}

.wd-challenge-item {
    border-top: 1px solid var(--_theme---border);
    padding-top: var(--_spacing---space--4);
}

.wd-challenge-item__title {
    font-size: var(--_typography---font-size--h6);
    font-weight: 500;
    color: var(--swatch--dark-900);
    margin: 0 0 var(--_spacing---space--2);
    letter-spacing: -0.01em;
}

.wd-challenge-item__desc {
    font-size: var(--_typography---font-size--text-main);
    color: rgba(0,0,0,0.6);
    line-height: 1.6;
    margin: 0;
}

/* ── Solution grid ───────────────────────────────────────────── */
.wd-solution-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--_spacing---space--6) var(--_spacing---space--8);
}
@media (max-width: 767px) {
    .wd-solution-grid { grid-template-columns: 1fr; gap: var(--_spacing---space--5); }
}

.wd-solution-item {
    border-top: 1px solid rgba(255,255,255,0.15);
    padding-top: var(--_spacing---space--4);
}

.wd-solution-item__num {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.4);
    margin: 0 0 var(--_spacing---space--2);
}

.wd-solution-item__title {
    font-size: var(--_typography---font-size--h6);
    font-weight: 500;
    color: var(--swatch--accent-500);
    margin: 0 0 var(--_spacing---space--2);
    letter-spacing: -0.01em;
}

.wd-solution-item__desc {
    font-size: var(--_typography---font-size--text-main);
    color: rgba(255,255,255,0.65);
    line-height: 1.6;
    margin: 0;
}