/**
 * Custom Section Structure
 * Based on Custom Section Structure Specification v1.0
 * 
 * Implements:
 * - Three section types: content, hero, hero-breakout
 * - BEM naming methodology
 * - CSS Grid layouts with variations
 * - GeneratePress integration
 * - Responsive design
 */

/* ==========================================================================
   Block: .custom-section
   ========================================================================== */

/* 1. 기본 블록 스타일 (모든 custom-section에 공통) */
.custom-section {
    position: relative;
    box-sizing: border-box;
}

.custom-section__inner {
    /* grid-container가 자동으로 처리 */
}

/* ==========================================================================
   2. 블록 Modifier 스타일 (레이아웃과 배경 담당)
   ========================================================================== */

/* --content: 기본 컨테이너 너비를 따르는 일반 섹션 */
.custom-section--content {
    margin-top: var(--section-spacing);
    margin-bottom: var(--section-spacing);
}

.custom-section--content .custom-section__body {
    padding: 0; /* grid-container의 padding 사용 */
}

/* --hero: #page 외부에 위치하는 풀-너비 섹션 */
.custom-section--hero {
    width: 100%;
    background-color: var(--section-bg, #f5f5f5);
    color: var(--section-text, inherit);
    padding-top: calc(var(--section-spacing) * var(--hero-padding-multiplier, 2));
    padding-bottom: calc(var(--section-spacing) * var(--hero-padding-multiplier, 2));
}

/* --hero-breakout: 콘텐츠 내부에서 탈출하는 풀-너비 섹션 */
.custom-section--hero-breakout {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background-color: var(--section-bg, #f5f5f5);
    color: var(--section-text, inherit);
    padding-top: calc(var(--section-spacing) * var(--hero-padding-multiplier, 2));
    padding-bottom: calc(var(--section-spacing) * var(--hero-padding-multiplier, 2));
    margin-top: var(--section-spacing);
    margin-bottom: var(--section-spacing);
}

/* ==========================================================================
   3. Element 스타일 (모든 섹션 타입에 공통 적용 - DRY 원칙)
   ========================================================================== */

/* Grid 레이아웃 - 모든 섹션에서 사용 */
.custom-section__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--element-gap);
    align-items: center;
}

/* 콘텐츠 영역 */
.custom-section__content {
    /* 기본 스타일 */
}

/* Hero 섹션에서만 추가 패딩 */
.custom-section--hero .custom-section__content,
.custom-section--hero-breakout .custom-section__content {
    padding-right: var(--gp-content-padding);
}

/* 텍스트 스타일 */
.custom-section__description {
    font-size: 1.125rem;
    margin-bottom: 2rem;
}

/* 미디어 요소 */
.custom-section__media img {
    width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   4. 블록 Modifier에 따른 Element 스타일 변형
   ========================================================================== */

/* 타이틀 크기 - 블록 Modifier별 차별화 */
.custom-section__title {
    margin-bottom: 1rem;
}

/* 기본 타이틀 크기 */
.custom-section--content .custom-section__title {
    font-size: clamp(1.5rem, 3vw, 2rem);
}

/* Hero Breakout 타이틀 크기 */
.custom-section--hero-breakout .custom-section__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
}

/* Hero 타이틀 크기 (가장 큼) */
.custom-section--hero .custom-section__title {
    font-size: clamp(2rem, 5vw, 3.5rem);
}

/* ==========================================================================
   5. 버튼 스타일
   ========================================================================== */
.custom-section__button {
    /* GeneratePress button 클래스가 기본 스타일 제공 */
}

.custom-section__button--secondary {
    background-color: transparent;
    color: var(--section-text, inherit);
    border: 2px solid currentColor;
}

