/* About page styles — scoped to .about-page */

.about-page {
  overflow: hidden;
}

/* Hero / Origin & Vision */
.about-hero {
  padding-block-start: var(--space-4xl);
  padding-block-end: var(--space-4xl);
}

.about-hero__container {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: center;
}

.about-hero__text {
  max-width: 640px;
  min-width: 0;
}

.about-hero__title {
  font-size: var(--text-h1-size);
  font-weight: var(--text-h1-weight);
  line-height: var(--text-h1-leading);
  letter-spacing: var(--text-h1-tracking);
  margin-block-end: var(--space-lg);
  text-wrap: balance;
}

.about-hero__lead {
  font-size: var(--text-body-large-size);
  line-height: var(--text-body-large-leading);
  margin-block-end: var(--space-lg);
}

.about-hero__body {
  margin-block-end: var(--space-lg);
}

.about-hero__quote {
  font-family: var(--font-heading);
  font-size: var(--text-h3-size);
  font-weight: 300;
  line-height: var(--text-h3-leading);
  letter-spacing: var(--text-h3-tracking);
  color: var(--color-satin);
  margin-block-end: 0;
  padding-inline-start: var(--space-lg);
  border-inline-start: var(--border-divider);
}

.about-hero__media {
  min-width: 0;
  border-radius: var(--radius-4);
  overflow: hidden;
  position: relative;
}

.about-hero__image {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Philosophy */
.about-philosophy {
  padding-block: var(--space-4xl);
}

.about-philosophy__title {
  margin-block-end: var(--space-2xl);
}

.about-philosophy__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
  margin-block-end: var(--space-2xl);
}

.about-philosophy-card {
  background-color: var(--color-charcoal);
  border: var(--border-default);
  border-radius: var(--radius-4);
  padding: var(--space-lg);
  min-width: 0;
}

.about-philosophy-card__icon {
  display: block;
  font-size: 1.5rem;
  color: var(--color-gold);
  margin-block-end: var(--space-sm);
}

.about-philosophy-card__title {
  font-size: var(--text-h3-size);
  font-weight: var(--text-h3-weight);
  line-height: var(--text-h3-leading);
  letter-spacing: var(--text-h3-tracking);
  margin-block-end: var(--space-sm);
}

.about-philosophy-card__text {
  max-width: 320px;
  margin-block-end: 0;
}

.about-philosophy__shared {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  border-block-start: var(--border-divider);
  padding-block-start: var(--space-lg);
}

.about-philosophy__shared-text {
  margin-block-end: 0;
}

/* The Space */
.about-space {
  padding-block: var(--space-4xl);
}

.about-space__title {
  margin-block-end: var(--space-2xl);
}

.about-space__media {
  width: 100%;
  margin-block-end: var(--space-2xl);
}

.about-space__image {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.about-space__text {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}

.about-space__paragraph {
  margin-block-end: var(--space-md);
}

.about-space__paragraph--secondary {
  font-size: var(--text-small-size);
  line-height: var(--text-small-leading);
  color: var(--color-smoke);
}

/* Culinary Leadership */
.about-leadership {
  padding-block: var(--space-4xl);
}

.about-leadership__container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: var(--space-2xl);
  align-items: center;
}

.about-leadership__media {
  min-width: 0;
  border-radius: var(--radius-4);
  overflow: hidden;
}

