/* Location & Hours page styles */

#location-hours-page {
    --location-hero-text-max: 640px;
    --location-section-gap: var(--space-lg);
    --location-card-gap: var(--space-md);
    --location-grid-gap: var(--space-lg);
    --location-grid-gap-desktop: var(--space-xl);
}

/* Hero */
.location-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: flex-end;
    background-color: var(--color-ink);
    overflow: hidden;
}

.location-hero__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.location-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.location-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(14, 16, 18, 0.15) 0%, rgba(14, 16, 18, 0.55) 55%, rgba(14, 16, 18, 0.9) 100%);
    pointer-events: none;
}

.location-hero__content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding-mobile);
    padding-block-end: var(--space-3xl);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
    text-align: left;
}

.location-hero__eyebrow {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--text-caption);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caption);
    color: var(--color-cyan);
    margin: 0;
}

.location-hero__title {
    font-size: clamp(2.5rem, 8vw, var(--text-display));
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
    color: var(--color-fog);
    max-width: var(--location-hero-text-max);
    margin: 0;
}

.location-hero__subhead {
    font-size: var(--text-body-large);
    line-height: var(--leading-body);
    color: var(--color-fog);
    max-width: var(--location-hero-text-max);
    margin: 0;
}

.location-hero__address {
    font-style: normal;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--text-h4);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-ash);
    margin: 0;
    padding-block-start: var(--space-xs);
    border-block-start: 2px solid var(--color-ember);
    max-width: var(--location-hero-text-max);
}

.location-hero__hours,
.location-hero__age {
    font-size: var(--text-body-small);
    line-height: var(--leading-small);
    color: var(--color-ash);
    margin: 0;
}

.location-hero__age {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-target-min);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-badge);
    background-color: var(--color-ember);
    color: var(--color-ink);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caption);
    font-size: var(--text-caption);
}

/* Address & Contact Snapshot */
.location-snapshot__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--location-grid-gap);
}

.location-snapshot__card {
    display: flex;
    flex-direction: column;
    gap: var(--location-card-gap);
    min-width: 0;
}

.location-snapshot__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-card);
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
}

.location-snapshot__icon--cyan {
    background-color: var(--color-cyan);
    color: var(--color-ink);
}

.location-snapshot__icon--ember {
    background-color: var(--color-ember);
    color: var(--color-ink);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
}

.location-snapshot__title {
    margin-block-end: 0;
}

.location-snapshot__address,
.location-snapshot__age-copy,
.location-snapshot__age-detail {
    max-width: 50ch;
    margin: 0;
}

.location-snapshot__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.location-snapshot__list a {
    color: var(--color-cyan);
    text-decoration: none;
}

.location-snapshot__list a:hover {
    color: var(--color-amber);
    text-decoration: underline;
}

.location-snapshot__age-detail {
    color: var(--color-ash);
    font-size: var(--text-body-small);
}

/* Opening Hours */
.opening-hours__heading,
.getting-here__heading,
.venue-atmosphere__heading,
.responsible-gaming__heading,
.plan-visit__heading {
    margin-block-end: var(--space-lg);
}

.opening-hours__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--location-grid-gap);
}

.opening-hours__column {
    display: flex;
    flex-direction: column;
    gap: var(--location-card-gap);
    min-width: 0;
}

.opening-hours__column--smokehouse {
    border-block-start: 3px solid var(--color-ember);
}

.opening-hours__column--casino {
    border-block-start: 3px solid var(--color-cyan);
}

.opening-hours__column-title {
    margin-block-end: 0;
}

.opening-hours__summary {
    max-width: 60ch;
    margin: 0;
}

.opening-hours__details {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    color: var(--color-ash);
}

/* Getting Here */
.getting-here__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--location-grid-gap);
}

.getting-here__card {
    display: flex;
    flex-direction: column;
    gap: var(--location-card-gap);
    min-width: 0;
}

.getting-here__icon {
    font-size: 2rem;
    line-height: 1;
    color: var(--color-cyan);
}

.getting-here__card-title {
    margin-block-end: 0;
}

.getting-here__copy {
    max-width: 50ch;
    margin: 0;
}

