/* ═══════════════════════════════════════════════════════════════
   O MNIE — css/o-mnie.css
   Meskie Portrety v1.0
   Uzywane razem z css/main.css motywu.
   Klasy: om-* (unikalne, nie nadpisuja main.css)
═══════════════════════════════════════════════════════════════ */

/* ── Shared typography helpers ─────────────────────────── */
/* eyebrow: uzywa globalnej klasy .ew / .ew--light z main.css */
.om-section-title {
    font-family: 'DM Serif Display', 'Playfair Display', Georgia, serif;
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 400;
    line-height: 1.15;
    margin: 0 0 28px;
    color: inherit;
}
.go {
    color:      #9E8B6E;
    font-style: italic;
}

/* ─────────────────────────────────────────────────────────────
   01 HERO
───────────────────────────────────────────────────────────── */
.om-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    overflow: hidden;
}
.om-hero__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.om-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    min-height: inherit;
    display: flex;
    padding: 40px 60px;
    box-sizing: border-box;
}
.om-hero__content {
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: #fff;
}
/* hero eyebrow: uzywa .ew --light z main.css */
/* hero__title: klasa z main.css — identyczny styl jak strona glowna */
.om-hero__sub {
    font-family: 'Inter', sans-serif;
    font-size: clamp(14px, 1.5vw, 17px);
    font-weight: 300;
    line-height: 1.65;
    letter-spacing: .04em;
    color: rgba(255,255,255,.75);
    margin: 6px 0 0;
}

/* ─────────────────────────────────────────────────────────────
   02 INTRO
───────────────────────────────────────────────────────────── */
.om-intro {
    padding: 100px 60px;
    box-sizing: border-box;
}
.om-intro__inner {
    max-width: 1200px;
    margin: 0 auto;
}
.om-intro__inner--has-img {
    display: grid;
    grid-template-columns: 1fr 480px; /* nadpisywane przez inline style */
    gap: 80px;
    align-items: stretch;
}
.om-intro__body {
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 300;
    line-height: 1.85;
    color: #3B3532;
}
.om-intro__body br + br { display: block; content: ''; margin-top: 1em; }
.om-intro__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Tryb trio — 3 zdjecia poziome jedno pod drugim */
.om-intro__img-col--trio {
    display: flex;
    flex-direction: column;
    gap: var(--trio-gap, 4px);
}
.om-intro__photo--trio {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    flex: 1;
}

/* ─────────────────────────────────────────────────────────────
   03 TRIO ZDJĘĆ
───────────────────────────────────────────────────────────── */
.om-trio {
    padding: 0;
}
.om-trio__grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    margin: 0 auto;
}
.om-trio__item {
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.om-trio__img-wrap {
    overflow: hidden;
}
.om-trio__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
}
.om-trio__item:hover .om-trio__img-wrap img {
    transform: scale(1.03);
}
.om-trio__cap {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #9E8B6E;
    padding: 10px 0 0;
    text-align: center;
}

/* ─────────────────────────────────────────────────────────────
   04 FEARS — ciemna sekcja
───────────────────────────────────────────────────────────── */
.om-fears {
    padding: 100px 60px;
    box-sizing: border-box;
}
.om-fears__inner {
    max-width: 1200px;
    margin: 0 auto;
}
.om-fears__inner--has-img {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 80px;
    align-items: center;
}
.om-fears__title {
    font-family: 'DM Serif Display', 'Playfair Display', Georgia, serif;
    font-size: clamp(30px, 4.5vw, 52px);
    font-weight: 400;
    line-height: 1.12;
    margin: 0 0 40px;
    color: inherit;
}
.om-fears__quotes {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0 0 36px;
}
.om-fears__q {
    font-family: 'DM Serif Display', 'Playfair Display', Georgia, serif;
    font-size: clamp(20px, 2.5vw, 28px);
    font-style: italic;
    line-height: 1.3;
    color: rgba(255,255,255,.7);
    margin: 0;
}
.om-fears__desc {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.85;
    color: rgba(255,255,255,.7);
}
.om-fears__photo {
    width: 100%;
    height: auto;
    display: block;
}

