/* ==========================================================================
   Offline Poker Page Styles
   Scoped to #offline-poker-page
   ========================================================================== */

#offline-poker-page {
  --op-section-space: var(--space-8);
  --op-section-space-tablet: var(--space-9);
  --op-section-space-desktop: var(--space-10);
  --op-hero-overlay: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.55) 72%, rgba(0, 0, 0, 0.78) 100%);
}

/* Section rhythm */
#offline-poker-page .section-band {
  padding-block: var(--op-section-space);
}

#offline-poker-page .op-section-header {
  margin-block-end: var(--space-7);
}

#offline-poker-page .op-section-header h2,
#offline-poker-page .op-section-header h3 {
  margin-block-end: 0;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.op-hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
  background-color: var(--surface-felt);
  overflow: hidden;
}

.op-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.op-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.op-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--op-hero-overlay);
}

.op-hero__container {
  position: relative;
  z-index: 2;
  padding-block-end: clamp(var(--space-8), 8vw, var(--space-10));
}

.op-hero__content {
  max-width: 42rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.op-hero__content .op-eyebrow {
  font-size: var(--text-label-size);
  line-height: var(--text-label-line-height);
  letter-spacing: var(--text-label-letter-spacing);
  font-weight: var(--text-label-weight);
  text-transform: var(--text-label-text-transform);
  color: var(--color-brass);
}

.op-hero__content h1 {
  font-size: clamp(2rem, 5vw + 0.75rem, 4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 400;
  max-width: 11ch;
  margin-block-end: 0;
  color: var(--color-bone);
}

.op-hero__lead {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line-height);
  color: var(--color-bone-muted);
  max-width: 68ch;
  margin-block-end: 0;
}

/* --------------------------------------------------------------------------
   Why Offline Poker
   -------------------------------------------------------------------------- */
.op-why {
  background-color: var(--surface-ink);
}

.op-why__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

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

.op-why__item .op-rule {
  display: block;
  width: 2.5rem;
  height: 2px;
  background-color: var(--color-brass);
}

.op-why__item h3 {
  margin-block-end: 0;
}

.op-why__item p {
  max-width: 40ch;
  margin-block-end: 0;
  color: var(--color-bone-muted);
}

/* --------------------------------------------------------------------------
   Card Lounge and Card Room
   -------------------------------------------------------------------------- */
.op-lounge {
  background-color: var(--surface-charcoal);
}

.op-lounge__container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}

.op-lounge__content {
  min-width: 0;
}

.op-lounge__content .op-section-header {
  margin-block-end: var(--space-6);
}

.op-lounge__lead {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line-height);
  max-width: 68ch;
  margin-block-end: var(--space-5);
}

.op-lounge__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-block-end: 0;
  padding-inline-start: 0;
}

.op-lounge__list li {
  position: relative;
  padding-inline-start: var(--space-5);
  color: var(--color-bone-muted);
}

.op-lounge__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.75rem;
  height: 2px;
  background-color: var(--color-brass);
}

.op-lounge__figure {
  margin-block-end: 0;
  min-width: 0;
  border-radius: var(--radius-2);
  border: var(--border-hairline);
  overflow: hidden;
  transition: transform var(--transition-base), border-color var(--transition-base);
}

.op-lounge__figure:hover {
  transform: translateY(-2px);
  border-color: rgba(201, 162, 39, 0.4);
}

.op-lounge__figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Poker Nights Schedule
   -------------------------------------------------------------------------- */
.op-schedule {
  background-color: var(--surface-felt);
}

.op-schedule__intro {
  max-width: 68ch;
  margin-block-end: var(--space-7);
  color: var(--color-bone-muted);
}

.op-schedule__ledger {
  display: flex;
  flex-direction: column;
  border-block-start: var(--border-hairline-faint);
}

.op-schedule__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding-block: var(--space-5);
  border-block-end: var(--border-hairline-faint);
  transition: background-color var(--transition-fast);
}

.op-schedule__row:hover {
  background-color: var(--surface-charcoal-soft);
}

.op-schedule__time {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.op-schedule__day {
  font-size: var(--text-label-size);
  line-height: var(--text-label-line-height);
  letter-spacing: var(--text-label-letter-spacing);
  font-weight: var(--text-label-weight);
  text-transform: var(--text-label-text-transform);
  color: var(--color-brass);
}

.op-schedule__hour {
  font-size: var(--text-small-size);
  line-height: var(--text-small-line-height);
  color: var(--color-bone-muted);
  font-variant-numeric: tabular-nums;
}

.op-schedule__detail {
  min-width: 0;
}

.op-schedule__detail h4 {
  margin-block-end: var(--space-2);
}

.op-schedule__detail p {
  max-width: 68ch;
  margin-block-end: 0;
  color: var(--color-bone-muted);
}

/* --------------------------------------------------------------------------
   In-Venue Poker Experience
   -------------------------------------------------------------------------- */
.op-experience {
  background-color: var(--surface-ink);
}

.op-experience__container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}

