/* =================================================================== RELATED section css =================================================================== */
/* Portrait image cards with a dark bottom fade and a corner arrow. Used for
   category lists, project galleries and "other pages in this section". */
.related {
    & .related__grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--g30);
    }

    &.related--4 .related__grid { grid-template-columns: repeat(4, 1fr); }
    &.related--2 .related__grid { grid-template-columns: repeat(2, 1fr); }

    & .related__card {
        position: relative;
        display: flex; align-items: flex-end;
        min-height: 440px;
        border-radius: var(--r-lg);
        overflow: hidden;

        &::after { position: absolute; inset: 0; background: var(--card-shade); content: ''; }
        &:hover .related__img { transform: scale(1.06); }
        &:hover .notch-badge { background: var(--primary); color: var(--white); }
        &:has(.related__link):hover .notch-badge { transform: rotate(45deg); }
    }

    & .related__img {
        position: absolute; inset: 0;
        width: 100%; height: 100%;
        object-fit: cover;
        transition: transform .6s ease;
    }

    & .related__body {
        position: relative;
        z-index: 1;
        display: flex; flex-direction: column; align-items: flex-start;
        gap: var(--sp10);
        padding: var(--sp30);
    }

    & .related__title {
        font-size: var(--f25);
        color: var(--white);
    }

    & .related__link::after { position: absolute; inset: 0; z-index: 2; content: ''; }

    & .related__text { color: var(--white-muted); }

    & .related__arrow .notch-badge { width: 55px; height: 55px; }

    & .related__note {
        max-width: 760px;
        margin: var(--sp35) auto 0;
        text-align: center;
    }
}

/* =================================================================== RELATED responsive =================================================================== */
@media (max-width: 1199.98px) {
    .related {
        &.related--4 .related__grid { grid-template-columns: repeat(2, 1fr); }
    }
}

@media (max-width: 991.98px) {
    .related {
        & .related__grid { grid-template-columns: repeat(2, 1fr); }
        & .related__card { min-height: 380px; }
    }
}

@media (max-width: 575.98px) {
    .related {
        & .related__grid,
        &.related--2 .related__grid,
        &.related--4 .related__grid { grid-template-columns: 1fr; }
        & .related__card { min-height: 340px; }
    }
}