/* ─────────────────────────────────────────────────────────────
   05 FIRST — pierwsze minuty
───────────────────────────────────────────────────────────── */
.om-first {
    padding: 100px 60px;
    box-sizing: border-box;
}
.om-first__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    gap: 80px;
    align-items: center;
}
.om-first__inner--text-left {
    grid-template-columns: 1fr 1fr;
}
.om-first__inner--text-right {
    grid-template-columns: 1fr 1fr;
    direction: rtl;
}
.om-first__inner--text-right > * { direction: ltr; }
.om-first__body {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.85;
    color: #3B3532;
    margin-top: 20px;
}
.om-first__imgs {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.om-first__imgs--duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* Układ: duże zdjęcie + mniejsze pod spodem po prawej */
.om-first__imgs--stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.om-first__imgs--stack .om-first__photo--main {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}
.om-first__imgs--stack .om-first__bottom-right {
    width: 100%;
}
.om-first__imgs--stack .om-first__photo--sub {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.om-first__photo {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* ─────────────────────────────────────────────────────────────
   06 MODELS
───────────────────────────────────────────────────────────── */
.om-models {
    padding: 100px 60px;
    box-sizing: border-box;
}

/* Układ: zdjęcia lewa — tekst prawa */
.om-models__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin: 0 auto 60px;
}
.om-models__pair {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.om-models__pair-item {
    overflow: hidden;
    flex-shrink: 0;
}
.om-models__pair-item img {
    transition: transform .6s ease;
}
.om-models__pair-item:hover img {
    transform: scale(1.03);
}
.om-models__text {
    display: flex;
    flex-direction: column;
}
.om-models__body {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.85;
    color: #3B3532;
    margin-top: 20px;
}
.om-models__grid {
    display: grid;
    margin: 0 auto;
}
.om-models__item {
    overflow: hidden;
}
.om-models__photo {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
}
.om-models__item:hover .om-models__photo {
    transform: scale(1.04);
}

/* ─────────────────────────────────────────────────────────────
   07 VALUES
───────────────────────────────────────────────────────────── */
.om-values {
    padding: 100px 60px;
    box-sizing: border-box;
}
.om-values__inner {
    max-width: 1200px;
    margin: 0 auto;
}
.om-values__inner--has-img {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 80px;
    align-items: center;
}
.om-values__body {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.85;
    color: inherit;
    margin-top: 20px;
}
.om-values__photo {
    width: 100%;
    height: auto;
    display: block;
}

/* ─────────────────────────────────────────────────────────────
   08 GRID
───────────────────────────────────────────────────────────── */
.om-grid {
    padding: 0;
}
.om-grid__wrap {
    display: grid;
    margin: 0 auto;
}
.om-grid__item {
    overflow: hidden;
}
.om-grid__photo {
    display: block;
    transition: transform .55s ease;
}
.om-grid__item:hover .om-grid__photo {
    transform: scale(1.04);
}

/* ─────────────────────────────────────────────────────────────
   09 PAUSE — ciemna emocjonalna pauza
───────────────────────────────────────────────────────────── */
.om-pause {
    padding: 120px 60px;
    box-sizing: border-box;
}
.om-pause__inner {
    margin: 0 auto;
}
.om-pause__title {
    font-family: 'DM Serif Display', 'Playfair Display', Georgia, serif;
    font-size: clamp(32px, 5vw, 62px);
    font-weight: 400;
    line-height: 1.1;
    margin: 0 0 32px;
    color: inherit;
}
.om-pause__body {
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 300;
    line-height: 2;
    color: inherit;
}

/* ─────────────────────────────────────────────────────────────
   10 CTA
───────────────────────────────────────────────────────────── */
.om-cta {
    padding: 120px 60px;
    box-sizing: border-box;
}
.om-cta__inner {
    margin: 0 auto;
}
.om-cta__title {
    font-family: 'DM Serif Display', 'Playfair Display', Georgia, serif;
    font-size: clamp(30px, 4vw, 52px);
    font-weight: 400;
    line-height: 1.15;
    margin: 0 0 24px;
    color: inherit;
}
.om-cta__sub {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.85;
    color: rgba(255,255,255,.65);
    margin: 0 0 40px;
}
.om-cta__btn {
    display: inline-block;
    color:        var(--omcta-btn-color, var(--beige));
    background:   var(--omcta-btn-bg, transparent);
    border-color: var(--omcta-btn-border, var(--beige));
    transition: background .25s, color .25s, border-color .25s;
}
.om-cta__btn:hover {
    background:   var(--omcta-btn-hover-bg, var(--beige));
    color:        var(--omcta-btn-hover-color, var(--ink));
    border-color: var(--omcta-btn-hover-border, var(--beige));
}
.om-cta__micro {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .08em;
    color: rgba(255,255,255,.35);
    margin: 20px 0 0;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .om-intro__inner--has-img {
        grid-template-columns: 1fr !important;
        gap: 48px;
    }
    .om-fears__inner--has-img {
        grid-template-columns: 1fr !important;
        gap: 48px;
    }
    .om-fears__img-col { display: block; } /* nie ukrywac — spec */
    .om-first__inner {
        grid-template-columns: 1fr !important;
        gap: 48px;
    }
    .om-values__inner--has-img {
        grid-template-columns: 1fr !important;
        gap: 48px;
    }
    .om-values__img-col { display: none; }
    .om-trio__grid { grid-template-columns: 1fr 1fr; }
    .om-models__split { grid-template-columns: 1fr; gap: 40px; }
    .om-models__grid { grid-template-columns: repeat(2,1fr) !important; }
    .om-grid__wrap   { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 768px) {
    /* ── Hero: !important pokrywa inline style min-height:100vh ── */
    .om-hero { height: 85svh !important; min-height: 480px !important; }
    .om-hero__inner { padding: 40px 24px 48px; }
    /* ── Section paddings ── */
    .om-intro  { padding: 56px 24px; }
    .om-fears  { padding: 56px 24px; }
    .om-first  { padding: 56px 24px; }
    .om-models { padding: 56px 24px; }
    .om-values { padding: 56px 24px; }
    .om-pause  { padding: 60px 24px; }
    .om-cta    { padding: 60px 24px; }
    /* ── Grid: single column ── */
    .om-trio__grid  { grid-template-columns: 1fr !important; }
    .om-models__split { grid-template-columns: 1fr !important; }
    .om-models__grid { grid-template-columns: 1fr !important; }
    .om-grid__wrap  { grid-template-columns: 1fr !important; }
    .om-first__inner { grid-template-columns: 1fr !important; }
    .om-first__imgs--duo { grid-template-columns: 1fr !important; }
    .om-fears__inner--has-img { grid-template-columns: 1fr !important; }
    .om-values__inner--has-img { grid-template-columns: 1fr !important; }
    .om-kim__inner { grid-template-columns: 1fr !important; }
    /* ── FEARS: photo above text ── */
    .om-fears__img-col {
        order: -1;
        height: 65vw !important;
        width: 100%;
        overflow: hidden;
    }
    .om-fears__text { order: 0; }
}

/* ── Grid wrap (sekcja 06c) ── */
.om-models__grid-wrap {
    padding: 0;
}
.om-models__grid-wrap .om-models__grid {
    margin: 0 auto;
}

/* ── KIM JESTEM (06) ── */
.om-kim {
    padding: 100px 60px;
    box-sizing: border-box;
}
.om-kim__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 80px;
    align-items: stretch;
}
.om-kim__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.om-kim__body {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.85;
    color: #3B3532;
    margin-top: 20px;
}
.om-kim__img {
    overflow: hidden;
}
.om-kim__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (max-width: 1024px) {
    .om-kim__inner { grid-template-columns: 1fr !important; gap: 48px; }
    .om-kim__img { display: none; }
}
@media (max-width: 768px) {
    .om-kim { padding: 64px 24px; }
}