/**
 * Frontend styles for single msc_project pages.
 */

/* Force full-width layout (no Divi sidebar) */
body.single-msc_project #left-area {
    width: 100% !important;
    padding-bottom: 0 !important;
}

body.single-msc_project #sidebar {
    display: none !important;
}

body.single-msc_project #main-content .container:before {
    display: none !important;
}

/* Override Divi's default padding on the sidebar stats list so it aligns
   flush with the heading. */
body.single-msc_project #left-area ul.msc-sidebar-stats {
    padding: 0;
}

/* Remove top padding so hero sits flush against the header.
   Also let the container reach the full 1208px content width so the body
   layout can split into description + sidebar at the correct width. */
body.single-msc_project #main-content > .container {
    padding-top: 0 !important;
    max-width: var(--msc-content-max-width, 1208px) !important;
    width: 80%;
}

/* -------------------------------------------------------
 * Page-level reveal animations
 * Subtle opacity + translate. Respects prefers-reduced-motion.
 * Markup pattern: <el data-msc-reveal data-msc-delay="120">
 * ------------------------------------------------------- */
[data-msc-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
}
[data-msc-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Hero load-in: title fades up immediately on first paint, no JS gating.
   Uses a single keyframe so the browser can promote it cheaply. */
@keyframes msc-hero-rise {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.msc-project-hero .msc-project-title {
    animation: msc-hero-rise 0.8s ease 0.1s both;
}

/* Subtle slow zoom-in on the hero image for a cinematic feel.
   Transform-only, GPU-friendly, no layout impact. */
@keyframes msc-hero-zoom {
    from { transform: scale(1.04); }
    to   { transform: scale(1); }
}
.msc-project-hero-img {
    animation: msc-hero-zoom 1.4s ease both;
}

@media (prefers-reduced-motion: reduce) {
    [data-msc-reveal],
    [data-msc-reveal].is-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .msc-project-hero .msc-project-title,
    .msc-project-hero-img {
        animation: none;
    }
}

/* -------------------------------------------------------
 * Hero / Cover Image (rendered outside .container for full width)
 * ------------------------------------------------------- */
.msc-project-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #1c1f4e;
    /* Cap hero height at 700px on tall screens, otherwise fill the viewport */
    height: 700px;
    max-height: 100vh;
    max-height: 100svh;
}

/* Lime accent bar across the bottom edge of the hero (mirrors footer top bar) */
.msc-project-hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, #B0C637 0%, #B0C637 30%, transparent 100%);
    z-index: 2;
    pointer-events: none;
}

.msc-project-hero-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.msc-project-hero-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 60px 24px 48px;
    min-height: 320px;
    background: linear-gradient(to top,
        rgba(15, 18, 50, 0.92) 0%,
        rgba(15, 18, 50, 0.78) 40%,
        rgba(15, 18, 50, 0.35) 80%,
        transparent 100%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.msc-project-hero-overlay-inner {
    width: 100%;
    max-width: var(--msc-content-max-width, 1208px);
}

.msc-project-hero--no-image {
    padding: 60px 24px;
    display: flex;
    justify-content: center;
}

.msc-project-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 84px;
    line-height: 1.05;
    text-transform: none;
    letter-spacing: 1px;
    color: #ffffff;
    margin: 0;
    max-width: 18ch;
}

/* -------------------------------------------------------
 * Body content area (description + optional sidebar stats)
 * ------------------------------------------------------- */
.msc-project-body {
    margin: 0 auto;
    padding: 40px 0 0;
}

.msc-project-body--has-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 33.3333%);
    gap: 48px;
    align-items: start;
}

/* -------------------------------------------------------
 * Sidebar Stats (single column, beside description)
 * ------------------------------------------------------- */
.msc-project-sidebar {
    position: sticky;
    top: 24px;
}

.msc-sidebar-eyebrow {
    display: block;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #B0C637;
    margin-bottom: 8px;
}

.msc-sidebar-heading {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #25285F;
    margin: 0 0 18px;
}

