/* Projects hub: two phone screenshots side by side in a card image area */
.card-media.phone-pair {
    display: flex;
    justify-content: center;
    gap: 16px;
    aspect-ratio: 16 / 10;
    padding: 24px 24px 0;
    background: var(--blue-tint);
}

.card-media.phone-pair img {
    width: 34%;
    height: auto;
    aspect-ratio: auto;
    align-self: flex-start;
    border: 1px solid var(--line-strong);
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
}

/* Banner under the projects: main work on the left, what I build on the right */
.work-banner {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 40px;
    padding: 36px 40px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.has-dot-logo .work-banner {
    background: var(--glass);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
}

/* Four-colour rule from the logo along the top edge */
.work-banner::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    background: linear-gradient(90deg,
        var(--blue) 0 25%, var(--purple) 25% 50%,
        var(--orange) 50% 75%, var(--green) 75% 100%);
}

.work-main h2 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); margin-bottom: 12px; }
.work-main p { color: var(--muted); }

.work-side {
    padding-left: 40px;
    border-left: 1px solid var(--line);
}

.work-side h3 { font-size: 1rem; margin-bottom: 16px; }

.work-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }

.work-list li {
    position: relative;
    padding-left: 22px;
    display: grid;
    gap: 2px;
}

/* A square in the next logo colour before each item */
.work-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--dot, var(--blue));
}

.work-list li:nth-child(2) { --dot: var(--purple); }
.work-list li:nth-child(3) { --dot: var(--orange); }
.work-list li:nth-child(4) { --dot: var(--green); }

.work-list strong { color: var(--ink); font-weight: 600; }
.work-list span { color: var(--muted); font-size: 0.95rem; }

@media (max-width: 860px) {
    .work-banner { grid-template-columns: 1fr; gap: 28px; padding: 32px 24px 28px; }
    .work-side { padding-left: 0; padding-top: 24px; border-left: 0; border-top: 1px solid var(--line); }
}