/* POLY — Projects --------------------------------------------------------- */

.poly-projects__head {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(24px, 4vw, 72px);
    align-items: end;
    margin-bottom: clamp(40px, 4.4vw, 64px);
}

.poly-projects__title { max-width: 16ch; }
.poly-projects__intro { font-size: 1.0625rem; line-height: 1.72; }

/* ------------------------------------------------------------------ grid */

.poly-projects__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: clamp(96px, 10.4vw, 148px);
    gap: clamp(12px, 1.3vw, 20px);
}

.poly-project--large  { grid-column: span 7; grid-row: span 4; }
.poly-project--tall   { grid-column: span 5; grid-row: span 4; }
.poly-project--normal { grid-column: span 4; grid-row: span 3; }
.poly-project--wide   { grid-column: span 12; grid-row: span 2; }

.poly-project {
    position: relative;
    overflow: hidden;
    border-radius: var(--poly-radius-lg);
    background: var(--poly-mist-deep);
}

.poly-project__media {
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.poly .poly-project__media img {
    transition: transform 1.25s var(--poly-ease-out);
}

.poly-project:hover .poly-project__media img { transform: scale(1.055); }

.poly-project__overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: clamp(20px, 1.9vw, 30px);
    background: linear-gradient(180deg, rgba(11, 17, 48, 0) 0%, rgba(11, 17, 48, .82) 72%);
    color: var(--poly-white);
}

.poly-project__category {
    display: inline-flex;
    padding: .32em .8em;
    background: rgba(255, 255, 255, .16);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-radius: 100px;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.poly-project__name {
    margin-top: .7rem;
    font-family: var(--poly-font-display);
    font-size: clamp(1.05rem, 1.35vw, 1.3rem);
    font-weight: 600;
    letter-spacing: -.018em;
    line-height: 1.25;
    color: var(--poly-white);
    transform: translateY(4px);
    opacity: .92;
    transition: transform .5s var(--poly-ease-out), opacity .5s var(--poly-ease);
}

.poly-project:hover .poly-project__name { transform: none; opacity: 1; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 900px) {
    .poly-projects__head { grid-template-columns: 1fr; align-items: start; }
    .poly-projects__grid { grid-auto-rows: clamp(90px, 13vw, 130px); }
    .poly-project--large  { grid-column: span 12; grid-row: span 3; }
    .poly-project--tall   { grid-column: span 6; grid-row: span 3; }
    .poly-project--normal { grid-column: span 6; grid-row: span 2; }
}

@media (max-width: 560px) {
    .poly-projects__grid { grid-auto-rows: clamp(80px, 22vw, 110px); }
    .poly-project--large,
    .poly-project--tall,
    .poly-project--normal,
    .poly-project--wide { grid-column: span 12; grid-row: span 2; }
}