/* Styles for Map component */
@layer components {
    .map {
        display: flex;
        flex-direction: column;
        gap: var(--space-2xs);

        & .map__figure {
            position: relative;
            margin: 0;
            aspect-ratio: var(--map-ratio, 4 / 3);
            border: 1px solid var(--color-border);
            background-color: var(--color-surface-raised);
            overflow: hidden;
        }

        & .map__image {
            inline-size: 100%;
            block-size: 100%;
            object-fit: cover;
            /* Dark-first: the tiles arrive as a light paper map, this pulls them
               into the concrete-and-ring palette. The OpenStreetMap attribution
               the licence requires is inside the picture and stays readable. */
            filter: invert(1) hue-rotate(180deg) grayscale(0.55) contrast(0.9) brightness(0.85);
        }

        /* The picture is centred on the club, so the pin tip sits dead centre. */
        & .map__marker {
            position: absolute;
            inset-block-start: 50%;
            inset-inline-start: 50%;
            translate: -50% -100%;
            font-size: 2.25rem;
            line-height: 1;
            color: var(--color-accent);
            filter: drop-shadow(0 4px 10px rgb(0 0 0 / 45%));
        }

        /* Anchored at the top: the bottom right corner belongs to the map
           attribution and must not be covered. */
        & .map__caption {
            position: absolute;
            inset-inline: 0;
            inset-block-start: 0;
            padding: var(--space-2xs) var(--space-s);
            background: linear-gradient(to bottom, var(--color-surface-raised) 55%, transparent);
        }

        & .map__address {
            font-weight: 600;
        }

        & .map__external {
            display: inline-flex;
            align-items: center;
            gap: var(--space-3xs);
            align-self: start;
            font-size: var(--size-step--1);
            color: var(--color-text-muted);
            text-decoration-color: var(--color-border-accent);

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

    /* On concrete the tiles keep their own colours, only toned down so the gold
       marker stays the loudest thing in the frame. */
    @media (prefers-color-scheme: light) {
        .map .map__image {
            filter: grayscale(0.35) contrast(0.95);
        }
    }
}