/* ==========================================
   PSC New Homepage - Node 432
   ========================================== */

.psc-new-homepage {
    /* Colours – PSC theme greys with the teal accent */
    --psc-grey: #374a52;          /* headings, text, icons */
    --psc-grey-mid: #43545c;      /* news summaries */
    --psc-grey-soft: #5e7178;     /* news dates */
    --psc-text: #1b1e1f;          /* theme body text */
    --psc-teal: #00c7b1;          /* accent lines, focus, hover underline */
    --psc-hero-bg: #00474f;       /* hero text panel */
    --psc-icon-bg: #9dc0c4;       /* icon circles */
    --psc-icon-bg-hover: #8dadb0;
    --psc-border: #d3dfe2;        /* card borders */
    --psc-tint: #eef3f4;          /* news background, image frames */
    --psc-shadow: 55, 74, 82;     /* rgb of --psc-grey, for shadows */

    /* Theme fonts */
    --psc-font-medium: HelveticaNeueLT-Medium, HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    --psc-font-light: HelveticaNeueLTStd-Lt, HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

    width: 100%;
}

/* Teal underline under section headings */
.psc-new-homepage .psc-heading-line {
    width: 50px;
    height: 4px;
    background: var(--psc-teal);
    margin: 8px 0 18px;
}


/* ==========================================
   Welcome banner – teal panel, photo cut on a diagonal
   ========================================== */

.psc-home-hero {
    /* where the photo starts (top edge): 44% of the width, but never
       over the text, which starts at the hero's left padding */
    --slash-x: max(44%, calc(max(30px, (100vw - 1400px) / 2) + 620px));
    --slash-lean: 140px;          /* how far the slash leans by the bottom */

    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: 350px;
    padding: 45px max(30px, calc((100vw - 1400px) / 2));
    background: var(--psc-hero-bg);
    color: #ffffff;
}

/* The photo, right-hand side, anchored left so the sky shows */
.psc-home-hero::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--slash-x);
    right: 0;
    z-index: -2;
    background: url('/themes/custom/psc_theme/assets/img/psc-home-banner.jpg') left 30% / cover no-repeat;
    clip-path: polygon(0 0, 100% 0, 100% 100%, var(--slash-lean) 100%);
}

/* Translucent teal band along the slash */
.psc-home-hero::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--slash-x);
    width: calc(var(--slash-lean) + 120px);
    z-index: -1;
    background: rgba(0, 150, 160, 0.45);
    clip-path: polygon(0 0, 120px 0, 100% 100%, var(--slash-lean) 100%);
}

.psc-home-hero-content {
    max-width: 700px;
}

.psc-new-homepage .psc-home-hero h1 {
    color: #ffffff;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 15px;
}

.psc-home-hero h2 {
    color: #ffffff;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    margin: 20px 0 12px;
}

.psc-home-hero p {
    color: #ffffff;
    font-size: 17px;
    line-height: 1.5;
    margin-bottom: 0;
}


/* ==========================================
   Section headings
   ========================================== */

.psc-new-homepage .psc-home-help h2,
.psc-new-homepage .psc-home-news h2 {
    color: var(--psc-grey);
    font-size: 32px;
    font-weight: 700;
    margin: 0;
}


/* ==========================================
   How we can help
   ========================================== */

.psc-home-help {
    padding: 25px 0 35px;
    background: #ffffff;
}

.psc-help-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.psc-help-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    position: relative;
    border: 1px solid var(--psc-border);
    border-radius: 8px;
    padding: 15px 12px;
    min-height: 145px;
    background: #ffffff;
    text-decoration: none;
    transition: box-shadow 0.2s, transform 0.2s;
}

.psc-help-card:hover,
.psc-help-card:focus-visible {
    text-decoration: none;
    box-shadow: 0 5px 15px rgba(var(--psc-shadow), 0.14);
    transform: translateY(-3px);
}

/* Circular icons */
.psc-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--psc-icon-bg);
    color: var(--psc-grey);
    font-size: 20px;
}

.psc-help-card:hover .psc-card-icon,
.psc-help-card:focus-visible .psc-card-icon {
    background: var(--psc-icon-bg-hover);
}

/* Card text */
.psc-card-content {
    flex: 1;
    min-width: 0;
    padding-top: 4px;
    padding-right: 4px;
}

.psc-new-homepage .psc-help-card h3 {
    color: var(--psc-grey);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 700 !important;  /* the theme forces 300 on all headings */
    line-height: 1.3;
    margin: 0 0 10px;
}

.psc-new-homepage .psc-help-card p {
    color: var(--psc-grey);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    margin: 0;
}

/* Right arrow */
.psc-card-arrow {
    position: absolute;
    right: 10px;
    top: 24px;
    color: var(--psc-grey);
    font-size: 13px;
    transition: transform 0.2s;
}

