/* Styles for Contact component */
@layer components {
    .contact {
        & .contact__heading {
            margin-block-end: var(--space-xl);
        }

        & .contact__columns {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: var(--space-xl);
            align-items: start;
        }

        & .contact__list {
            display: flex;
            flex-direction: column;
            gap: var(--space-m);
            margin: 0;
        }

        & .contact__label {
            display: flex;
            align-items: center;
            gap: var(--space-2xs);
            font-size: var(--size-step--1);
            font-weight: 600;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--color-text-muted);

            & svg {
                font-size: 1.15em;
                color: var(--color-accent);
            }
        }

        & .contact__value {
            margin: 0;
            margin-block-start: var(--space-3xs);
            /* Align the value with the label text, past the icon. */
            padding-inline-start: calc(1.15em + var(--space-2xs));
            line-height: 1.5;
        }

        & .contact__address {
            font-style: normal;
        }

        & .contact__link {
            text-decoration-color: var(--color-border-accent);

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

        /* The middle column is the club's signature, so it is centred and quiet. */
        & .contact__brand {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--space-s);
            text-align: center;
        }

        & .contact__logo {
            --logo-height: clamp(6rem, 14vw, 8.5rem);
        }

        & .contact__claim {
            font-family: var(--font-display);
            font-size: var(--size-step-1);
            letter-spacing: 0.05em;
            text-transform: uppercase;
            line-height: 1;
        }
    }

    /* Below 48rem the order is contact -> map -> logo: the useful things first,
       the signature last. */
    @media (width < 48rem) {
        .contact {
            & .contact__details { order: 1; }
            & .contact__map { order: 2; }
            & .contact__brand { order: 3; }
        }
    }

    @media (width >= 48rem) {
        .contact .contact__columns {
            grid-template-columns: repeat(2, 1fr);
        }

        .contact .contact__map {
            grid-column: 1 / -1;
        }
    }

    @media (width >= 64rem) {
        .contact .contact__columns {
            grid-template-columns: 1fr 0.9fr 1.1fr;
            gap: var(--space-l);
        }

        .contact .contact__map {
            grid-column: auto;
        }
    }
}