/**
 * Service pages (content type `services`) and the Case Study Slider.
 *
 * Two jobs:
 *  1. Swap the layout-area accent from orange to green on service nodes. The
 *     theme's orange is set through --phi-orange in a lot of component rules,
 *     so rather than restating each of them, the variable itself is rebound
 *     inside the node's layout area. Header, footer and the sticky social
 *     column sit outside that scope and keep the site's normal orange.
 *  2. Style the Case Study Slider view (.casestudy-slider) and the two-up
 *     photo column used in the turnkey section.
 */

/* ==========================================================================
   Services: green accent inside the layout area only
   ========================================================================== */

.page-node-type-services .node--type-services,
.page-node-type-services .layout-builder,
.page-node-type-services main .layout {
    --phi-orange: var(--phi-green);
    --phi-orange-hover: #00471e;
    --phi-orange-light: #eaf3ed;
}

/* ==========================================================================
   Two-up photo column (basic block "PES Turnkey Photos")
   ========================================================================== */

.photo-duo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.photo-duo img {
    width: 100%;
    height: 100%;
    min-height: 260px;
    object-fit: cover;
    border-radius: .875rem;
    display: block;
}

@media (max-width: 650px) {
    .photo-duo img { min-height: 180px; }
}

/* ==========================================================================
   Case Study Slider (view: case_study_slider)
   ========================================================================== */

.casestudy-slider {
    position: relative;
    margin: 0 auto;
    padding: 0 6rem;
}

.casestudy-slider .flexslider {
    background: none;
    border: none;
    margin: 0;
    overflow: visible;
}

/* Image left, copy right. Views gives each field its own wrapper div directly
   inside the slide <li>, so the <li> is the flex row and the two wrappers
   (named via the view's element_wrapper_class) are the flex items.
   !important because FlexSlider writes `display: block` inline on every slide,
   which no stylesheet specificity can outrank — the news slider does the same. */
.casestudy-slider .flexslider ul.slides > li {
    background: none;
    display: flex !important;
    align-items: center;
    gap: 3.5rem;
}

.casestudy-slider .cs-col-image {
    flex: 0 0 38%;
    max-width: 38%;
}

.casestudy-slider .cs-col-content {
    flex: 1 1 auto;
    min-width: 0;
}

/* Fixed height, not max-height: the slider fades between absolutely stacked
   slides and reserves the tallest one's height, so slides whose photos differ
   in aspect ratio would leave a gap above the pager. Equal heights remove it. */
.casestudy-slider .cs-image img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: .875rem;
    display: block;
}

/* Chevrons out in the gutter the .casestudy-slider padding reserves. Without
   this they inherit left/right:0 from the shared .flexshowicon rules and sit on
   top of the photo and the copy. Repeated for the :hover state because the
   shared rules move them on hover. */
.casestudy-slider.flexshowicon .flex-direction-nav a.flex-prev,
.casestudy-slider.contentslider.flexshowicon .flexslider:hover .flex-direction-nav a.flex-prev { left: -6rem; }
.casestudy-slider.flexshowicon .flex-direction-nav a.flex-next,
.casestudy-slider.contentslider.flexshowicon .flexslider:hover .flex-direction-nav a.flex-next { right: -6rem; }

.casestudy-slider .cs-eyebrow {
    margin: 0 0 0.75rem;
    color: var(--phi-green);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.casestudy-slider .cs-title {
    margin: 0 0 1rem;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.3;
}

.casestudy-slider .cs-title a {
    color: var(--phi-dark);
    text-decoration: none;
    border-bottom: none;
}

.casestudy-slider .cs-title a:hover {
    color: var(--phi-green);
}

.casestudy-slider .cs-body,
.casestudy-slider .cs-body p {
    margin: 0 0 1.75rem;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--phi-gray-600);
}

/* --- Stats row (field_key_feature_boxes) -------------------------------- */

.casestudy-slider .cs-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0 2rem;
    margin: 0 0 1.75rem;
}

/* Each key_features paragraph is one stat. The divider is a left border on
   every stat after the first, so it never appears at the row's edges. */
