/* colcade.css */

/* 기본 스타일 설정 */
/* body {
    margin: 0;
    font-family: 'Montserrat';
} */

/* colcade-container 내부 img에만 적용 */
/*.colcade-container img {
    width: 100%;
    margin-bottom: 0.8em;*/  /*화면 크기에 관계없이 적용 */
/*}*/

.colcade-container {
    width: 100% !important; /* Allow container to span the available width */
    margin: 0 auto;
    max-width: none !important;
    box-sizing: border-box;
    /* Note: padding is now applied dynamically by colcade.js applyGutterStyles() */
}

.colcade-grid {
    display: flex;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    gap: 8px; /* Uniform gutter between all columns */
}

.grid-col {
    flex: 1;
    min-width: 0; /* Allow flex item to shrink below content size - critical for overflow handling */
    box-sizing: border-box;
    /* Margins are no longer needed - using CSS gap instead for uniform spacing */
}

/* grid-item represents a card in the colcade layout */
.grid-item {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* Add small padding to prevent ring/shadow clipping at container edges */
    padding: 2px;
    /* Note: margin-bottom is now applied dynamically by colcade.js positioner() */
    /* Note: overflow:hidden removed - apply to inner card element instead to preserve ring/shadow */
}

    /* grid-item 내부 이미지에도 동일한 border-radius 적용 */
    .grid-item img {
        border-radius: 1rem; /* 이미지의 모서리도 둥글게 설정 */
        display: block;
        width: 100%;
        height: auto; /* 비율 유지 */
    }

/* .colcade-container 내에서만 작동하도록 카드 내부 섹션 스타일 지정 */

/* 헤더 영역: 커뮤니티, 유저, 포스팅 시간 등 */
.colcade-container .header {
    padding: 0.5em;
    background-color: #f8f8f8;
    border-bottom: 1px solid #e0e0e0;
    font-size: 0.9em;
}

    .colcade-container .header a {
        text-decoration: none;
        color: inherit;
    }

/* 콘텐츠 영역: 제목, 미디어 등이 포함됨 */
.colcade-container .content {
    position: relative;
    padding: 0.5em;
    background: rgba(0, 0, 0, 0.01);
    margin-top: 1em;
    transform: translateX(-0.5em);
    transition: none; /* hover 효과 제거 */
    will-change: opacity, transform;
}

    .colcade-container .content h2 {
        margin: 0.2em 0.5em;
        font-size: 1em;
    }

/* 푸터 영역: 투표 버튼, 댓글 수, 옵션 버튼 등 */
.colcade-container .footer {
    padding: 0.5em;
    background-color: #f8f8f8;
    border-top: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.9em;
}

/* hover 효과 제거 */

/* ============================================
   Mobile Optimization (Troddit style)
   Reference: troddit/src/components/FeedMasonry.tsx
   ============================================ */

/* Mobile: Single column, minimal padding - Troddit style */
@media (max-width: 767px) {
    .colcade-container {
        width: 100% !important;
        /* Troddit-style: 8px side padding for minimal edge spacing */
        padding-left: 4px !important;
        padding-right: 4px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .colcade-grid {
        gap: 8px; /* Troddit: cols === 1 ? 8 */
    }

    .grid-item {
        padding: 0; /* Remove extra padding on mobile for wider cards */
    }
}

/* Tablet: 2 columns */
@media (min-width: 768px) and (max-width: 999px) {
    .colcade-grid {
        gap: 8px;
    }
}

/* Desktop: 3+ columns */
@media (min-width: 1000px) {
    .colcade-grid {
        gap: 8px;
    }
}