/* Core Values Section — Style 2
   Figma node 2001:992 */

@font-face {
    font-family: 'PP Hatton';
    src: url('../fonts/PPHatton-Ultralight.otf') format('opentype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PP Hatton';
    src: url('../fonts/PPHatton-UltralightItalic.otf') format('opentype');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'PP Hatton';
    src: url('../fonts/PPHatton-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PP Hatton';
    src: url('../fonts/PPHatton-MediumItalic.otf') format('opentype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'PP Hatton';
    src: url('../fonts/PPHatton-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PP Hatton';
    src: url('../fonts/PPHatton-BoldItalic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

.us-ps-style-2 {
    --s2-bg: #607470;
    --s2-cream: #FFF5EB;
    --s2-blue: #006D8F;
    --s2-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    padding: 64px 118px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    justify-content: center !important;
    background-color: var(--s2-bg);
}

.us-ps-style-2 *,
.us-ps-style-2 *::before,
.us-ps-style-2 *::after {
    box-sizing: border-box;
}

/* Botanical background pattern — absolute, stretched per Figma (h 174.95%, top -21.55%) */
.us-ps-style-2::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--s2-bg);
    pointer-events: none;
    z-index: 0;
}

.us-ps-style-2::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -21.55%;
    height: 174.95%;
    background-image: url('../images/core-values-style-2/bg-pattern.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0.02;
    pointer-events: none;
    z-index: 0;
}

/* Cards row */
.us-ps-style-2 .frame-14 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 1086px;
    max-width: 100%;
    position: relative;
    z-index: 1;
    margin-left: auto;
    margin-right: auto;
}

/* Each card column */
.us-ps-style-2 .usp-card {
    display: flex;
    flex: 1 0 0;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    padding: 0 22px;
    background: transparent;
    border: none;
    backdrop-filter: none;
    opacity: 1;
    transform: none;
    transition: var(--s2-transition);
}

.us-ps-style-2 .usp-card:hover {
    transform: none;
    background: transparent;
    box-shadow: none;
    border: none;
}

/* Icon — 44.78px square, cream tint via filter so ACF-uploaded icons match */
.us-ps-style-2 .icon-wrapper {
    width: 44.78px;
    height: 44.78px;
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--s2-transition);
}

.us-ps-style-2 .usp-card:hover .icon-wrapper {
    background: transparent;
    transform: none;
}

.us-ps-style-2 .icon-wrapper .icon_ {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Tint ACF-uploaded icons to cream (#FFF5EB). brightness(0)+invert(1) gives
       near-white; the slight sepia warms it toward the cream hue. */
    filter: brightness(0) invert(1) sepia(10%) saturate(150%) hue-rotate(330deg);
    transition: var(--s2-transition);
}

.us-ps-style-2 .usp-card:hover .icon_ {
    transform: none;
}

/* Heading — PP Hatton Ultralight, 24px, #FFF5EB */
.us-ps-style-2 .my-nearest-care-home {
    color: var(--s2-cream);
    text-align: center;
    font-family: 'PP Hatton', 'Cormorant Garamond', Georgia, serif;
    font-weight: 200; /* Ultralight */
    font-size: 24px;
    line-height: normal;
    letter-spacing: 0;
    margin: 0;
    width: 100%;
    transition: var(--s2-transition);
}

.us-ps-style-2 .usp-card:hover .my-nearest-care-home {
    color: var(--s2-cream);
    transform: none;
}

/* Body — Gesta Regular, 15px, #FFF5EB, 10px gap from heading */
.us-ps-style-2 .my-nearest-care-home + .find-the-perfect-fit-search-for-预约到院-near-you {
    margin-top: -15px; /* gap 25 -> 10 between heading and body */
}

.us-ps-style-2 .find-the-perfect-fit-search-for-预约到院-near-you {
    color: var(--s2-cream);
    text-align: center;
    font-family: 'Gesta', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: normal;
    margin: 0;
    max-width: none;
    width: 100%;
    opacity: 1;
    transition: var(--s2-transition);
}

.us-ps-style-2 .usp-card:hover .find-the-perfect-fit-search-for-预约到院-near-you {
    opacity: 1;
    transform: none;
}

/* Dividers — 1px × 197px cream vertical */
.us-ps-style-2 .divider-1 {
    width: 1px;
    height: 197px;
    background: var(--s2-cream) !important;
    opacity: 1;
    transform: none;
    animation: none;
    margin: 0;
    flex-shrink: 0;
    align-self: center;
}

.us-ps-style-2 .divider-1:hover {
    opacity: 1;
    transform: none;
}

/* CTA — cream bg, blue text, 20px × 11px padding, 11px gap */
.us-ps-style-2 .cta-wrapper {
    position: relative;
    z-index: 1;
    opacity: 1;
    transform: none;
    margin: 0;
}

.us-ps-style-2 .frame-25 {
    background: var(--s2-cream);
    border: none;
    border-radius: 0;
    padding: 11px 20px;
    display: inline-flex;
    gap: 11px;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
    min-height: 0;
    margin: 0;
    transition: var(--s2-transition);
}

.us-ps-style-2 .frame-25:hover,
.us-ps-style-2 .frame-25:focus {
    background: #fff;
    transform: translateY(-1px);
    border: none;
}

.us-ps-style-2 .frame-25:focus {
    outline: 2px solid var(--s2-cream);
    outline-offset: 3px;
}

/* Button label — Gesta Medium 14px, #006D8F, tracking 0.266px, line 25, capitalize, nowrap */
.us-ps-style-2 .view-our-current-roles {
    color: var(--s2-blue);
    font-family: 'Gesta', sans-serif;
    font-weight: 500; /* Medium */
    font-size: 14px;
    line-height: 25px;
    letter-spacing: 0.266px;
    text-transform: capitalize;
    white-space: nowrap;
    margin: 0;
    transition: var(--s2-transition);
}

/* Arrow — Figma shows 14 × 11 filled blue arrow (arrow.svg) */
.us-ps-style-2 .frame-25 svg {
    width: 14px;
    height: 11px;
    transition: var(--s2-transition);
}

.us-ps-style-2 .frame-25 svg path {
    stroke: none;
    fill: var(--s2-blue);
}

.us-ps-style-2 .frame-25:hover svg {
    transform: translateX(3px);
}

/* Tablet */
@media (max-width: 1200px) {
    .us-ps-style-2 {
        padding: 56px 64px;
    }

    .us-ps-style-2 .frame-14 {
        width: 100%;
    }
}

@media (max-width: 1024px) {
    .us-ps-style-2 {
        padding: 48px 40px;
    }

    .us-ps-style-2 .frame-14 {
        gap: 12px;
    }

    .us-ps-style-2 .usp-card {
        padding: 0 12px;
        gap: 20px;
    }

    .us-ps-style-2 .divider-1 {
        height: 160px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .us-ps-style-2 {
        padding: 48px 24px;
        gap: 32px;
    }

    .us-ps-style-2 .frame-14 {
        flex-direction: column;
        gap: 32px;
        align-items: center;
    }

    .us-ps-style-2 .usp-card {
        width: 100%;
        max-width: 420px;
        padding: 0;
        gap: 20px;
    }

    .us-ps-style-2 .divider-1 {
        width: 60%;
        height: 1px;
    }

    .us-ps-style-2 .cta-wrapper {
        width: 100%;
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .us-ps-style-2 {
        padding: 40px 20px;
    }

    .us-ps-style-2 .my-nearest-care-home {
        font-size: 22px;
    }

    .us-ps-style-2 .find-the-perfect-fit-search-for-预约到院-near-you {
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .us-ps-style-2 *,
    .us-ps-style-2 *::before,
    .us-ps-style-2 *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}