/**
 * Single portfolio project — hero, sticky nav, sections, gallery, facts,
 * awards, before/after compare, location map and links.
 */

.portfolio-single {
    color: var(--pf-text);
}

body.single-portfolio {
    --theme-var-main_content_padding: 4rem;
}

/* ------------------------------------------------------------------ hero */

.portfolio-single__hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-block-size: min(70vh, 620px);
    background-color: var(--pf-navy);
    background-image: var(--hero);
    background-size: cover;
    background-position: center;
}

.portfolio-single__hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(4, 31, 56, 0.78), rgba(4, 31, 56, 0) 55%);
}

.portfolio-single__hero-inner {
    position: relative;
    z-index: 1;
    inline-size: 100%;
    max-inline-size: var(--pf-container);
    margin-inline: auto;
    padding: 0 24px 48px;
}

/* Lifecycle badge (past / sold / future), same flag as the archive card. The
   chip carries its own navy fill so its text never depends on the photo
   behind it; the hairline keeps the chip's edge visible where the hero's
   gradient is already navy. */
.portfolio-single__status {
    display: block;
    inline-size: fit-content;
    max-inline-size: 100%;
    margin-block: 0 16px;
    margin-inline: 0;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: var(--pf-navy);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.portfolio-single__title {
    margin: 0;
    color: #fff;
    font-size: clamp(30px, 5vw, 58px);
    font-weight: 800;
    line-height: 1.05;
    text-transform: uppercase;
}

.portfolio-single__location {
    margin-block-start: 12px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* -------------------------------------------------------------- sticky nav */

.portfolio-single__nav {
    position: sticky;
    inset-block-start: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #fff;
    border-block-end: 1px solid var(--pf-line);
    padding-inline: max(24px, calc((100% - var(--pf-container)) / 2));
}

.portfolio-single__nav-list {
    display: flex;
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
}

.portfolio-single__nav-list a {
    display: block;
    padding-block: 18px;
    border-block-end: 2px solid transparent;
    color: var(--pf-muted);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.portfolio-single__nav-list a:hover,
.portfolio-single__nav-list a.is-active {
    color: var(--pf-navy);
    border-block-end-color: var(--pf-blue);
}

.portfolio-single__print {
    flex: 0 0 auto;
    padding: 8px;
    border: 0;
    background: none;
    color: var(--pf-navy);
    cursor: pointer;
}

.portfolio-single__print .portfolio-icon {
    inline-size: 20px;
    block-size: 20px;
}

/* --------------------------------------------------------------- sections */

.portfolio-section {
    padding-block: 56px;
    border-block-end: 1px solid var(--pf-line);
}

.portfolio-section:last-child {
    border-block-end: 0;
}

.portfolio-section__inner {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 18px 48px;
    max-inline-size: var(--pf-container);
    margin-inline: auto;
    padding-inline: 24px;
}

.portfolio-section__heading {
    grid-column: 1;
    margin: 0;
    padding-block-start: 4px;
    color: var(--pf-blue);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.portfolio-section__inner > :not(.portfolio-section__heading) {
    grid-column: 2;
}

.portfolio-prose {
    color: var(--pf-text);
    line-height: 1.75;
}

.portfolio-prose h1,
.portfolio-prose h2,
.portfolio-prose h3,
.portfolio-prose h4 {
    color: var(--pf-navy);
    line-height: 1.2;
}

.portfolio-prose a {
    color: var(--pf-blue);
}

.portfolio-prose img {
    max-inline-size: 100%;
    block-size: auto;
}

/* Imported post_content can embed its own headings inside the description prose
   (e.g. a "RENOVASYON" H1 followed by an H3 blurb). Bring the loud H1/H2 down to
   the section-label treatment and render H3 as ordinary body copy. */
.portfolio-prose h1,
.portfolio-prose h2 {
    margin-block: 1.5em 0.5em;
    color: var(--pf-blue);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.portfolio-prose h3 {
    margin-block: 0 1em;
    color: var(--pf-text);
    font-size: inherit;
    font-weight: 400;
    line-height: 1.75;
    text-transform: none;
}

/* ---------------------------------------------------------------- gallery */

.portfolio-gallery {
    position: relative;
}

.portfolio-gallery__viewport {
    overflow: hidden;
}

.portfolio-gallery__track {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    transition: transform 0.45s ease;
}

/* Client: photos must render uncropped at their native ratio inside a fixed
   landscape frame spanning the full column, so every slide's edges align.
   Most gallery photos are 3:2 and fill the frame exactly; others letterbox. */
.portfolio-gallery__slide {
    flex: 0 0 100%;
    aspect-ratio: 3 / 2;
}

.portfolio-gallery__slide img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
}

.portfolio-gallery__arrow {
    position: absolute;
    inset-block-start: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 46px;
    block-size: 46px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--pf-navy);
    font-size: 24px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(4, 31, 56, 0.18);
}

.portfolio-gallery__arrow--prev {
    inset-inline-start: 14px;
}

.portfolio-gallery__arrow--next {
    inset-inline-end: 14px;
}

.portfolio-gallery__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-block-start: 16px;
}

.portfolio-gallery__dot {
    inline-size: 9px;
    block-size: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--pf-line);
    cursor: pointer;
}

.portfolio-gallery__dot.is-active {
    background: var(--pf-blue);
}

/* ------------------------------------------------------------------ facts */

.portfolio-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 40px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.portfolio-facts__item {
    display: grid;
    grid-template-columns: 52px 1fr;
    grid-template-rows: auto auto;
    column-gap: 16px;
    align-items: center;
}

.portfolio-facts__icon {
    grid-row: 1 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 52px;
    block-size: 52px;
    border-radius: 50%;
    background: var(--pf-blue);
    color: #fff;
}

.portfolio-facts__icon .portfolio-icon {
    inline-size: 24px;
    block-size: 24px;
}

.portfolio-facts__value {
    align-self: end;
    color: var(--pf-navy);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
}

.portfolio-facts__label {
    align-self: start;
    color: var(--pf-muted);
    font-size: 13px;
}

/* ----------------------------------------------------------------- awards */

/* One card per award programme, with the years it was won as chips inside it.
   The grid is intrinsically sized, so an asset with two programmes and one with
   twelve both read as a tidy block instead of a long table. */
.portfolio-awards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.portfolio-awards__item {
    padding: 20px;
    border: 1px solid var(--pf-line);
    border-radius: 10px;
    background: var(--pf-bg);
}

.portfolio-awards__name {
    margin: 0;
    color: var(--pf-navy);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: none;
}

.portfolio-awards__years {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.portfolio-awards__year {
    padding: 5px 12px;
    border: 1px solid var(--pf-blue);
    border-radius: 6px;
    color: var(--pf-blue);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

/* ---------------------------------------------------------------- tenants */

.portfolio-tenants {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.portfolio-tenants__item {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 2;
    padding: 22px;
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius);
    background: #fff;
}

.portfolio-tenants__logo {
    inline-size: auto;
    block-size: auto;
    max-inline-size: 100%;
    max-block-size: 56px;
    object-fit: contain;
}

/* -------------------------------------------------------------- highlight */

.portfolio-highlight__text {
    margin-block-end: 24px;
}

/* Stacked full width rather than tiled: highlight images are supplied at mixed
   ratios and some are themselves composites of several renders, so anything
   that crops them or halves their width loses detail. */
.portfolio-highlight__images {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.portfolio-highlight__img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    border-radius: var(--pf-radius);
}

/* ------------------------------------------------------------- renovation */

.portfolio-renovation__text {
    margin-block-end: 24px;
}

.portfolio-renovation__text p {
    margin-block: 0 1em;
}

.portfolio-renovation__text p:last-child {
    margin-block-end: 0;
}

/* --------------------------------------------------------- before / after */

.portfolio-compare {
    position: relative;
    overflow: hidden;
    margin-block-end: 24px;
    user-select: none;
    touch-action: none;
}

.portfolio-compare:last-child {
    margin-block-end: 0;
}

.portfolio-compare img {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

.portfolio-compare__after {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 50%;
    overflow: hidden;
}

.portfolio-compare__after img {
    block-size: 100%;
    max-inline-size: none;
    object-fit: cover;
}

.portfolio-compare__tag {
    position: absolute;
    inset-block-end: 14px;
    padding: 5px 11px;
    background: rgba(4, 31, 56, 0.82);
    color: #fff;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.portfolio-compare__tag--before {
    inset-inline-end: 14px;
}

.portfolio-compare__tag--after {
    inset-inline-start: 14px;
}

.portfolio-compare__range {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
}

.portfolio-compare__handle {
    position: absolute;
    inset-block: 0;
    left: 50%;
    inline-size: 2px;
    background: #fff;
    pointer-events: none;
}

.portfolio-compare__handle::before {
    content: '';
    position: absolute;
    inset-block-start: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    inline-size: 34px;
    block-size: 34px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 10px rgba(4, 31, 56, 0.3);
}

.portfolio-compare__handle .portfolio-icon {
    position: absolute;
    inset-block-start: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    inline-size: 18px;
    block-size: 18px;
    color: var(--pf-navy);
}

/* --------------------------------------------------------------- location */

.portfolio-single__map {
    inline-size: 100%;
    block-size: clamp(320px, 40vw, 460px);
}

.portfolio-single__coords {
    margin-block-start: 10px;
    color: var(--pf-muted);
    font-size: 13px;
}

/* ------------------------------------------------------------------ links */

.portfolio-links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.portfolio-links__item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-inline-size: 220px;
    padding: 16px 20px;
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius);
    color: var(--pf-navy);
    font-weight: 600;
    text-decoration: none;
    transition:
        border-color 0.2s,
        background 0.2s;
}

.portfolio-links__item:hover {
    border-color: var(--pf-blue);
    background: var(--pf-bg-soft);
}

.portfolio-links__icon {
    display: inline-flex;
    color: var(--pf-blue);
}

.portfolio-links__icon .portfolio-icon {
    inline-size: 22px;
    block-size: 22px;
}

.portfolio-social {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.portfolio-social__link {
    color: var(--pf-blue);
    font-weight: 600;
    text-decoration: none;
}

.portfolio-social__link:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------------- contact */

.portfolio-section__subheading {
    margin: 0 0 14px;
    color: var(--pf-navy);
    font-size: 15px;
    font-weight: 700;
}

.portfolio-address {
    margin: 0;
    color: var(--pf-text);
    font-style: normal;
    line-height: 1.7;
}

.portfolio-contacts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.portfolio-contacts__item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 16px 18px;
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius);
}

.portfolio-contacts__title {
    color: var(--pf-muted);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.portfolio-contacts__name {
    color: var(--pf-navy);
    font-size: 16px;
    font-weight: 700;
}

.portfolio-contacts__email {
    color: var(--pf-blue);
    font-weight: 600;
    text-decoration: none;
    word-break: break-word;
}

.portfolio-contacts__email:hover {
    text-decoration: underline;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 820px) {
    .portfolio-section__inner {
        grid-template-columns: 1fr;
    }

    .portfolio-section__inner > :not(.portfolio-section__heading) {
        grid-column: 1;
    }

    .portfolio-facts {
        grid-template-columns: 1fr;
    }

    .portfolio-tenants {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    .portfolio-contacts {
        grid-template-columns: 1fr;
    }
}

/* Below phone width the award cards go single-column — the 250px track floor
   would otherwise leave a lone card stretched across a narrow viewport. */
@media (max-width: 620px) {
    .portfolio-awards {
        grid-template-columns: 1fr;
    }

    .portfolio-awards__item {
        padding: 16px;
    }
}

/* ----------------------------------------------------------------- print */

@media print {
    .portfolio-single__nav,
    .portfolio-gallery__arrow,
    .portfolio-gallery__dots {
        display: none;
    }

    .portfolio-single__hero {
        min-block-size: 320px;
    }
}