/* ============================================================
   css/konrad-pawicki.css
   Strona: Konrad Pawicki — Historie sesji
   Reużywa klas om-* (o-mnie.css) i mat-* (matteo-rodos.css).
   Dodaje:
   - .kpw-grid-vert — galeria pionowa, naprzemiennie 2/3 zdjęcia
   - .pf-cta / .btn--light — kopia wzorca CTA z portfolio.css (PF 04)
   ============================================================ */

:root {
    --kpw-gap:  3px;
    --pf-gold:  #B8965A;
}

/* ── Złota fraza — kursywa, jak na pozostałych stronach ──── */

.kpw-hero .go,
.kpw-01 .go,
.kpw-02 .go {
    font-style: italic !important;
}

/* ──────────────────────────────────────────────────────────
   GALERIA PIONOWA (KON 01b)
   Naprzemiennie: rzędy po 2 lub 3 zdjęcia, wszystkie pionowe
   (proporcja 3:4), object-fit: contain — bez kadrowania.
────────────────────────────────────────────────────────── */

.kpw-grid-vert {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.kpw-grid-vert__row {
    display: grid;
    gap: var(--kpw-gap, 3px);
    margin-bottom: var(--kpw-gap, 3px);
    width: 100%;
}

.kpw-grid-vert__row:last-child {
    margin-bottom: 0;
}

.kpw-grid-vert__row--duo {
    grid-template-columns: repeat(2, 1fr);
}

.kpw-grid-vert__row--trio {
    grid-template-columns: repeat(3, 1fr);
}

.kpw-grid-vert__cell {
    position: relative;
    width: 100%;
    padding-bottom: 133.33%; /* 3:4 — pionowe */
    overflow: hidden;
    background: #d4cfc8;
}

.kpw-grid-vert__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #d4cfc8;
}

.kpw-grid-vert__placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #d4cfc8;
}

@media (max-width: 768px) {
    .kpw-grid-vert__row--trio {
        grid-template-columns: repeat(2, 1fr);
    }
    .kpw-grid-vert__row--trio .kpw-grid-vert__cell:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        padding-bottom: 75%; /* 4:3 dla pojedynczej kafelki w pełnej szerokości */
    }
}

/* ──────────────────────────────────────────────────────────
   CTA (KON 07) — wzorzec PF 04 (.pf-cta), kopia z portfolio.css
────────────────────────────────────────────────────────── */

.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__title .go {
    color:      var(--pf-gold) !important;
    font-style: italic;
}

.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);
}

@media (max-width: 767px) {
    .pf-cta__inner { padding: 64px 20px; }
}

/* ──────────────────────────────────────────────────────────
   FIX: Elementor Global Kit (.elementor-kit-27) nadpisuje
   kolor nagłówków stopki. Przywracamy oryginalny styl 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;
}