/* 0402.css — 뉴스룸 / 회사행사
   수치는 design/0402_회사행사.svg(1920×2859) 실측 기준.
   히어로·헤더·푸터는 common.css 를 그대로 쓴다. */

/* 히어로 끝 503 → 필터 584 (상 81) / 더보기 끝 2500 → 푸터 2660 (하 160) */
.event-section__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 81px var(--gutter-pc) 160px;
}

/* ── 카테고리 필터 : 높이 44, 전체 pill 384~447 ── */
.event-filter {
  display: flex;
  gap: 28px;
}

/* 서버 렌더링이라 button 이 아니라 a 태그다. inline 이면 height 가 안 먹는다 */
.event-filter__btn {
  height: 44px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  border-radius: 20px;
  font-size: 18px;
  line-height: 1;
  color: var(--color-text-sub);
}

/* 선택 칩만 좌우 여백이 넓다 (pill 384~447 = 자폭 36 + 13.5×2) */
.event-filter__btn--active {
  padding: 0 13.5px;
  background: var(--color-tag-bg); /* #1740C4 10% = 시안 #E8ECF9 */
  color: var(--color-primary);
}

/* ── 카드 그리드 : 362.667 × 3 + gap 32 = 1152, 행 간 48 ──
   필터 끝 628 → 카드 상단 668 (40) */
.event-list {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 32px;
  row-gap: 48px;
}

/* 카드 높이는 제목 줄 수와 무관하게 402 고정 (시안 4행 모두 동일).
   stroke rect 361.667×401 rx11.5 → 362.667×402 / radius 12 (지침 28-7) */
.event-card {
  display: block;
  height: 402px;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  background: var(--color-bg);
  overflow: hidden;
}

/* 썸네일 창 224. DB 이미지는 비율이 제각각이라 카드 폭에 맞춰 가운데 기준으로 자른다 */
.event-card__thumb {
  display: block;
  height: 224px;
  overflow: hidden;
}

.event-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 동호회 사진 */
.event-card__thumb--fit {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-alt);
}

.event-card__thumb--fit img {
  width: auto;
  max-width: 100%;
}

/* 사진 끝 892 → 태그 916 (24) */
.event-card__body {
  display: block;
  padding: 24px 20px 0;
  line-height: 0; /* 태그 rect 를 916 에 정확히 앉힌다 */
}

/* 태그 67×22 rx11 */
.event-card__tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 5px;
  vertical-align: top;
  border-radius: 11px;
  background: var(--color-icon-bg);
  font-size: 11.5px;
  line-height: 1;
  color: var(--color-primary);
}

/* 태그 끝 938 → 제목 잉크 960 / 2줄 간격 30 */
.event-card__title {
  display: block;
  margin-top: 15px;
  font-size: 19.5px;
  font-weight: 700;
  line-height: 30px;
  color: var(--color-text);
}

/* 제목 잉크 960 → 날짜 잉크 998 (38) */
.event-card__date {
  display: block;
  margin-top: 12px;
  font-size: 15.5px;
  line-height: 1;
  color: var(--color-text-sub);
}

/* 더보기 전까지 감춰둘 카드 (js/page/event.js) */
.event-list__item--hidden {
  display: none;
}

/* ── 더보기 : 118×40 rx6, 카드 끝 2420 → 2460 (40) ── */
.event-more {
  display: block;
  width: 118px;
  height: 40px;
  margin: 40px auto 0;
  border: 1px solid var(--color-line);
  border-radius: 6px;
  background: var(--color-bg);
  font-size: 14px;
  line-height: 1;
  color: var(--color-text);
}

/* 더 펼칠 게 없으면 js 가 hidden 을 건다 */
.event-more[hidden] {
  display: none;
}

/* ── 반응형 : 모바일 시안이 없으므로 CLAUDE.md §4 규칙을 따른다 ── */
@media (max-width: 1023px) {
  .event-section__inner {
    padding: 64px var(--gutter-mo) 96px;
  }

  .event-list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 24px;
    row-gap: 32px;
  }

  /* 폭이 줄면 사진을 잘라 쓸 수 없으므로 카드 폭에 맞춘다.
     높이는 고정 402 대신 같은 행끼리 맞춘다 */
  .event-list__item {
    display: flex;
  }

  .event-card {
    height: auto;
    flex: 1;
  }

  .event-card__thumb {
    --crop: 0px;
  }

  .event-card__thumb img {
    width: 100%;
    height: 224px;
  }

  .event-card__body {
    padding: 24px 20px;
  }
}

@media (max-width: 767px) {
  .event-section__inner {
    padding: 48px var(--gutter-mo) 64px;
  }

  .event-filter__btn {
    height: 40px;
    padding: 0 12px;
    font-size: 16px;
  }

  .event-list {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }

  .event-card__thumb img {
    height: 200px;
  }

  .event-card__title {
    font-size: 17px;
    line-height: 26px;
  }

  .event-card__date {
    font-size: 14px;
  }
}