.about-leadership__image {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.about-leadership__text {
  max-width: 480px;
  min-width: 0;
}

.about-leadership__title {
  margin-block-end: var(--space-lg);
}

.about-leadership__paragraph {
  margin-block-end: var(--space-md);
}

.about-leadership__paragraph:last-child {
  margin-block-end: 0;
}

/* Responsible Hospitality */
.about-responsible {
  padding-block: var(--space-4xl);
}

.about-responsible__container {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}

.about-responsible__title {
  margin-block-end: var(--space-2xl);
}

.about-responsible__statement {
  border-block-start: 1px solid var(--color-gold);
  border-block-end: 1px solid var(--color-gold);
  padding-block: var(--space-lg);
  margin-block-end: var(--space-lg);
}

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

.about-responsible__list {
  list-style: none;
  margin-block-end: 0;
  padding-inline-start: 0;
  text-align: start;
}

.about-responsible__item {
  position: relative;
  padding-inline-start: var(--space-lg);
  margin-block-end: var(--space-sm);
}

.about-responsible__item::before {
  content: '✦';
  position: absolute;
  left: 0;
  color: var(--color-brass);
}

.about-responsible__item:last-child {
  margin-block-end: 0;
}

/* Location & Ambience */
.about-location {
  padding-block: var(--space-4xl);
}

.about-location__container {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: center;
}

.about-location__text {
  max-width: 480px;
  min-width: 0;
}

.about-location__title {
  margin-block-end: var(--space-lg);
}

.about-location__address {
  color: var(--color-gold);
  font-weight: 600;
}

.about-location__paragraph {
  margin-block-end: var(--space-md);
}

.about-location__paragraph:last-child {
  margin-block-end: 0;
}

.about-location__media {
  min-width: 0;
  border-radius: var(--radius-4);
  overflow: hidden;
}

.about-location__image {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Visit Planning */
.about-visit {
  padding-block: var(--space-4xl);
}

.about-visit__title {
  margin-block-end: var(--space-2xl);
}

.about-visit__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  margin-block-end: var(--space-2xl);
}

.about-visit-card {
  background-color: var(--color-charcoal);
  border: var(--border-default);
  border-radius: var(--radius-4);
  padding: var(--space-lg);
  min-width: 0;
}

.about-visit-card__icon {
  display: block;
  font-size: 1.5rem;
  color: var(--color-gold);
  margin-block-end: var(--space-sm);
}

.about-visit-card__title {
  font-size: var(--text-h3-size);
  font-weight: var(--text-h3-weight);
  line-height: var(--text-h3-leading);
  letter-spacing: var(--text-h3-tracking);
  margin-block-end: var(--space-sm);
}

.about-visit-card__text {
  max-width: 320px;
  margin-block-end: 0;
}

.about-visit-card__link {
  color: var(--color-brass);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.about-visit-card__link:hover {
  color: var(--color-gold);
}

.about-visit__cta {
  text-align: center;
}

.about-visit__button {
  min-width: 200px;
}

/* Tablet breakpoint */
@media (max-width: 1024px) {
  .about-hero__container,
  .about-leadership__container,
  .about-location__container {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }

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

  .about-visit__grid {
    gap: var(--space-md);
  }
}

/* Mobile breakpoint */
@media (max-width: 768px) {
  .about-hero,
  .about-philosophy,
  .about-space,
  .about-leadership,
  .about-responsible,
  .about-location,
  .about-visit {
    padding-block: var(--space-3xl);
  }

  .about-hero__container,
  .about-leadership__container,
  .about-location__container {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .about-hero__media {
    order: -1;
  }

  .about-hero__image,
  .about-space__image,
  .about-location__image {
    aspect-ratio: 4 / 5;
  }

  .about-hero__text,
  .about-leadership__text,
  .about-location__text {
    max-width: 100%;
  }

  .about-philosophy__grid,
  .about-visit__grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .about-philosophy-card__text,
  .about-visit-card__text {
    max-width: 100%;
  }

  .about-space__text,
  .about-responsible__container {
    max-width: 100%;
    padding-inline: var(--space-lg);
  }

  .about-hero__title {
    font-size: clamp(2rem, 8vw, 2.5rem);
  }

  .about-philosophy__title,
  .about-space__title,
  .about-leadership__title,
  .about-responsible__title,
  .about-location__title,
  .about-visit__title {
    font-size: clamp(1.75rem, 7vw, 2.25rem);
  }
}

@media (max-width: 480px) {
  .about-hero__container,
  .about-leadership__container,
  .about-location__container {
    gap: var(--space-md);
  }

  .about-philosophy__grid,
  .about-visit__grid {
    gap: var(--space-sm);
  }

  .about-visit__button {
    width: 100%;
  }
}