.getting-here__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    color: var(--color-ash);
}

/* Venue Atmosphere */
.venue-atmosphere__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--location-grid-gap);
    align-items: center;
}

.venue-atmosphere__content {
    display: flex;
    flex-direction: column;
    gap: var(--location-card-gap);
    min-width: 0;
}

.venue-atmosphere__copy {
    max-width: 60ch;
    margin: 0;
}

.venue-atmosphere__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    color: var(--color-ash);
}

.venue-atmosphere__media {
    min-width: 0;
}

.venue-atmosphere__media img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-card);
    border: var(--border-default);
}

/* Responsible Gaming Reminder */
.responsible-gaming__card {
    max-width: 800px;
    margin-inline: auto;
    background-color: var(--color-charcoal);
    border: 2px solid var(--color-cyan);
    border-radius: var(--radius-card);
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    text-align: center;
}

.responsible-gaming__heading {
    margin-block-end: 0;
}

.responsible-gaming__copy,
.responsible-gaming__support,
.responsible-gaming__link {
    max-width: 70ch;
    margin: 0;
}

.responsible-gaming__support,
.responsible-gaming__link {
    color: var(--color-ash);
}

.responsible-gaming__support a,
.responsible-gaming__link a {
    color: var(--color-cyan);
}

.responsible-gaming__support a:hover,
.responsible-gaming__link a:hover {
    color: var(--color-amber);
}

/* Plan Your Visit */
.plan-visit {
    background-color: var(--color-charcoal);
    position: relative;
}

.plan-visit::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29' opacity='0.02'/%3E%3C/svg%3E");
    pointer-events: none;
}

.plan-visit__container {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    text-align: center;
}

.plan-visit__heading {
    margin-block-end: 0;
}

.plan-visit__copy,
.plan-visit__detail {
    max-width: 70ch;
    margin: 0;
}

.plan-visit__detail {
    color: var(--color-ash);
    font-size: var(--text-body-small);
}

.plan-visit__cta {
    margin-block-start: var(--space-sm);
}

/* Responsive */
@media (min-width: 640px) {
    .location-hero__content {
        padding-inline: var(--container-padding-mobile);
        padding-block-end: var(--space-4xl);
    }

    .location-snapshot__grid,
    .opening-hours__grid,
    .getting-here__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .getting-here__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .venue-atmosphere__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--location-grid-gap-desktop);
    }

}

@media (min-width: 768px) {
    .location-hero {
        min-height: 80vh;
    }

    .location-hero__content {
        padding-inline: var(--container-padding-desktop);
        padding-block-end: var(--space-4xl);
    }

    .location-snapshot__grid,
    .opening-hours__grid,
    .getting-here__grid,
    .venue-atmosphere__grid {
        gap: var(--location-grid-gap-desktop);
    }

}

@media (min-width: 1024px) {
    .location-hero__content {
        padding-inline: var(--container-padding-desktop);
    }

}

@media (min-width: 1280px) {
    .location-hero__content {
        padding-inline: var(--container-padding-desktop);
    }

}

@media (max-width: 639px) {
    .location-hero {
        min-height: 100vh;
    }

    .location-hero__content {
        padding-inline: var(--container-padding-mobile);
        padding-block-end: var(--space-3xl);
    }

    .location-snapshot__grid,
    .opening-hours__grid,
    .getting-here__grid,
    .venue-atmosphere__grid {
        grid-template-columns: 1fr;
    }


    .venue-atmosphere__media {
        margin-block-start: var(--space-md);
    }
}

@media (prefers-reduced-motion: reduce) {
    .location-hero__content,
    .venue-atmosphere__media img {
        animation: none !important;
        transition: none !important;
    }
}

/* Fade-in animation for hero */
@keyframes location-hero-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.location-hero__content {
    animation: location-hero-fade-in 600ms ease-out both;
}

/* Scroll fade-in for venue image */
.venue-atmosphere__media img {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 400ms ease-out, transform 400ms ease-out;
}

.venue-atmosphere__media img.is-visible {
    opacity: 1;
    transform: translateY(0);
}