/* ── Tile list ───────────────────────────────────────────────────────────── */

.tile-list {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;

    .tile {
        border-radius: 8px;
        padding: 15px;
        background-color: var(--background-secondary-color);
        box-sizing: border-box;
        transition: box-shadow 175ms;

        &:hover {
            box-shadow: 0 0 10px var(--shadow-color);
        }

        &:active {
            box-shadow: 0 0 5px var(--shadow-color);
        }

        &.tile-small {
            min-width: 250px;
            height: 150px;
            background-size: cover;
            background-position: center;
            display: flex;
            flex-basis: calc(25% - 11.25px);
            align-items: flex-end;
            color: #ffffff;
            text-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
            font-weight: bold;
            font-size: 18px;
            text-decoration: none;

            @media (max-width: 992px) {
                flex-basis: calc(50% - 7.5px);
            }

            @media (max-width: 480px) {
                flex-basis: 100%;
            }

            &.tiny {
                height: 120px;
                max-width: 200px;
            }
        }

        &.tile-large {
            min-width: 250px;
            height: 525px;
            background-size: cover;
            background-position: center;
            display: flex;
            flex-direction: column;
            flex-basis: calc(33.333% - 11.25px);
            color: var(--color);
            text-decoration: none;

            @media (max-width: 992px) {
                flex-basis: calc(50% - 7.5px);
            }

            @media (max-width: 480px) {
                flex-basis: 100%;
            }

            .tile-image {
                width: calc(100% + 30px);
                min-height: 250px;
                height: 250px;
                margin: -15px -15px 0 -15px;
                border-radius: 8px 8px 0 0;
                object-fit: cover;
                object-position: top;
            }

            .tile-placeholder-image {
                width: calc(100% + 30px);
                min-height: 250px;
                height: 250px;
                margin: -15px -15px 0 -15px;
                border-radius: 8px 8px 0 0;
                display: flex;
                align-items: center;
                justify-content: center;
                background: url('/images/tile-image-placeholder.jpg') center center no-repeat;
                background-size: cover;

                .tile-title-initials {
                    font-size: 100px;
                    font-family: 'Rye', cursive, sans-serif;
                    color: #ffffff;
                    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8);
                    user-select: none;
                }
            }

            .tile-title {
                margin-bottom: 0;
            }

            .tile-description {
                font-size: 15px;
                overflow: hidden;
                height: 200px;
            }

            .tile-footer-link {
                text-align: right;

                span {
                    color: var(--link-color);
                    font-weight: bold;

                    &:hover {
                        color: var(--color);
                    }
                }
            }
        }
    }
}