/* =============================================================================
   Special Offer Section — Version 3  (.special-offer-section--v3)

   HTML structure (same column-six base as v1):
   .special-offer-section.special-offer-section--v3
   .column-six-flexible-section.section.background-noise.version_one
     .container
       .column-six-wrapper
         .column-six-item.left
           .column-six-left-section
             blockquote > p               ← badge pill "Special offer"
             .special-offer__content      ← h1 + paragraphs WYSIWYG
             ul.special-offer__items      ← icon + text list items
               li.special-offer__item
                 svg | img
                 span
             .special-offer__buttons      ← .btn row
             p.special-offer__after-text  ← "Prices include GST..."
         .column-six-item.right
           .special-offer__right-section
             img                          ← fencing photo
             .special-offer__image-badges
               span.special-offer__image-badge--white  ← "Limited seats"
               span.special-offer__image-badge--yellow ← "Save up to 15%"
   ============================================================================= */


/* =============================================================================
   SECTION BACKGROUND
   ============================================================================= */
.special-offer-section--v3 {
    background-color: #F4F5F3;
    background-image: url("../../images/background_noise_white.webp");
    background-repeat: repeat;
}


/* =============================================================================
   COLUMN LAYOUT
   PDF: left ~45%, right ~50%
   ============================================================================= */
.special-offer-section--v3 .column-six-wrapper {
    align-items: center;
    gap: 48px;
}

.special-offer-section--v3 .column-six-wrapper .column-six-item.left {
    flex-basis: 50%!important;
    max-width: 542px!important;
}

.special-offer-section--v3 .column-six-wrapper .column-six-item.right {
    flex-basis: 50%!important;
    max-width: 630px!important;
}


/* =============================================================================
   BADGE  (blockquote > p)
   ============================================================================= */
.special-offer-section--v3 .column-six-left-section blockquote {
    margin-bottom: 20px;
}

.special-offer-section--v3 .column-six-left-section blockquote p {
    background-color: #F4CA35;
    border-color: #FDDE71;
    color: #2A3E49;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    max-width: none;
    display: inline-flex;
}


/* =============================================================================
   CONTENT  (.special-offer__content — WYSIWYG)
   ============================================================================= */
.special-offer-section--v3 .special-offer__content {
    margin-bottom: 32px;
}

/* h1 title */
.special-offer-section--v3 .special-offer__content h1,
.special-offer-section--v3 .special-offer__content h2 {
    font-family: "Montserrat", sans-serif;
    font-size: 48px;
    font-weight: 800;
    line-height: 110%;
    color: #2A3E49;
    margin: 0 0 24px;
}
.special-offer-section--v3 .special-offer__content h1+p,
.special-offer-section--v3 .special-offer__content h2+p {
    display: none;
}

/* Reset column-six base margin-top: 40px on p */
.special-offer-section--v3 .column-six-left-section p {
    margin-top: 0;
}

/* First paragraph — dark */
.special-offer-section--v3 .special-offer__content p {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 150%;
    color: #2A3E49;
    margin-top: 0;
    margin-bottom: 12px;
}

/* Secondary paragraphs — blue-grey */
.special-offer-section--v3 .special-offer__content p + p {
    color: #53707F;
    margin-top: 0!important;
}


/* =============================================================================
   ITEMS LIST  (ul.special-offer__items)
   Icon left + text — "Free measure & quote", "Flexible scheduling"
   ============================================================================= */
