/* =========================================================
   반응형 브레이크포인트 모음
   - 항상 다른 css 뒤에 링크할 것
   - 1024px 태블릿 가로 / 768px 태블릿 세로·큰 폰 / 480px 폰
   ========================================================= */


/* ---------------- 태블릿 가로 (~1024px) ---------------- */

@media (max-width: 1024px) {
    :root {
        --section-gap: 56px;
    }

    .hero__title {
        font-size: 44px;
    }

    .page-title {
        font-size: 34px;
    }

    .detail-hero__title {
        font-size: 36px;
    }

    .place-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .people-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .card {
        padding: 28px;
    }
}


/* ---------------- 태블릿 세로 / 큰 폰 (~768px) ---------------- */

@media (max-width: 768px) {
    :root {
        --nav-h: 56px;
        --section-gap: 44px;
    }

    .container {
        padding: 0 20px;
    }

    .page {
        padding: calc(var(--nav-h) + 32px) 0 64px;
    }

    .page-head {
        margin-bottom: 28px;
    }

    .hero__title {
        font-size: 34px;
    }

    .hero__actions {
        margin-top: 28px;
    }

    .hero__actions .btn {
        flex: 1 1 140px;
    }

    .page-title {
        font-size: 28px;
    }

    .section-title {
        font-size: 20px;
    }

    .detail-hero {
        height: 40vh;
        min-height: 260px;
    }

    .detail-hero__content {
        padding-bottom: 28px;
    }

    .detail-hero__title {
        font-size: 28px;
    }

    .card {
        padding: 22px;
        border-radius: var(--r-lg);
    }

    /* 2단 배치는 모두 세로로 쌓는다 */
    .split,
    .detail {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .split--media-first .split__media {
        order: 0;
    }

    .split__media--portrait img {
        max-width: 220px;
        margin: 0 auto;
    }

    .place-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .people-grid {
        gap: 12px;
    }

    .person__body {
        padding: 16px;
    }

    .person__intro {
        font-size: 13px;
    }

    /*
    좁은 화면에서는 건물 블록도 이름표도 손가락·눈에 너무 작다.
    지도는 캠퍼스 전경을 보여주는 역할만 하고, 이동은 아래 칩 목록으로 한다.
    */
    .map__labels {
        display: none;
    }

    .map {
        margin-bottom: 36px;
    }

    .map__stage {
        padding: 4px;
    }

    .chip {
        height: 48px;
        flex: 1 1 calc(50% - 10px);
        justify-content: center;
    }

    .tabs {
        margin-bottom: 24px;
    }

    .tabs a {
        font-size: 14px;
        padding: 10px 8px;
    }

    .footer__inner {
        padding: 32px 20px 44px;
    }
}


/* ---------------- 폰 (~480px) ---------------- */

@media (max-width: 480px) {
    .container {
        padding: 0 16px;
    }

    .hero__content {
        padding: 0 16px;
    }

    .hero__title {
        font-size: 28px;
    }

    .hero__actions {
        flex-direction: column;
    }

    /* 세로로 쌓을 때는 flex-basis 가 높이로 먹히므로 버튼 높이를 고정한다 */
    .hero__actions .btn {
        flex: 0 0 auto;
        width: 100%;
    }

    .page-title {
        font-size: 26px;
    }

    .people-grid {
        grid-template-columns: 1fr;
    }

    .person {
        flex-direction: row;
    }

    .person__media {
        flex: 0 0 120px;
        aspect-ratio: auto;
    }

    .card {
        padding: 20px;
    }

    .detail__photo img,
    .split__media img {
        border-radius: var(--r-md);
    }
}