@font-face {
    font-family: 'Brandon Grotesque';
    src: url('/wp-content/themes/tacobell/assets/fonts/Brandon-Grotesque/BrandonGrotesque-Black.woff') format('woff');
    font-style: normal;
    font-weight: bold;
}

article.location {
    background: url('https://locations.tacobell.co.uk/permanent-b0b701/assets/images/hero.9266f3de.jpg') rgba(0, 0, 0, 0.75);
    background-blend-mode: multiply;
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
    display: grid;
    gap: 2rem;
    grid-template-areas:
        'name'
        'address'
        'buttons'
        'hours';
    padding: 2rem;
    width: 100%;

    h2 {
        margin-top: unset;
        text-transform: uppercase;
    }

    .location__name {
        grid-area: name;
        width: 100%;

        h1.location__name--brand {
            background-image: linear-gradient(1turn, transparent, transparent 26%, #501098 26.1%, #501098 36%, transparent 36.1%, transparent);
            font-family: 'Brandon Grotesque', sans-serif;
            font-weight: bold;
            font-size: 6rem;
            margin: 0;
            padding: 0;
            line-height: 1;
            text-transform: uppercase;
            white-space: nowrap;
            width: min-content;
        }

        .location__name--geo {
            display: none;
            font-size: large;
            font-weight: bold;
            text-transform: uppercase;
        }
    }

    .location__address {
        font-size: 2rem;
        grid-area: address;
    }

    .location__buttons {
        grid-area: buttons;

        .button {
            background: white;
            border: 2px solid #501098;
            color: #501098;
            cursor: pointer;
            display: block;
            font-size: 2rem;
            font-weight: bold;
            margin-bottom: 1rem;
            padding: 2rem;
            white-space: nowrap;
            width: min-content;

            &:hover {
                background: #501098;
                color: white;
            }
        }
    }

    .location__hours {
        grid-area: hours;

        table {
            margin-bottom: 1rem;

            th,
            td {
                padding: 0.5rem 1rem 0.5rem 0;
            }
        }

        p {
            color: lightgray;
        }
    }
}

.location__map {
    aspect-ratio: 4/3;
    width: 100%;
}

.toofar {
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 48rem;
    width: 100%;

    h2 {
        font-family: 'Josefin Sans', sans-serif;
        font-size: 4rem;
        font-weight: bold;
        text-transform: uppercase;
        margin-top: 25px;
        margin-bottom: 15px;
    }

    h4 {
        text-transform: uppercase;
    }
}

@media (min-width: 991px) {
    article.location {
        gap: 4rem;
        grid-template-areas:
            'name name'
            'address hours'
            'buttons hours';
        padding: 4rem;

        .location__name {
            h1.location__name--brand {
                font-size: 8rem;
            }

            .location__name--geo {
                display: block;
            }
        }
    }

    .location__map {
        aspect-ratio: 16/9;
    }
}