/* Prologic redesign - company profile page (Figma "About us" 648:4319).
   Loaded only on the profile page together with home.css (the quote/press, clients and CTA
   sections are the home page partials). Scoped under .ph-profile. */

/* Page header (648:4320): photo, 53% white wash, centred title */
.ph-profile .ph-page-head {
    position: relative;
    height: 480px;            /* Figma 380px + 100px requested */
    background-color: #E9EEF2;
    background-position: center;
    background-size: cover;
    isolation: isolate;
}

.ph-profile .ph-page-head::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(255, 255, 255, 0.53);
}

.ph-profile .ph-page-head__title {
    position: absolute;
    top: 324.27px;
    left: 50%;
    width: min(685px, 100% - 48px);
    margin: 0;
    transform: translate(-50%, -50%);
    color: var(--color-black);
    font-family: var(--font-heading) !important;
    font-size: 68px;
    line-height: 59.291px;
    font-weight: 500;
    text-align: center;
    text-transform: uppercase;
}

/* Header variant used by the contact and careers pages (648:4535 / 861:4562): 80% white wash, title 11px higher */
.ph-profile .ph-page-head--wash80::before {
    background: rgba(255, 255, 255, 0.8);
}

.ph-profile .ph-page-head--wash80 .ph-page-head__title {
    top: 313.27px;
}

/* Careers page job grid (648:3365): 70px top/bottom, 1368px grid, rows 24px / columns 40px apart */
.ph-profile.ph-career-page .ph-career-jobs {
    display: flex;
    justify-content: center;
    padding: 70px var(--gutter);
    background: var(--color-white);
}

.ph-profile.ph-career-page .ph-jobs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 40px;
}

@media (max-width: 991px) {
    .ph-profile.ph-career-page .ph-jobs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 24px;
    }
}

@media (max-width: 767px) {
    .ph-profile.ph-career-page .ph-jobs {
        grid-template-columns: 1fr;
    }
}

/* Blog page (885:8455): 70px top/bottom, 3 columns of 448px cards, 24px rows / 26px columns */
.ph-profile.ph-blog-page .ph-blog {
    display: flex;
    justify-content: center;
    padding: 70px var(--gutter);
    background: var(--color-white);
}

.ph-profile .ph-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 448px));
    justify-content: center;
    gap: 24px 26px;
    width: 100%;
    max-width: 1396px;
}

/* Card (885:8633): #FAFAFA, 2px orange left edge, image right, title, arrow top-left */
.ph-profile .ph-post {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 132px;
    padding: 4px;
    overflow: hidden;
    border-left: 2px solid rgba(243, 111, 34, 0.9);
    border-radius: 8px;
    background: #FAFAFA;
    box-shadow: 0 0 10px rgba(202, 202, 202, 0.5);
    transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out);
}

.ph-profile .ph-post__media {
    flex: none;
    width: 180px;
    height: 124.088px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--color-white);
}

.ph-profile .ph-post__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-hover) var(--ease-out);
}

.ph-profile .ph-post__title {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 16px 0 9px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #333333;
    font-family: var(--font-side-tab) !important;
    font-size: 18px;
    line-height: 22.86px;
    text-align: start;
}

.ph-profile .ph-post__arrow {
    position: absolute;
    left: 19px;
    top: 15px;
    width: 24px;
    height: 24px;
    transition: transform var(--dur-hover) var(--ease-out);
}

/* Hover - no Figma variant; same lift as the other cards */
.ph-profile .ph-post:hover,
.ph-profile .ph-post:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(243, 111, 34, 0.16);
}

.ph-profile .ph-post:hover .ph-post__media img {
    transform: scale(1.04);
}

.ph-profile .ph-post:hover .ph-post__arrow {
    transform: translateX(-4px);
}

.ph-profile .ph-post:hover .ph-post__title {
    color: var(--color-orange);
}

@media (max-width: 1499px) {
    .ph-profile .ph-blog-grid {
        grid-template-columns: repeat(2, minmax(0, 448px));
    }
}

@media (max-width: 991px) {
    .ph-profile .ph-blog-grid {
        grid-template-columns: minmax(0, 560px);
    }
}

@media (max-width: 480px) {
    .ph-profile .ph-post {
        height: auto;
        min-height: 104px;
    }

    .ph-profile .ph-post__media {
        width: 120px;
        height: 96px;
    }

    .ph-profile .ph-post__title {
        font-size: 16px;
        line-height: 21px;
    }
}

/* Services page (885:8776): 70px top/bottom, 3 columns of 448px cards, 24px rows / 26px columns */
.ph-profile.ph-services-page .ph-services {
    display: flex;
    justify-content: center;
    padding: 70px var(--gutter);
    background: var(--color-white);
}

.ph-profile .ph-services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 448px));
    justify-content: center;
    gap: 24px 26px;
    width: 100%;
    max-width: 1396px;
}

/* The service card itself (.ph-service) lives in cards.css - it is also used on article pages */