.psc-help-card:hover .psc-card-arrow,
.psc-help-card:focus-visible .psc-card-arrow {
    transform: translateX(3px);
}


/* ==========================================
   Latest news
   ========================================== */

.psc-home-news {
    background: var(--psc-tint);
    padding: 30px 0 45px;
    min-height: 220px;
}

/* ---- Heading row: title left, controls + button right ---- */

.psc-news-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 24px;
}

.psc-news-head__title {
    margin-right: auto;
}

.psc-news-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.psc-news-controls[hidden] {
    display: none;
}

.psc-news-btn {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--psc-grey);
    cursor: pointer;
}

.psc-news-btn:hover:not(:disabled) {
    background: rgba(var(--psc-shadow), 0.08);
}

.psc-news-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.psc-news-count {
    min-width: 3.5em;
    text-align: center;
    color: var(--psc-grey);
    font-variant-numeric: tabular-nums;
}

.psc-news-more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    border: 1px solid var(--psc-grey);
    border-radius: 999px;
    background: #ffffff;
    color: var(--psc-grey);
    font-weight: 700;
    text-decoration: none;
}

.psc-news-more:hover,
.psc-news-more:focus-visible {
    background: var(--psc-grey);
    color: #ffffff;
    text-decoration: none;
}

.psc-news-btn:focus-visible,
.psc-news-more:focus-visible,
.psc-home-news-grid:focus-visible {
    outline: 3px solid var(--psc-teal);
    outline-offset: 2px;
}

/* ---- Track: the view wrapper scrolls and snaps ---- */

.psc-home-news-grid {
    --news-per-view: 3;
    --news-gap: 22px;
    --news-img-w: 200px;                 /* image frame width; height is 16:9 of this */
    --news-inset: 14px;                  /* space above and below the image */
    --news-card-h: calc(var(--news-img-w) * 9 / 16 + var(--news-inset) * 2);

    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--news-per-view) - 1) * var(--news-gap)) / var(--news-per-view));
    gap: var(--news-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding: 4px 2px 10px;
    margin: -4px -2px -10px;
}

.psc-home-news-grid::-webkit-scrollbar {
    display: none;
}

/* ---- Card (the whole card is the link) ---- */

.psc-home-news-grid > .views-row {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    height: var(--news-card-h);
    min-width: 0;
    scroll-snap-align: start;
    background: #ffffff;
    border: 1px solid var(--psc-border);
    border-radius: 16px;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.psc-home-news-grid > .views-row:hover,
.psc-home-news-grid > .views-row:focus-within {
    box-shadow: 0 8px 22px rgba(var(--psc-shadow), 0.12);
    transform: translateY(-2px);
}

.psc-home-news-grid > .views-row > .views-field {
    grid-column: 2;
    min-width: 0;
    padding: 0 16px;
}

/* ---- Image: 16:9 frame, whole image always visible ---- */

.psc-home-news-grid > .views-row > .views-field-field-featured-image {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center;
    padding: 0 0 0 10px;
}

.psc-home-news-grid .views-field-field-featured-image .field-content {
    width: var(--news-img-w);
    aspect-ratio: 16 / 9;
    background: var(--psc-tint);                 /* shows beside portrait images */
    border-radius: 10px;
    box-shadow: 0 0 0 1px rgba(var(--psc-shadow), 0.10);
    overflow: hidden;
}

.psc-home-news-grid .views-field-field-featured-image img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;                 /* never crop */
}

/* ---- Text ---- */

.psc-home-news-grid > .views-row > .views-field-created {
    padding-top: 16px;
    font-size: 12px;
    line-height: 1.3;
    color: var(--psc-grey-soft);
}

.psc-home-news-grid > .views-row > .views-field-title {
    padding-top: 6px;
}