.msc-sidebar-stats {
    list-style: none;
    margin: 0;
    padding: 0;
}

.msc-sidebar-stat {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 18px;
    background: #ffffff;
    border-left: 3px solid #B0C637;
    border-radius: 0;
    box-shadow: 0 1px 0 #e6e8ee;
    break-inside: avoid;
    margin-bottom: 10px;
}

.msc-sidebar-stat-label {
    font-family: 'Open Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #6b6b6b;
    line-height: 1.2;
}

.msc-sidebar-stat-value {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 22px;
    text-transform: none;
    color: #25285F;
    line-height: 1.2;
}

/* -------------------------------------------------------
 * Description
 * ------------------------------------------------------- */
.msc-project-description {
    margin-bottom: 0;
}

.msc-project-description p {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: #4a4a4a;
    margin-bottom: 1em;
}

.msc-project-description p:last-child {
    margin-bottom: 0;
}

.msc-project-description .msc-lede {
    font-weight: 700;
    color: #25285F;
}

/* -------------------------------------------------------
 * Pull Quote (between description and gallery)
 * ------------------------------------------------------- */
.msc-project-quote {
    margin: -64px 0 24px;
    padding: 120px 0 56px;
    background:
        linear-gradient(180deg, rgba(176,198,55,0.06) 0%, transparent 100%),
        #ffffff;
    position: relative;
    z-index: 1;
}

/* Soft lime-tinted halo that bleeds upward behind the gallery,
   matching the section's own lime-on-white wash. */
.msc-project-quote::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 160px;
    background: linear-gradient(to top,
        rgba(176,198,55,0.06) 0%,
        rgba(176,198,55,0.04) 50%,
        rgba(176,198,55,0) 100%),
        linear-gradient(to top,
        #ffffff 0%,
        rgba(255,255,255,0.6) 50%,
        rgba(255,255,255,0) 100%);
    pointer-events: none;
}

.msc-project-quote-inner {
    max-width: 960px;
    width: 80%;
    margin: 0 auto;
    position: relative;
    text-align: center;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.msc-project-quote.is-visible .msc-project-quote-inner {
    opacity: 1;
    transform: translateY(0);
}

.msc-project-quote-mark {
    display: block;
    font-family: 'Barlow Condensed', serif;
    font-size: 120px;
    line-height: 0.6;
    color: #B0C637;
    pointer-events: none;
    user-select: none;
    margin: 0 0 -16px;
}

.msc-project-quote-text {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 44px;
    line-height: 1.25;
    color: #25285F;
    letter-spacing: 0.5px;
    text-transform: none;
    quotes: none;
}

.msc-project-quote-text::before,
.msc-project-quote-text::after {
    content: none;
}

.msc-project-quote-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 28px;
}

.msc-project-quote-cite {
    text-align: left;
}

.msc-project-quote-rule {
    display: inline-block;
    width: 40px;
    height: 2px;
    background: #B0C637;
    flex-shrink: 0;
}

.msc-project-quote-cite {
    display: flex;
    flex-direction: column;
    font-style: normal;
}

.msc-project-quote-person {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #25285F;
}

.msc-project-quote-position {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    color: #6b6b6b;
    margin-top: 2px;
}

.msc-project-quote-company {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    color: #6b6b6b;
    margin-top: 2px;
}

@media (max-width: 980px) {
    .msc-project-quote { padding: 40px 0; margin: 40px 0 16px; }
    .msc-project-quote-text { font-size: 30px; }
    .msc-project-quote-mark { font-size: 90px; }
}

