/*
 * Toqsoft homepage responsive rules
 * Clean Razor conversion of the approved v27 layout.
 * Desktop layout is intentionally controlled by home.css.
 */

@media (max-width: 1320px) {
    .azure-layout,
    .industry-layout {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .industry-section .heading {
        position: static;
    }

    .cap-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 761px) and (max-width: 1180px) {
    .slide {
        grid-template-columns: minmax(340px, .78fr) minmax(520px, 1.22fr);
        gap: 18px;
        padding-left: 4%;
        padding-right: 2%;
    }

    .slide h1,
    .slide h2 {
        font-size: clamp(39px, 4.7vw, 56px);
    }

    .slide .story-visual {
        height: 520px !important;
        padding: 54px 14px 18px !important;
    }

    .slide .story-grid {
        grid-template-columns: minmax(125px, .78fr) 18px minmax(155px, .94fr) 18px minmax(215px, 1.28fr);
        gap: 6px;
    }

    .story-card {
        min-height: 60px;
        padding: 10px 7px 9px 46px;
    }

    .story-icon {
        left: 8px;
        width: 30px;
        height: 30px;
    }

    .mini-dashboard {
        min-height: 360px;
    }

    .home-hero-visual {
        height: 500px;
        overflow: visible;
    }

    .home-hero-visual picture {
        width: 125%;
        margin-left: -8%;
    }
}

@media (max-width: 1050px) {
    .platforms,
    .feature,
    .integration-head {
        grid-template-columns: 1fr;
    }

    .solutions {
        grid-template-columns: repeat(2, 1fr);
    }

    .approach-enhanced {
        grid-template-columns: 1fr 1fr;
        gap: 35px;
    }

    .approach-enhanced::before {
        display: none;
    }
}

@media (max-width: 760px), (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {
    .hero {
        min-height: auto;
        max-height: none;
        background: linear-gradient(180deg, #fff, #f2f8ff);
    }

    .track {
        align-items: stretch;
    }

    .slide {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        min-height: auto;
        max-height: none;
        gap: 26px;
        padding: 40px 6% 84px;
    }

    .slide > div:first-child {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        max-width: none;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        clip: auto !important;
        white-space: normal !important;
    }

    .slide h1,
    .slide h2 {
        font-size: clamp(36px, 10.8vw, 49px);
        line-height: 1.04;
    }

    .slide .lead {
        margin: 19px 0 23px;
        font-size: 16px;
        line-height: 1.65;
    }

    .slide .home-hero-visual {
        display: flex !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    .home-hero-visual picture {
        width: 100%;
        max-width: 680px;
        margin: 0 auto;
    }

    .home-hero-visual img {
        width: 100%;
        max-width: none;
        height: auto;
    }

    .actions {
        flex-direction: column;
    }

    .actions .btn {
        width: 100%;
    }

    .slide .story-visual {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        height: 360px !important;
        min-height: 360px !important;
        margin: 0 !important;
        padding: 45px 10px 10px !important;
        overflow: hidden !important;
        clip: auto !important;
        white-space: normal !important;
        border: 1px solid #d8e6f2 !important;
        border-radius: 18px !important;
        background: linear-gradient(145deg, #fff, #edf7ff) !important;
        box-shadow: 0 18px 45px #08284612 !important;
        transform: none !important;
    }

    .visual-label,
    .slide:nth-child(2) .visual-label {
        top: 9px !important;
        left: 11px !important;
        gap: 5px;
        padding: 5px 0 !important;
        color: var(--navy) !important;
        font-size: 8px !important;
        line-height: 1.2;
        letter-spacing: .07em !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .visual-label-icon {
        width: 15px;
        height: 15px;
    }

    .visual-label-icon svg {
        width: 14px;
        height: 14px;
    }

    .story-grid {
        display: grid;
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
        grid-template-rows: 155px 145px;
        gap: 8px;
        width: 100%;
        height: 310px;
        padding: 0;
        align-items: stretch;
    }

    .story-grid > .story-arrow {
        display: none !important;
    }

    .story-grid > .story-column,
    .story-grid > div:first-child {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }

    .story-grid > .story-core {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
    }

    .story-grid > .mini-dashboard,
    .story-grid > div:last-child {
        grid-column: 1 / -1;
        grid-row: 2;
        min-width: 0;
    }

    .story-title {
        margin: 0 0 5px !important;
        color: #526d87;
        font-size: 8px !important;
        line-height: 1.2;
        letter-spacing: .09em;
    }

    .story-column,
    .platform-stack,
    .output-list {
        gap: 4px;
    }

    .story-card {
        min-height: 39px;
        padding: 5px 4px 5px 27px;
        border-radius: 6px;
        font-size: 8px !important;
        line-height: 1.15;
    }

    .story-card small {
        display: none;
    }

    .story-icon {
        left: 4px;
        width: 18px;
        height: 18px;
        border-radius: 4px;
        font-size: 6px;
    }

    .story-core {
        padding: 31px 7px 8px;
        border-radius: 9px;
    }

    .core-brand-mark {
        top: 8px;
        left: 8px;
        width: 42px;
    }

    .story-core .core-mark {
        width: 28px;
        height: 28px;
        margin-bottom: 5px;
        border-radius: 7px;
        font-size: 8px;
    }

    .story-core h3 {
        font-size: 11px;
    }

    .story-core p {
        margin: 4px 0 6px;
        font-size: 6px;
    }

    .core-pills {
        gap: 2px;
    }

    .core-pills span {
        padding: 2px 3px;
        font-size: 5px !important;
    }

    .mini-dashboard {
        min-height: 0;
        height: 145px;
        padding: 8px;
        border-radius: 8px;
    }

    .dash-head {
        padding-bottom: 5px;
    }

    .dash-head b {
        font-size: 9px;
    }

    .dash-live {
        font-size: 5px;
    }

    .dash-kpis {
        gap: 3px;
        margin: 5px 0;
    }

    .dash-kpi {
        padding: 4px;
    }

    .dash-kpi b {
        font-size: 8px;
    }

    .dash-kpi small {
        font-size: 5px !important;
    }

    .dash-chart {
        height: 48px;
        padding: 7px 4px 4px;
        gap: 3px;
    }

    .dash-outcomes {
        gap: 2px;
        margin-top: 4px;
    }

    .dash-outcomes span {
        padding: 3px;
        font-size: 5px !important;
    }

    .platform-stack .story-card {
        min-height: 31px;
        padding: 4px 3px 4px 27px;
    }

    .output {
        padding: 5px 4px;
        font-size: 6px !important;
    }

    .connection-status {
        gap: 4px;
        padding-top: 4px;
        font-size: 5px !important;
    }

    .enterprise-canvas {
        grid-template-columns: minmax(0, 1fr) minmax(0, .95fr) !important;
        grid-template-rows: 1fr !important;
    }

    .enterprise-canvas > .story-arrow {
        display: none !important;
    }

    .enterprise-canvas > div:first-child,
    .enterprise-canvas > .solution-hub {
        grid-column: auto;
        grid-row: 1;
    }

    .solution-stack {
        gap: 4px;
    }

    .solution-tile {
        min-height: 61px;
        padding: 6px;
        border-radius: 7px;
    }

    .solution-tile i {
        width: 20px;
        height: 20px;
        margin-bottom: 3px;
        border-radius: 5px;
        font-size: 6px;
    }

    .solution-tile b {
        font-size: 9px;
    }

    .solution-tile small {
        font-size: 5px;
    }

    .solution-hub {
        padding: 42px 9px 10px;
        border-radius: 10px;
    }

    .solution-hub .core-brand-mark {
        top: 9px;
        left: 9px;
        width: 45px;
    }

    .solution-hub h3 {
        font-size: 14px;
    }

    .solution-hub p {
        font-size: 7px;
    }

    .controls {
        left: 50%;
        bottom: 20px;
        transform: translateX(-50%);
    }

    .strip {
        grid-template-columns: 1fr 1fr;
    }

    .two,
    .demo,
    .contact,
    .trust,
    .azure-layout,
    .industry-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .section,
    .dark,
    .demo,
    .contact,
    .capability-band,
    .azure-section,
    .digital-band {
        padding-top: 68px;
        padding-bottom: 68px;
    }

    .cap-grid,
    .cards,
    .industry {
        grid-template-columns: 1fr 1fr;
    }

    .service-list,
    .azure-services {
        grid-template-columns: 1fr;
    }

    .azure-services article:first-child {
        grid-column: auto;
    }

    .types {
        grid-template-columns: 1fr 1fr;
    }

    .approach-enhanced {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    body {
        font-size: 16px;
    }

    .slide {
        padding-right: 5%;
        padding-left: 5%;
    }

    .slide h1,
    .slide h2 {
        font-size: 35px;
    }

    .slide .story-visual {
        height: 350px !important;
        min-height: 350px !important;
    }

    .strip,
    .challenge,
    .cap-grid,
    .cards,
    .industry,
    .solutions,
    .platform-grid,
    .types {
        grid-template-columns: 1fr;
    }

    .section .heading h2,
    .feature-copy h2,
    .dark h2,
    .demo h2,
    .contact h2 {
        font-size: 37px;
    }

    .ticks {
        grid-template-columns: 1fr;
    }

    .product-grid {
        grid-template-columns: 1fr;
    }

    .demo-flash-inner {
        grid-template-columns: 1fr;
    }

    .demo-flash .btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media (max-width:900px){.forms-hub-box{grid-template-columns:1fr}.forms-hub-links{grid-template-columns:1fr}.forms-hub-links a:last-child{grid-column:auto}}
@media (max-width:520px){.forms-hub{padding:68px 0}.forms-hub-box{padding:24px 18px}.forms-hub-links a{min-height:82px}}
/* Enterprise-platform artwork used consistently on desktop, tablet and mobile. */
.integration-section .integration-story {
    display: block !important;
    width: 115% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 14 / 9;
    padding: 0 !important;
    margin: 24px 0 0 -7.5% !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: url("/images/home/enterprise-platform-integration-mobile.png") !important;
    background-image: image-set(
        url("/images/home/enterprise-platform-integration-mobile.webp") type("image/webp"),
        url("/images/home/enterprise-platform-integration-mobile.png") type("image/png")
    ) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    overflow: visible !important;
}

.integration-section .integration-story > * {
    display: none !important;
}

@media (max-width: 1050px) {
    .integration-section .integration-story {
        width: 100% !important;
        margin: 24px auto 0 !important;
    }
}

@media (max-width: 600px) {
    .integration-section .integration-story {
        width: calc(100% + 20px) !important;
        max-width: none !important;
        margin-left: -10px !important;
        margin-right: -10px !important;
    }
}

/* v30: responsive rules for restructured Home content */
@media (max-width:1050px){
    .home-solution-grid{grid-template-columns:repeat(2,1fr)}
    .ecosystem-layout,.intelligence-layout,.commerce-layout,.regional-contact-layout{grid-template-columns:1fr;gap:48px}
    .ecosystem-copy,.intelligence-copy{max-width:760px}
    .ecosystem-visual{width:min(760px,100%);margin:auto}
    .ecosystem-visual picture{width:100%;margin-left:0}
    .commerce-flow{width:min(700px,100%);margin:auto}
    .home-industry-grid,.why-home-grid{grid-template-columns:repeat(2,1fr)}
    .regional-cta{padding:34px 0 0;border-left:0;border-top:1px solid #ffffff55}
}

@media (max-width:720px){
    .home-about,.solution-discovery,.ecosystem-section,.intelligence-section,.commerce-feature,.regional-contact{padding-top:68px;padding-bottom:68px}
    .home-solution-grid,.intelligence-grid,.scale-grid,.home-industry-grid,.why-home-grid{grid-template-columns:1fr}
    .home-solution-grid article{min-height:0}
    .ecosystem-section:before{opacity:.45}
    .ecosystem-layout{gap:30px}
    .ecosystem-visual{width:100%}
    .intelligence-grid article{min-height:0}
    .commerce-capability-map{grid-template-columns:1fr 94px 1fr;gap:17px 9px;min-height:190px;margin:22px 0 28px}
    .commerce-map-core{width:94px;height:94px}
    .commerce-capability>span{width:40px;height:40px;flex-basis:40px}
    .commerce-capability b{font-size:10px}.commerce-capability small{font-size:8px}
    .commerce-flow{grid-template-columns:1fr auto 1fr;gap:7px;padding:20px}
    .commerce-flow span:nth-of-type(3),.commerce-flow span:nth-of-type(4){margin-top:4px}
    .commerce-flow i:nth-of-type(2){display:none}
    .commerce-flow strong{font-size:10px}
    .scale-grid .scale-card{min-height:0}.home-industry-grid article{min-height:105px}
    .regional-cta h3{font-size:26px}
}

@media (max-width:430px){
    .commerce-capability-map{grid-template-columns:1fr 82px 1fr;gap:18px 6px;min-height:180px}
    .commerce-map-core{width:82px;height:82px;box-shadow:0 12px 28px #0a66c430,0 0 0 6px #fff,0 0 0 7px #a9dcec}
    .commerce-map-core svg{width:22px;height:22px}.commerce-map-core strong{font-size:7px}
    .commerce-capability{gap:6px}.commerce-capability>span{width:34px;height:34px;flex-basis:34px}.commerce-capability svg{width:16px;height:16px}
    .commerce-capability small{display:none}.commerce-capability b{font-size:9px}
    .commerce-flow{grid-template-columns:1fr}
    .commerce-flow i{display:none}.commerce-flow strong{grid-column:1}
    .regional-contact .actions{align-items:flex-start}
}