.custom-section__button--secondary:hover {
    background-color: var(--section-text, inherit);
    color: var(--section-bg, #f5f5f5);
}

/* ==========================================================================
   6. Grid Layout Variations
   ========================================================================== */

/* 콘텐츠 중심 레이아웃 (60/40) */
.custom-section__grid--content-focused {
    grid-template-columns: 3fr 2fr;
}

/* 미디어 중심 레이아웃 (40/60) */
.custom-section__grid--media-focused {
    grid-template-columns: 2fr 3fr;
}

/* 중앙 정렬 레이아웃 */
.custom-section__grid--centered {
    grid-template-columns: 1fr;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.custom-section__grid--centered .custom-section__media {
    margin-top: 2rem;
}

/* 역순 레이아웃 (미디어 먼저) */
.custom-section__grid--reversed .custom-section__media {
    order: -1;
}

/* ==========================================================================
   7. CSS 변수 정의
   ========================================================================== */

:root {
    /* 역할 기반의 추상적 변수 */
    --section-bg: #f5f5f5;
    --section-text: inherit;
    
    /* 간격 변수 - GeneratePress 변수를 기본값으로 사용 */
    --section-spacing: var(--gp-content-padding, 40px);
    --element-gap: var(--gp-sidebar-gap, 30px);
    
    /* Hero Section 전용 */
    --hero-padding-multiplier: 2;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    :root {
        --section-bg: #1a1a1a;
        --section-text: #eee;
    }
}

/* ==========================================================================
   8. 반응형 스타일
   ========================================================================== */

/* Tablet (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .custom-section__grid {
        gap: calc(var(--element-gap) * 0.75);
    }
    
    .custom-section--hero .custom-section__content,
    .custom-section--hero-breakout .custom-section__content {
        padding-right: calc(var(--gp-content-padding) * 0.5);
    }
}

/* Mobile (max-width: 768px) */
@media (max-width: 768px) {
    /* 모바일에서 모든 그리드를 1단으로 - !important로 modifier 덮어쓰기 */
    .custom-section__grid {
        grid-template-columns: 1fr !important;
        text-align: center;
    }
    
    /* 콘텐츠 순서 변경 (이미지 먼저) - Hero 섹션만 */
    .custom-section--hero .custom-section__content,
    .custom-section--hero-breakout .custom-section__content {
        padding-right: 0;
        order: 2;
    }
    
    .custom-section--hero .custom-section__media,
    .custom-section--hero-breakout .custom-section__media {
        order: 1;
        margin-bottom: 2rem;
    }
    
    /* 패딩 조정 */
    .custom-section--hero,
    .custom-section--hero-breakout {
        padding-top: var(--section-spacing);
        padding-bottom: var(--section-spacing);
    }
    
    /* 타이틀 크기 조정 */
    .custom-section__title {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }
}

/* ==========================================================================
   9. Integration with Layout System
   ========================================================================== */

/* Hero sections integrate with grid-container */
.custom-section--hero .grid-container,
.custom-section--hero-breakout .grid-container {
    max-width: 1920px;
    margin: 0 auto;
    padding-left: var(--content-padding-default);
    padding-right: var(--content-padding-default);
}

/* With sidebar layout */
body.right-sidebar .custom-section--hero .grid-container,
body.left-sidebar .custom-section--hero .grid-container,
body.both-sidebars .custom-section--hero .grid-container,
body.right-sidebar .custom-section--hero-breakout .grid-container,
body.left-sidebar .custom-section--hero-breakout .grid-container,
body.both-sidebars .custom-section--hero-breakout .grid-container {
    padding-left: var(--content-padding-sidebar);
    padding-right: var(--content-padding-sidebar);
}

/* Mobile responsiveness for grid-container */
@media (max-width: 768px) {
    .custom-section--hero .grid-container,
    .custom-section--hero-breakout .grid-container {
        padding-left: var(--content-padding-default);
        padding-right: var(--content-padding-default);
    }
}

/* ==========================================================================
   10. Additional Element Styles
   ========================================================================== */

/* Actions container */
.custom-section__actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Mobile center actions */
@media (max-width: 768px) {
    .custom-section__actions {
        justify-content: center;
    }
}

/* List styles */
.custom-section__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.custom-section__list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.custom-section__list li:last-child {
    border-bottom: none;
}

/* Body content for content sections */
.custom-section__body {
    /* Used in content sections for wrapper */
}