/*
|-----------------------------------------------------------------
| HOST888 Content Platform UX Blocks - WordPress Frontend
|-----------------------------------------------------------------
|
*/

.content-image-text,
.content-hero-split {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
    margin: 32px 0;
}

.content-image-text > .content-image-text-image,
.content-image-text > .content-image-text-body {
    min-width: 0;
    width: auto !important;
    max-width: none !important;
}

.content-image-text-content {
    min-width: 0;
}


.content-image-text img,
.content-hero-split img,
.content-hero-partner img,
.content-partner-gallery img,
.content-portfolio-grid img,
.content-image-grid-2 img,
.content-image-grid-3 img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
}

.content-image-text-normal > .content-image-text-image {
    order: 1;
}

.content-image-text-normal > .content-image-text-body {
    order: 2;
}

.content-image-text-reverse > .content-image-text-image {
    order: 2;
}

.content-image-text-reverse > .content-image-text-body {
    order: 1;
}

.content-hero-partner,
.content-partner-cta,
.content-partner-notice,
.content-partner-reward,
.content-partner-warning,
.content-partner-video,
.content-stack-section,
.content-feature-card,
.content-alert-box,
.content-list-box {
    box-sizing: border-box;
    margin: 28px 0;
}

.content-hero-partner,
.content-partner-cta,
.content-partner-reward,
.content-partner-warning,
.content-partner-video,
.content-feature-card,
.content-alert-box,
.content-list-box {
    padding: clamp(22px, 4vw, 42px);
    border-radius: 18px;
}

.content-partner-notice {
    padding: 18px 24px;
    border-radius: 14px;
}

.content-partner-feature-cards,
.content-icon-cards-3,
.content-feature4-cards,
.content-flow-steps,
.content-partner-cases,
.content-partner-income,
.content-partner-testimonials,
.content-partner-gallery,
.content-partner-faq,
.content-grid-2,
.content-grid-3,
.content-image-grid-2,
.content-image-grid-3,
.content-portfolio-grid {
    display: grid;
    gap: 24px;
    margin: 28px 0;
}

.content-partner-feature-cards,
.content-icon-cards-3,
.content-partner-cases,
.content-partner-income,
.content-partner-testimonials,
.content-partner-gallery,
.content-grid-3,
.content-image-grid-3,
.content-portfolio-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.content-feature4-cards,
.content-flow-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.content-partner-faq,
.content-grid-2,
.content-image-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.content-feature-card,
.content-icon-card,
.content-case-card,
.content-income-card,
.content-testimonial-card,
.content-gallery-card,
.content-faq-item {
    box-sizing: border-box;
    min-width: 0;
}

.content-partner-feature-cards .content-feature-card,
.content-icon-cards-3 .content-icon-card,
.content-partner-cases .content-case-card,
.content-partner-income .content-income-card,
.content-partner-testimonials .content-testimonial-card,
.content-partner-gallery .content-gallery-card,
.content-partner-faq .content-faq-item {
    padding: 22px;
    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: 16px;
    background: #fff;
}

.content-partner-target {
    margin: 28px 0;
}

.content-partner-target > div {
    display: grid;
    gap: 18px;
}

.content-partner-video iframe,
.content-partner-video video,
.content-stack-section iframe,
.content-stack-section video {
    max-width: 100%;
}

.content-partner-video iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
}

.content-stack-section {
    width: 100%;
}

.content-stack-section img {
    max-width: 100%;
    height: auto;
}

.content-flow-steps > *,
.content-feature4-cards > *,
.content-grid-2 > *,
.content-grid-3 > *,
.content-image-grid-2 > *,
.content-image-grid-3 > *,
.content-portfolio-grid > * {
    min-width: 0;
}

@media (max-width: 900px) {
    .content-partner-feature-cards,
    .content-icon-cards-3,
    .content-feature4-cards,
    .content-flow-steps,
    .content-partner-cases,
    .content-partner-income,
    .content-partner-testimonials,
    .content-partner-gallery,
    .content-grid-3,
    .content-image-grid-3,
    .content-portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .content-image-text,
    .content-hero-split,
    .content-partner-feature-cards,
    .content-icon-cards-3,
    .content-feature4-cards,
    .content-flow-steps,
    .content-partner-cases,
    .content-partner-income,
    .content-partner-testimonials,
    .content-partner-gallery,
    .content-partner-faq,
    .content-grid-2,
    .content-grid-3,
    .content-image-grid-2,
    .content-image-grid-3,
    .content-portfolio-grid {
        grid-template-columns: 1fr !important;
    }

    .content-image-text-normal > .content-image-text-image,
    .content-image-text-reverse > .content-image-text-image {
        order: 1;
    }

    .content-image-text-normal > .content-image-text-body,
    .content-image-text-reverse > .content-image-text-body {
        order: 2;
    }
}

