/* ===================================================================
   event-detail.css - 이벤트 상세 페이지 전용 스타일
   =================================================================== */

.event-detail-page { background: var(--bg-primary); }

.event-hero { padding: 0; padding-top: calc(var(--nav-height, 88px) + var(--spacing-32)); }
.event-hero__image-wrap { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
.event-hero__image-wrap { height: 35rem; overflow: hidden; }
.event-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; }

.event-hero__content { 
    display: flex; 
    flex-direction: column; 
    gap: var(--spacing-5); 
    padding-top: var(--spacing-8);
    padding-bottom: var(--spacing-10);
    padding-left: 0;
    padding-right: 0;
    max-width: 59.5rem; 
    margin: 0 auto; 
}
.event-hero__title { 
  margin: 0; 
  color: var(--text-primary); 
  font-family: var(--font-family-bold);
  font-size: var(--font-size-5xl);
  line-height: var(--line-height-tight);
  letter-spacing: calc(var(--font-size-5xl) * -0.02);
}
.event-hero__date { 
  margin: 0; 
  color: var(--color-warm-grey-100);
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-loose);
  letter-spacing: calc(var(--font-size-2xl) * -0.02);
}

.event-body { padding-top: var(--spacing-20); padding-bottom: var(--spacing-20); }
.event-body__content { 
    display: flex; 
    flex-direction: column; 
    gap: var(--spacing-6); 
    max-width: 59.5rem; 
    margin: 0 auto; 
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
}
.event-body__content .heading-h6,
.event-body__content .heading-h4-emphasized,
.event-body__content .body-md-article { margin: 0; }
.event-body__content .body-md-article + .body-md-article { margin-top: var(--spacing-2); }
.event-body__content .heading-h6 + .body-md-article { margin-top: var(--spacing-2); }
.event-body__content .body-md + .body-md { margin-top: var(--spacing-2); }
.event-body__content .body-sm + .body-sm { margin-top: var(--spacing-2); }
.event-body__content .heading-h6:not(:first-child) { margin-top: var(--spacing-10); }
.event-body__text { display: flex; flex-direction: column; gap: var(--spacing-5); }
.event-body__figure { margin: 0; }
.event-body__figure { margin-bottom: var(--spacing-6); }
.event-body__figure img { width: 100%; height: auto; display: block; border-radius: 0; }
.event-caption { color: var(--text-secondary); margin-top: var(--spacing-2); }

.event-actions { margin-top: var(--spacing-10); display: flex; flex-direction: column; gap: var(--spacing-4); align-items: flex-start; }
.event-actions .btn.btn--text { margin-top: var(--spacing-20); }

.event-group { display: flex; flex-direction: column; gap: var(--spacing-2); }
.event-group:first-of-type { margin-top: var(--spacing-6); }
.event-group + .event-group { margin-top: var(--spacing-6); }

.event-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--spacing-2); }
.event-list li { margin: 0; }

.event-info { margin-top: var(--spacing-10); }
.event-info__grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-6); }

@media (max-width: 768px) {
    .event-hero {
        padding-top: calc(var(--nav-height, 88px) + var(--spacing-4)) !important;
    }
    
    .event-hero .container,
    .event-body .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .event-hero__content {
        padding-left: var(--spacing-5) !important;
        padding-right: var(--spacing-5) !important;
        padding-top: var(--spacing-6) !important;
        padding-bottom: 0 !important;
    }
    
    .event-hero__date {
        border-bottom: var(--spacing-0-5, 0.0625rem) solid var(--border-very-dark) !important;
        padding-bottom: var(--spacing-10) !important;
    }
    
    .event-body__content {
        padding-left: 20px !important; /* 20px - 모바일 좌우 패딩 */
        padding-right: 20px !important;
        padding-top: 0;
        padding-bottom: 0;
    }
    
    .event-hero__title {
        font-size: var(--font-size-4xl);
        letter-spacing: calc(var(--font-size-4xl) * -0.02);
    }
    
    .event-hero__date {
        font-size: var(--font-size-lg);
        letter-spacing: calc(var(--font-size-lg) * -0.02);
    }
}

@media (min-width: 769px) and (max-width: 1199px) {
    .event-hero .container,
    .event-body .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .event-hero__content {
        padding-left: var(--spacing-8) !important;
        padding-right: var(--spacing-8) !important;
    }
    
    .event-body__content {
        padding-left: var(--spacing-8) !important;
        padding-right: var(--spacing-8) !important;
    }
    
    .event-hero__date {
        border-bottom: var(--spacing-0-5, 0.0625rem) solid var(--border-very-dark) !important;
        padding-bottom: var(--spacing-10) !important;
    }
}

@media (min-width: 1200px) {
    .event-hero__content {
        padding-left: var(--spacing-10);
        padding-right: var(--spacing-10);
    }
    
    .event-body__content {
        padding-left: var(--spacing-10);
        padding-right: var(--spacing-10);
    }
    
    .event-hero__date {
        border-bottom: var(--spacing-0-5, 0.0625rem) solid var(--border-very-dark);
        padding-bottom: var(--spacing-10);
    }
    
    .event-hero__image-wrap { 
        height: 40rem; 
    }
    
    .event-info__grid { 
        grid-template-columns: repeat(3, 1fr); 
    }
}

@media (max-width: 480px) {
    .event-hero__content {
        padding-left: 20px !important; /* 20px - 작은 모바일 좌우 패딩 (다른 페이지와 동일) */
        padding-right: 20px !important;
        padding-top: 24px !important; /* 작은 모바일 상단 패딩 줄임 */
        padding-bottom: 0 !important;
    }
    
    .event-hero__date {
        border-bottom: var(--spacing-0-5, 0.0625rem) solid var(--border-very-dark) !important;
        padding-bottom: var(--spacing-10) !important;
    }
    
    .event-body__content {
        padding-left: 20px !important; /* 20px - 작은 모바일 좌우 패딩 (다른 페이지와 동일) */
        padding-right: 20px !important;
    }
    
    .event-hero__title {
        font-size: var(--font-size-3xl);
        letter-spacing: calc(var(--font-size-3xl) * -0.02);
    }
    
    .event-hero__date {
        font-size: var(--font-size-base);
        letter-spacing: calc(var(--font-size-base) * -0.02);
    }
}