.casestudy-slider .cs-stats > * {
    padding-left: 2rem;
    border-left: 1px solid var(--phi-gray-200);
}

.casestudy-slider .cs-stats > *:first-child {
    padding-left: 0;
    border-left: none;
}

/* The paragraph renders title then description; the title is the big number. */
.casestudy-slider .cs-stats .field--name-field-title,
.casestudy-slider .cs-stats .field--name-field-title * {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--phi-green);
}

.casestudy-slider .cs-stats .field--name-field-description,
.casestudy-slider .cs-stats .field--name-field-description * {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--phi-gray-600);
}

.casestudy-slider .cs-more {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--phi-green);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: none;
}

.casestudy-slider .cs-more::after {
    content: "\2192";
}

.casestudy-slider .cs-more:hover {
    color: var(--phi-dark);
}

/* --- Dots --------------------------------------------------------------- */

.casestudy-slider .flex-control-nav {
    position: static;
    margin-top: 1.5rem;
    text-align: left;
    /* Clear of the image column so the dots sit under the copy, as in the
       mockup, rather than centred under the whole slide. */
    padding-left: calc(38% + 3.5rem);
}

.casestudy-slider .flex-control-paging li a {
    width: 10px;
    height: 10px;
    display: block;
    background: var(--phi-gray-200);
    box-shadow: none;
    border: none;
}

.casestudy-slider .flex-control-paging li a.flex-active {
    background: var(--phi-green);
    cursor: default;
}

/* A single case study has nothing to page to, but FlexSlider still renders the
   prev/next links. :has() reads the slide count off the list — note that the
   count includes FlexSlider's own clones, which is why this tests the real
   slide rather than counting children. */
.casestudy-slider .flexslider:has(ul.slides > li:only-child) .flex-direction-nav,
.casestudy-slider .flexslider:has(ul.slides > li:only-child) .flex-control-nav {
    display: none;
}

/* --- Tablet ------------------------------------------------------------- */

@media (max-width: 992px) {
    .casestudy-slider { padding: 0 3.25rem; }
    .casestudy-slider .flexslider ul.slides > li { gap: 2rem; }
    .casestudy-slider.flexshowicon .flex-direction-nav a.flex-prev,
    .casestudy-slider.contentslider.flexshowicon .flexslider:hover .flex-direction-nav a.flex-prev { left: -3.25rem; }
    .casestudy-slider.flexshowicon .flex-direction-nav a.flex-next,
    .casestudy-slider.contentslider.flexshowicon .flexslider:hover .flex-direction-nav a.flex-next { right: -3.25rem; }
    .casestudy-slider .cs-image img { height: 340px; }
    .casestudy-slider .cs-title { font-size: 1.35rem; }
    .casestudy-slider .flex-control-nav { padding-left: calc(38% + 2rem); }
}

/* --- Phone: stack ------------------------------------------------------- */

@media (max-width: 650px) {
    .casestudy-slider { padding: 0; }
    .casestudy-slider.flexshowicon .flex-direction-nav a.flex-prev,
    .casestudy-slider.contentslider.flexshowicon .flexslider:hover .flex-direction-nav a.flex-prev { left: 0; }
    .casestudy-slider.flexshowicon .flex-direction-nav a.flex-next,
    .casestudy-slider.contentslider.flexshowicon .flexslider:hover .flex-direction-nav a.flex-next { right: 0; }

    .casestudy-slider .flexslider ul.slides > li {
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
    }

    .casestudy-slider .cs-col-image {
        flex: 0 0 auto;
        max-width: 100%;
    }
    .casestudy-slider .cs-image img { height: 240px; }

    .casestudy-slider .cs-stats { gap: 0 1.25rem; }
    .casestudy-slider .cs-stats > * { padding-left: 1.25rem; }
    .casestudy-slider .cs-stats .field--name-field-title,
    .casestudy-slider .cs-stats .field--name-field-title * { font-size: 1.25rem; }

    .casestudy-slider .flex-control-nav { padding-left: 0; text-align: center; }
}