/* ============================================================ min-width: 640px */
@media (min-width: 640px) {
    /* Home */
    .hero__chips {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* SOC */
    .soc-lifecycle__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .soc-adv__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ============================================================ min-width: 768px */
@media (min-width: 768px) {
    /* Site chrome */
    .site-header__cta {
        display: inline-flex;
    }

    .site-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Home */
    .threats-card {
        grid-template-columns: 1.1fr 1fr;
        padding: 3.5rem;
    }

    /* SOC */
    .soc__panel {
        padding: 1.5rem;
    }

    .soc__alert {
        display: flex;
    }

    .soc__uptime {
        display: flex;
    }

    .soc-why__cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Cloudflare */
    .cf-intro__cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cf-pillars__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Generic service layout */
    .svc-section {
        grid-template-columns: 1fr 2fr;
        gap: 1.5rem;
        padding: 2.5rem;
    }

    /* Microsoft 365 — vertical learning-path rail + numbered nodes kick in on >= md. */
    .ms-trainings__rail {
        display: block;
    }

    .ms-training {
        padding-left: 5rem;
    }

    .ms-training__node {
        display: grid;
    }
}

/* ============================================================ min-width: 960px */
@media (min-width: 960px) {
    /* Site chrome */
    .main-nav {
        display: flex;
    }

    .nav-toggle {
        display: none;
    }

    .site-footer__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .site-footer__bottom-inner {
        flex-direction: row;
    }

    /* Home — hero */
    .hero__inner {
        grid-template-columns: 1.1fr 1fr;
    }

    .hero__content {
        text-align: left;
    }

    .hero__sub {
        margin-inline: 0;
    }

    .hero__actions {
        justify-content: flex-start;
    }

    .hero__chips {
        max-width: 36rem;
    }

    /* Home — process */
    .process-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .process-grid__line {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: 44px;
        height: 1px;
        background: linear-gradient(to right, transparent, rgba(13, 162, 231, 0.4), transparent);
    }
}

/* ============================================================ min-width: 1024px */
@media (min-width: 1024px) {
    /* Home */
    .section {
        padding-block: 6rem;
    }

    .hero {
        padding-top: calc(var(--header-h) + 6rem);
    }

    /* SOC */
    .soc-hero {
        grid-template-columns: 1.4fr 1fr;
        gap: 3rem;
    }

    .soc-lifecycle__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .soc-adv {
        grid-template-columns: 1fr 1fr;
    }

    .soc-adv__cards {
        order: 1;
    }

    .soc-adv__text {
        order: 2;
    }

    /* NextGen Firewall */
    .fw-best__head {
        grid-template-columns: 2fr 1fr;
    }

    /* Microsoft 365 — learning-path card: 4 / 5 / 3 columns, outcome divider on the left. */
    .ms-training__card {
        grid-template-columns: 4fr 5fr 3fr;
        align-items: start;
        gap: 1.25rem;
    }

    .ms-training__col--outcome {
        border-top: 0;
        padding-top: 0;
        border-left: 1px solid rgba(46, 50, 66, 0.55);
        padding-left: 1.25rem;
    }
}

/* ============================================================ min-width: 1200px */
@media (min-width: 1200px) {
    /* DLP — causes & next-gen use Lovable's 5/7 split, override UIkit's even split. */
    .dlp-causes {
        display: grid !important;
        grid-template-columns: 5fr 7fr;
        gap: 1.5rem;
        margin: 0 !important;
    }

    .dlp-causes > * {
        padding-left: 0 !important;
        width: auto !important;
    }

    .dlp-nextgen {
        padding: 3rem;
    }

    .dlp-nextgen__inner {
        display: grid !important;
        grid-template-columns: 5fr 7fr;
        gap: 2.5rem;
        align-items: center;
        margin: 0 !important;
    }

    .dlp-nextgen__inner > * {
        padding-left: 0 !important;
        width: auto !important;
    }

    /* Microsoft 365 — horizontal rail under migration step nodes (row layout only). */
    .ms-steps__rail {
        display: block;
    }

    /* DPO — "why" split, Lovable's 5/7 proportion over UIkit's even split. */
    .dpo-why {
        display: grid !important;
        grid-template-columns: 5fr 7fr;
        gap: 1.5rem;
        margin: 0 !important;
    }

    .dpo-why > * {
        padding-left: 0 !important;
        width: auto !important;
    }

    /* GDPR — "why choose" split, Lovable's 5/7 proportion over UIkit's even split. */
    .gdpr-why {
        padding: 3rem;
    }

    .gdpr-why__inner {
        display: grid !important;
        grid-template-columns: 5fr 7fr;
        gap: 2rem;
        align-items: center;
        margin: 0 !important;
    }

    .gdpr-why__inner > * {
        padding-left: 0 !important;
        width: auto !important;
    }

    .ms-page .ms-panel {
        max-width: 560px;
    }
}

/* ============================================================ max-width: 782px */
@media (max-width: 1200px) {
    .ms-page .ms-panel {
        max-width: 650px;
    }
}

@media (max-width: 960px) {
    .contacts-main .contact-map {
        display: none;
    }

    .contacts-main {
        padding-block: 3rem 0rem;
    }
}

@media (max-width: 782px) {

    .soc-section-title {
        font-size: 25px;
    }

    .pt-intro__lead,
    .pt-chain__lead,
    .pt-when__lead,
    .section-hero-services__description,
    .itaudit-intro__lead,
    .itaudit-block__lead,
    .section-contacts-hero .page-header__description {
        font-size: 15px;
    }

    .pt-trigger-card__text {
        font-size: 14px;
    }

    .cy-btn--hero {
        font-size: 13px;
    }

    .cy-btn--hero {
        padding: 10px 20px;
    }

    .soc-page__bracket--tl,
    .soc-page__bracket--tr,
    .fw-page__bracket--tl,
    .fw-page__bracket--tr,
    .cf-page__bracket--tl,
    .cf-page__bracket--tr,
    .pt-page__bracket--tl,
    .pt-page__bracket--tr,
    .nis-page__bracket--tl,
    .nis-page__bracket--tr,
    .itaudit-page__bracket--tl,
    .itaudit-page__bracket--tr,
    .dlp-page__bracket--tl,
    .dlp-page__bracket--tr,
    .ms-page__bracket--tl,
    .ms-page__bracket--tr,
    .gdpr-page__bracket--tl,
    .gdpr-page__bracket--tr,
    .dpo-faq__icon,
    .front-page .hero .soc {
        display: none;
    }

    .soc-page__sections,
    .fw-page__sections,
    .pt-page__sections,
    .itaudit-page__sections,
    .cf-page__sections,
    .nis-page__sections,
    .ms-page,
    .contacts-hero,
    .dpo-page {
        padding-top: calc(var(--header-h) + 1rem);
    }

    .section-contacts-hero .page-header__title {
        font-size: 35px;
    }

    .dlp-nextgen {
        padding: 1rem;
    }

    .dpo-faq__a {
        padding-left: 0;
    }

    .dpo-faq__title {
        padding-right: 50px;
    }

    .dlp-page__hero-img {
        object-position: 70%;
    }


    .front-page .hero__bg-img {
        object-position: 62%;
    }

    .front-page .section {
        padding-block: 3rem;
    }

    .dlp-page__hero-blur {
        mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 45%, rgba(0, 0, 0, 0) 70%);
    }

    .itaudit-page__hero-img {
        object-position: 78%;
    }

    .itaudit-page__hero-blur {
        mask-image: linear-gradient(to right, #000 0%, #000 80%, transparent 90%);
    }

    .pt-page__hero-img {
        object-position: 65%;
    }

    .itaudit-page__hero-blur {
        mask-image: linear-gradient(to right, #000 0%, #000 70%, transparent 85%);
    }

    .dpo-page__hero-img {
        object-position: 30%;
    }

    .dpo-page__hero-blur {
        mask-image: linear-gradient(to right, #000 0%, #000 80%, transparent 90%);
    }

    .nis-page__hero-img {
        object-position: 62%;
    }

    .nis-page__hero-blur {
        mask-image: linear-gradient(to right, #000 0%, #000 75%, transparent 90%);
    }

    .cf-page__hero-img {
        object-position: 75%;
    }

    .cf-page__hero-blur {
        mask-image: linear-gradient(to right, #000 0%, #000 80%, transparent 91%);
    }

    .fw-page__hero-img {
        object-position: 66%;
    }

    .fw-page__hero-blur {
        mask-image: linear-gradient(to right, #000 0%, #000 80%, transparent 90%);
    }
}


/* ============================================================ max-width: 639px */
@media (max-width: 639px) {
    /* Every service hero uses the same mobile veil gradient — one rule for all. */
    .fw-page__hero-veil,
    .cf-page__hero-veil,
    .pt-page__hero-veil,
    .nis-page__hero-veil,
    .dlp-page__hero-veil,
    .ms-page__hero-veil,
    .dpo-page__hero-veil {
        background: linear-gradient(to bottom, rgba(26, 30, 50, 0.62), rgba(26, 30, 50, 0.45) 45%, transparent 68%, var(--background));
    }

    .footer-menu-policy {
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }

    .dlp-hero__actions {
        flex-direction: column;
    }
}