﻿/* =========================================================
   PHOENIX YORK
   FINAL RESPONSIVE INNER-PAGE OVERRIDES

   IMPORTANT:
   CONTACT IS DELIBERATELY NOT INCLUDED HERE.

   This file controls only:
   - Strategy
   - Technology
   - Digital Solutions
   - Products
   - About
   - Careers

   HOME and CONTACT are not modified.
   ========================================================= */


/* =========================================================
   GLOBAL WIDTH SAFETY
   ========================================================= */

html,
body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}


*,
*::before,
*::after {
    box-sizing: border-box;
}


/* =========================================================
   KEEP INNER PAGE CONTENT INSIDE VIEWPORT
   ========================================================= */

.strategy-content,
.technology-content,
.digital-content,
.products-content,
.about-content,
.careers-content,
.strategy-content__inner,
.technology-content__inner,
.digital-content__inner,
.products-content__inner,
.about-content__inner,
.careers-content__inner {
    width: 100%;
    max-width: 100%;
}


/* =========================================================
   MAIN CONTENT
   ========================================================= */

.strategy-main,
.technology-main,
.digital-main,
.products-main,
.about-main,
.careers-main {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
}


/* =========================================================
   SIDEBARS
   ========================================================= */

.strategy-sidebar,
.technology-sidebar,
.digital-sidebar,
.products-sidebar,
.about-sidebar,
.careers-sidebar {
    max-width: 100%;
    box-sizing: border-box;
}


/* =========================================================
   HORIZONTAL RULES
   ========================================================= */

.strategy-sidebar__rule,
.technology-sidebar__rule,
.digital-sidebar__rule,
.products-sidebar__rule,
.about-sidebar__rule,
.careers-sidebar__rule,
.strategy-main__rule,
.technology-main__rule,
.digital-main__rule,
.products-main__rule,
.about-main__rule,
.careers-main__rule {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}


/* =========================================================
   DESKTOP HERO IMAGE FIX

   Prevent old object-fit:fill from distorting the images.
   Existing desktop hero heights remain unchanged.
   ========================================================= */

@media (min-width: 1101px) {

    .strategy-hero__image,
    .technology-hero__image,
    .digital-hero__image,
    .products-hero__image,
    .about-hero__image,
    .careers-hero__image {
        display: block;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        object-fit: cover !important;
        object-position: center center !important;
        transform: none !important;
        border: 0;
    }
}


/* =========================================================
   TABLET THREE-BUTTON ROW
   ========================================================= */

@media (min-width: 721px) and (max-width: 1100px) {

    .strategy-focus,
    .technology-focus,
    .digital-focus,
    .products-focus,
    .about-focus,
    .careers-focus {
        width: 100%;
        max-width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        overflow: hidden;
    }


    .strategy-focus__item,
    .technology-focus__item,
    .digital-focus__item,
    .products-focus__item,
    .about-focus__item,
    .careers-focus__item {
        min-width: 0;
        padding-left: 2px;
        padding-right: 2px;
        overflow: hidden;
    }


        .strategy-focus__item span,
        .technology-focus__item span,
        .digital-focus__item span,
        .products-focus__item span,
        .about-focus__item span,
        .careers-focus__item span {
            display: inline-block;
            max-width: 100%;
            font-size: 14px;
            white-space: nowrap;
            transform: scaleX(0.74);
            transform-origin: center;
        }
}


/* =========================================================
   TABLET / LARGE DEVICE PORTRAIT

   Includes:
   - iPad Mini portrait
   - iPad Air portrait
   - iPad Pro portrait
   - Surface Pro portrait
   - ASUS ZenBook portrait
   ========================================================= */

