/* ==========================================================================
   Content Section & Column Card Blocks — SNS Fabricators
   ========================================================================== */

/* ── Section Base ────────────────────────────────────────────────────────── */

.sns-content-section {
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    min-height: var(--cs-min-height, 0);
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* ── Section Background ──────────────────────────────────────────────────── */

.sns-content-section__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.sns-content-section--bg-color .sns-content-section__bg {
    background-color: var(--cs-bg-color, #1a1a2e);
}

.sns-content-section__bg-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.sns-content-section__overlay {
    position: absolute;
    inset: 0;
}

/* ── Grid Container ──────────────────────────────────────────────────────── */

.sns-content-section__grid {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--cs-padding, 60px) 40px;
    display: grid;
    grid-template-columns: repeat(var(--cs-columns, 2), 1fr);
    gap: var(--cs-gap, 30px);
    align-items: var(--cs-valign, stretch);
}

/* ── Column Card ─────────────────────────────────────────────────────────── */

.sns-column-card {
    background-color: var(--cc-bg, rgba(45, 55, 72, 0.8));
    padding: var(--cc-padding, 40px);
    color: var(--cc-text-color, #ffffff);
    position: relative;
}

/* Inherit text color to all children */
.sns-column-card,
.sns-column-card h1,
.sns-column-card h2,
.sns-column-card h3,
.sns-column-card h4,
.sns-column-card h5,
.sns-column-card h6,
.sns-column-card p,
.sns-column-card li,
.sns-column-card a,
.sns-column-card span {
    color: var(--cc-text-color, #ffffff);
}

.sns-column-card a:hover {
    opacity: 0.8;
}

/* Spacing for inner block elements */
.sns-column-card > *:first-child {
    margin-top: 0;
}

.sns-column-card > *:last-child {
    margin-bottom: 0;
}

/* Lists inside column cards */
.sns-column-card ul,
.sns-column-card ol {
    padding-left: 1.2em;
    margin: 0.5em 0;
}

.sns-column-card li {
    margin-bottom: 0.4em;
    line-height: 1.6;
}

/* ── Responsive — Tablet (768px) ─────────────────────────────────────────── */

@media (max-width: 768px) {
    .sns-content-section__grid {
        padding: var(--cs-padding, 40px) 20px;
    }

    /* 3 and 4 columns collapse to 2 */
    .sns-content-section--cols-3 .sns-content-section__grid,
    .sns-content-section--cols-4 .sns-content-section__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sns-column-card {
        padding: calc(var(--cc-padding, 40px) * 0.75);
    }
}

/* ── Responsive — Mobile (480px) ─────────────────────────────────────────── */

@media (max-width: 480px) {
    .sns-content-section__grid {
        grid-template-columns: 1fr !important;
        padding: var(--cs-padding, 30px) 15px;
        gap: 20px;
    }

    .sns-column-card {
        padding: calc(var(--cc-padding, 40px) * 0.6);
    }
}

/* ── Editor Preview ──────────────────────────────────────────────────────── */

.sns-content-section--preview {
    width: 100%;
    margin-left: 0;
}

/* Ensure InnerBlocks area is visible in editor */
.sns-column-card--preview {
    min-height: 80px;
}

/* Editor: make the grid work with ACF's InnerBlocks wrapper */
.sns-content-section--preview .sns-content-section__grid > .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: grid;
    grid-template-columns: repeat(var(--cs-columns, 2), 1fr);
    gap: var(--cs-gap, 30px);
    align-items: var(--cs-valign, stretch);
}