/* =====================================================
   Section Pop Layout (SAFE – fully scoped)
   ===================================================== */
/* --- Grid container for section-pop --- */
.section-pop .container > .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
}

/* Columns */
.section-pop .col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
}

.section-pop .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
}

/* Images */
.section-pop img {
    max-width: 400px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 8px;
}

/* Text & Lists */
.section-pop ul {
    list-style: disc;
    margin-left: 0;              /* prevent bleed */
    padding-left: 1.25rem;
    word-wrap: break-word;
}

/* Section styling */
.section-pop.lion {
    background-color: #f8f2e7;
    border-radius: 8px;
    padding: 1.5rem 2rem;
}

/* Center text vertically in last column */
.section-pop .col-lg-6:last-child {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* =====================================================
   Flex Variant (Zones, Special Sections)
   ===================================================== */

.section-pop-flex .section-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2rem;
}

.section-pop-flex .section-image,
.section-pop-flex .section-content {
    flex: 1 1 400px;
}

/* Image column */
.section-pop-flex .section-image {
    text-align: center;
}

.section-pop-flex .section-image img {
    max-width: 400px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 8px;
}

/* Content column */
.section-pop-flex .section-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Lists inside flex sections */
.section-pop-flex ul {
    list-style: disc;
    margin-left: 0;
    padding-left: 1.25rem;
    word-wrap: break-word;
}