.op-experience__content {
  min-width: 0;
}

.op-experience__content .op-section-header {
  margin-block-end: var(--space-6);
}

.op-experience__content p {
  max-width: 68ch;
  color: var(--color-bone-muted);
}

.op-experience__figure {
  margin-block-end: 0;
  min-width: 0;
  border-radius: var(--radius-2);
  border: var(--border-hairline);
  overflow: hidden;
  transition: transform var(--transition-base), border-color var(--transition-base);
}

.op-experience__figure:hover {
  transform: translateY(-2px);
  border-color: rgba(201, 162, 39, 0.4);
}

.op-experience__figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   The Restaurant: A Second Chapter
   -------------------------------------------------------------------------- */
.op-restaurant {
  background-color: var(--surface-charcoal);
}

.op-restaurant__header {
  margin-block-end: var(--space-6);
}

.op-restaurant__header h3 {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line-height);
  letter-spacing: var(--text-h3-letter-spacing);
  font-weight: var(--text-h3-weight);
}

.op-restaurant__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.op-restaurant__content p {
  max-width: 68ch;
  color: var(--color-bone-muted);
}

.op-restaurant__figure {
  margin-block-end: 0;
  min-width: 0;
  border-radius: var(--radius-2);
  border: var(--border-hairline);
  overflow: hidden;
  align-self: flex-end;
  width: 100%;
}

.op-restaurant__figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   What Players Say
   -------------------------------------------------------------------------- */
.op-testimonial {
  background-color: var(--surface-ink);
}

.op-quote {
  max-width: 60ch;
  margin-block-end: 0;
}

.op-quote p {
  margin-block-end: 0;
}

.op-quote .quote-attribution {
  margin-block-start: var(--space-3);
}

/* --------------------------------------------------------------------------
   Frequently Asked Questions
   -------------------------------------------------------------------------- */
.op-faq {
  background-color: var(--surface-charcoal);
}

.op-faq__intro {
  max-width: 68ch;
  margin-block-end: var(--space-7);
  color: var(--color-bone-muted);
}

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

.op-faq__item {
  background-color: var(--surface-charcoal-soft);
  border: var(--border-hairline);
  border-radius: var(--radius-2);
  overflow: hidden;
}

.op-faq__question {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  text-align: left;
  color: var(--color-bone);
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-line-height);
  font-weight: var(--text-h4-weight);
  transition: color var(--transition-fast);
}

.op-faq__question:hover {
  color: var(--color-brass);
}

.op-faq__icon {
  position: relative;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
}

.op-faq__icon::before,
.op-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.75rem;
  height: 2px;
  background-color: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--transition-base);
}

.op-faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.op-faq__item.is-open .op-faq__icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.op-faq__answer {
  padding-inline: var(--space-4);
  padding-block-end: var(--space-4);
}

.op-faq__answer[hidden] {
  display: none;
}

.op-faq__answer p {
  max-width: 68ch;
  margin-block-end: 0;
  color: var(--color-bone-muted);
}

/* --------------------------------------------------------------------------
   Visit Card District
   -------------------------------------------------------------------------- */
.op-visit {
  background-color: var(--surface-felt-deep);
}

.op-visit__header {
  margin-block-end: var(--space-5);
}

.op-visit__text {
  max-width: 68ch;
  margin-block-end: var(--space-6);
  color: var(--color-bone-muted);
}

.op-visit__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}

/* --------------------------------------------------------------------------
   Reveal animation
   -------------------------------------------------------------------------- */
#offline-poker-page .op-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--transition-reveal), transform var(--transition-reveal);
}

#offline-poker-page .op-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  #offline-poker-page .section-band {
    padding-block: var(--op-section-space-tablet);
  }

  .op-why__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
  }

  .op-lounge__container {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-7);
  }

  .op-lounge__figure {
    transform: translateX(var(--space-7));
  }

  .op-schedule__row {
    grid-template-columns: minmax(8rem, 0.35fr) minmax(0, 1fr);
    gap: var(--space-6);
  }

  .op-experience__container {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-7);
  }

  .op-restaurant__figure {
    width: 50%;
  }

  .op-visit__actions {
    flex-direction: row;
    gap: var(--space-4);
  }
}

/* --------------------------------------------------------------------------
   Desktop
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  #offline-poker-page .section-band {
    padding-block: var(--op-section-space-desktop);
  }

  .op-why__grid {
    gap: var(--space-8);
  }

  .op-lounge__container {
    gap: var(--space-8);
  }

  .op-lounge__figure {
    transform: translateX(var(--space-8));
  }

  .op-experience__container {
    gap: var(--space-8);
  }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #offline-poker-page .op-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}