/* Page-owned styles for Event Concepts */

.ec-hero {
  background-color: var(--color-paper);
  background-image: radial-gradient(circle, rgba(0,0,0,0.08) 1px, transparent 1px);
  background-size: 16px 16px;
}

.ec-hero__container {
  display: flex;
  justify-content: center;
}

.ec-hero__panel {
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-4);
  background-color: var(--color-paper-light);
  border: var(--border-thick);
  box-shadow: var(--shadow-comic);
  text-align: center;
}

.ec-hero__bubble {
  max-width: 700px;
  width: 100%;
  background-color: var(--color-sunburst);
  border: var(--border-thick);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-comic);
  padding: var(--space-4) var(--space-5);
  position: relative;
}

.ec-hero__bubble::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid var(--color-ink);
}

.ec-hero__title {
  margin: 0;
  font-size: var(--text-h1);
  line-height: var(--leading-h1);
  color: var(--color-ink);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-wrap: balance;
}

.ec-hero__lead {
  max-width: 60ch;
  margin-inline: auto;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-ink);
}

.ec-hero__support {
  max-width: 60ch;
  margin-inline: auto;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-ink);
}

.ec-hero__cta {
  min-width: 200px;
  margin-top: var(--space-2);
}

.ec-section {
  padding-block: var(--section-pad);
}

.ec-section__title {
  margin-block-end: var(--space-4);
}

.ec-section__copy {
  max-width: 55ch;
  margin-block-end: var(--space-4);
}

/* Energetic Parties */
.ec-energetic__container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

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

.ec-energetic__image-panel {
  min-width: 0;
  border: var(--border-thick);
  box-shadow: var(--shadow-comic);
  background-color: var(--color-paper-light);
  overflow: hidden;
  transition: transform 0.2s ease;
}

.ec-energetic__image-panel:hover {
  transform: rotate(2deg);
}

.ec-energetic__image-panel img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.ec-energetic__text-panel {
  min-width: 0;
  background-color: var(--color-paper-light);
  border: var(--border-thick);
  box-shadow: var(--shadow-comic);
  padding: var(--space-4);
}

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

.ec-feature-list li {
  margin-block-end: 0;
  padding-inline-start: var(--space-5);
  position: relative;
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.ec-feature-list--star li::before {
  content: "★";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1.25rem;
  color: var(--color-pop);
  line-height: var(--leading-body);
}

/* Brand Activations */
.ec-brand {
  background-color: var(--color-sunburst);
  background-image: radial-gradient(circle, rgba(0,0,0,0.08) 1px, transparent 1px);
  background-size: 16px 16px;
}

.ec-brand__container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.ec-brand__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.ec-brand__text {
  min-width: 0;
}

.ec-brand__text .ec-section__copy {
  max-width: 50ch;
}

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

.ec-brand__bubble {
  min-width: 0;
  width: 100%;
  background-color: var(--color-paper-light);
  border: var(--border-thick);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-comic);
  padding: var(--space-3);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  position: relative;
  transition: transform 0.2s ease;
}

.ec-brand__bubble::after {
  content: "";
  position: absolute;
  bottom: -16px;
  left: 24px;
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 16px solid var(--color-ink);
}

.ec-brand__bubble:hover {
  transform: translateY(-4px);
}

/* Social Celebrations */
.ec-social__container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

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

.ec-social__text-panel {
  min-width: 0;
  background-color: var(--color-paper-light);
  border: var(--border-thick);
  box-shadow: var(--shadow-comic);
  padding: var(--space-4);
}

.ec-social__image-panel {
  min-width: 0;
  border: var(--border-thick);
  box-shadow: var(--shadow-comic);
  background-color: var(--color-paper-light);
  overflow: hidden;
  transition: transform 0.2s ease;
}

.ec-social__image-panel:hover {
  transform: scale(1.02);
}