@media (prefers-reduced-motion: reduce) {
    .msc-project-quote-inner {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* -------------------------------------------------------
 * Gallery (full-bleed, horizontal scroll with arrow controls)
 * ------------------------------------------------------- */
.msc-project-gallery {
    margin: 48px 0 64px;
    position: relative;
    z-index: 2;
}

.msc-project-gallery-header {
    max-width: var(--msc-content-max-width, 1208px);
    width: 80%;
    margin: 0 auto 24px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.msc-project-gallery-heading {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 28px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #25285F;
    margin: 0;
}

.msc-gallery-controls {
    display: inline-flex;
    gap: 8px;
}

.msc-gallery-arrow {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #B0C637;
    color: #ffffff;
    border: 1px solid #B0C637;
    border-radius: 0;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.msc-gallery-arrow:hover,
.msc-gallery-arrow:focus {
    background: #c2d949;
    color: #ffffff;
    border-color: #c2d949;
}

.msc-gallery-arrow:focus-visible {
    outline: 2px solid #B0C637;
    outline-offset: 2px;
}

/* Viewport clips the track; the track itself is moved with a transform.
   No native scrolling, so prev/next stays fully in control of position. */
.msc-gallery-viewport {
    overflow: hidden;
    padding: 4px 0;
    /* Allow vertical page scroll to pass through; horizontal gestures are
       captured by the drag handler. */
    touch-action: pan-y;
    cursor: grab;
    /* Never let a press select text or drag an image, even before the drag
       threshold is crossed. */
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.msc-gallery-viewport.is-dragging {
    cursor: grabbing;
}

.msc-gallery-viewport.is-dragging .msc-gallery-img {
    pointer-events: none;
}

.msc-gallery-viewport:focus-visible {
    outline: 2px solid #B0C637;
    outline-offset: 2px;
}

.msc-gallery-track {
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    will-change: transform;
    /* ~20% faster than the previous 0.35s scroll-snap feel. */
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.msc-gallery-figure {
    margin: 0;
    overflow: hidden;
    border-radius: 0;
    flex: 0 0 auto;
    width: min(720px, 75vw);
    /* Reserve the box on the figure itself so offsets are stable before the
       (possibly lazy/cloned) image loads. Prevents the track from jumping. */
    aspect-ratio: 4 / 3;
    opacity: 0.55;
    transform: scale(0.94);
    transition: opacity 0.28s ease, transform 0.28s ease;
}

.msc-gallery-figure.is-active {
    opacity: 1;
    transform: scale(1);
}

.msc-gallery-img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.3s ease;
    /* Block the browser's native image drag-ghost. */
    -webkit-user-drag: none;
    user-drag: none;
}

.msc-gallery-figure:hover .msc-gallery-img,
.msc-gallery-figure:focus-within .msc-gallery-img {
    transform: scale(1.02);
}

.msc-gallery-figure:focus-within {
    outline: 2px solid #B0C637;
    outline-offset: 2px;
}

/* Single image: no controls, no peek/looping. Render one centered figure at
   full content width and full opacity (it is the only slide). */
.msc-project-gallery--single .msc-gallery-track {
    justify-content: center;
    transition: none;
}

.msc-project-gallery--single .msc-gallery-figure {
    opacity: 1;
    transform: none;
    width: min(var(--msc-content-max-width, 1208px), 90vw);
    /* Drop the reserved 4/3 box (it is only needed to stabilise the
       carousel before lazy/cloned images load, which a lone image never
       does). Otherwise the tall figure box leaves empty space below the
       shorter image. Let the figure size to its image. */
    aspect-ratio: auto;
}

/* A lone image has no neighbours to give the row height, so halve it
   (8/3 vs the default 4/3) to keep a single banner from dominating. */
.msc-project-gallery--single .msc-gallery-img {
    aspect-ratio: 8 / 3;
}

/* Two images: a touch wider so both read clearly while the active one still
   sits centered with its partner peeking. */
.msc-project-gallery--pair .msc-gallery-figure {
    width: min(820px, 80vw);
}

/* -------------------------------------------------------
 * Shared section eyebrow + heading (Key Achievements / Explore More)
 * ------------------------------------------------------- */
.msc-section-eyebrow {
    display: inline-block;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #B0C637;
    margin-bottom: 12px;
}

.msc-section-heading {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 44px;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #25285F;
    margin: 0 0 32px;
}

/* -------------------------------------------------------
 * Explore More
 * ------------------------------------------------------- */
.msc-explore-more {
    background: #f5f7fa;
    padding: 64px 0;
}

.msc-explore-more-inner {
    max-width: var(--msc-content-max-width, 1208px);
    width: 80%;
    margin: 0 auto;
}

/* Explore More cards use the reusable .project-card classes from project-grid.css.
   The .msc-explore-grid wrapper here only carries the section background/padding;
   .project-card-grid (added in markup) drives the actual card layout. */

/* -------------------------------------------------------
 * Mid-page CTA (split layout: copy left, button right)
 * ------------------------------------------------------- */
.msc-project-cta {
    position: relative;
    background: #0d1638;
    padding: 64px 0;
    overflow: hidden;
}

/* Subtle slanted accent on the right half for visual depth */
.msc-project-cta::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: -100px;
    width: 55%;
    background: #141d4a;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 12% 100%);
    pointer-events: none;
    z-index: 0;
}

/* Second slanted shade layered on top, hugging the first slant for extra depth */
.msc-project-cta::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: -100px;
    width: 50%;
    background: #19224f;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 8% 100%);
    pointer-events: none;
    z-index: 0;
}

.msc-project-cta-inner {
    position: relative;
    z-index: 1;
    max-width: var(--msc-content-max-width, 1208px);
    width: 80%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.msc-project-cta-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.msc-project-cta-action {
    flex: 0 0 auto;
}

.msc-project-cta-heading {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 1.15;
    text-transform: none;
    color: #ffffff;
    margin: 0 0 10px;
}

.msc-project-cta-subtitle {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    color: #c8cbe1;
    margin: 0;
}

.msc-project-cta-btn {
    display: inline-block;
    padding: 16px 28px;
    background: #B0C637;
    color: #25285F;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.15s ease, transform 0.15s ease;
}

.msc-project-cta-btn:hover,
.msc-project-cta-btn:focus {
    background: #c2d949;
    color: #25285F;
}

/* Short-screen safety: on viewports under 720px tall the hero is height-capped
   so the title can run into the bottom edge. Add extra bottom padding inside
   the overlay so the H1 always has clear space below it. */
@media (max-height: 720px) {
    .msc-project-hero-overlay {
        padding-bottom: 72px;
    }
}

@media (max-height: 560px) {
    .msc-project-hero-overlay {
        padding-bottom: 56px;
    }
    .msc-project-title {
        font-size: 56px;
    }
}

/* -------------------------------------------------------
 * Responsive
 * ------------------------------------------------------- */
@media (max-width: 980px) {
    .msc-project-hero {
        height: 500px;
    }

    .msc-project-title {
        font-size: 48px;
        max-width: none;
    }

    .msc-project-hero-overlay {
        padding: 24px;
    }

    .msc-gallery-figure {
        width: min(560px, 82vw);
    }

    .msc-project-body {
        padding: 32px 0 0;
    }

    .msc-project-body--has-sidebar {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .msc-project-sidebar {
        position: static;
    }

    .msc-section-heading {
        font-size: 34px;
    }

    .msc-explore-more {
        padding: 48px 0;
    }

    .msc-project-cta {
        padding: 48px 0;
    }

    .msc-project-cta-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .msc-project-cta-heading {
        font-size: 28px;
    }
}

@media (max-width: 768px) {
    .msc-project-hero {
        height: 380px;
    }

    .msc-project-title {
        font-size: 39px;
    }

    .msc-gallery-figure {
        width: 88vw;
    }

    .msc-project-gallery-header {
        flex-wrap: wrap;
    }

    .msc-project-body {
        padding: 24px 0 0;
    }
}

/* -------------------------------------------------------
 * Reduced motion
 * ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .msc-gallery-img {
        transition: none;
    }

    .msc-gallery-figure:hover .msc-gallery-img,
    .msc-gallery-figure:focus-within .msc-gallery-img {
        transform: none;
    }

    /* Snap between slides instantly; the JS still uses transitionend, which
       fires at the end of a zero-duration transition, so the lock still
       releases correctly. */
    .msc-gallery-track {
        transition-duration: 0.01ms;
    }

    .msc-gallery-figure {
        transition-duration: 0.01ms;
    }
}