/* ===================================================================
   architecture-intro.css - 건축소개 페이지 전용 스타일
   =================================================================== */

/* 인터랙션 애니메이션 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(var(--spacing-5));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 상단 헤더 섹션 - 공간 소개 페이지와 동일한 스타일 */
.arch-intro-header-section {
    padding: calc(var(--nav-height, 88px) + var(--spacing-32)) 0 0;
    background: transparent;
}

.arch-intro-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-5);
    margin-bottom: var(--spacing-24);
}

.arch-intro-header__title {
    margin: 0;
    color: var(--text-primary);
    opacity: 0;
    transform: translateY(var(--spacing-5)); /* 20px */
    animation: none;
}

.arch-intro-header__title.animated {
    animation: fadeInUp 0.8s ease-out forwards;
    animation-delay: 0.1s;
}

.arch-intro-header__description {
    margin: 0;
    opacity: 0;
    transform: translateY(var(--spacing-5)); /* 20px */
    animation: none;
}

.arch-intro-header__description.animated {
    animation: fadeInUp 0.8s ease-out forwards;
    animation-delay: 0.3s;
}

/* 태블릿: 하단 여백 조정 */
@media (min-width: 769px) and (max-width: 1199px) {
    .arch-intro-header-section {
        padding: calc(var(--nav-height, 88px) + var(--spacing-32)) 0 0;
    }
    
    .arch-intro-header {
        margin-bottom: var(--spacing-12);
    }
}

/* 모바일: 패딩 및 여백 조정 */
@media (max-width: 768px) {
    .arch-intro-header-section {
        padding: calc(var(--nav-height, 88px) + var(--spacing-8)) 0 var(--spacing-6) !important;
    }
    
    .arch-intro-header-section .container {
        padding-left: var(--spacing-5) !important;
        padding-right: var(--spacing-5) !important;
    }
    
    .arch-intro-header {
        margin-bottom: var(--spacing-6);
        gap: var(--spacing-5);
    }
    
    .arch-intro-header__title.heading-h2 {
        font-size: clamp(1.875rem, calc(1.875rem + 10 * (100vw - 30rem) / 18), 2.25rem) !important;
    }
}

/* 섹션 2 레이아웃 */
.arch-section2 { 
    padding-top: 0;
    padding-bottom: var(--spacing-40);
    margin-top: 0;
}

.arch-section2__grid {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: var(--spacing-6);
    align-items: start;
}

@media (max-width: 768px) {
    .arch-section2__grid {
        grid-template-columns: 1fr !important;
    }
}

@media (min-width: 769px) {
    .arch-section2__grid {
        grid-template-columns: 1fr 1fr !important;
        gap: var(--spacing-6);
    }
}

@media (min-width: 1200px) {
    .arch-section2__grid {
        grid-template-columns: 1fr 1fr !important;
        gap: var(--spacing-6);
    }
}

.arch-section2__label { 
    line-height: var(--line-height-relaxed);
    opacity: 0;
    transform: translateY(var(--spacing-5)); /* 20px */
    animation: none;
}

.arch-section2__label.animated {
    animation: fadeInUp 0.8s ease-out forwards;
}

.arch-section2__title { 
    margin: 0; 
    color: var(--text-primary);
    opacity: 0;
    transform: translateY(var(--spacing-5)); /* 20px */
    animation: none;
}

.arch-section2__title.animated {
    animation: fadeInUp 0.8s ease-out forwards;
}

@media (max-width: 768px) {
    .arch-section2__title.heading-h3,
    .arch-section3__title.heading-h3 {
        font-size: clamp(1.5rem, calc(1.5rem + 8 * (100vw - 22.5rem) / 67.5), 2rem) !important;
        white-space: normal !important;
        word-break: keep-all !important;
        overflow-wrap: break-word !important;
    }
    
    .arch-section2__title.heading-h3 br,
    .arch-section3__title.heading-h3 br {
        display: none !important;
    }
}

.arch-section2__body { 
    display: flex; 
    flex-direction: column; 
    gap: var(--spacing-10);
    opacity: 0;
    transform: translateY(var(--spacing-5)); /* 20px */
    animation: none;
}

.arch-section2__body.animated {
    animation: fadeInUp 0.8s ease-out forwards;
}

.arch-section2__right { display:flex; flex-direction:column; gap: var(--spacing-10); }

.arch-section2__body p { margin: 0; }

.arch-section2 .container > .section__content:first-of-type + .section__content,
.arch-section2__grid { margin-top: var(--spacing-20); }

.arch-section2 .section__content { padding: 0; }

.arch-section2__image-wrapper {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    opacity: 0;
    transform: translateY(var(--spacing-5)); /* 20px */
    animation: none;
}

.arch-section2__image-wrapper.animated {
    animation: fadeInUp 0.8s ease-out forwards;
}

.arch-section2__image-container {
    width: 100%;
    overflow: hidden;
        aspect-ratio: 16 / 10;
}

.arch-section2__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (min-width: 1200px) {
    .arch-section2__image-container {
        aspect-ratio: 16 / 6 !important;
    }
}

@media (max-width: 1199px) {
    .arch-section2__image-container {
        aspect-ratio: 16 / 10 !important;
    }
}

/* 섹션 3 */
.arch-section3 {
    padding-top: var(--spacing-20);
    padding-bottom: var(--spacing-40);
}

.arch-section3__images {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: var(--spacing-6);
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    opacity: 0;
    transform: translateY(var(--spacing-5)); /* 20px */
    animation: none;
}

.arch-section3__images.animated {
    animation: fadeInUp 0.8s ease-out forwards;
}

.arch-section3__img { 
    width: 100%; 
    aspect-ratio: 16 / 10; 
    overflow: hidden; 
    border-radius: 0;
    opacity: 0;
    transform: translateY(var(--spacing-5)); /* 20px */
    animation: none;
}

.arch-section3__img.animated {
    animation: fadeInUp 0.8s ease-out forwards;
}

.arch-section3__img:nth-of-type(1).animated {
    animation-delay: 0.1s;
}

.arch-section3__img:nth-of-type(2).animated {
    animation-delay: 0.2s;
}

.arch-section3__img:nth-of-type(3).animated {
    animation-delay: 0.3s;
}

@media (max-width: 768px) {
    .arch-section3__images {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-4) !important;
    }
}

@media (min-width: 769px) {
    .arch-section3__images {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: var(--spacing-4) !important;
    }
}

@media (min-width: 1200px) {
    .arch-section3__images {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: var(--spacing-4) !important;
    }
}

.arch-section3__img > img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }

.arch-section3__content { 
    display: flex; 
    flex-direction: column; 
    gap: var(--spacing-10); 
    align-items: center; 
    text-align: center; 
    padding-top: var(--spacing-16);
    opacity: 0;
    transform: translateY(var(--spacing-5)); /* 20px */
    animation: none;
}

.arch-section3__content.animated {
    animation: fadeInUp 0.8s ease-out forwards;
}

.arch-section3__title { 
    margin: 0; 
    color: var(--text-primary);
    opacity: 0;
    transform: translateY(var(--spacing-5)); /* 20px */
    animation: none;
}

.arch-section3__title.animated {
    animation: fadeInUp 0.8s ease-out forwards;
}

.arch-section3__body { 
    max-width: 68ch; 
    color: var(--text-primary);
    opacity: 0;
    transform: translateY(var(--spacing-5)); /* 20px */
    animation: none;
}

.arch-section3__body.animated {
    animation: fadeInUp 0.8s ease-out forwards;
}