/* FAQ answer */

.content-faq-answer {
    margin-top: 12px;
    line-height: 1.8;
}

/*
|--------------------------------------------------------------------------
| HOST888 WordPress UX Layout Override
|--------------------------------------------------------------------------
*/

/* Common block safety */

.content-flow-steps,
.content-partner-feature-cards,
.content-icon-cards-3,
.content-feature4-cards,
.content-partner-cases,
.content-partner-income,
.content-partner-testimonials,
.content-partner-gallery,
.content-partner-faq,
.content-grid-2,
.content-grid-3,
.content-image-grid-2,
.content-image-grid-3,
.content-portfolio-grid,
.content-stack-section {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}


/* Flow Steps */

.content-flow-steps > div {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
    width: 100% !important;
}

.content-flow-steps > div > div {
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
}


/* Partner Feature / Icon / Case / Income / Testimonial / Gallery */

.content-partner-feature-cards,
.content-icon-cards-3,
.content-partner-cases,
.content-partner-income,
.content-partner-testimonials,
.content-partner-gallery {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
}

.content-partner-feature-cards > *,
.content-icon-cards-3 > *,
.content-partner-cases > *,
.content-partner-income > *,
.content-partner-testimonials > *,
.content-partner-gallery > * {
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
}


/* Feature 4 */

.content-feature4-cards {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
}


/* FAQ */

.content-partner-faq {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
}


/* Text grids */

.content-grid-2 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
}

.content-grid-3 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
}


/* Image grids */

.content-image-grid-2 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
}

.content-image-grid-3,
.content-portfolio-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
}

.content-image-grid-2 > *,
.content-image-grid-3 > *,
.content-portfolio-grid > * {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
}

.content-image-grid-2 img,
.content-image-grid-3 img,
.content-portfolio-grid img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}


/* Video */

.content-partner-video {
    width: 100% !important;
    max-width: 100% !important;
}

.content-partner-video > div {
    width: 100% !important;
    max-width: 100% !important;
}

.content-partner-video iframe {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
}


/* Stack */

.content-stack-section {
    width: 100% !important;
    max-width: 100% !important;
}

.content-stack-section > div {
    width: 100% !important;
    max-width: 100% !important;
}

.content-stack-section > div > * {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
}


/* Tablet */

@media (max-width: 900px) {

    .content-flow-steps > div,
    .content-partner-feature-cards,
    .content-icon-cards-3,
    .content-feature4-cards,
    .content-partner-cases,
    .content-partner-income,
    .content-partner-testimonials,
    .content-partner-gallery,
    .content-grid-3,
    .content-image-grid-3,
    .content-portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}


/* Mobile */