.psc-home-news-grid .views-field-title .field-content {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

/* Title – same type as the card 2 heading above */
.psc-home-news-grid .views-field-title a {
    color: var(--psc-grey);
    font-family: var(--psc-font-medium);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.3;
    text-decoration: none;
    /* teal underline that draws in on hover */
    background-image: linear-gradient(var(--psc-teal), var(--psc-teal));
    background-size: 0 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.25s;
}

.psc-home-news-grid > .views-row:hover .views-field-title a,
.psc-home-news-grid .views-field-title a:focus-visible {
    background-size: 100% 2px;
    text-decoration: none;
}

/* Stretch the title link over the whole card */
.psc-home-news-grid .views-field-title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.psc-home-news-grid .views-field-title a:focus-visible {
    outline: none;
}

.psc-home-news-grid .views-field-title a:focus-visible::after {
    outline: 3px solid var(--psc-teal);
    outline-offset: -3px;
    border-radius: 16px;
}

/* Summary: the script shows as many whole lines as fit under the
   title (hidden here so nothing half-fits before it runs) */
.psc-home-news-grid > .views-row > .views-field-field-summary {
    display: none;
    align-self: start;
    padding-top: 6px;
    font-family: var(--psc-font-light);
    font-size: 14px;
    line-height: 1.4;
    color: var(--psc-grey-mid);
}

.psc-home-news-grid .views-field-field-summary .field-content {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.psc-home-news-grid .views-field-field-summary p {
    margin: 0;
}


/* ==========================================
   New homepage header
   ========================================== */

/* Widen header to match the homepage content width */
@media (min-width: 1200px) {
    .psc-new-homepage-page .site-header > .container,
    .psc-new-homepage-page .site-header ~ .container {
        max-width: 1450px;
        width: calc(100% - 60px);
    }
}

/* Remove the container-width rules that create the "step" */
.psc-new-homepage-page .desktop-menu-list {
    border-top: 0;
    border-bottom: 0;
}

/* Draw the divider full-bleed instead (thin line, as in 4.1) */
.psc-new-homepage-page .desktop-nav-menu {
    position: relative;
}

.psc-new-homepage-page .desktop-nav-menu::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    height: 1px;
    background: #c9d9dd;
}

/* 100vw includes the scrollbar; stop it causing a sideways scroll */
.psc-new-homepage-page {
    overflow-x: clip;
}

/* ==========================================
   Responsive
   ========================================== */

/* Wider homepage content on desktop */
@media (min-width: 1200px) {
    .psc-new-homepage .psc-home-help > .container,
    .psc-new-homepage .psc-home-news > .container {
        max-width: 1450px;
        width: calc(100% - 60px);
        margin-left: auto;
        margin-right: auto;
    }
}

/* Up to 1399px: three help cards across, two news cards */
@media (max-width: 1399px) {
    .psc-help-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .psc-home-news-grid {
        --news-per-view: 2;
    }

    .psc-home-news-grid .views-field-title .field-content {
        -webkit-line-clamp: 2;
    }
}

/* Tablet and narrower desktops: keep the hero text clear of the slash */
@media (min-width: 768px) and (max-width: 1399px) {
    .psc-home-hero {
        --slash-x: max(44%, 610px);
    }

    .psc-home-hero-content {
        max-width: 560px;
    }
}

/* Tablet: smaller news image */
@media (max-width: 991px) {
    .psc-home-news-grid {
        --news-img-w: 160px;
        --news-inset: 12px;
    }

    .psc-home-news-grid .views-field-title .field-content {
        -webkit-line-clamp: 3;
    }
}

/* Mobile */
@media (max-width: 767px) {

    /* Hero: no room for a slash – photo behind, darkened */
    .psc-home-hero {
        padding: 35px 20px;
        min-height: auto;
    }

    .psc-home-hero::before {
        left: 0;
        clip-path: none;
        opacity: 0.25;
    }

    .psc-home-hero::after {
        display: none;
    }

    .psc-new-homepage .psc-home-hero h1 {
        font-size: 28px;
    }

    .psc-home-hero h2 {
        font-size: 19px;
    }

    .psc-home-hero p {
        font-size: 15px;
    }

    /* Sections */
    .psc-home-help,
    .psc-home-news {
        padding: 25px 0;
    }

    .psc-new-homepage .psc-home-help h2,
    .psc-new-homepage .psc-home-news h2 {
        font-size: 27px;
    }

    /* One help card per row */
    .psc-help-grid {
        grid-template-columns: 1fr;
    }

    .psc-help-card {
        min-height: auto;
    }

    /* News: one card, peeking the next */
    .psc-home-news-grid {
        --news-per-view: 1;
        --news-img-w: 136px;
        --news-inset: 10px;
        grid-auto-columns: 90%;
    }

    .psc-home-news-grid > .views-row > .views-field-created {
        padding-top: 10px;
    }

    /* Heading and arrows on one line, cards, then the button underneath */
    .psc-home-news .container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .psc-news-head {
        display: contents;
    }

    .psc-news-head__title {
        order: 1;
        flex: 1 1 auto;
    }

    .psc-news-controls {
        order: 2;
    }

    .psc-home-news .views-element-container {
        order: 3;
        flex: 0 0 100%;
        min-width: 0;
        margin-top: 4px;
    }

    .psc-news-more {
        order: 4;
        margin: 18px auto 0;
        padding: 8px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .psc-home-news-grid {
        scroll-behavior: auto;
    }

    .psc-home-news-grid > .views-row,
    .psc-home-news-grid .views-field-title a {
        transition: none;
    }

    .psc-home-news-grid > .views-row:hover {
        transform: none;
    }
}