/* ============================================================
   PORTFOLIO PAGE — css/portfolio.css  v4.0
   Meskie Portrety
   ============================================================ */

:root {
    --pf-cream: #F5F0E8;
    --pf-dark:  #1A1A1A;
    --pf-gold:  #B8965A;
    --pf-gray:  #6E7175;
    --pfg-gap:  3px;
}

/* ──────────────────────────────────────────────────────────
   HERO
────────────────────────────────────────────────────────── */
.pf-hero {
    position:            relative;
    min-height:          72vh;
    display:             flex;
    /* domyslna pozycja — nadpisywana klasami nizej */
    align-items:         flex-end;
    justify-content:     flex-start;
    background-color:    #1A1A1A;
    background-size:     cover;
    background-position: center top;
    background-repeat:   no-repeat;
    overflow:            hidden;
    padding-top:         var(--nav-height, 80px);
}

/* Overlay ciemny gdy zdjecie */
.pf-hero--has-img::after {
    content:        '';
    position:       absolute;
    inset:          0;
    background:     linear-gradient(to bottom, transparent 25%, rgba(14,14,14,.7) 100%);
    pointer-events: none;
}

/* ── POZYCJA PIONOWA ── */
.pf-hero--v-top    { align-items: flex-start; }
.pf-hero--v-center { align-items: center; }
.pf-hero--v-bottom { align-items: flex-end; }

/* ── POZYCJA POZIOMA ── */
.pf-hero--h-left   { justify-content: flex-start; }
.pf-hero--h-center { justify-content: center; }
.pf-hero--h-right  { justify-content: flex-end; }

/* Blok wewnetrzny */
.pf-hero__inner {
    position:   relative;
    z-index:    2;
    width:      100%;
    max-width:  700px;
    padding:    clamp(48px, 8vw, 120px) clamp(24px, 5vw, 80px) clamp(56px, 9vw, 120px);
}

/* Wyrownanie tekstu w bloku = zgodne z pozycja pozioma */
.pf-hero--h-center .pf-hero__inner { text-align: center; }
.pf-hero--h-right  .pf-hero__inner { text-align: right; }
.pf-hero--h-left   .pf-hero__inner { text-align: left; }

/* Tytul */
.pf-hero__title {
    font-family:    'DM Serif Display', Georgia, serif;
    font-weight:    400;
    font-size:      clamp(2.4rem, 5vw, 4.2rem);
    line-height:    1.1;
    letter-spacing: -.02em;
    color:          #fff;
    margin:         0 0 var(--pf-hero-gap, .5em);
}

/* Zloty kolor + kursywa w tytule, intro i CTA */
.pf-hero__title .go,
.pf-intro__text .go,
.pf-cta__title .go {
    color:      var(--pf-gold) !important;
    font-style: italic;
}

/* Podtytul */
.pf-hero__sub {
    font-family:    'Inter', sans-serif;
    font-weight:    300;
    font-size:      clamp(.8rem, 1.2vw, .9rem);
    letter-spacing: .14em;
    text-transform: uppercase;
    color:          rgba(255,255,255,.6);
    margin:         0;
}

/* Podtytul — wersja malymi literami */
.pf-hero__sub--normal {
    text-transform: none;
    letter-spacing: .04em;
}

/* ──────────────────────────────────────────────────────────
   INTRO
────────────────────────────────────────────────────────── */
.pf-intro { background: var(--pf-cream); }

.pf-intro__wrap {
    max-width: 1366px;
    margin:    0 auto;
    padding:   clamp(56px, 9vw, 120px) clamp(24px, 5vw, 80px);
}

/* Wyrownanie */
.pf-intro__wrap--left   { text-align: left; }
.pf-intro__wrap--center { text-align: center; max-width: 860px; }
.pf-intro__wrap--right  { text-align: right; }

.pf-intro__text {
    font-family: 'DM Serif Display', Georgia, serif;
    font-weight: 400;
    font-style:  italic;
    font-size:   clamp(1.25rem, 2vw, 1.75rem);
    line-height: 1.55;
    color:       #1A1A1A;
    margin:      0;
}

/* ──────────────────────────────────────────────────────────
   SIATKA FOTOGRAFICZNA
────────────────────────────────────────────────────────── */
.pfg {
    background: var(--pf-cream);
    --g: var(--pfg-gap, 3px);
}

.pfg-fig {
    margin:   0;
    padding:  0;
    display:  block;
    overflow: hidden;
    line-height: 0;
}
.pfg-img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.pfg-fig:hover .pfg-img { transform: scale(1.025); }

.pfg-placeholder {
    width:           100%;
    height:          100%;
    min-height:      200px;
    background:      #ddd8ce;
    display:         flex;
    align-items:     center;
    justify-content: center;
}
.pfg-placeholder span {
    font-family: 'Inter', sans-serif;
    font-size:   2rem;
    font-weight: 300;
    color:       rgba(0,0,0,.2);
}

/* Rzedy */
.pfg-row {
    display:       flex;
    gap:           var(--g);
    margin-bottom: var(--g);
    width:         100%;
    box-sizing:    border-box;
}
.pfg-row:last-child { margin-bottom: 0; }

/* full */
.pfg-row--full { display: block; }
.pfg-fig--full { width: 100%; }
.pfg-fig--full .pfg-img {
    width:      100%;
    height:     auto;
    max-height: 88vh;
    object-fit: cover;
}

