/* esemenyek.css – Page-owned styles for Események */

/* ---------- Hero Section ---------- */
.hero-section {
  padding-block: var(--space-6);
}

.hero-grid {
  display: grid;
  grid-template-columns: 60% 40%;
  align-items: center;
  gap: var(--space-5);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.hero-image {
  width: 100%;
  min-width: 0;
}

.hero-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1);
}

.hero-text {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
}

.hero-title {
  margin-block-end: 0;
  max-width: 45ch;
}

.hero-lead {
  margin-block-end: 0;
  max-width: 45ch;
}

/* ---------- Overview Section ---------- */
.overview-section {
  padding-block: var(--space-5);
}

.overview-content {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: var(--container-padding);
  text-align: center;
}

.overview-text {
  max-width: 65ch;
  margin-inline: auto;
}

/* ---------- Event Detail Sections (Póker, Rulett, Blackjack) ---------- */
.event-detail-section {
  padding-block: var(--space-5);
}

.event-detail-grid {
  display: grid;
  grid-template-columns: 55% 45%;
  align-items: center;
  gap: var(--space-5);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.event-detail-grid--reverse {
  grid-template-columns: 45% 55%;
}

.event-detail-text {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.event-detail-paragraph {
  margin-block-end: 0;
  max-width: 60ch;
}

.event-detail-image {
  width: 100%;
  min-width: 0;
}

.event-detail-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1);
}

/* ---------- Themed Section ---------- */
.themed-section {
  padding-block: var(--space-5);
}

.themed-content {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: var(--container-padding);
  text-align: center;
}

.themed-text {
  max-width: 65ch;
  margin-inline: auto;
}

/* ---------- Atmosphere Section ---------- */
.atmosphere-section {
  padding-block: var(--space-5);
}

.atmosphere-content {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: var(--container-padding);
  text-align: center;
  margin-block-end: var(--space-5);
}

.atmosphere-text {
  max-width: 65ch;
  margin-inline: auto;
}

.atmosphere-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.gallery-item {
  width: 100%;
  min-width: 0;
}

.gallery-img {
  width: 100%;
  height: 300px;
  display: block;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1);
  cursor: pointer;
  transition: filter var(--transition-fast);
}

.gallery-img:hover {
  filter: grayscale(0.8) contrast(1.1) sepia(0.3) hue-rotate(-20deg);
}

/* ---------- Audience Section ---------- */
.audience-section {
  padding-block: var(--space-5);
}

.audience-content {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: var(--container-padding);
  text-align: center;
}

.audience-text {
  max-width: 65ch;
  margin-inline: auto;
}

/* ---------- Process Section ---------- */
.process-section {
  padding-block: var(--space-5);
}

.process-content {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: var(--container-padding);
  text-align: left;
}

.process-text {
  max-width: 65ch;
}

.process-steps {
  list-style: decimal inside !important;
  padding-inline-start: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-start: var(--space-3);
}

.process-step {
  margin-block-end: 0;
}

/* ---------- FAQ Section ---------- */
.faq-section {
  padding-block: var(--space-5);
}

.faq-content {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: var(--container-padding);
  text-align: left;
}

.faq-intro {
  max-width: 65ch;
  margin-block-end: var(--space-4);
}

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

.faq-item {
  border-bottom: var(--border-muted);
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: var(--space-3) 0;
  background: none;
  border: none;
  font-family: var(--font-heading);
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line);
  font-weight: 700;
  color: var(--color-ink);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.faq-question:hover {
  color: var(--color-cherry);
}

.faq-question-text {
  text-align: left;
}

.faq-icon {
  font-size: 1.5em;
  line-height: 1;
  transition: transform var(--transition-fast);
}

.faq-question[aria-expanded="true"] .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  padding-block-end: var(--space-3);
}

.faq-answer p {
  margin-block-end: 0;
}

/* ---------- CTA Section ---------- */
.cta-section {
  padding-block: var(--space-6);
}

.cta-content {
  max-width: 600px;
  margin-inline: auto;
  padding-inline: var(--container-padding);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.cta-text {
  max-width: 50ch;
  margin-inline: auto;
}

.cta-button {
  /* Extends .button base */
}

/* ---------- Disclaimer Section ---------- */
.disclaimer-section {
  padding-block: var(--space-5);
}

.disclaimer-content {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: var(--container-padding);
  text-align: center;
}

.disclaimer-text {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  color: var(--color-tobacco);
  max-width: 65ch;
  margin-inline: auto;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .hero-text {
    text-align: center;
    align-items: center;
  }

  .hero-title,
  .hero-lead {
    max-width: 100%;
  }

  .event-detail-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .event-detail-text {
    text-align: center;
    align-items: center;
  }

  .event-detail-paragraph {
    max-width: 100%;
  }

  .atmosphere-gallery {
    grid-template-columns: 1fr;
  }

  .gallery-img {
    height: 250px;
  }
}

@media (max-width: 768px) {
  :root {
    --container-padding: var(--space-3);
  }

  .hero-section {
    padding-block: var(--space-4);
  }

  .hero-grid {
    gap: var(--space-3);
  }

  .hero-title {
    font-size: clamp(1.5rem, 5vw, 2rem);
  }

  .event-detail-section {
    padding-block: var(--space-4);
  }

  .event-detail-grid {
    gap: var(--space-3);
  }

  .section-title {
    font-size: var(--text-h2-size);
  }

  .faq-question {
    font-size: 1.25rem;
  }

  .cta-section {
    padding-block: var(--space-4);
  }
}