.ec-social__image-panel img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.ec-celebration-list {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.ec-celebration-list li {
  margin-block-end: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.ec-celebration-icon {
  font-size: 1.25rem;
  color: var(--color-pop);
}

/* Casino-Themed Events */
.ec-casino {
  background-color: var(--color-ink);
  color: var(--color-paper-light);
}

.ec-casino__container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.ec-casino__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}

.ec-casino__title,
.ec-casino__copy {
  color: var(--color-paper-light);
}

.ec-casino__copy {
  max-width: 60ch;
  margin-inline: auto;
}

.ec-casino__image-wrap {
  max-width: 600px;
  width: 100%;
  border: var(--border-thick);
  box-shadow: var(--shadow-comic);
  background-color: var(--color-paper-light);
  overflow: hidden;
  transition: transform 0.2s ease;
}

.ec-casino__image-wrap:hover {
  transform: rotate(-2deg);
}

.ec-casino__image-wrap img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.ec-casino__features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
}

.ec-casino__features li {
  margin-block-end: 0;
  background-color: var(--color-paper-light);
  color: var(--color-ink);
  border: var(--border-thick);
  box-shadow: var(--shadow-comic-sm);
  padding: var(--space-3);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.ec-casino__features li:hover {
  background-color: var(--color-sunburst);
}

.ec-feature-list--suit li {
  position: relative;
  padding-inline-start: var(--space-5);
}

.ec-feature-list--suit li::before {
  content: "♠";
  position: absolute;
  left: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25rem;
  color: var(--color-pop);
}

/* Customization & Flexibility */
.ec-customization__container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

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

.ec-customization__text {
  min-width: 0;
  background-color: var(--color-paper-light);
  border: var(--border-thick);
  box-shadow: var(--shadow-comic);
  padding: var(--space-4);
}

.ec-customization__bubble {
  min-width: 0;
  background-color: var(--color-sunburst);
  border: var(--border-thick);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-comic);
  padding: var(--space-4);
  position: relative;
  text-align: right;
}

.ec-customization__bubble::after {
  content: "";
  position: absolute;
  bottom: -20px;
  right: 40px;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid var(--color-ink);
}

.ec-customization__quote {
  margin-block-end: 0;
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-ink);
  max-width: 40ch;
  margin-inline-start: auto;
}

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

.ec-check-list li {
  margin-block-end: 0;
  padding-inline-start: var(--space-5);
  position: relative;
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.ec-check-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1.25rem;
  color: var(--color-pop);
  line-height: var(--leading-body);
}

/* Production Quality */
.ec-production {
  background-color: var(--color-paper);
  background-image: radial-gradient(circle, rgba(0,0,0,0.08) 1px, transparent 1px);
  background-size: 16px 16px;
}

.ec-production__container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.ec-production__header {
  text-align: center;
  margin-block-end: var(--space-5);
}

.ec-production__header .ec-section__copy {
  max-width: 60ch;
  margin-inline: auto;
}

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

.ec-production__card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-4);
  transition: transform 0.2s ease;
}

.ec-production__card:hover {
  transform: rotate(2deg) translateY(-4px);
}

.ec-production__icon {
  font-size: 2.5rem;
  line-height: 1;
}

.ec-production__card-title {
  margin-block-end: 0;
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
}

.ec-production__card-copy {
  max-width: 30ch;
  margin-inline: auto;
  margin-block-end: 0;
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

/* Visual Storytelling */
.ec-storytelling__container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.ec-storytelling__header {
  text-align: center;
  margin-block-end: var(--space-5);
}

.ec-storytelling__header .ec-section__copy {
  max-width: 60ch;
  margin-inline: auto;
}

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

.ec-storytelling__panel {
  min-width: 0;
  border: var(--border-thick);
  box-shadow: var(--shadow-comic);
  background-color: var(--color-paper-light);
  overflow: hidden;
  transition: transform 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
}

.ec-storytelling__panel:hover {
  transform: rotate(1deg);
}

.ec-storytelling__panel--image img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.ec-storytelling__panel--illustration {
  background-color: var(--color-sunburst);
  background-image: radial-gradient(circle, rgba(0,0,0,0.15) 1px, transparent 1px);
  background-size: 12px 12px;
  padding: var(--space-3);
}

.ec-storytelling__panel-text {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-ink);
  text-align: center;
}

