/* intro (ver2) : 페이지별 클래스로 범위를 한정해 다른 intro 페이지에 영향 없음 */


/* 대표 교회 (new-jerusalem-temple) ---------- */
/* Figma 대표교회 페이지 PC 3579:50107 / Mobile 3683:37210
   모바일 퍼스트: 기본(모바일) → min-width 768px → min-width 1070px
   레거시 css/intro.css 없이 동작 (functions.php에서 이 페이지는 레거시 intro.css를 불러오지 않음)
   공통 컴포넌트(.wds-btn, .wds-section-title, .heading-section, .wds-card)는 ver2/css/style.css */
.nj-temple{color:rgba(0,0,0,0.85); word-break:keep-all}
:where(.nj-temple) :where(p, h1, h2, h3){margin:0} /* 우선순위 0: 공통 컴포넌트(style.css)·아래 개별 margin을 덮어쓰지 않게 */

/* 레거시 style.css의 h1~p text-align:left, 768px 미만 p > br 숨김을 페이지 안에서 다시 지정 */
.nj-temple .nj-intro > *{max-width:700px; text-align:center} /* 글 너비 700px: 아래 섹션 타이틀 · 헤딩과 같은 너비 */
.nj-temple .nj-visual-box > *,
.nj-temple .nj-map-inner > *{text-align:left}
.nj-temple .nj-map-desc > br{display:inline}

/* 상단 타이틀 */
.nj-intro{display:flex; flex-direction:column; align-items:center; gap:12px; max-width:1680px; margin:0 auto; padding:40px 20px; box-sizing:border-box}
.nj-intro-cate{font-size:14px; font-weight:500; line-height:1.35; color:rgba(0,0,0,0.6)}
.nj-intro-title{font-size:21px; font-weight:700; line-height:1.35; letter-spacing:-0.42px; color:rgba(0,0,0,0.85)}

/* 대표 이미지 + 설명 (모바일·태블릿은 이미지 아래, PC는 이미지 위 흰 박스) */
.nj-visual{position:relative}
.nj-visual-img{aspect-ratio:3200 / 1900; overflow:hidden; background-color:#EEE}
.nj-visual-img img{display:block; width:100%; height:100%; object-fit:cover}
.nj-visual-box{display:flex; flex-direction:column; gap:12px; max-width:500px; padding:40px 20px 0; box-sizing:content-box; background-color:#FFF}
.nj-visual-title{font-size:19px; font-weight:700; line-height:24px; color:rgba(0,0,0,0.85)}
.nj-visual-desc{margin-top:0; font-size:15px; line-height:1.6; color:rgba(0,0,0,0.85)}

/* 대표교회의 역할 */
/* overflow:clip — hidden이면 포커스·scrollIntoView 시 영역 안에서 가로로 밀림 */
.nj-roles{display:flex; flex-direction:column; align-items:center; gap:72px; padding:80px 0 48px; overflow:hidden; overflow:clip}
.nj-roles > .wds-section-title{margin-bottom:8px} /* 섹션 타이틀 → 첫 목록 80px (gap 72 + 8) */
.nj-role{display:flex; flex-direction:column; align-items:center; gap:32px; width:100%}
.nj-role .heading-section{width:100%; max-width:740px; padding:0 20px}

/* 사진 슬라이드: 가운데 카드만 정보 표시, 옆 카드는 클릭 시 이동 (카드 모양은 공통 .wds-card) */
.nj-slider{width:100%}
.nj-slider .owl-item:not(.center){cursor:pointer}
.nj-slider .wds-card-info{opacity:0; visibility:hidden; transition:opacity 0.3s ease}
.nj-slider .owl-item.center .wds-card-info{opacity:1; visibility:visible}

/* 오시는 길: 모바일은 주소 → 지도(세로), 768px 이상은 왼쪽 지도 · 오른쪽 주소 */
.nj-map{display:flex; flex-direction:column-reverse; padding-bottom:48px; background-color:#FFF}
.nj-map-area{position:relative; height:330px; overflow:hidden}
.nj-map-area > *,
.nj-map-area .root_daum_roughmap,
.nj-map-area iframe{width:100% !important; height:100% !important; border:0}
.nj-map-area .root_daum_roughmap .wrap_map{height:100% !important}
.nj-map-text{display:flex; align-items:center; justify-content:flex-start}
.nj-map-inner{display:flex; flex-direction:column; align-items:flex-start; max-width:500px; padding:48px 20px 32px}
.nj-map-cate{font-size:14px; line-height:1.5; color:#666}
.nj-map-title{margin-top:8px; font-size:20px; font-weight:600; line-height:1.35; color:rgba(0,0,0,0.85)}
.nj-map-desc{margin-top:8px; font-size:15px; line-height:1.55; color:rgba(0,0,0,0.45)}
.nj-map-inner .wds-btn{margin-top:20px}

/* 태블릿 */
@media(min-width:768px){
  .nj-intro{gap:16px; padding:64px 40px}
  .nj-intro-cate{font-size:16px}
  .nj-intro-title{font-size:28px; letter-spacing:-0.56px}

  .nj-visual-box{gap:16px; max-width:600px; padding:56px 40px 0}
  .nj-visual-title{font-size:21px}

  .nj-roles{gap:120px; padding:120px 0}
  .nj-roles > .wds-section-title{margin-bottom:0}
  .nj-role{gap:40px}
  .nj-role .heading-section{max-width:780px; padding:0 40px} /* 글 너비 700px = Figma heading-section, 슬라이드 아래 .wds-card-info 너비와 같음 */

  .nj-map{flex-direction:row; height:560px; padding-bottom:0; background-color:#FAFAFA}
  .nj-map-area{flex:1 0 0; min-width:0; height:auto}
  .nj-map-text{flex:1 0 0; min-width:0; justify-content:center}
  .nj-map-inner{padding:40px}
  .nj-map-title{margin-top:12px; font-size:22px}
  .nj-map-desc{margin-top:12px}
  .nj-map-inner .wds-btn{margin-top:24px}
}

/* PC */
@media(min-width:1070px){
  .nj-intro{gap:24px; padding:96px 40px}
  .nj-intro-cate{font-size:17px}
  .nj-intro-title{font-size:32px; letter-spacing:-0.64px}

  .nj-visual-box{position:absolute; top:50%; left:max(40px, calc((100% - 1600px) / 2)); transform:translateY(-50%); gap:24px; width:100%; max-width:500px; padding:96px; box-sizing:border-box}
  .nj-visual-title{font-size:22px}

  .nj-roles{gap:160px; padding:160px 0}
  .nj-role{gap:48px}

  .nj-map{height:800px}
  .nj-map-inner{padding:48px}
  .nj-map-title{margin-top:16px; font-size:26px}
  .nj-map-desc{margin-top:16px}
}

/* 하단 Next(주요 수상) 배너: 푸터(.wds-footer)와 같은 너비 — 내용 최대 1600px, 좌우 여백 모바일 20px · 768px 이상 40px */
.page-new-jerusalem-temple .next.container-fluid{max-width:1640px; padding-left:20px; padding-right:20px; box-sizing:border-box}
@media(min-width:768px){
  .page-new-jerusalem-temple .next.container-fluid{max-width:1680px; padding-left:40px; padding-right:40px}
}