@media (max-width: 700px) {

    .content-flow-steps > div,
    .content-partner-feature-cards,
    .content-icon-cards-3,
    .content-feature4-cards,
    .content-partner-cases,
    .content-partner-income,
    .content-partner-testimonials,
    .content-partner-gallery,
    .content-partner-faq,
    .content-grid-2,
    .content-grid-3,
    .content-image-grid-2,
    .content-image-grid-3,
    .content-portfolio-grid {
        grid-template-columns: 1fr !important;
    }

    .content-flow-steps > div > div,
    .content-partner-feature-cards > *,
    .content-icon-cards-3 > *,
    .content-partner-cases > *,
    .content-partner-income > *,
    .content-partner-testimonials > *,
    .content-partner-gallery > * {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/*
|--------------------------------------------------------------------------
| HOST888 Content Isolation Layer
|--------------------------------------------------------------------------
*/

.host888-content,
.host888-content * {
    box-sizing: border-box;
}

.host888-content {
    width: 100%;
    max-width: 100%;
    font-size: 16px;
    line-height: 1.75;
}


/* Theme typography isolation */

.host888-content h1,
.host888-content h2,
.host888-content h3,
.host888-content h4,
.host888-content h5,
.host888-content h6 {
    max-width: none;
    margin-top: 0;
    line-height: 1.35;
}

.host888-content h2 {
    font-size: clamp(26px, 3vw, 38px);
}

.host888-content h3 {
    font-size: clamp(21px, 2.2vw, 30px);
}

.host888-content p,
.host888-content ul,
.host888-content ol {
    max-width: none;
}


/* Media isolation */

.host888-content img {
    display: block;
    max-width: 100% !important;
    height: auto !important;
}

.host888-content figure {
    max-width: 100% !important;
    margin: 0 !important;
}

.host888-content iframe,
.host888-content video {
    max-width: 100% !important;
}


/* Image + Text */

.host888-content .content-image-text,
.host888-content .content-hero-split {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(24px, 4vw, 56px) !important;
    align-items: center !important;
    width: 100% !important;
}

.host888-content .content-image-text > .content-image-text-image,
.host888-content .content-image-text > .content-image-text-body {
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
}

.host888-content .content-image-text-normal > .content-image-text-image {
    order: 1;
}

.host888-content .content-image-text-normal > .content-image-text-body {
    order: 2;
}

.host888-content .content-image-text-reverse > .content-image-text-image {
    order: 2;
}

.host888-content .content-image-text-reverse > .content-image-text-body {
    order: 1;
}


/* Main Grid Blocks */

.host888-content .content-grid-2,
.host888-content .content-image-grid-2,
.host888-content .content-partner-faq {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
}

.host888-content .content-grid-3,
.host888-content .content-image-grid-3,
.host888-content .content-portfolio-grid,
.host888-content .content-partner-feature-cards,
.host888-content .content-icon-cards-3,
.host888-content .content-partner-cases,
.host888-content .content-partner-income,
.host888-content .content-partner-testimonials,
.host888-content .content-partner-gallery {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
}

.host888-content .content-feature4-cards {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
}


/* Kill inline flex widths from Publisher */

.host888-content .content-partner-feature-cards > *,
.host888-content .content-icon-cards-3 > *,
.host888-content .content-partner-cases > *,
.host888-content .content-partner-income > *,
.host888-content .content-partner-testimonials > *,
.host888-content .content-partner-gallery > *,
.host888-content .content-grid-2 > *,
.host888-content .content-grid-3 > *,
.host888-content .content-image-grid-2 > *,
.host888-content .content-image-grid-3 > *,
.host888-content .content-portfolio-grid > * {
    flex: none !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
}


/* Flow Steps */

.host888-content .content-flow-steps > div {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
    width: 100% !important;
}

.host888-content .content-flow-steps > div > div {
    flex: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
}


/* Images inside grid */

.host888-content .content-image-grid-2 img,
.host888-content .content-image-grid-3 img,
.host888-content .content-portfolio-grid img,
.host888-content .content-partner-gallery img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}


/* Video */

.host888-content .content-partner-video {
    width: 100% !important;
    max-width: 100% !important;
}

.host888-content .content-partner-video > div {
    width: 100% !important;
    max-width: 100% !important;
}

.host888-content .content-partner-video iframe {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
}


/* Stack */

.host888-content .content-stack-section {
    width: 100% !important;
    max-width: 100% !important;
}

.host888-content .content-stack-section > div {
    width: 100% !important;
    max-width: 100% !important;
}

.host888-content .content-stack-section > div > * {
    min-width: 0 !important;
    max-width: none !important;
}


/* Tablet */

@media (max-width: 900px) {

    .host888-content .content-flow-steps > div,
    .host888-content .content-feature4-cards,
    .host888-content .content-grid-3,
    .host888-content .content-image-grid-3,
    .host888-content .content-portfolio-grid,
    .host888-content .content-partner-feature-cards,
    .host888-content .content-icon-cards-3,
    .host888-content .content-partner-cases,
    .host888-content .content-partner-income,
    .host888-content .content-partner-testimonials,
    .host888-content .content-partner-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}


/* Mobile */

@media (max-width: 700px) {

    .host888-content .content-image-text,
    .host888-content .content-hero-split,
    .host888-content .content-flow-steps > div,
    .host888-content .content-feature4-cards,
    .host888-content .content-grid-2,
    .host888-content .content-grid-3,
    .host888-content .content-image-grid-2,
    .host888-content .content-image-grid-3,
    .host888-content .content-portfolio-grid,
    .host888-content .content-partner-feature-cards,
    .host888-content .content-icon-cards-3,
    .host888-content .content-partner-cases,
    .host888-content .content-partner-income,
    .host888-content .content-partner-testimonials,
    .host888-content .content-partner-gallery,
    .host888-content .content-partner-faq {
        grid-template-columns: 1fr !important;
    }

    .host888-content .content-image-text-normal > .content-image-text-image,
    .host888-content .content-image-text-reverse > .content-image-text-image {
        order: 1;
    }

    .host888-content .content-image-text-normal > .content-image-text-body,
    .host888-content .content-image-text-reverse > .content-image-text-body {
        order: 2;
    }

    .host888-content .content-flow-steps > div > div,
    .host888-content .content-partner-feature-cards > *,
    .host888-content .content-icon-cards-3 > *,
    .host888-content .content-partner-cases > *,
    .host888-content .content-partner-income > *,
    .host888-content .content-partner-testimonials > *,
    .host888-content .content-partner-gallery > * {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/*
|--------------------------------------------------------------------------
| Flow Steps Final Fix
|--------------------------------------------------------------------------
*/

.host888-content .content-flow-steps {
    width: 100% !important;
    max-width: 100% !important;
}

.host888-content .content-flow-steps > div {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(180px, 1fr)) !important;
    gap: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-items: stretch !important;
    align-items: stretch !important;
}

.host888-content .content-flow-steps > div > div {
    display: block !important;
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    white-space: normal !important;
    word-break: normal !important;
    writing-mode: horizontal-tb !important;
}

@media (max-width: 900px) {

    .host888-content .content-flow-steps > div {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 700px) {

    .host888-content .content-flow-steps > div {
        grid-template-columns: 1fr !important;
    }

    .host888-content .content-flow-steps > div > div {
        width: 100% !important;
    }
}

/*
|--------------------------------------------------------------------------
| HOST888 Mobile Final Reset
|--------------------------------------------------------------------------
*/

@media (max-width: 700px) {

    /*
    |--------------------------------------------------------------------------
    | Global Direct Child Reset
    |--------------------------------------------------------------------------
    */

    .host888-content .content-flow-steps > div > *,
    .host888-content .content-partner-feature-cards > *,
    .host888-content .content-icon-cards-3 > *,
    .host888-content .content-feature4-cards > *,
    .host888-content .content-partner-cases > *,
    .host888-content .content-partner-income > *,
    .host888-content .content-partner-testimonials > *,
    .host888-content .content-partner-gallery > *,
    .host888-content .content-partner-faq > *,
    .host888-content .content-grid-2 > *,
    .host888-content .content-grid-3 > *,
    .host888-content .content-image-grid-2 > *,
    .host888-content .content-image-grid-3 > *,
    .host888-content .content-portfolio-grid > *,
    .host888-content .content-stack-section > div > * {
        display: block !important;
        flex: none !important;
        flex-basis: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | All Main Layouts Become Single Column
    |--------------------------------------------------------------------------
    */

    .host888-content .content-flow-steps > div,
    .host888-content .content-partner-feature-cards,
    .host888-content .content-icon-cards-3,
    .host888-content .content-feature4-cards,
    .host888-content .content-partner-cases,
    .host888-content .content-partner-income,
    .host888-content .content-partner-testimonials,
    .host888-content .content-partner-gallery,
    .host888-content .content-partner-faq,
    .host888-content .content-grid-2,
    .host888-content .content-grid-3,
    .host888-content .content-image-grid-2,
    .host888-content .content-image-grid-3,
    .host888-content .content-portfolio-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
    }


    /*
    |--------------------------------------------------------------------------
    | Image Text
    |--------------------------------------------------------------------------
    */

    .host888-content .content-image-text,
    .host888-content .content-hero-split {
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    .host888-content .content-image-text-normal > .content-image-text-image,
    .host888-content .content-image-text-reverse > .content-image-text-image {
        order: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .host888-content .content-image-text-normal > .content-image-text-body,
    .host888-content .content-image-text-reverse > .content-image-text-body {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
    }


    /*
    |--------------------------------------------------------------------------
    | Stack Section
    |--------------------------------------------------------------------------
    */

    .host888-content .content-stack-section {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .host888-content .content-stack-section > div {
        display: flex !important;
        flex-direction: column !important;
        gap: 18px !important;
        width: 100% !important;
        max-width: 100% !important;
    }


    /*
    |--------------------------------------------------------------------------
    | Images
    |--------------------------------------------------------------------------
    */

    .host888-content .content-image-grid-2 img,
    .host888-content .content-image-grid-3 img,
    .host888-content .content-portfolio-grid img,
    .host888-content .content-partner-gallery img,
    .host888-content .content-image-text img,
    .host888-content .content-stack-section img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }


    /*
    |--------------------------------------------------------------------------
    | Cards
    |--------------------------------------------------------------------------
    */

    .host888-content .content-feature-card,
    .host888-content .content-icon-card,
    .host888-content .content-case-card,
    .host888-content .content-income-card,
    .host888-content .content-testimonial-card,
    .host888-content .content-gallery-card,
    .host888-content .content-faq-item,
    .host888-content .content-alert-box,
    .host888-content .content-list-box {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | Video
    |--------------------------------------------------------------------------
    */

    .host888-content .content-partner-video,
    .host888-content .content-partner-video > div,
    .host888-content .content-partner-video iframe,
    .host888-content video {
        width: 100% !important;
        max-width: 100% !important;
    }


    /*
    |--------------------------------------------------------------------------
    | Typography Safety
    |--------------------------------------------------------------------------
    */

    .host888-content h1,
    .host888-content h2,
    .host888-content h3,
    .host888-content h4,
    .host888-content h5,
    .host888-content h6,
    .host888-content p,
    .host888-content li,
    .host888-content a,
    .host888-content span {
        overflow-wrap: anywhere;
        word-break: normal;
        white-space: normal;
    }
}