/* ========================================
   event-hero
   ======================================== */

.event-hero {
  padding-top: 7.5rem; /* 120px */
  padding-bottom: 6.25rem; /* 100px — 이미지 아래 gap */
}

.event-hero__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.75rem; /* 60px — title ↔ image */
}

.event-hero__title {
  margin: 0;
  text-align: center;
  color: var(--color-text-dark);
}

.event-hero__media {
  width: 100%;
  max-width: 105rem; /* 1680px */
  height: 25rem; /* 400px */
  overflow: hidden;
}

.event-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* ========================================
   event-list
   ======================================== */

.event-list {
  padding-bottom: 5rem; /* 80px */
}

.event-list__container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.5625rem; /* 25px — tabs ↔ cards */
}

.event-list__tabs {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  max-width: 105rem; /* 1680px — 카드 열과 동일 */
  margin-inline: auto;
}

.event-list .btn-tab {
  font-family: var(--font-suit);
  font-weight: 500;
  font-size: 1.375rem; /* 22px */
}

.event-list__list {
  display: flex;
  flex-wrap: wrap;
  gap: 2%;
  width: 100%;
  max-width: 105rem; /* 1680px */
  margin: 0;
  margin-inline: auto;
  padding: 0;
  list-style: none;
}

.event-list__item {
  flex: 0 0 32%;
  width: 32%;
  max-width: 32%;
  box-sizing: border-box;
}

.event-list__item .card-event,
.event-list__item .card-event__media {
  width: 100%;
}

.event-list__item.is-hidden {
  display: none;
}

/* ---------- Tablet: 768–1023px ---------- */
@media (min-width: 48rem) and (max-width: 63.9375rem) {
  .event-hero {
    padding-top: 5rem; /* 80px */
    padding-bottom: 3.75rem; /* 60px */
  }

  .event-hero__container {
    gap: 2.5rem; /* 40px */

  }

  .event-hero__title {
    font-family: var(--font-paperlogy);
    font-weight: 700;
    font-size: clamp(1.313rem, 2.737vw, 1.75rem); /* 28px, tab/subtitle01 */
  }

  .event-hero__media {
    width: 100vw;
    max-width: 100vw;
    height: clamp(9.988rem, 20.821vw, 13.3125rem); /* 213px */
    margin-inline: calc(50% - 50vw);
  }

  .event-list .btn-tab {
    font-size: 0.875rem; /* 14px — tablet btn-tab */
  }

  .event-list__list {
    gap: 1.25rem; /* 20px */
  }

  .event-list__item {
    flex: 0 0 calc((100% - 1.25rem) / 2);
    width: calc((100% - 1.25rem) / 2);
    max-width: calc((100% - 1.25rem) / 2);
  }

  .event-list__item .card-event {
    width: 100%;
  }

  .event-list__item .card-event__media {
    width: 100%;
    max-width: none;
    height: clamp(10.777rem, 22.483vw, 14.375rem); /* 230px */
  }

  .event-list__item .card-event__title {
    font-size: clamp(0.844rem, 1.76vw, 1.125rem); /* 18px, tab/body03 */
  }
}

/* ---------- Mobile: 320–767px ---------- */
@media (max-width: 47.9375rem) {
  .event-hero {
    padding-top: 3.75rem; /* 60px */
    padding-bottom: 2.5rem; /* 40px */
  }

  .event-hero__container {
    gap: 1.875rem; /* 30px */
  }

  .event-hero__title {
    font-family: var(--font-paperlogy);
    font-weight: 700;
    font-size: clamp(1.091rem, 5.455vw, 1.5rem); /* 24px, mo/subtitle01 */
  }

  .event-hero__media {
    width: 100vw;
    max-width: 100vw;
    height: clamp(9.682rem, 48.409vw, 13.3125rem); /* 213px */
    margin-inline: calc(50% - 50vw);
  }

  .event-list .btn-tab {
    font-size: 0.875rem; /* 14px — mobile btn-tab */
  }

  .event-list__list {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 1.875rem; /* 30px */
  }

  .event-list__item {
    flex: none;
    width: 100%;
    max-width: 100%;
  }

  .event-list__item .card-event {
    width: 100%;
  }

  .event-list__item .card-event__media {
    width: 100%;
    max-width: none;
    height: clamp(13.318rem, 66.591vw, 18.3125rem); /* 293px */
  }

  .event-list__item .card-event__title {
    font-size: clamp(0.909rem, 4.545vw, 1.25rem); /* 20px, mo/body01 */

  }
}

/* Mobile: 320–767px */
@media (max-width: 47.9375rem) {
  .event-hero {
    padding-top: 5rem; /* 80px */
    padding-bottom: 2.5rem; /* 40px — image ↔ tabs */
  }

  .event-hero__title {
    font-family: var(--font-paperlogy);
    font-weight: 700;
    font-size: 1.5rem; /* 24px — Mobile/Subtitle01 */
    letter-spacing: normal;
  }

  .event-hero__media {
    width: 100vw;
    max-width: none;
    height: 13.3125rem; /* 213px */
    margin-left: calc(50% - 50vw);
  }

  .event-list .btn-tab {
    padding: 0.3125rem 1.25rem; /* 5px 20px */
    font-weight: 400;
    font-size: clamp(0.75rem, 2.086vw, 1rem); /* 16px */
  }

  .event-list__container {
    gap: 0.625rem; /* 10px — tabs ↔ cards */
  }

  .event-list__list {
    gap: 1.25rem; /* 20px */
  }

  .event-list__item {
    flex: 0 0 100%;
    width: 100%;
    max-width: none;
  }

  .event-list__item .card-event__media {
    height: auto;
    aspect-ratio: 546 / 431;
  }

  .event-list__item .card-event__title {
    padding: 0.625rem 0 1.25rem; /* 10px 20px — 상하 */
    font-weight: 400;
    font-size: clamp(0.75rem, 2.608vw, 1.25rem); /* 20px — Body01 mobile @767 */
  }
}