@media (min-width: 721px) and (max-width: 1100px) and (orientation: portrait) {

    .strategy-hero,
    .technology-hero,
    .digital-hero,
    .products-hero,
    .about-hero,
    .careers-hero {
        width: 100%;
        height: auto !important;
        overflow: hidden;
    }


    .strategy-hero__image,
    .technology-hero__image,
    .digital-hero__image,
    .products-hero__image,
    .about-hero__image,
    .careers-hero__image {
        display: block;
        width: 100%;
        height: auto !important;
        max-width: 100%;
        margin: 0;
        padding: 0;
        object-fit: contain !important;
        object-position: center center !important;
        transform: none !important;
        border: 0;
    }


    .strategy-content__inner,
    .technology-content__inner,
    .digital-content__inner,
    .products-content__inner,
    .about-content__inner,
    .careers-content__inner {
        width: 100%;
        max-width: 100%;
        grid-template-columns: 1fr;
        padding-left: 28px;
        padding-right: 28px;
        overflow: hidden;
    }


    .strategy-sidebar,
    .technology-sidebar,
    .digital-sidebar,
    .products-sidebar,
    .about-sidebar,
    .careers-sidebar {
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}


/* =========================================================
   SURFACE PRO / ASUS ZENBOOK PORTRAIT
   HEADER GAP FIX
   ========================================================= */

@media (min-width: 851px) and (max-width: 1000px) and (orientation: portrait) {

    .strategy-hero,
    .technology-hero,
    .digital-hero,
    .products-hero,
    .about-hero,
    .careers-hero {
        margin-top: 70px !important;
    }
}


/* =========================================================
   IPAD MINI LANDSCAPE
   Approx 1024 x 768
   ========================================================= */

@media (min-width: 1000px) and (max-width: 1100px) and (min-height: 650px) and (max-height: 850px) and (orientation: landscape) {

    .strategy-hero,
    .technology-hero,
    .digital-hero,
    .products-hero,
    .about-hero,
    .careers-hero {
        width: 100%;
        height: auto !important;
        overflow: hidden;
    }


    .strategy-hero__image,
    .technology-hero__image,
    .digital-hero__image,
    .products-hero__image,
    .about-hero__image,
    .careers-hero__image {
        display: block;
        width: 100%;
        height: auto !important;
        max-width: 100%;
        margin: 0;
        padding: 0;
        object-fit: contain !important;
        object-position: center center !important;
        transform: none !important;
    }
}


/* =========================================================
   IPAD PRO LANDSCAPE

   iPad Air landscape deliberately excluded because
   that layout is already correct.
   ========================================================= */

@media (min-width: 1200px) and (max-width: 1400px) and (min-height: 800px) and (orientation: landscape) {

    .strategy-hero,
    .technology-hero,
    .digital-hero,
    .products-hero,
    .about-hero,
    .careers-hero {
        width: 100%;
        height: auto !important;
        overflow: hidden;
    }


    .strategy-hero__image,
    .technology-hero__image,
    .digital-hero__image,
    .products-hero__image,
    .about-hero__image,
    .careers-hero__image {
        display: block;
        width: 100%;
        height: auto !important;
        max-width: 100%;
        margin: 0;
        padding: 0;
        object-fit: contain !important;
        object-position: center center !important;
        transform: none !important;
    }
}


/* =========================================================
   WIDE PHONE LANDSCAPE HERO FIX

   Covers:
   iPhone 12 Pro
   Galaxy A51/A71
   iPhone 15 Pro Max
   iPhone 16 Pro Max

   Galaxy S8+ is deliberately excluded.
   ========================================================= */

@media (min-width: 800px) and (max-width: 1000px) and (max-height: 500px) and (orientation: landscape) {

    .strategy-hero,
    .technology-hero,
    .digital-hero,
    .products-hero,
    .about-hero,
    .careers-hero {
        width: 100%;
        height: auto !important;
        margin-top: 70px !important;
        padding: 0;
        overflow: hidden;
    }


    .strategy-hero__image,
    .technology-hero__image,
    .digital-hero__image,
    .products-hero__image,
    .about-hero__image,
    .careers-hero__image {
        display: block;
        width: 100%;
        height: auto !important;
        max-width: 100%;
        margin: 0;
        padding: 0;
        object-fit: contain !important;
        object-position: center center !important;
        transform: none !important;
        border: 0;
    }
}


/* =========================================================
   ALL LANDSCAPE PHONE
   HEADER GAP FIX ONLY
   ========================================================= */

@media (max-width: 1000px) and (max-height: 600px) and (orientation: landscape) {

    .strategy-hero,
    .technology-hero,
    .digital-hero,
    .products-hero,
    .about-hero,
    .careers-hero {
        margin-top: 70px !important;
    }
}


/* =========================================================
   PHONE CONTENT

   Existing phone hero behaviour remains unchanged.
   ========================================================= */

@media (max-width: 720px) {

    .strategy-content__inner,
    .technology-content__inner,
    .digital-content__inner,
    .products-content__inner,
    .about-content__inner,
    .careers-content__inner {
        width: 100%;
        max-width: 100%;
        padding-left: 18px;
        padding-right: 18px;
    }


    .strategy-focus,
    .technology-focus,
    .digital-focus,
    .products-focus,
    .about-focus,
    .careers-focus {
        grid-template-columns: 1fr;
        height: auto;
    }


    .strategy-focus__item,
    .technology-focus__item,
    .digital-focus__item,
    .products-focus__item,
    .about-focus__item,
    .careers-focus__item {
        width: 100%;
        height: 62px;
    }


        .strategy-focus__item span,
        .technology-focus__item span,
        .digital-focus__item span,
        .products-focus__item span,
        .about-focus__item span,
        .careers-focus__item span {
            font-size: 14px;
            transform: none;
        }
}
