/**
 * Homepage & layout — responsive overrides (mobile-first enhancements)
 */

/* Prevent horizontal scroll from grids / floats */
html {
    overflow-x: hidden;
}
body.home {
    overflow-x: hidden;
}

/* Content container */
.content {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* —— Hero (custom clone) —— */
@media screen and (max-width: 1200px) {
    .slider-wrapper .obs-hero-inner {
        flex-direction: column;
        text-align: center;
        padding: 40px 0 100px;
        gap: 24px;
    }
    .slider-wrapper .obs-hero-inner .data,
    .slider-wrapper .obs-hero-inner .hero-visual {
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
    }
    .slider-wrapper .obs-hero-inner .hero-visual {
        text-align: center;
    }
    .slider-wrapper .obs-hero-inner .hero-visual img {
        margin: 0 auto;
        max-height: 380px;
    }
    .slider-wrapper .obs-hero-inner .buttons {
        justify-content: center;
    }
    .slider-wrapper .content h1 {
        font-size: 42px;
    }
}

@media screen and (max-width: 768px) {
    .slider-wrapper {
        padding-bottom: 80px !important;
    }
    .slider-wrapper .obs-hero-clone {
        min-height: auto;
    }
    .slider-wrapper .obs-hero-inner {
        padding: 24px 0 88px;
    }
    .slider-wrapper .content h1 {
        font-size: 32px;
        line-height: 1.2;
        margin-bottom: 16px;
    }
    .slider-wrapper .obs-hero-trades {
        font-size: 15px;
        line-height: 1.5;
    }
    .slider-wrapper .obs-hero-inner .hero-visual img {
        max-height: 280px;
    }
    .slider-wrapper .obs-hero-inner .buttons {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
    }
    .slider-wrapper .button-slider {
        width: 100%;
    }
    .slider-wrapper .button-slider a {
        display: block;
        text-align: center;
        box-sizing: border-box;
    }
    .slider-wrapper .obs-hero-arrows .prev {
        left: 0;
    }
    .slider-wrapper .obs-hero-arrows .next {
        right: 0;
    }
    .slider-wrapper .obs-hero-arrows button {
        padding: 6px;
    }
    .slider-wrapper .obs-hero-arrows button img {
        width: 24px;
        height: 24px;
    }
}

@media screen and (max-width: 480px) {
    .slider-wrapper .content h1 {
        font-size: 26px;
    }
    .slider-wrapper .obs-hero-inner .hero-visual img {
        max-height: 220px;
    }
}

/* —— About & video two-column sections —— */
@media screen and (max-width: 1024px) {
    .about-wrapper .content::after,
    .video-wrapper .content::after {
        content: "";
        display: table;
        clear: both;
    }
    .about-wrapper .content .section-left,
    .about-wrapper .content .section-right,
    .video-wrapper .content .section-left,
    .video-wrapper .content .section-right {
        width: 100% !important;
        float: none !important;
        text-align: center;
        box-sizing: border-box;
    }
    .about-wrapper .content .section-left img {
        max-width: min(100%, 420px);
        height: auto;
        margin: 0 auto 30px;
        display: block;
    }
    .about-wrapper .content .section-right .data,
    .video-wrapper .content .section-right .data {
        padding: 0 !important;
        text-align: center;
    }
    .about-wrapper .content h2,
    .video-wrapper .content h2 {
        font-size: 32px;
    }
    .about-wrapper .content h3 {
        font-size: 22px;
        line-height: 1.35;
    }
    .about-wrapper .content p,
    .video-wrapper .content p {
        font-size: 16px;
        line-height: 1.6;
    }
    .about-wrapper .content a.su-button,
    .video-wrapper .content a.su-button {
        margin-left: auto;
        margin-right: auto;
        display: inline-block;
    }
}

/* —— Grid sections: work, quotes, services, benefits —— */
@media screen and (max-width: 1400px) {
    .work-wrapper .su-row {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px;
    }
    .services-wrapper .su-row {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 24px;
    }
    .testi-wrapper .data {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 30px;
    }
    .blog-wrapper .data {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 30px;
    }
}

@media screen and (max-width: 992px) {
    .work-wrapper .su-row {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .services-wrapper .su-row {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .quotes-wrapper .su-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 30px;
    }
    .benefits-wrapper .su-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 30px;
    }
    .faq-wrapper .content .su-row {
        display: block;
    }
    .faq-wrapper .content .su-row .su-column {
        width: 100% !important;
        max-width: 100%;
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 768px) {
    .work-wrapper h2,
    .quotes-wrapper h2,
    .services-wrapper h2,
    .benefits-wrapper h2,
    .testi-wrapper h2,
    .case-wrapper h2,
    .blog-wrapper h2,
    .faq-wrapper h2,
    .subs-wrapper h2 {
        font-size: 28px !important;
        line-height: 1.25;
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
    }
    .quotes-wrapper h3 {
        font-size: 20px !important;
        padding: 0 10px 30px;
    }
    .benefits-wrapper h2 {
        font-size: 22px !important;
    }
    .work-wrapper .su-row,
    .services-wrapper .su-row,
    .quotes-wrapper .su-row,
    .benefits-wrapper .su-row {
        grid-template-columns: 1fr !important;
        gap: 0;
    }
    .work-wrapper .su-row .su-column,
    .services-wrapper .su-row .su-column,
    .quotes-wrapper .su-row .su-column,
    .benefits-wrapper .su-row .su-column {
        max-width: 100% !important;
        width: 100% !important;
        margin-left: auto;
        margin-right: auto;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }
    .testi-wrapper .data {
        grid-template-columns: 1fr !important;
    }
    .blog-wrapper .data {
        grid-template-columns: 1fr !important;
    }
    .testi-wrapper .data .col img,
    .blog-wrapper .data .col figure img {
        width: 100%;
        height: auto;
    }
}

/* Section vertical spacing on smaller screens */
@media screen and (max-width: 1024px) {
    .slider-wrapper,
    .about-wrapper,
    .work-wrapper,
    .quotes-wrapper,
    .video-wrapper,
    .services-wrapper,
    .benefits-wrapper,
    .testi-wrapper,
    .case-wrapper,
    .subs-wrapper,
    .blog-wrapper,
    .faq-wrapper {
        padding-bottom: 80px !important;
    }
}

@media screen and (max-width: 768px) {
    .slider-wrapper,
    .about-wrapper,
    .work-wrapper,
    .quotes-wrapper,
    .video-wrapper,
    .services-wrapper,
    .benefits-wrapper,
    .testi-wrapper,
    .case-wrapper,
    .subs-wrapper,
    .blog-wrapper,
    .faq-wrapper {
        padding-bottom: 60px !important;
    }
}

/* —— Case studies slider —— */
@media screen and (max-width: 1024px) {
    .case-wrapper {
        padding-bottom: 80px !important;
    }
    .case-wrapper .obs-case-slider {
        min-height: auto;
        margin: 24px 0 40px;
    }
    .case-wrapper .obs-case-slide .section-left,
    .case-wrapper .obs-case-slide .section-right {
        width: 100% !important;
        float: none !important;
        text-align: center;
        margin: 0 0 30px !important;
        box-sizing: border-box;
    }
    .case-wrapper .obs-case-slide .section-right img {
        max-width: 100%;
        height: auto;
        margin: 0 auto;
        display: block;
    }
    .case-wrapper .obs-case-slide .section-left p {
        padding: 0 10px;
    }
    .case-wrapper .content > a.su-button {
        display: inline-block;
        margin: 0 auto;
        text-align: center;
    }
}

@media screen and (max-width: 768px) {
    .case-wrapper .obs-case-dots {
        flex-wrap: wrap;
        display: flex;
        justify-content: center;
        gap: 8px;
        padding: 0 10px;
    }
    .case-wrapper .obs-case-dots button {
        margin: 0;
    }
}

/* —— Newsletter —— */
@media screen and (max-width: 768px) {
    .subs-wrapper .content figure {
        width: auto !important;
        max-width: 280px;
    }
    .subs-wrapper .content figure img {
        width: 100%;
        height: auto;
    }
    .subs-wrapper .content .form p {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .subs-wrapper .content .form .wpcf7-form-control-wrap,
    .subs-wrapper .content .form input[type="text"],
    .subs-wrapper .content .form input[type="email"],
    .subs-wrapper .content .form input[type="submit"] {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* —— FAQ —— */
@media screen and (max-width: 768px) {
    .faq-wrapper .ea-header a {
        font-size: 15px;
        line-height: 1.4;
        padding: 12px 8px;
    }
    .faq-wrapper .ea-body {
        font-size: 15px;
    }
    .faq-wrapper .content > a.su-button {
        display: inline-block;
        margin-top: 20px;
    }
}

/* —— Buttons & images global —— */
@media screen and (max-width: 768px) {
    .su-row img[width="300"] {
        max-width: 120px;
        height: auto;
    }
    a.su-button {
        font-size: 15px !important;
    }
}

/* —— Header / logo —— */
@media screen and (max-width: 1024px) {
    header .content {
        padding-top: 20px;
    }
    header .logo a {
        width: 220px;
        max-width: 70vw;
    }
    header .logo a img {
        width: 100%;
        height: auto;
    }
    header nav {
        max-width: 100% !important;
        width: 100% !important;
        padding-top: 10px;
    }
}

@media screen and (max-width: 480px) {
    header .logo a {
        width: 180px;
    }
    .content {
        margin-left: 12px !important;
        margin-right: 12px !important;
    }
}

/* —— Footer: keep link columns visible on mobile —— */
@media screen and (max-width: 1280px) {
    footer .section-right {
        display: grid !important;
        width: 100% !important;
        float: none !important;
        grid-template-columns: 1fr !important;
        gap: 40px;
        margin-top: 40px;
        text-align: center;
    }
    footer .section-right .col {
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
    }
    footer .section-right ul {
        padding: 0;
    }
}

@media screen and (min-width: 769px) and (max-width: 1280px) {
    footer .section-right {
        grid-template-columns: repeat(2, 1fr) !important;
        text-align: left;
    }
}

@media screen and (max-width: 768px) {
    footer {
        padding-bottom: 30px !important;
    }
    footer .to-top {
        margin-bottom: 50px;
    }
    footer .section-left {
        padding: 0 10px;
        box-sizing: border-box;
    }
}