/* ── pages / events — Events ────────────────────────────────────────
   아키타입 article. 콘텐츠 JSON 의 template_note 가 지정한 대로
   J컬 Sec_1(히어로) → Sec_2 형태의 '제목 + 본문' 섹션 → Sec_10(CTA).

   뼈대는 전부 공용 프리미티브다.
     히어로   .page-hero              (subpage.css)
     이벤트   .grid--4 + .card + .ratio--1x1 + .tag   (layout.css)
     형제이동 .siblings               (subpage.css)
     상담     .cta-band + .disclaimer (subpage.css / layout.css)
   이 파일은 그 프리미티브에 없는 것만 덮어쓴다. */


/* ── 히어로 ────────────────────────────────────────────────── */

/* .page-hero 기본 오버레이는 검정 68%. 이 페이지 사진(hero.jpg)은 수술실
   조명이라 원본이 거의 흰색이고, 68% 로는 회색 바탕이 되어 핑크 eyebrow 와
   흰 본문이 읽히지 않는다. about·topics 와 같이 80% 로 올린다. */
.events-hero{
  background-image:
    linear-gradient(rgba(0,0,0,.8),rgba(0,0,0,.8)),
    var(--hero-img,none);
}


/* ── 진행 중인 이벤트 ──────────────────────────────────────── */

.events-list__grid{margin-top:var(--sp-block)}

/* 카드 높이를 같은 행끼리 맞춘다. .card 는 block 이라 본문이 늘어나지 않는다. */
.events-card{display:flex;flex-direction:column}

/* 썸네일 원본이 400×400 정사각이다. 글자가 이미지 안에 박혀 있어
   .card__media 기본(높이 자유)이나 4:3 크롭을 쓰면 문구가 잘린다.
   .ratio--1x1 로 원본 비율을 그대로 지킨다. */
.events-card__media{flex:none}

/* .card__body 기본 패딩 20 은 캡션용이다. 라벨·제목·설명 3단이라
   J컬 카드들과 같은 여유(24)를 주고, 남는 높이를 본문이 먹게 한다. */
.events-card__body{flex:1;padding:24px}

.events-card__title{margin-top:12px;word-break:keep-all}
.events-card__text{margin-top:12px;line-height:1.7}

/* 조건 안내 — 의료광고 고지가 아니라 이벤트 적용 조건이다.
   고지(.disclaimer)보다 크게, 본문 색으로 읽히게 패널로 묶는다. */
.events-list__note{
  max-width:900px;
  margin:var(--sp-block) auto 0;
  padding:28px 32px;
  background:var(--brand-tint-1);
  border-radius:var(--radius-card);
  color:var(--text-secondary);
  font-size:var(--fs-18);line-height:1.8;
  text-align:center;word-break:keep-all;
}

.events-list__actions{margin-top:var(--sp-stack)}

@media (max-width:767px){
  .events-list__note{padding:20px}
}


/* ── 병원소개 형제 페이지 이동 ─────────────────────────────── */

/* .siblings 는 그 자체로 완결된 가로 목록이다. 칸만 준다. */
.events-more__nav{margin-inline:auto}


/* ── 상담 CTA ──────────────────────────────────────────────── */

/* .cta-band 기본 배치는 center 라 사진의 인물 얼굴이 제목 뒤에 겹친다.
   J컬 Sec_10·about 과 같은 프레이밍(세로 41%)으로 올려 글자 뒤를 비운다. */
.events-cta{background-position:0 0,center 41%}

/* .cta-band 는 컨테이너가 없다. 안쪽 .container 가 가운데 정렬을 이어받는다. */
.events-cta__inner{display:flex;flex-direction:column;align-items:center}
.events-cta__inner .cta-band__lead{max-width:760px}

/* 리드 안의 전화번호·온라인상담은 링크다. base.css 가 밑줄을 지우므로
   핑크 배경 위에서 링크인 줄 알 수 있게 밑줄만 되살린다. */
.events-cta__lead a{text-decoration:underline;text-underline-offset:3px}

/* 의료광고 고지 — .disclaimer 는 회색(--text-tertiary) 이라
   핑크 배경에서 읽히지 않는다. 흰색 90% 로 올린다(blog·about-doctor-history CTA 고지와 같은 값). */
.events-cta__note{max-width:900px;color:rgba(255,255,255,.9)}

/* ── 이벤트 카드 펼침 ─────────────────────────────────────────
   카드를 누르면 그 카드가 속한 줄 아래로 패널이 한 줄을 통째로 차지한다.
   패널 위치는 site.js 가 줄 단위로 옮긴다. */
.events-card__btn{display:block;width:100%;text-align:left}
.events-card__card{display:flex;flex-direction:column;height:100%}
.events-card__btn .card__media{display:block}
.events-card__btn .card__body{display:flex;flex-direction:column}
.events-card__btn .card__title,
.events-card__btn .card__text{display:block}
.events-card__more{
  margin-top:auto;padding-top:14px;
  font-weight:700;font-size:var(--fs-14);letter-spacing:var(--ls-tight);color:var(--brand);
}
.events-card__more::after{content:" +";}
.events-card.is-open .events-card__more::after{content:" \2212";}
.events-card__btn:hover .events-card__card{box-shadow:0 14px 34px -14px rgba(20,29,51,.45)}
.events-card.is-open .events-card__card{box-shadow:inset 0 0 0 2px var(--brand)}

.events-panel{
  grid-column:1 / -1;
  margin-top:var(--sp-gap);
  padding:var(--sp-stack);
  background:var(--brand-tint-1);
  border-radius:var(--radius-card);
}
.events-panel[hidden]{display:none}
.events-panel__inner{
  display:grid;grid-template-columns:260px minmax(0,1fr);gap:var(--sp-stack);align-items:start;
}
.events-panel__img{width:100%;height:auto;border-radius:var(--radius-card);background:var(--surface)}
.events-panel__date{
  font-weight:700;font-size:var(--fs-14);letter-spacing:var(--ls-wide);color:var(--brand);
}
.events-panel__title{
  margin-top:8px;
  font-weight:700;font-size:var(--fs-24);line-height:1.4;letter-spacing:var(--ls-tight);
  color:var(--text-primary);word-break:keep-all;
}
.events-panel__text{
  margin-top:12px;
  font-size:var(--fs-18);line-height:1.7;color:var(--text-secondary);word-break:keep-all;
}
.events-panel__note{
  margin-top:12px;
  font-size:var(--fs-14);line-height:1.6;color:var(--text-tertiary);word-break:keep-all;
}
.events-panel__cta{margin-top:var(--sp-stack)}
@media (max-width:767px){
  .events-panel{padding:var(--sp-gap)}
  .events-panel__inner{grid-template-columns:1fr}
  .events-panel__img{max-width:260px}
}