/* Gdy figura ma wlasna max-height (inline style) — obraz wypelnia ja w 100% */
.pfg-fig--full[style*="max-height"] .pfg-img {
    height:     100%;
    max-height: none;
}

/* duo */
.pfg-fig--duo {
    flex:      1 1 0;
    min-width: 0;
    width:     0; /* wymuszamy rowny podzial przez flex */
}
.pfg-fig--duo .pfg-img {
    width:        100%;
    aspect-ratio: 3 / 4;
    display:      block;
}

/* trio */
.pfg-fig--trio {
    flex:      1 1 0;
    min-width: 0;
    width:     0;
}
.pfg-fig--trio .pfg-img {
    width:        100%;
    aspect-ratio: 2 / 3;
    display:      block;
}

/* feature */
.pfg-row--feature { align-items: stretch; }
.pfg-fig--feature-main {
    flex:      1 1 0;
    min-width: 0;
    width:     0;
}
.pfg-fig--feature-main .pfg-img {
    width:        100%;
    aspect-ratio: 3 / 4;
    display:      block;
}
.pfg-feature-col {
    flex:           1 1 0;
    min-width:      0;
    width:          0;
    display:        flex;
    flex-direction: column;
    gap:            var(--g);
}
.pfg-fig--feature-sub {
    flex:     1 1 0;
    overflow: hidden;
}
.pfg-fig--feature-sub .pfg-img {
    width:        100%;
    height:       100%;
    aspect-ratio: unset;
    object-fit:   cover;
    display:      block;
}

/* ──────────────────────────────────────────────────────────
   CTA
────────────────────────────────────────────────────────── */
.pf-cta { background: #1A1A1A; }
.pf-cta__inner {
    max-width:  720px;
    margin:     0 auto;
    padding:    clamp(80px, 12vw, 160px) clamp(24px, 5vw, 80px);
    text-align: left;
}
.pf-cta__eyebrow {
    font-family:    'Inter', sans-serif;
    font-weight:    300;
    font-size:      .72rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color:          rgba(255,255,255,.38);
    margin:         0 0 1.4em;
}
.pf-cta__title {
    font-family:    'DM Serif Display', Georgia, serif;
    font-weight:    400;
    font-size:      clamp(1.8rem, 3.5vw, 3rem);
    line-height:    1.15;
    letter-spacing: -.02em;
    color:          #fff;
    margin:         0 0 .7em;
}
.pf-cta__sub {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size:   clamp(.88rem, 1.2vw, 1rem);
    line-height: 1.75;
    color:       rgba(255,255,255,.52);
    margin:      0 0 2.5em;
}
.pf-cta .btn,
.pf-cta .btn--light {
    display:         inline-block;
    font-family:     'Inter', sans-serif;
    font-weight:     400;
    font-size:       .76rem;
    letter-spacing:  .2em;
    text-transform:  uppercase;
    text-decoration: none;
    color:           var(--pfcta-btn-color, #1A1A1A);
    background:      var(--pfcta-btn-bg, transparent);
    padding:         .95em 2.4em;
    border:          1px solid var(--pfcta-btn-border, #1A1A1A);
    transition:      background .25s, color .25s, border-color .25s;
}
.pf-cta .btn:hover,
.pf-cta .btn--light:hover {
    background:   var(--pfcta-btn-hover-bg, #1A1A1A);
    color:        var(--pfcta-btn-hover-color, #F5F0E8);
    border-color: var(--pfcta-btn-hover-border, #1A1A1A);
}

/* ──────────────────────────────────────────────────────────
   FIX: Elementor Global Kit (.elementor-kit-27 h4) nadpisuje
   kolor nagłówków stopki na stronie portfolio.
   Przywracamy oryginalny kolor z main.css.
────────────────────────────────────────────────────────── */
body.elementor-kit-27 .site-footer .footer-col__title {
    font-family:    var(--f-body);
    font-size:      10px;
    font-weight:    500;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    color:          rgba(245,240,232,.4);
    margin-bottom:  20px;
    line-height:    1;
}

/* ──────────────────────────────────────────────────────────
   MOBILE <= 767px
────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .pf-hero { min-height: 60vw; }
    .pf-hero__inner {
        padding:   28px 20px 44px;
        max-width: 100%;
    }
    .pf-hero__title { font-size: clamp(1.9rem, 8vw, 2.6rem); }
    .pf-intro__wrap { padding: 44px 20px; }

    .pfg-row--duo,
    .pfg-row--trio,
    .pfg-row--feature { flex-wrap: wrap; }

    .pfg-fig--trio {
        flex: 1 1 calc(50% - var(--g));
    }
    .pfg-fig--trio:last-child:nth-child(odd) { flex: 1 1 100%; }
    .pfg-fig--trio .pfg-img { aspect-ratio: 4 / 5; }
    .pfg-fig--duo .pfg-img  { aspect-ratio: 4 / 5; }

    .pfg-fig--feature-main { flex: 1 1 100%; }
    .pfg-feature-col {
        flex:      1 1 100%;
        flex-direction: row;
    }
    .pfg-fig--feature-sub { flex: 1 1 calc(50% - var(--g)); }
    .pfg-fig--feature-sub .pfg-img {
        aspect-ratio: 3 / 4;
        height: auto;
    }

    .pf-cta__inner { padding: 64px 20px; }
}

/* ──────────────────────────────────────────────────────────
   TABLET 768–1023px
────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
    .pfg-fig--trio .pfg-img { aspect-ratio: 5 / 7; }
}