/* ============================================================
   Overflowing Drains Sydney — Page UI Fixes
   Applied to: /overflowing-drains-sydney/
   ============================================================ */

/* ----------------------------------------------------------
   1. ZIGZAG IMAGE WRAPPER — fix image sizing & alignment
      The .img_wrapper_repeater_zigzag containers had no
      min-height, causing tiny images (like cman.webp at
      208x211px) to render too small and unconstrained.
      We enforce a minimum height and ensure the image
      scales to fill the container properly.
   ---------------------------------------------------------- */
.repeater_zigzag .img_wrapper_repeater_zigzag {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 380px;
    width: 100%;
    overflow: hidden;
}

.repeater_zigzag .img_wrapper_repeater_zigzag_imgtag {
    width: 100%;
    height: 100%;
    max-width: 100%;
    min-height: 320px;
    object-fit: cover;
    object-position: center top;
    border-radius: 8px;
    display: block;
}

/* Override inline width attribute on cman.webp and any
   small images that were set with a pixel width attribute */
.repeater_zigzag .front-zag img[width="208"],
.repeater_zigzag .front-zag img[width="581"] {
    width: 100% !important;
    height: auto !important;
    min-height: 320px;
    object-fit: cover;
}

/* ----------------------------------------------------------
   2. REPEATER ZIGZAG LAYOUT — equal column balance
      Ensure text and image columns are evenly split
      and properly vertically centred.
   ---------------------------------------------------------- */
.repeater_zigzag .repeater_align {
    display: flex;
    align-items: stretch;
    gap: 3rem;
}

.repeater_zigzag .repeater_content {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
}

.repeater_zigzag .front-zag.img_wrapper_repeater_zigzag {
    flex: 1 1 50%;
}

/* Mobile: stack to single column */
@media (max-width: 767px) {
    .repeater_zigzag .repeater_align {
        flex-direction: column !important;
        gap: 1.5rem;
    }
    .repeater_zigzag .img_wrapper_repeater_zigzag {
        min-height: 240px;
    }
    .repeater_zigzag .img_wrapper_repeater_zigzag_imgtag {
        min-height: 220px;
    }
}

/* ----------------------------------------------------------
   3. DOUBLE WYSIWYG — visual balance for two-column text
      The double wysiwyg block had two text columns with
      no visual separator, making it feel like a wall of
      text. Add a subtle divider and improve spacing.
   ---------------------------------------------------------- */
.double_wysigywg .row_double_wysigywg {
    display: flex;
    gap: 3rem;
    align-items: flex-start;
}

.double_wysigywg .flex-1 {
    flex: 1 1 0;
    background: #f8f9fa;
    border-radius: 8px;
    padding: 2rem;
    border-left: 4px solid #e10916;
}

.double_wysigywg .flex-1 h2 {
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.double_wysigywg .flex-1 ul {
    padding-left: 1.25rem;
}

.double_wysigywg .flex-1 ul li {
    margin-bottom: 0.65rem;
    font-size: 16px;
    line-height: 1.6;
}

/* Mobile: stack columns */
@media (max-width: 767px) {
    .double_wysigywg .row_double_wysigywg {
        flex-direction: column;
        gap: 1.5rem;
    }
    .double_wysigywg .flex-1 {
        padding: 1.25rem;
    }
}

/* ----------------------------------------------------------
   4. GRID CARDS — consistent card heights & image sizing
      The causes grid had SVG icons rendered inconsistently.
      Enforce uniform icon sizing and card layout.
   ---------------------------------------------------------- */
.grid_cards .grid_cards_card_style {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.grid_cards .front-grid_card-img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    margin-bottom: 1rem;
}

.grid_cards .img__thumb {
    width: 64px !important;
    height: 64px !important;
    object-fit: contain;
}

.grid_cards .text_card {
    flex: 1;
}

/* ----------------------------------------------------------
   5. CTA SECTION (section-29 / arrow-img) — fix dead space
      The col-70 div inside the CTA section is empty,
      causing the left half of the section to be blank.
      Hide the empty col and centre the content properly.
   ---------------------------------------------------------- */
.section-29.arrow-img .div-block-154 {
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    max-width: 1115px;
    padding: 0 3%;
}

.section-29.arrow-img .col-70:empty {
    display: none;
}

.section-29.arrow-img .div-block-153 {
    width: 100%;
    max-width: 640px;
}

/* Mobile CTA */
@media (max-width: 767px) {
    .section-29.arrow-img .div-block-154 {
        justify-content: center;
        padding: 1.5rem;
    }
    .section-29.arrow-img .div-block-153 {
        width: 100%;
    }
}

/* ----------------------------------------------------------
   6. BANNER SECTION — improve hero badge icons alignment
      The trust badges (Upfront Pricing, $0 Call Out, etc.)
      had inconsistent icon sizes causing uneven layout.
   ---------------------------------------------------------- */
.section-11 .flex-block {
    gap: 40px;
    justify-content: center;
    align-items: flex-end;
    flex-wrap: wrap;
}

.section-11 .image-62,
.section-11 .image-63,
.section-11 .image-64 {
    height: 56px;
    width: auto;
    object-fit: contain;
}

/* ----------------------------------------------------------
   7. GENERAL CONTENT READABILITY IMPROVEMENTS
      Improve line spacing, heading hierarchy, and list
      formatting in the zig_content blocks.
   ---------------------------------------------------------- */
.zig_content p {
    font-size: 16px;
    line-height: 1.7;
    color: #212529;
    margin-bottom: 1rem;
}

.zig_content ul {
    padding-left: 1.25rem;
    margin-bottom: 1rem;
}

.zig_content ul li {
    font-size: 16px;
    line-height: 1.65;
    margin-bottom: 0.6rem;
    color: #212529;
}

.zig_content h2 {
    line-height: 1.25;
    margin-bottom: 1.25rem;
}

/* White text override for dark sections */
.cosmiclager .zig_content p,
.cosmiclager .zig_content ul li {
    color: inherit;
}