/* Page-owned styles for About page */

#about-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  padding-block: var(--space-7);
}

/* Hero */
.about-hero {
  position: relative;
  width: 100%;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-large);
  border: 1px solid var(--color-copper);
  box-shadow: var(--surface-shadow);
  margin-inline: auto;
  max-width: var(--container-max-width);
}

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

.about-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85);
}

.about-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(30, 30, 30, 0.75) 0%, rgba(30, 30, 30, 0.45) 50%, rgba(30, 30, 30, 0.8) 100%);
}

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

.about-hero__content h1 {
  color: var(--color-pure-white);
  margin-block-end: 0;
}

.about-hero__content p {
  color: rgba(255, 255, 255, 0.9);
  margin-block-end: 0;
}

.about-hero__facts {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-end: 0;
  color: rgba(255, 255, 255, 0.85);
}

.about-hero__cta {
  min-width: 0;
}

/* Our Story */
.about-story {
  width: 100%;
}

.about-story__container {
  max-width: 1000px;
  margin-inline: auto;
  padding: var(--space-6);
  background-color: var(--color-dark-slate);
  border: 1px solid var(--color-copper);
  border-radius: var(--radius-medium);
  box-shadow: var(--surface-shadow);
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.about-story__container:hover {
  border-color: var(--color-warm-amber);
  box-shadow: var(--surface-shadow-hover);
  transform: translateY(-2px);
}

.about-story__container h2 {
  text-align: center;
  margin-block-end: var(--space-5);
}

.about-story__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

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

.about-story__column h3 {
  margin-block-end: 0;
}

.about-story__column p {
  max-width: 650px;
  margin-block-end: 0;
}

.about-story__column blockquote {
  margin-block-start: var(--space-3);
  margin-block-end: 0;
  color: var(--color-warm-amber);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.4;
  border-inline-start-color: var(--color-copper);
}

/* Poker Lounge */
.about-poker {
  width: 100%;
}

.about-poker__container {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.about-poker__container h2 {
  margin-block-end: var(--space-5);
}

.about-poker__layout {
  display: grid;
  grid-template-columns: 60% 40%;
  gap: var(--space-5);
  align-items: start;
}

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

.about-poker__unit {
  min-width: 0;
}

.about-poker__unit h3 {
  margin-block-end: var(--space-3);
}

.about-poker__unit p {
  max-width: 600px;
  margin-block-end: var(--space-3);
}

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

.about-poker__callout {
  background-color: rgba(46, 139, 87, 0.15);
  border: 1px solid var(--color-felt-green);
  border-radius: var(--radius-medium);
  padding: var(--space-4);
  animation: about-pulse 2.5s ease-in-out 1;
}

.about-poker__callout h3 {
  color: var(--color-felt-green);
  margin-block-end: var(--space-3);
}

.about-poker__callout p {
  max-width: 600px;
  margin-block-end: var(--space-3);
}

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

.about-poker__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-start: var(--space-3);
  list-style: none;
}

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

.about-poker__list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: var(--color-warm-amber);
}

.about-poker__media {
  min-width: 0;
  border: 1px solid var(--color-copper);
  border-radius: var(--radius-medium);
  overflow: hidden;
  box-shadow: var(--surface-shadow);
}

.about-poker__media img {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  filter: saturate(0.85);
  transition: transform var(--transition-base);
}

.about-poker__media:hover img {
  transform: scale(1.03);
}

@keyframes about-pulse {
  0% { box-shadow: 0 0 0 0 rgba(46, 139, 87, 0.5); }
  70% { box-shadow: 0 0 0 12px rgba(46, 139, 87, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 139, 87, 0); }
}

/* Latin-Inspired Dining */
.about-dining {
  width: 100%;
}

.about-dining__container {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.about-dining__container h2 {
  margin-block-end: var(--space-5);
}

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

.about-dining__unit {
  min-width: 0;
}

.about-dining__unit--with-image {
  display: flex;
  flex-direction: row;
  gap: var(--space-5);
  align-items: flex-start;
}

.about-dining__text {
  flex: 1;
  min-width: 0;
}

.about-dining__text h3 {
  margin-block-end: var(--space-3);
}

.about-dining__text p {
  max-width: 600px;
  margin-block-end: var(--space-3);
}

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

.about-dining__media {
  flex: 0 0 300px;
  min-width: 0;
  border: 1px solid var(--color-copper);
  border-radius: var(--radius-medium);
  overflow: hidden;
  box-shadow: var(--surface-shadow);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.about-dining__media:hover {
  transform: translateY(-4px);
  box-shadow: var(--surface-shadow-hover);
}

.about-dining__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.about-dining__unit h3 {
  margin-block-end: var(--space-3);
}

.about-dining__unit p {
  max-width: 600px;
  margin-block-end: var(--space-3);
}

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

.about-dining__unit a {
  color: var(--color-pure-white);
  border-bottom: 1px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.about-dining__unit a:hover {
  color: var(--color-warm-amber);
  border-bottom-color: var(--color-warm-amber);
}

.about-dining__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-start: var(--space-3);
  list-style: none;
}

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

.about-dining__list li::before {
  content: "◆";
  position: absolute;
  left: 0;
  color: var(--color-copper);
}

/* The Space */
.about-space {
  width: 100%;
}

.about-space__container {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: var(--container-padding);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.about-space__container h2 {
  margin-block-end: 0;
}

.about-space__unit {
  min-width: 0;
}

.about-space__unit h3 {
  margin-block-end: var(--space-3);
}

.about-space__unit p {
  max-width: 600px;
  margin-block-end: var(--space-3);
}

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

.about-space__media {
  width: 100%;
  border: 1px solid var(--color-copper);
  border-radius: var(--radius-medium);
  overflow: hidden;
  box-shadow: var(--surface-shadow);
}

.about-space__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  filter: saturate(0.85);
  transition: filter var(--transition-base);
}

.about-space__media:hover img {
  filter: saturate(1) brightness(1.05);
}

/* Meet the Team */
.about-team {
  width: 100%;
}

.about-team__container {
  max-width: 1000px;
  margin-inline: auto;
  padding: var(--space-6);
  background-color: var(--color-dark-slate);
  border: 1px solid var(--color-copper);
  border-radius: var(--radius-medium);
  box-shadow: var(--surface-shadow);
}

.about-team__container h2 {
  text-align: center;
  margin-block-end: var(--space-5);
}

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

.about-team__column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-medium);
  transition: border-color var(--transition-base);
  text-align: center;
}