/* Call to Action */
.ec-cta {
  background-color: var(--color-sunburst);
  background-image: radial-gradient(circle, rgba(0,0,0,0.08) 1px, transparent 1px);
  background-size: 16px 16px;
}

.ec-cta__container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.ec-cta__panel {
  max-width: 600px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
  padding: var(--space-6) var(--space-4);
  background-color: var(--color-paper-light);
  border: var(--border-thick);
  box-shadow: var(--shadow-comic);
}

.ec-cta__title {
  margin-block-end: 0;
}

.ec-cta__copy {
  max-width: 50ch;
  margin-inline: auto;
  margin-block-end: 0;
}

.ec-cta__button {
  min-width: 250px;
}

/* Responsive */
@media (max-width: 900px) {
  .ec-energetic__grid,
  .ec-social__grid,
  .ec-customization__grid {
    grid-template-columns: 1fr;
  }

  .ec-brand__grid {
    grid-template-columns: 1fr;
  }

  .ec-brand__bubbles {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .ec-brand__bubble {
    flex: 1 1 100%;
  }

  .ec-casino__features {
    grid-template-columns: 1fr;
  }

  .ec-production__cards {
    grid-template-columns: 1fr;
  }

  .ec-storytelling__panels {
    grid-template-columns: 1fr;
  }

  .ec-storytelling__panel {
    min-height: 200px;
  }
}

@media (max-width: 768px) {
  .ec-hero__panel {
    padding: var(--space-5) var(--space-3);
  }

  .ec-hero__bubble {
    padding: var(--space-3);
  }

  .ec-hero__title {
    font-size: 2.5rem;
  }

  .ec-hero__lead,
  .ec-hero__support {
    font-size: 1rem;
  }

  .ec-energetic__grid,
  .ec-social__grid,
  .ec-customization__grid {
    gap: var(--space-3);
  }

  .ec-energetic__text-panel,
  .ec-social__text-panel,
  .ec-customization__text {
    padding: var(--space-3);
  }

  .ec-brand__bubble {
    flex: 1 1 100%;
  }

  .ec-casino__features {
    gap: var(--space-2);
  }

  .ec-production__cards {
    gap: var(--space-3);
  }

  .ec-storytelling__panels {
    gap: var(--space-2);
  }

  .ec-cta__panel {
    padding: var(--space-5) var(--space-3);
  }
}

@media (max-width: 480px) {
  .ec-hero__panel {
    padding: var(--space-4) var(--space-2);
  }

  .ec-hero__bubble {
    width: 90%;
  }

  .ec-hero__title {
    font-size: 2rem;
  }

  .ec-hero__lead,
  .ec-hero__support {
    font-size: 0.9375rem;
  }

  .ec-hero__cta,
  .ec-cta__button {
    width: 100%;
    min-width: 0;
  }

  .ec-section__title {
    font-size: 1.75rem;
  }

  .ec-section__copy {
    font-size: 1rem;
  }

  .ec-feature-list li,
  .ec-celebration-list li,
  .ec-check-list li {
    font-size: 1rem;
  }

  .ec-casino__features li {
    font-size: 1rem;
  }

  .ec-production__card-copy {
    font-size: 1rem;
  }

  .ec-storytelling__panel {
    min-height: 160px;
  }

  .ec-storytelling__panel-text {
    font-size: 1.25rem;
  }

  .ec-cta__title {
    font-size: 1.75rem;
  }

  .ec-cta__copy {
    font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ec-energetic__image-panel,
  .ec-social__image-panel,
  .ec-casino__image-wrap,
  .ec-brand__bubble,
  .ec-production__card,
  .ec-storytelling__panel {
    transition: none;
  }

  .ec-energetic__image-panel:hover,
  .ec-social__image-panel:hover,
  .ec-casino__image-wrap:hover,
  .ec-brand__bubble:hover,
  .ec-production__card:hover,
  .ec-storytelling__panel:hover {
    transform: none;
  }
}