/* ── Nearby Attractions ───────────────────────────────────────────────
 * 공유 매거진 그리드(.about-korea-page)에 대한 이 페이지 전용 override.
 * 원본 규칙: pages/general-information.css L1207-1854
 *
 * 로드 순서: index.php:433-455 가 이 파일을 general-information.css
 * **보다 먼저** 내보낸다. 따라서 같은 특이도면 이쪽이 진다.
 * 모든 규칙에 .content-detail-page--info 를 붙여 클래스 하나를 더해
 * About Korea 쪽 규칙보다 특이도를 높인다.
 *
 * 미디어 쿼리는 특이도를 더하지 않는다: 아래에서 덮어쓴 속성은
 * 1024px / 768px 블록에서 **반드시 다시 선언**해야 한다.
 * 그러지 않으면 About Korea의 반응형 규칙까지 덮어써서
 * 모바일에서 1컬럼 붕괴 / height:auto 가 동작하지 않는다.
 * ─────────────────────────────────────────────────────────────────── */

/* 항목별 본문이 About Korea보다 짧으므로(5문장) 사진을 넓고 낮게 잡아 균형을 맞춘다 */
.content-detail-page--info.nearby-attractions-page > .detail-block {
    grid-template-columns: minmax(0, 0.95fr) minmax(460px, 1.05fr);
    gap: 20px 52px;
}

.content-detail-page--info.nearby-attractions-page > .detail-block > .detail-block__figure img {
    height: clamp(430px, 32vw, 480px);
}

/* 사진이 없는 항목(을왕리해수욕장, BMW 드라이빙 센터): 우측 빈 컬럼 제거.
   트랙 폭을 제한해 한 줄 길이를 사진 있는 블록의 텍스트 컬럼과 맞춘다
   (article이 아니라 트랙을 제한하므로 상단 구분선은 전폭 유지). */
.content-detail-page--info.nearby-attractions-page > .detail-block--text-only {
    grid-template-columns: minmax(0, 800px);
}

/* 사진이 빠진 게 아니라 의도된 구성으로 읽히도록 intro에 강조선 */
.content-detail-page--info.nearby-attractions-page > .detail-block--text-only > .detail-block__intro {
    padding-left: 18px;
    border-left: 4px solid var(--detail-accent);
}

/* sticky 서브내비에 가리지 않도록 TOC 앵커 오프셋 */
.content-detail-page--info.nearby-attractions-page > .detail-block[id] {
    scroll-margin-top: 180px;
}

@media (max-width: 1024px) {
    .content-detail-page--info.nearby-attractions-page > .detail-block {
        grid-template-columns: minmax(0, 1fr) minmax(340px, 0.9fr);
        gap: 18px 32px;
    }

    .content-detail-page--info.nearby-attractions-page > .detail-block > .detail-block__figure img {
        height: clamp(320px, 34vw, 420px);
    }
}

@media (max-width: 768px) {
    /* 아래 두 규칙이 없으면 위 데스크톱 규칙이 general-information.css 의
       @768 (0,2,0)/(0,3,1) 규칙을 눌러 모바일 레이아웃이 깨진다. */
    .content-detail-page--info.nearby-attractions-page > .detail-block,
    .content-detail-page--info.nearby-attractions-page > .detail-block--text-only {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .content-detail-page--info.nearby-attractions-page > .detail-block > .detail-block__figure img {
        height: auto;
    }

    .content-detail-page--info.nearby-attractions-page > .detail-block--text-only > .detail-block__intro {
        padding-left: 14px;
        border-left-width: 3px;
    }
}