/* About page styles */
.about-page {
    overflow-x: hidden;
}

/* Hero */
.about-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    background-color: var(--color-charcoal-black);
    padding: var(--space-9) var(--container-padding);
    isolation: isolate;
}

.about-hero__media {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

.about-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.about-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.25));
}

.about-hero__content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    width: 100%;
    margin-inline: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

.about-hero__title {
    font-size: var(--text-h1);
    line-height: var(--leading-h1);
    color: var(--color-ivory);
    margin-block-end: 0;
    max-width: 16ch;
    text-wrap: balance;
}

.about-hero__lead {
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: var(--color-ivory);
    max-width: 60ch;
    margin-inline: auto;
    margin-block-end: 0;
}

.about-hero__details {
    list-style: none;
    padding-inline-start: 0;
    margin-block-end: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    color: rgba(245, 240, 230, 0.85);
}

.about-hero__details li {
    font-size: var(--text-small);
    line-height: var(--leading-small);
}

.about-hero__cta {
    margin-block-start: var(--space-2);
}

/* Our Story */
.about-story {
    padding-block: var(--space-8);
    background-color: var(--color-charcoal-black);
}

.about-story__inner {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-6);
    align-items: start;
}

.about-story__text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.about-story__heading {
    margin-block-end: 0;
    max-width: 18ch;
}

.about-story__paragraph {
    max-width: 65ch;
    margin-block-end: 0;
}

.about-story__quote {
    margin-block-end: 0;
    padding-inline-start: var(--space-4);
    border-inline-start: 3px solid var(--color-muted-gold);
    font-style: italic;
    color: var(--color-ivory);
    max-width: 55ch;
}

.about-story__quote p {
    margin-block-end: 0;
}

.about-story__figure {
    margin-block-end: 0;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--radius-medium);
}

.about-story__image {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-medium);
    transition: transform var(--transition-smooth);
}

.about-story__figure:hover .about-story__image {
    transform: scale(1.05);
}

.about-story__caption {
    margin-block-start: var(--space-2);
    color: rgba(245, 240, 230, 0.7);
}

/* Card Lounge */
.about-lounge {
    padding-block: var(--space-8);
    background-color: var(--color-graphite);
}

.about-lounge__heading {
    text-align: center;
    margin-block-end: var(--space-3);
}

.about-lounge__intro {
    text-align: center;
    max-width: 70ch;
    margin-inline: auto;
    margin-block-end: var(--space-6);
}

.about-lounge__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
}

.about-lounge__card {
    background-color: var(--color-charcoal-black);
    border: var(--border-subtle);
    border-radius: var(--radius-medium);
    padding: var(--space-4);
    box-shadow: var(--shadow-soft);
    transition: box-shadow var(--transition-smooth), transform var(--transition-smooth);
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.about-lounge__card:hover {
    box-shadow: var(--shadow-lifted);
    transform: translateY(-2px);
}

.about-lounge__card-title {
    margin-block-end: 0;
    color: var(--color-warm-amber);
}

.about-lounge__card-text {
    margin-block-end: 0;
    max-width: 70ch;
}

/* Restaurant Philosophy */
.about-philosophy {
    padding-block: var(--space-8);
    background-color: var(--color-charcoal-black);
}

.about-philosophy__inner {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--space-6);
    align-items: start;
}

.about-philosophy__figure {
    margin-block-end: 0;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--radius-medium);
}

.about-philosophy__image {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-medium);
    transition: transform var(--transition-smooth);
}

.about-philosophy__figure:hover .about-philosophy__image {
    transform: scale(1.05);
}

.about-philosophy__text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.about-philosophy__heading {
    margin-block-end: 0;
}

.about-philosophy__subheading {
    margin-block-end: 0;
    color: var(--color-warm-amber);
}

.about-philosophy__paragraph {
    max-width: 65ch;
    margin-block-end: 0;
}

.about-philosophy__list {
    list-style: none;
    padding-inline-start: 0;
    margin-block-end: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.about-philosophy__list li {
    padding-inline-start: var(--space-4);
    position: relative;
}

.about-philosophy__list li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--color-muted-gold);
}

/* Hospitality */
.about-hospitality {
    padding-block: var(--space-8);
    background-color: var(--color-graphite);
}

.about-hospitality__inner {
    max-width: 800px;
    margin-inline: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.about-hospitality__heading {
    margin-block-end: 0;
}

.about-hospitality__block {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.about-hospitality__subheading {
    margin-block-end: 0;
    color: var(--color-warm-amber);
}

.about-hospitality__text {
    max-width: 70ch;
    margin-inline: auto;
    margin-block-end: 0;
}

/* Community */
.about-community {
    padding-block: var(--space-8);
    background-color: var(--color-charcoal-black);
}

.about-community__heading {
    text-align: center;
    margin-block-end: var(--space-3);
}

.about-community__intro {
    text-align: center;
    max-width: 70ch;
    margin-inline: auto;
    margin-block-end: var(--space-6);
}

.about-community__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
}

.about-community__item {
    min-width: 0;
    padding: var(--space-4);
    border-inline-start: 3px solid var(--color-muted-gold);
    background-color: rgba(44, 44, 44, 0.5);
    border-radius: var(--radius-small);
    transition: background-color var(--transition-smooth);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.about-community__item:hover {
    background-color: rgba(44, 44, 44, 0.9);
}

.about-community__item-title {
    margin-block-end: 0;
    color: var(--color-warm-amber);
}

.about-community__item-text {
    margin-block-end: 0;
    max-width: 70ch;
}

/* Why Guests Return */
.about-return {
    padding-block: var(--space-8);
    background-color: var(--color-graphite);
}

.about-return__inner {
    max-width: 700px;
    margin-inline: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

.about-return__heading {
    margin-block-end: 0;
}

.about-return__text {
    max-width: 60ch;
    margin-inline: auto;
    margin-block-end: 0;
}

.about-return__cta {
    margin-block-start: var(--space-2);
}

/* Responsive */
@media (max-width: 64rem) {
    .about-story__inner,
    .about-philosophy__inner {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .about-story__figure,
    .about-philosophy__figure {
        order: -1;
    }

    .about-lounge__grid,
    .about-community__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 48rem) {
    .about-hero {
        min-height: 60vh;
        padding-block: var(--space-7);
    }

    .about-hero__title {
        font-size: var(--text-h1);
    }

    .about-lounge__grid,
    .about-community__grid {
        grid-template-columns: 1fr;
    }

    .about-lounge__card,
    .about-community__item {
        padding: var(--space-3);
    }

    .about-story,
    .about-lounge,
    .about-philosophy,
    .about-hospitality,
    .about-community,
    .about-return {
        padding-block: var(--space-7);
    }
}

@media (max-width: 30rem) {
    .about-hero__lead,
    .about-story__paragraph,
    .about-philosophy__paragraph,
    .about-hospitality__text,
    .about-return__text {
        max-width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-story__image,
    .about-philosophy__image {
        transition: none;
    }

    .about-story__figure:hover .about-story__image,
    .about-philosophy__figure:hover .about-philosophy__image {
        transform: none;
    }

    .about-lounge__card,
    .about-community__item {
        transition: none;
    }

    .about-lounge__card:hover,
    .about-community__item:hover {
        transform: none;
    }
}