@media (max-width: 1499px) {
    .ph-profile .ph-services-grid {
        grid-template-columns: repeat(2, minmax(0, 448px));
    }
}

@media (max-width: 767px) {
    .ph-profile .ph-services-grid {
        grid-template-columns: minmax(0, 448px);
    }

    .ph-profile.ph-services-page .ph-services {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}

/* Shared body copy (paragraph style: Google Sans Flex 16/26, no spacing between paragraphs) */
.ph-profile .ph-profile__body {
    color: var(--color-black);
    font-family: var(--font-body) !important;
    font-size: var(--fs-p);
    line-height: var(--lh-p);
}

/* Intro + collage (648:4323) */
.ph-profile .ph-profile-intro {
    padding: 128px 0;
    background: var(--color-white);
}

.ph-profile .ph-profile-intro__row {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 81px;
}

.ph-profile .ph-profile-intro__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    width: 618px;
}

.ph-profile .ph-profile-intro__heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.ph-profile .ph-profile-intro__title {
    color: var(--color-black);
}

.ph-profile .ph-profile-intro__text .ph-profile__body {
    padding-bottom: var(--lh-p);      /* trailing empty line in Figma */
}

.ph-profile .ph-profile-collage {
    position: relative;
    flex: none;
    width: 811px;
    height: 518.192px;
}

.ph-profile .ph-profile-collage img {
    position: absolute;
    display: block;
    object-fit: cover;
}

.ph-profile .ph-profile-collage__a {
    left: 0;
    top: 0;
    width: 433.282px;
    height: 518.192px;
    border-radius: 8px;
}

.ph-profile .ph-profile-collage__b {
    left: 426.42px;
    top: 17.48px;
    width: 384.585px;
    height: 481.981px;
    border-radius: 9px;
}

/* Approach text + team grid (861:4545) */
.ph-profile .ph-profile-team {
    padding: 10px 0 128px;
    background: var(--color-white);
}

.ph-profile .ph-profile-team__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1506px;
    margin-inline: auto;
}

.ph-profile .ph-profile-team__media {
    flex: none;
    width: 618px;
    height: 343px;
}

.ph-profile .ph-profile-team__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ph-profile .ph-profile-team__text {
    width: 811px;
}

/* Stats (648:4358) */
.ph-profile .ph-profile-stats {
    padding: 70px var(--gutter);
    background: var(--color-white);
}

.ph-profile .ph-stats--center {
    justify-content: center;
    gap: 139px;
}

.ph-profile .ph-stats--center .ph-stat {
    align-items: center;
}

.ph-profile .ph-stats--center .ph-stat__label {
    text-align: center;
}

/* Responsive (Figma only has the 1920 frame) */
@media (max-width: 1599px) {
    .ph-profile .ph-profile-intro__row {
        gap: 48px;
    }

    .ph-profile .ph-profile-collage {
        width: min(811px, 52%);
        height: auto;
        aspect-ratio: 811 / 518.192;
    }

    .ph-profile .ph-profile-collage__a {
        width: 53.43%;
        height: 100%;
    }

    .ph-profile .ph-profile-collage__b {
        left: 52.58%;
        top: 3.37%;
        width: 47.42%;
        height: 93.01%;
    }

    .ph-profile .ph-profile-team__row {
        gap: 48px;
    }

    .ph-profile .ph-profile-team__media {
        width: min(618px, 42%);
        height: auto;
        aspect-ratio: 618 / 343;
    }

    .ph-profile .ph-profile-team__text {
        width: auto;
        flex: 1;
    }
}

@media (max-width: 1199px) {
    .ph-profile .ph-profile-intro__row,
    .ph-profile .ph-profile-team__row {
        flex-direction: column;
        align-items: stretch;
    }

    .ph-profile .ph-profile-intro__text {
        width: 100%;
    }

    .ph-profile .ph-profile-collage,
    .ph-profile .ph-profile-team__media {
        width: 100%;
        max-width: 811px;
        align-self: center;
    }

    .ph-profile .ph-profile-team__media {
        order: 2;
        max-width: 618px;
    }

    .ph-profile .ph-stats--center {
        gap: 64px;
    }
}

@media (max-width: 767px) {
    .ph-profile .ph-page-head {
        height: 290px;
    }

    .ph-profile .ph-page-head__title,
    .ph-profile .ph-page-head--wash80 .ph-page-head__title {
        top: 175px;
        font-size: 40px;
        line-height: 44px;
    }

    .ph-profile.ph-career-page .ph-career-jobs {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .ph-profile .ph-profile-intro {
        padding: 56px 0;
    }

    .ph-profile .ph-profile-team {
        padding-bottom: 56px;
    }

    .ph-profile .ph-profile-stats {
        padding: 48px var(--gutter);
    }

    .ph-profile .ph-stats--center {
        gap: 24px;
        justify-content: space-around;
    }

    .ph-profile .ph-stats--center .ph-stat {
        min-width: 0;
        width: auto;
    }
}