.about-team__column:hover {
  border-color: var(--color-warm-amber);
}

.about-team__column h3 {
  margin-block-end: 0;
}

.about-team__column p {
  max-width: 300px;
  margin-inline: auto;
  margin-block-end: 0;
}

.about-team__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-start: var(--space-3);
  list-style: none;
  text-align: left;
}

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

.about-team__list li::before {
  content: "●";
  position: absolute;
  left: 0;
  color: var(--color-copper);
}

/* Community and Events */
.about-community {
  width: 100%;
  background: linear-gradient(180deg, rgba(30, 30, 30, 0.5) 0%, rgba(30, 30, 30, 0.2) 100%);
  padding-block: var(--space-6);
}

.about-community__container {
  max-width: 1000px;
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.about-community__container h2 {
  margin-block-end: var(--space-5);
}

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

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

.about-community__column h3 {
  margin-block-end: 0;
}

.about-community__column p {
  max-width: 650px;
  margin-block-end: 0;
}

.about-community__column a {
  color: var(--color-pure-white);
  border-bottom: 1px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.about-community__column a:hover {
  color: var(--color-warm-amber);
  border-bottom-color: var(--color-warm-amber);
}

.about-community__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-start: var(--space-3);
  list-style: none;
}

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

.about-community__list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: var(--color-warm-amber);
}

/* Visit Us */
.about-visit {
  width: 100%;
}

.about-visit__container {
  max-width: 1000px;
  margin-inline: auto;
  padding: var(--space-6);
  background-color: var(--color-dark-slate);
  border: 1px solid var(--color-copper);
  border-radius: var(--radius-medium);
  box-shadow: var(--surface-shadow);
}

.about-visit__container h2 {
  margin-block-end: var(--space-5);
}

.about-visit__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

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

.about-visit__column h3 {
  margin-block-end: 0;
}

.about-visit__column p {
  max-width: 600px;
  margin-block-end: 0;
}

.about-visit__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-style: normal;
}

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

.about-visit__contact a {
  color: var(--color-pure-white);
  border-bottom: 1px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.about-visit__contact a:hover {
  color: var(--color-warm-amber);
  border-bottom-color: var(--color-warm-amber);
}

.about-visit__column a[href^="https://www.google.com/maps"] {
  color: var(--color-warm-amber);
  border-bottom: 1px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.about-visit__column a[href^="https://www.google.com/maps"]:hover {
  color: var(--color-warm-amber);
  border-bottom-color: var(--color-warm-amber);
}

.about-visit__cta {
  align-self: flex-start;
  min-width: 0;
}

/* Tablet */
@media (max-width: 1024px) {
  .about-poker__layout {
    grid-template-columns: 1fr;
  }

  .about-poker__media {
    order: -1;
  }

  .about-dining__unit--with-image {
    flex-direction: column;
  }

  .about-dining__media {
    flex: 0 0 auto;
    width: 100%;
    max-width: 300px;
  }

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

  .about-team__column:last-child {
    grid-column: span 2;
  }
}

/* Mobile */
@media (max-width: 768px) {
  #about-main {
    gap: var(--space-5);
    padding-block: var(--space-5);
  }

  .about-hero {
    min-height: 60vh;
  }

  .about-hero__content {
    padding: var(--space-5) var(--space-3);
  }

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

  .about-hero__cta {
    width: 100%;
  }

  .about-story__container,
  .about-team__container,
  .about-visit__container {
    padding: var(--space-4);
  }

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

  .about-story__container h2,
  .about-team__container h2 {
    text-align: left;
  }

  .about-team__grid {
    grid-template-columns: 1fr;
  }

  .about-team__column:last-child {
    grid-column: auto;
  }

  .about-team__column {
    text-align: left;
  }

  .about-team__column p {
    margin-inline: 0;
  }

  .about-team__list {
    text-align: left;
  }

  .about-dining__media {
    max-width: 100%;
  }

  .about-visit__cta {
    width: 100%;
    align-self: stretch;
  }
}

@media (max-width: 480px) {
  .about-hero__content {
    gap: var(--space-3);
  }

  .about-hero__facts {
    gap: var(--space-2);
  }

  .about-story__container,
  .about-team__container,
  .about-visit__container {
    padding: var(--space-3);
  }

  .about-poker__callout {
    padding: var(--space-3);
  }
}