/* ===========================================================================
   Portfolio case-study detail pages (shared)

   Every /portfolio/<slug>/ page renders from src/templates/portfolio-
   project.html with content from src/portfolio.json, same pattern as
   blog-post.css/career-page.css. Sample case studies today; swap
   portfolio.json for a CMS response later and nothing else changes.
   =========================================================================== */

body.sts-portfolio-project-page .site-content {
    padding-top: 0;
    padding-bottom: 0;
}

/* ------------------------------------------------------------------ hero --
   Full-bleed, left-aligned case-study treatment: the photo (often an
   abstract/blurred piece of art rather than a UI shot) stays visible through
   the upper frame, a heavy scrim builds up toward the bottom so the pill
   tags and the oversized project name stay legible sitting on it. */
.sts-portfolio-project .sts-page-header .overlay {
    background-image: linear-gradient(180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, .15) 45%,
        rgba(0, 0, 0, .75) 75%,
        rgba(0, 0, 0, .96) 100%);
}

.sts-portfolio-project .entry-thumbnail img {
    object-position: center center;
}

/* theme default is centred, which is what this hero wants - tags and name
   both centre under each other */
.sts-portfolio-project__tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 22px;
}

.sts-portfolio-project__tags span {
    display: inline-block;
    padding: 12px 26px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .01em;
}

/* the name is the whole point of this hero - no max-width cap, no centred
   breadcrumb constraint, sized to feel like a title card rather than a
   heading sitting inside a text column.

   210px pushed even a short, single 10-character name (e.g. "AVANTGarde")
   close to or past the available width on ordinary desktop viewports
   (1280-1440px), forcing it onto a second line - lowered the ceiling to
   150px so real project names have headroom to stay on one line. Also
   explicit overflow-wrap/word-break: normal so nothing ever splits a word
   mid-letter if a wider name does still wrap - it wraps at the word
   boundary, never inside one. */
.sts-portfolio-project .sts-page-header .entry-title {
    max-width: 100%;
    font-size: clamp(64px, 10vw, 150px);
    font-weight: 800;
    line-height: .88;
    letter-spacing: -.02em;
    overflow-wrap: normal;
    word-break: normal;
}

@media (max-width: 767px) {
    .sts-portfolio-project .sts-page-header .entry-title {
        font-size: clamp(46px, 16vw, 84px);
    }
}

/* ----------------------------------------------------------- introduction --
   Summary copy on the left, a Year/Client/Timeline/Service fact list on the
   right - each row a label + bold value with a divider underneath, like a
   spec sheet rather than prose. */
.sts-portfolio-project .sts-element.sts-element-pf-intro {
    --display: flex;
    --flex-direction: column;
    --padding-top: 130px;
    --padding-bottom: 90px;
}

.sts-portfolio-project__intro {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 60px;
    align-items: start;
}

.sts-portfolio-project__intro-h {
    font-size: clamp(30px, 3.2vw, 44px);
    line-height: 1;
    margin: 0 0 22px;
}

.sts-portfolio-project__intro-text p {
    font-size: clamp(16px, 1.6vw, 18px);
    line-height: 1.7;
    color: var(--e-global-color-text, #b8b8b8);
    max-width: 46ch;
}

.sts-portfolio-project__facts {
    margin: 0;
}

.sts-portfolio-project__fact {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid #ffffff1f;
}

.sts-portfolio-project__fact:first-child {
    padding-top: 0;
}

.sts-portfolio-project__fact dt {
    font-size: 15px;
    color: #ffffff80;
}

.sts-portfolio-project__fact dd {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    text-align: right;
}

/* ------------------------------------------------------------ cover img --
   Boxed, rounded image between Introduction and Challenge/Solution, same
   container width as the rest of the copy - not edge to edge. Uses
   single-portfolio-1.avif for every project card for now; swap for a
   dedicated second photo per project once one exists. */
.sts-portfolio-project .sts-element.sts-element-pf-cover {
    --display: flex;
    --flex-direction: column;
    --padding-top: 10px;
    --padding-bottom: 90px;
}

.sts-portfolio-project__cover {
    width: 100%;
    height: 78vh;
    max-height: 820px;
    border-radius: 20px;
    overflow: hidden;
}

.sts-portfolio-project__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 767px) {
    .sts-portfolio-project .sts-element.sts-element-pf-cover { --padding-bottom: 50px; }
    .sts-portfolio-project__cover {
        height: 46vh;
        min-height: 320px;
        border-radius: 14px;
    }
}

/* ---------------------------------------------- challenges & opportunities --
   Heading + small image + caption on the left; one tall image on the right
   that stretches (grid default align-items: stretch) to match the left
   column's full height, so it reads as one balanced two-up block. */