.special-offer-section--v3 .special-offer__items {
    list-style: none;
    padding: 0!important;
    margin: 0 0 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.special-offer-section--v3 .special-offer__item {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* SVG icon */
.special-offer-section--v3 .special-offer__item svg {
    width: 39px;
    height: 39px;
    flex-shrink: 0;
    color: #F4CA35;
}

/* img fallback icon */
.special-offer-section--v3 .special-offer__item img {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    object-fit: contain;
}

/* Item text */
.special-offer-section--v3 .special-offer__item span {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: normal;
    color: #2A3E49;
}


/* =============================================================================
   BUTTONS
   PDF desktop: "Get this offer" (yellow) + "Request a quote" (outline) side by side
   PDF mobile:  stacked, "Request a quote" above "Get this offer"
   ============================================================================= */
.special-offer-section--v3 .special-offer__buttons {
    display: flex;
    flex-direction: row;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.special-offer-section--v3 .special-offer__buttons .btn {
    flex: 1;
    min-width: 160px;
    height: 48px;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 700;
    justify-content: center;
}

.special-offer-section--v3 .special-offer__buttons .btn.transparent-blue {
    background-color: transparent;
    border: 2px solid #2A3E49;
    color: #2A3E49;
}

.special-offer-section--v3 .special-offer__buttons .btn.transparent-blue:hover {
    border-color: #53707F;
    color: #53707F;
}


/* =============================================================================
   AFTER-BUTTONS TEXT  ("Prices include GST. T&Cs apply.")
   ============================================================================= */
.special-offer-section--v3 .special-offer__after-text {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    color: #2A3E49 !important;
    margin: 0;
}


/* =============================================================================
   RIGHT SECTION — image with overlaid badges
   ============================================================================= */
.special-offer-section--v3 .special-offer__right-section {
    position: relative;
    width: 100%;
}

/* The image rendered via wp_kses_post */
.special-offer-section--v3 .special-offer__right-section img {
    width: 100%;
    height: auto;
    min-height: 400px;
    max-height: max-content;
    object-fit: cover;
    border-radius: 20px;
    display: block;
}

/* Badge row — top-right corner of image */
.special-offer-section--v3 .special-offer__image-badges {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Base badge pill */
.special-offer-section--v3 .special-offer__image-badge {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: normal;
    padding: 7px 14px;
    border-radius: 8px;
    white-space: nowrap;
}

/* White badge — "Limited seats" */
.special-offer-section--v3 .special-offer__image-badge--white {
    background-color: rgba(255, 255, 255, 0.92);
    color: #2A3E49;
    border: 1px solid rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(4px);
}

/* Yellow badge — "Save up to 15%" */
.special-offer-section--v3 .special-offer__image-badge--yellow {
    background-color: #F4CA35;
    color: #2A3E49;
    border: 1.5px solid #FDDE71;
}


/* =============================================================================
   RESPONSIVE — Tablet  (≤ 1024px)
   ============================================================================= */
@media (max-width: 1024px) {
    .special-offer-section--v3 .column-six-wrapper {
        gap: 32px;
    }

    .special-offer-section--v3 .column-six-wrapper .column-six-item.left {
        flex-basis: 48%;
        max-width: 460px;
    }

    .special-offer-section--v3 .column-six-wrapper .column-six-item.right {
        flex-basis: 48%;
        max-width: 520px;
    }

    .special-offer-section--v3 .special-offer__content h1,
    .special-offer-section--v3 .special-offer__content h2 {
        font-size: 40px;
    }

    .special-offer-section--v3 .special-offer__right-section img {
        min-height: 320px;
        max-height: 480px;
    }
}


/* =============================================================================
   RESPONSIVE — Tablet portrait  (≤ 768px)
   Stack: image moves above text content (order trick)
   ============================================================================= */
@media (max-width: 768px) {
    .special-offer-section--v3 .column-six-wrapper {
        flex-direction: column;
        gap: 0;
    }

    .special-offer-section--v3 .column-six-wrapper .column-six-item.left,
    .special-offer-section--v3 .column-six-wrapper .column-six-item.right {
        flex-basis: auto;
        max-width: 100%;
        width: 100%;
    }

    /* Image above text on tablet/mobile */
    .special-offer-section--v3 .column-six-wrapper .column-six-item.right {
        order: -1;
        margin-bottom: 28px;
    }

    .special-offer-section--v3 .special-offer__right-section img {
        min-height: 260px;
        max-height: 380px;
        border-radius: 16px;
    }

    .special-offer-section--v3 .special-offer__content h1,
    .special-offer-section--v3 .special-offer__content h2 {
        font-size: 36px;
    }
    .special-offer-section--v3 .special-offer__content h1+p,
    .special-offer-section--v3 .special-offer__content h2+p {
        display: block;
    }
    .special-offer-section--v3 .column-six-wrapper .column-six-item.right {
        display: none;
    }
    .special-offer-section--v3 .special-offer__content {
        margin-bottom: 24px;
    }
    .special-offer-section--v3 .special-offer__item svg {
        width: 26px;
        height: 26px;
    }
    .special-offer-section--v3 .special-offer__item {
        min-height: 46px;
    }
    .special-offer-section--v3 .special-offer__items:not(.special-offer__highlights + *) {
        gap: 12px;
    }
}


/* =============================================================================
   RESPONSIVE — Mobile  (≤ 576px)
   PDF mobile: badge → title → image (with overlaid pills) → p1 → p2 → p3
               → items → "Request a quote" → "Get this offer" → after-text
   ============================================================================= */
@media (max-width: 576px) {
    .special-offer-section--v3 .column-six-left-section blockquote {
        margin-bottom: 12px;
    }

    .special-offer-section--v3 .special-offer__content h1,
    .special-offer-section--v3 .special-offer__content h2 {
        font-size: 32px;
        margin-bottom: 16px;
    }

    .special-offer-section--v3 .special-offer__content p {
        font-size: 15px;
        margin-bottom: 10px;
    }

    .special-offer-section--v3 .column-six-wrapper .column-six-item.right {
        margin-bottom: 20px;
    }

    .special-offer-section--v3 .special-offer__right-section img {
        min-height: 220px;
        max-height: 320px;
        border-radius: 14px;
    }

    /* Smaller image badges on mobile */
    .special-offer-section--v3 .special-offer__image-badges {
        top: 12px;
        right: 12px;
        gap: 6px;
    }

    .special-offer-section--v3 .special-offer__image-badge {
        font-size: 12px;
        padding: 6px 12px;
    }

    /* Items */
    .special-offer-section--v3 .special-offer__items {
        gap: 18px;
        margin-bottom: 40px;
    }

    .special-offer-section--v3 .special-offer__item span {
        font-size: 15px;
    }

    /* Buttons: stack vertically, "Request a quote" on top, "Get this offer" below */
    .special-offer-section--v3 .special-offer__buttons {
        flex-direction: column-reverse;
        gap: 16px;
        margin-bottom: 16px;
    }

    .special-offer-section--v3 .special-offer__buttons .btn {
        flex: none;
        width: 100%;
        min-width: unset;
        height: 48px;
        font-size: 16px;
    }

    .special-offer-section--v3 .special-offer__after-text {
        font-size: 12px;
        text-align: center;
        margin-top: 16px!important;
    }
}


/* =============================================================================
   HIGHLIGHTS  (ul.special-offer__highlights)
   Horizontal inline row: icon 24px + text — "Leads in your area", "Trade pricing"
   Renders ABOVE .special-offer__items when both are present
   ============================================================================= */
.special-offer-section--v3 .special-offer__highlights {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    padding-inline-start: 0!important;
}

.special-offer-section--v3 .special-offer__highlight {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Icon — 24×24 (matches PHP width/height="24") */
.special-offer-section--v3 .special-offer__highlight img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Text label */
.special-offer-section--v3 .special-offer__highlight span {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: normal;
    color: #2A3E49;
    white-space: nowrap;
}


/* =============================================================================
   ITEMS LIST — 2-column grid when highlights are also present
   (when only items, stays single column — handled by default flex-column)
   ============================================================================= */

/* When highlights + items both render → items go 2-column */
.special-offer-section--v3 .special-offer__highlights + .special-offer__items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 24px;
    margin-bottom: 28px;
}

/* Keep single-column flex for items-only case (no adjacent highlights) */
.special-offer-section--v3 .special-offer__items:not(.special-offer__highlights + *) {
    display: flex;
    flex-direction: column;
    gap: 14px;
}


/* =============================================================================
   RESPONSIVE — Highlights + Items on mobile
   ============================================================================= */
@media (max-width: 768px) {
    /* Highlights: wrap to 2 per row */
    .special-offer-section--v3 .special-offer__highlights {
        gap: 14px 20px;

    }
}

@media (max-width: 576px) {
    /* Highlights: single column */
    .special-offer-section--v3 .special-offer__highlights {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        margin-bottom: 20px;
        justify-content: center;
    }

    .special-offer-section--v3 .special-offer__highlight span {
        font-size: 13px;
        white-space: normal;
    }

    /* Items: back to single column on mobile */
    .special-offer-section--v3 .special-offer__highlights + .special-offer__items {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJzcGVjaWFsLW9mZmVyLTMuY3NzIiwic291cmNlc0NvbnRlbnQiOltdfQ== */