.sts-portfolio-project .sts-element.sts-element-pf-challenges {
    --display: flex;
    --flex-direction: column;
    --padding-top: 20px;
    --padding-bottom: 100px;
}

.sts-portfolio-project__challenges {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 50px;
}

.sts-portfolio-project__challenges-col {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.sts-portfolio-project__challenges-h {
    font-size: clamp(34px, 3.8vw, 52px);
    line-height: 1.05;
    margin: 0;
}

.sts-portfolio-project__challenges-img {
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.sts-portfolio-project__challenges-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sts-portfolio-project__challenges-col p {
    font-size: 18px;
    line-height: 1.7;
    color: var(--e-global-color-text, #b8b8b8);
    text-align: center;
    max-width: 44ch;
    margin-inline: auto;
}

/* height:100% on its own doesn't work here - a grid row sized "auto" gets
   its height from the tallest item's own intrinsic content, and an <img>
   with width/height 100% still contributes its native (900x1100) aspect
   ratio to that calculation, so the row ends up sized off the photo, not
   the left column, and the two never actually line up. Taking the image
   out of flow (absolute, inset: 0) removes it from that sizing pass - the
   row height then comes purely from the left column, and this wrapper
   (stretched by the grid's default align-items) fills exactly that height,
   with the image covering it via object-fit. */
.sts-portfolio-project__challenges-img--tall {
    position: relative;
    aspect-ratio: auto;
}

.sts-portfolio-project__challenges-img--tall img {
    position: absolute;
    inset: 0;
}

@media (max-width: 1024px) {
    .sts-portfolio-project__challenges { grid-template-columns: 1fr; gap: 30px; }
    .sts-portfolio-project__challenges-img--tall { aspect-ratio: 4 / 3; height: auto; order: -1; }
    .sts-portfolio-project__challenges-img--tall img { position: static; }
}

@media (max-width: 767px) {
    .sts-portfolio-project .sts-element.sts-element-pf-challenges { --padding-bottom: 60px; }
    .sts-portfolio-project__challenges-h { font-size: 30px; }
}

/* --------------------------------------------------------- solutions ---- */
.sts-portfolio-project .sts-element.sts-element-pf-solutions {
    --display: flex;
    --flex-direction: column;
    --padding-top: 100px;
    --padding-bottom: 100px;
}

/* same two-column grid as the images below - the heading sits over the
   left image's column, the index/details/copy sits over the right one */
.sts-portfolio-project__solutions-top {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: end;
    margin-bottom: 60px;
}

.sts-portfolio-project__solutions-h {
    font-size: clamp(48px, 7vw, 100px);
    line-height: .92;
    font-weight: 800;
    letter-spacing: -.01em;
}

.sts-portfolio-project__solutions-tag {
    display: flex;
    justify-content: space-between;
    align-self: end;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #ffffff99;
}

.sts-portfolio-project__solutions-imgs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 24px;
}

/* the right column carries the image plus its caption underneath, so the
   description now sits below the second image rather than up top */
.sts-portfolio-project__solutions-col {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.sts-portfolio-project__solutions-col p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--e-global-color-text, #b8b8b8);
}

.sts-portfolio-project__solutions-img {
    aspect-ratio: 4 / 5;
    border-radius: 20px;
    overflow: hidden;
}

.sts-portfolio-project__solutions-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 1024px) {
    .sts-portfolio-project .sts-element.sts-element-pf-solutions { --padding-top: 80px; --padding-bottom: 70px; }
    .sts-portfolio-project__solutions-top { grid-template-columns: 1fr; gap: 26px; align-items: start; }
    .sts-portfolio-project__solutions-tag { align-self: auto; }
    .sts-portfolio-project__solutions-col p { max-width: 100%; }
}

@media (max-width: 767px) {
    .sts-portfolio-project .sts-element.sts-element-pf-solutions { --padding-top: 56px; --padding-bottom: 50px; }
    .sts-portfolio-project__solutions-h { font-size: clamp(40px, 14vw, 60px); }
    .sts-portfolio-project__solutions-imgs { grid-template-columns: 1fr; }
    .sts-portfolio-project__solutions-img { aspect-ratio: 4 / 3; }
}

@media (max-width: 1024px) {
    .sts-portfolio-project .sts-element.sts-element-pf-intro { --padding-top: 96px; --padding-bottom: 60px; }
    .sts-portfolio-project__intro { grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 767px) {
    .sts-portfolio-project .sts-element.sts-element-pf-intro { --padding-top: 70px; --padding-bottom: 44px; }
    .sts-portfolio-project__intro-text p { max-width: 100%; }
}