/*
Theme Name: KREA ALICJA
Author: Alicja Biela
Version: 1.0.0
Text Domain: krea-alicja
*/

/* ================= RESET ================= */

@font-face {
    font-family: 'AktivGrotesk';
    src: url('assets/fonts/AktivGrotesk-Regular-kopia.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'AktivGrotesk';
    src: url('assets/fonts/AktivGrotesk-Medium-kopia.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'AktivGrotesk';
    src: url('assets/fonts/AktivGrotesk-Bold-kopia.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('assets/fonts/Lato-Regular.woff2') format('woff2');
    font-weight: 400;
}

@font-face {
    font-family: 'Epilogue';
    src: url('assets/fonts/Epilogue-Regular.woff2') format('woff2');
    font-weight: 400;
}
@font-face {
    font-family: 'AktivGrotesk';
    src: url('assets/fonts/AktivGrotesk-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
body,
h1,h2,h3,h4,h5,h6,
p,
a,
span,
li,
blockquote {

    font-family: var(--site-font);

}
html, body {
    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box;
}

body {
    background: #f8fbf8;
    color: #111;
font-family: var(--site-font);
    overflow-x: hidden;

    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
:root {

    /* HEADINGS */
    --heading-font: var(--site-font);
    --heading-weight: 500;
    --heading-size: 56px;

    /* TOP MENU */
    --menu-font: 'AktivGrotesk', sans-serif;
    --menu-weight: 600;
    --menu-size: 14px;

    /* FOOTER MENU */
    --footer-font: 'AktivGrotesk', sans-serif;
    --footer-weight: 600;
    --footer-size: 14px;

}


h1, h2, h3 {

font-family: var(--site-font);
font-weight: var(--heading-weight);

}


/* ================= HEADER ================= */

.site-header {
    width: 100%;
    padding: 32px 48px;

        top: 0;
        z-index: 500;
background: #f8fbf8;
}
/* Sticky tylko poza home */
body:not(.home) .site-header {
    position: sticky;
    top: 0;
}


.site-logo img {
    height: 14px;
    width: auto;
    display: block;
}

.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 32px;
}

.main-nav a {

    letter-spacing: 0.08em;

    text-transform: uppercase;
    text-decoration: none;

    color: #111;
    transition: opacity 0.25s ease;
}

.main-nav a {

    font-family: var(--menu-font);
    font-weight: var(--menu-weight);
    font-size: var(--menu-size);

}

.main-nav a:hover {
    opacity: 0.6;
}
.header-inner {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}

.main-nav-left {
    margin-left: 40px;
}

.main-nav-right {
    margin-left: auto;
}
/* ================= FOOTER ================= */

.site-footer {
    width: 100%;
    padding: 24px 48px;
    font-size: var(--menu-size);
    color: #777;
}

/* ================= HOME LAYOUT ================= */

.home {
    flex: 1;
    display: flex;
}

.home-carousel {
    flex: 1;
    position: relative;
    overflow: hidden;

    display: flex;
    align-items: center;      /* CENTRUM PION */
    justify-content: flex-start;   /* CENTRUM POZIOM */

}



.carousel-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;

    display: flex;
    align-items: center;

    height: 100%;
}



.carousel-viewport::-webkit-scrollbar {
    display: none;
}



/* ================= TRACK ================= */

.carousel-track {
    display: flex;
    gap: 64px;
    width: max-content;
    align-items: center;
}



/* ================= ITEM ================= */

.carousel-item {
    flex: 0 0 calc((100vw - (64px * 5)) / 6);

    position: relative;
    transition: transform 0.4s ease;
}

/* LINK */

.carousel-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* ================= IMAGE ================= */

.carousel-image {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: visible;
}

.carousel-image-inner {
    position: absolute;
    inset: 0;
    transform-origin: center center;
    transition: transform 0.6s cubic-bezier(.4,0,.2,1);
    z-index: 1;
}

.carousel-image-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ================= OVERLAY ================= */

.carousel-overlay {
    position: absolute;
    inset: 0;
    background: rgba(37, 244, 125, 0.55);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

/* ================= META (NIE WPŁYWA NA CENTROWANIE) ================= */

.carousel-meta {

    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 100px;

    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}

@media (max-height: 900px) {
    .carousel-meta {
        margin-top: 60px;
		max-width: 260px;
}
.carousel-meta h2 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

    }




.carousel-meta time {
    display: block;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
    color: #000;
	line-height: 1.4;
}
.carousel-meta time {
    font-family: var(--site-font);
}

.carousel-meta h2 {
    line-height: 1.25;
    color: #000;
    max-width: 420px;
}

/* ================= HOVER ================= */

.carousel-item:hover .carousel-image-inner {
    transform: scale(1.4);
    z-index: 2;
}

.carousel-item:hover .carousel-overlay {
    opacity: 1;
}

.carousel-item:hover .carousel-meta {
    opacity: 1;
}



/* ================= EDGE FADE ================= */

.carousel-edge {
    position: absolute;
    top: 0;
    width: 18vw;
    height: 100%;
    z-index: 20;
    pointer-events: none;
}

.carousel-edge.left {
    left: 0;
    background: linear-gradient(
        to right,
        #f8fbf8 0%,
        rgba(248, 251, 248, 0.85) 25%,
        rgba(248, 251, 248, 0.4) 55%,
        rgba(248, 251, 248, 0) 100%
    );
}

.carousel-edge.right {
    right: 0;
    background: linear-gradient(
        to left,
        #f8fbf8 0%,
        rgba(248, 251, 248, 0.85) 25%,
        rgba(248, 251, 248, 0.4) 55%,
        rgba(248, 251, 248, 0) 100%
    );
}

/* ================= DOT NAV ================= */

.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 80px;
    height: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 30;
    cursor: pointer;
}

.carousel-nav-left {
    left: 0;
}

.carousel-nav-right {
    right: 0;
}

.carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #000;
    opacity: 0.6;
    transition: background 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
}

.carousel-nav:hover .carousel-dot {
    background: #25F47D;
    opacity: 1;
    transform: scale(1.4);
}

/* ================= FOOTER ================= */

/* ================= FOOTER ================= */

.site-footer {
    padding: 40px 48px;
    font-size: var(--menu-size);
}

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

/* LEFT MENU */

.footer-left ul {
    list-style: none;
    display: flex;
    gap: 32px;
    margin: 0;
    padding: 0;
}

.footer-left a {
    text-decoration: none;
    color: #9aa09a;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: opacity 0.25s ease;
	
    font-family: var(--footer-font);
    font-weight: var(--footer-weight);
    font-size: var(--footer-size);
}

.footer-left a:hover {
    opacity: 0.6;
}

/* CENTER */

.footer-center {
color: #d6ddd6;
    text-align: center;
    flex: 1;
}

.footer-center a {
    color: #c8cec8;
    text-decoration: none;
    font-size: var(--menu-size);
}

.footer-center a:hover {
    opacity: 0.6;
}

/* RIGHT */

.footer-right {
    display: flex;
    align-items: center;
	font-weight: 600; 
    gap: 16px;
}

.footer-right span {
    font-size: var(--menu-size);
    letter-spacing: 0.08em;
}

.footer-right img {
    height: 16px;
}

/* ================= FOOTER LOGO HOVER ================= */


.footer-logo {
    position: relative;
    display: inline-block;
}

.footer-logo img {
    height: 18px;
    width: auto;
    display: block;
    transition: opacity 0.25s ease;
}

.footer-logo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("assets/images/logo_green_mini.png") no-repeat center;
    background-size: contain;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.footer-logo:hover img {
    opacity: 0;
}

.footer-logo:hover::after {
    opacity: 1;
}
/* ================= HEADER LOGO HOVER ================= */

.site-logo {
    position: relative;
    display: inline-block;
}

.site-logo img {
    height: 24px;
    width: auto;
    display: block;
    transition: opacity 0.25s ease;
}

.site-logo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("assets/images/logo_green.png") no-repeat center;
    background-size: contain;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.site-logo:hover img {
    opacity: 0;
}

.site-logo:hover::after {
    opacity: 1;
}

.site-logo::after {
    pointer-events: none;
}


/* ================= EDITORIAL ================= */
.editorial-body p{
	  max-width: clamp(520px, 38vw, 760px);
	font-family: var(--site-font);
    line-height: 1.85;
    letter-spacing: 0;
}


.editorial {
    display: flex;
    gap: 80px;
}

.editorial-col {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.editorial-left {
    width: 40%;
}

.editorial-right {
    width: 60%;
}

.editorial-block img {
    width: 100%;
    height: auto;
    display: block;
}

.editorial-block.large img {
    width: 100%;
}

.editorial-block.wide img {
    width: 100%;
}

.editorial-block.small img {
    width: 100%;
}

.editorial-block.text-block {
    max-width: 600px;
    font-size: 16px;
    line-height: 1.6;
}
.single-hero {
    padding: 80px 48px;
}

.hero-row {
    display: flex;
    gap: 40px;
    margin-bottom: 10px;
}

.hero-left {
    width: 40%;
}

.hero-right {
    width: 60%;
}

.post-meta {
    font-size: 14px;
}

.post-category {
    display: block;
    margin-top: 8px;
    text-transform: uppercase;
}

.main-image {
    position: relative;
}


.row {
    display: flex;
    gap: 40px;
    margin-bottom: 10px;
}

.two-cols img {
    width: 50%;
}

.three-cols img {
    width: 33.333%;
}

.split .left {
    width: 40%;
}

.split .right {
    width: 60%;
}

.single-post {
    width: 100%;

}



.article-row:nth-child(2) {
    align-items: stretch;
}




.article-category a {
    color: #111;
    text-decoration: none;

}
.article-category a:hover {
    color: #25F47D; /* efekt hover */
}

.article-category {
    opacity: 0.6;
	font-size: var(--menu-size);
}


/* NEXT POST */

.next-post-thumb {
    display: block;
    text-decoration: none;
    color: inherit;
    position: relative;
}

.next-post-title {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: #25F47D;
    font-weight: 600;
}


.article-content {
   font-family: var(--site-font);
    font-weight: 300; /* Light */
        font-size: clamp(16px, 0.55vw + 14px, 28px);
    line-height: 1.85;
    letter-spacing: 0;
    margin-right: 40px;

}


.article-right img {
    width: 100%;
    display: block;
}

.article-content p {
    margin-bottom: 10px;
}

.article-inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 60px;
}


/* ================= ARTICLE TOP ================= */

.article-wrapper {
    padding: 120px 48px 10px 48px;
	
}

.article-row {
 display: grid;
    grid-template-columns: 40% 60%;
    gap: 40px;
    align-items: start; /* kluczowe: wyrównanie pionowe między meta a tytułem */

}


/* LEWA META */

.article-meta {
	
	font-family: var(--site-font);
	font-size: 1rem;
	font-weight: 700;

	display: flex;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-align: right;
    line-height: 1.6;
	    padding-right: 10px;
		flex-direction: column; /* data nad kategorią */
    justify-content: flex-start; /* pionowe wyśrodkowanie w 40% kolumnie */
    text-align: right; /* meta wyrównana do prawej */

}

.article-right {
	    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* pionowe wyśrodkowanie w 60% kolumnie */
}



.next-post-thumb img {

    object-fit: cover;
}


.next-post-thumb:hover {
    opacity: 1; /* po hover 100% */
}
.next-post-thumb:hover .next-post-title,
.article-title a:hover {
    color: #25F47D;
}


.article-date {
    display: block;
	 font-size: var(--menu-size);
}



/* PRAWA STRONA */

.article-title {
    font-family: var(--site-font);
    line-height: 0.95;
    margin-bottom: 10px;
	letter-spacing: -0.05em;
	max-width: clamp(520px, 38vw, 760px);
}




.article-excerpt {
	letter-spacing: -0.01em;
	font-family: var(--site-font);
    line-height: 1.2;
	  max-width: clamp(520px, 38vw, 760px);
}


/*


.next-post-title {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;   
    justify-content: left; 
    text-align: left;
    padding: 40px;
    color: #111;
    font-family: 'AktivGrotesk', sans-serif;
    font-size: 16px;
	font-weight: 600;
    line-height: 1.2;
    transition: color 0.3s ease;
	max-width: 300px;
}
*/
/* === NEXT POST FINAL CLEAN === */

.article-left {
    position: relative;
}

.next-post-wrapper {
    position: relative;
}

/* obrazek do prawej */
.next-post-thumb {
    display: block;
    width: 28vw;
    aspect-ratio: 3 / 4;
    margin-left: auto;
    opacity: 0.2;
    transition: opacity 0.3s ease;
}

.next-post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.next-post-thumb:hover {
    opacity: 1;
}
.next-post-wrapper {
    position: relative;
}

/* TITLE */
.next-post-title {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
max-width: clamp(240px, 18vw, 420px);

    display: flex;
    align-items: center;
    gap: 20px;

    font-family: var(--site-font);
    font-size: 16px;
    font-weight: 600;
    color: #111;
    text-decoration: none;

    transition: color 0.25s ease;
}

/* DOT — jak carousel */
.next-dot {
    width: 10px;
    height: 10px;
    min-width: 10px;
    min-height: 10px;

    border-radius: 50%;
    background: #000;
    opacity: 0.6;

    flex-shrink: 0;       /* KLUCZ */
    display: block;       /* KLUCZ */

    transition: background 0.25s ease,
                transform 0.25s ease,
                opacity 0.25s ease;
				
				
}

/* HOVER NA CAŁEJ SEKCJI */
.next-post-title:hover .next-dot {
    background: #25F47D;
    opacity: 1;
    transform: scale(1.4);
}
.next-post-title:hover {
    color: #25F47D;
}

.next-post-wrapper:hover .next-post-title {
    color: #25F47D;
}
.prev-overlay {
    position: absolute;
    top: 50%;
    right: 80px;   /* 🔥 nie 120px */
    transform: translateY(-50%);
max-width: clamp(240px, 18vw, 420px);
    display: flex;
    align-items: center;
    gap: 20px;
text-align: right;
   font-family: var(--site-font);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;

    color: #111;
    text-decoration: none;

    z-index: 5;
}

.prev-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #000;
    opacity: 0.6;

    transition: background 0.25s ease,
                transform 0.25s ease,
                opacity 0.25s ease;

    flex-shrink: 0;
}

.prev-overlay:hover {
    color: #25F47D;
}

.prev-overlay:hover .prev-dot {
    background: #25F47D;
    opacity: 1;
    transform: scale(1.4);
}

.next-post-thumb,
.featured-image {
    width: 28vw; /* ten sam rozmiar */
    aspect-ratio: 3 / 4;
}

.next-post-thumb img,
.featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.prev-overlay:hover,
.next-post-thumb:hover .next-post-title {
    color: #25F47D;
}

.next-post-title,
.prev-overlay {
    font-size: clamp(15px, 1.1vw, 26px);
}
/* ================= EDITORIAL A ================= */

.editorial-grid-4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    margin: 120px 0;
}

.editorial-grid-4 .large {
    grid-column: 1 / 2;
}

.editorial-grid-4 .small:nth-child(2) {
    grid-column: 2 / 3;
}

.editorial-grid-4 .small:nth-child(3) {
    grid-column: 1 / 2;
}

.editorial-grid-4 .wide {
    grid-column: 2 / 3;
}

.editorial-grid-4 img {
    width: 100%;
    height: auto;
    display: block;
}

/* SPLIT */

.editorial-split {
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 80px;
    margin-top: 120px;
    align-items: start;
}

.split-left img {
    width: 100%;
    height: auto;
    display: block;
}

.split-right {
  font-family: var(--site-font);
    font-size: 16px;
    line-height: 1.8;
}
/* TEKST */

.editorial-text {
      max-width: clamp(520px, 38vw, 760px);
    margin: 0 auto 120px auto;
	font-family: var(--site-font);
    font-weight: 300; /* Light */
        font-size: clamp(16px, 0.55vw + 14px, 28px);
    line-height: 1.85;
    letter-spacing: 0;
    margin-right: 40px;
}


/* FULL WIDTH GALERIA */

.editorial-fullwidth {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 60px 80px;

    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 80px;
}

/* LEWA 1/3 */

.fw-left {
    display: flex;
    align-items: center;
    justify-content: flex-end; 
}

.fw-left img {
    width: 50%;
}

/* PRAWA 2/3 */

.fw-right {
    display: grid;
    gap: 80px;
}

.fw-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
}

.fw-top img:first-child {
    width: 75%;
}

.fw-top img:last-child {
    width: 100%;

}

.fw-bottom {
    display: flex;
    justify-content: center;
	}

.fw-bottom img {
    width: 30%;
}

/* SEKCJA POD GALERIĄ */

.after-gallery {
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 40px; /* taki sam jak topper */
    margin-top: 60px;
}
.after-gallery > div {
    min-width: 0;
}
.ag-left {
    width: 100%;
}
.ag-left {
    width: 100%;
}

.ag-left img {
    width: 100%;
	text-align: right;
}

.ag-right {
	  max-width: clamp(520px, 38vw, 760px);
}


.ag-right p{
	font-family: var(--site-font);
    line-height: 1.85;

    letter-spacing: 0;
}


.topper-text {
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 40px;   /* TEN SAM GAP */
	
}
.topper-text p{
	  max-width: clamp(520px, 38vw, 760px);
	font-family: var(--site-font);
    line-height: 1.85;
    letter-spacing: 0;
}

.topper-text-left {
    /* nic nie trzeba */
}

.topper-text-right {
      max-width: clamp(520px, 38vw, 760px);
}

.article-meta .article-date {
    font-size: clamp(12px, 0.6vw, 18px);
}

.article-meta .article-category a {
    font-size: clamp(12px, 0.6vw, 18px);
}

}
@media (max-width: 768px) {
    .topper_text {
        flex-direction: column;
    }

    .topper-text-left,
    .topper-text-right {
        flex: 0 0 100%;
    }
}
.ag-right h2,
.topper-text-right h2 {
    font-family: var(--site-font);
    font-weight: 500;
    font-size: clamp(36px, calc(30px + 1.55vw), 70px);
    line-height: 1.15;
    letter-spacing: -0.05em;
    margin: 1em 0 0.5em;
}
.ag-right h3,
.topper-text-right h3 {
    font-family: var(--site-font);
    font-weight: 500;
    font-size: clamp(30px, calc(30px + 1.55vw), 54px);
    line-height: 1.15;
    letter-spacing: -0.05em;
    margin: 1em 0 0.5em;
}
.topper-text-right,
.ag-right {
    font-family: var(--site-font);
    line-height: 1.85;
}
/* FULL WIDTH GRID */
.editorial-b-gallery {
    width: 100vw;
    margin-left: calc(50% - 50vw);

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;

    margin: 40px 0;
}

.editorial-b-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.empty {
    background: transparent;
}

/* TEKST */
.grid-40-60 {
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 40px;
}

.editorial-body {
    font-family: var(--site-font);
    line-height: 1.8;
      max-width: clamp(520px, 38vw, 760px);
}
.about-hero {
    padding: 120px 80px 60px 80px;
}

.about-title {
    font-family: var(--site-font);
    font-size: 80px;
    font-weight: 500;
    margin: 0;
}

.about-image {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.about-image img {
    width: 100%;
    height: auto;
    display: block;
}

.about-content {
    padding: 120px 80px;
}

.about-inner {
    max-width: 720px;
    font-family: var(--site-font);
    font-size: 18px;
    line-height: 1.9;
}

.about-inner blockquote {
    margin-top: 120px;
    border-left: 3px solid #25F47D;
    padding-left: 60px;

    font-family: var(--site-font);
    font-size: 28px;
    line-height: 1.3;
    font-weight: 500;
}
@media (max-width: 768px) {

    .about-hero {
        padding: 80px 24px 40px 24px;
    }

    .about-title {
        font-size: 48px;
        line-height: 1.1;
    }

    .about-content {
        padding: 80px 24px;
    }

    .about-inner {
        max-width: 100%;
        font-size: 16px;
        line-height: 1.8;
    }

    .about-inner blockquote {
        margin-top: 80px;
        padding-left: 24px;
        border-left: 2px solid #25F47D;

        font-size: 20px;
        line-height: 1.4;
    }

    .about-image img {
        height: auto;
    }
}
/* ================= CONTACT ================= */

.contact-hero {
    padding: 120px 80px 60px 80px;
}

.contact-title {
    font-family: var(--site-font);
    font-size: 80px;
    font-weight: 500;
    margin: 0;
}

.contact-lead {
    max-width: 600px;
    font-family: var(--site-font);
    font-size: 18px;
    line-height: 1.8;
}

.contact-image {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.contact-image img {
    width: 100%;
    height: 70vh;
    object-fit: cover;
    display: block;
}

.contact-info {
    padding: 120px 80px;
}

.contact-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 120px;
    max-width: 900px;
}

.contact-col h3 {
    font-family: var(--site-font);
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 20px;
}

.contact-col a {
    font-family: var(--site-font);
    font-size: 18px;
    text-decoration: none;
    color: #25F47D;
}

.contact-col a:hover {
    opacity: 0.7;
}
@media (max-width: 768px) {

    .contact-hero {
        padding: 80px 24px 40px 24px;
    }

    .contact-title {
        font-size: 60px;
    }

    .contact-lead {
        font-size: 16px;
    }

    .contact-image img {
        height: 50vh;
    }

    .contact-info {
        padding: 80px 24px;
    }

    .contact-inner {
        grid-template-columns: 1fr;
        gap: 60px;
    }

}
/* ================= WSPÓŁPRACA ================= */

.cooperation-hero {
    padding: 120px 80px 60px 80px;
}

.cooperation-title {
 font-family: var(--site-font);
    font-size: 80px;
    font-weight: 500;
    margin: 0;
}

.cooperation-lead {
    max-width: 720px;
 font-family: var(--site-font);
    font-size: 18px;
    line-height: 1.9;
}

/* zdjęcie */

.cooperation-image {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.cooperation-image img {
    width: 100%;
    height: 70vh;
    object-fit: cover;
    display: block;
}

/* nagłówki w treści */

.cooperation-lead h2 {
    font-family: var(--site-font);
    font-size: 32px;
    font-weight: 500;
    margin: 80px 0 40px 0;
}

/* cytat = zielona linia */

.cooperation-lead blockquote {
    margin-top: 120px;
    padding-left: 60px;
    border-left: 3px solid #25F47D;

    font-family: var(--site-font);
    font-size: 22px;
    line-height: 1.3;
    font-weight: 500;
	
	
	
}

.cooperation-lead a {
    color: #25F47D;
    text-decoration: none;
}
@media (max-width: 768px) {

    .cooperation-hero {
        padding: 80px 24px 40px 24px;
    }

    .cooperation-title {
        font-size: 60px;
    }

    .cooperation-lead {
        font-size: 16px;
    }

    .cooperation-image img {
        height: 50vh;
    }

    .cooperation-lead blockquote {
        padding-left: 24px;
        font-size: 20px;
    }

}
.cooperation-inner {
    max-width: 720px;
    margin: 0 auto;

  font-family: var(--site-font);
    font-size: 18px;
    line-height: 1.9;
}

/* nagłówki pod zdjęciem */

.cooperation-inner h2 {
  font-family: var(--site-font);
    font-size: 32px;
    font-weight: 500;
    margin: 80px 0 40px 0;
}

/* paragrafy */

.cooperation-inner p {
    margin-bottom: 24px;
}

/* linki */

.cooperation-inner a {
    color: #25F47D;
    text-decoration: none;
}

/* cytat */

.cooperation-inner blockquote {
    margin-top: 120px;
    padding-left: 60px;
    border-left: 3px solid #25F47D;

font-family: var(--site-font);
    font-size: 28px;
    line-height: 1.3;
    font-weight: 500;
}





/* MOBILE HEADER */

@media (max-width: 768px) {

    .site-header {
        padding: 20px 24px;
    }

    .header-inner {
        align-items: center;
    }

    .main-nav-left,
    .main-nav-right {
        display: none;
    }

    .site-logo img {
        height: 18px;
    }

}

@media (max-width: 768px) {

    /* ===== HOME LAYOUT RESET ===== */

    .home {
        display: block;
    }

    .home-carousel {
        overflow: visible;
        padding: 0 24px;
		margin-top: -10px; /* 🔥 to zasłoni kreskę */

    }

    .carousel-track {
        display: block;
        width: 100%;
        transform: none !important;
    }

    .carousel-item {
        flex: none;
        width: 100%;
        margin-bottom: 48px;
        transform: none !important;
    }

    /* wyłączamy desktopowe efekty */

    .carousel-nav,
    .carousel-edge {
        display: none;
    }

    .carousel-overlay {
        display: none;
    }

    .carousel-image-inner {
        position: relative;
        transform: none !important;
    }

    /* META POD ZDJĘCIEM */

    .carousel-meta {
        position: relative;
        top: auto;
        left: auto;
        margin-top: 16px;
        opacity: 1;
    }

    .carousel-meta time {
font-family: var(--site-font);
		font-weight: 400;
        color: #111;
        font-size: 12px;
        margin-bottom: 8px;
    }

    .carousel-meta h2 {
font-family: var(--site-font);
		font-weight: 400;
        color: #111;
        font-size: 22px;
        line-height: 1.3;
    }

}

@media (max-width: 768px) {

    body {
        display: block;
        min-height: auto;
    }

    .home {
        display: block;
    }

}

@media (max-width: 768px) {

    .site-footer {
        padding: 60px 24px;
    }

    .footer-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 40px;
    }

    /* LEWE MENU */
    .footer-left ul {
        flex-direction: column;
        gap: 16px;
    }

    .footer-left a {
    font-size: clamp(12px, 1vw, 18px);
    }

    /* ŚRODEK */
    .footer-center {
        order: -1; /* jeśli chcesz logo/tekst wyżej */
    }

    /* PRAWA STRONA */
    .footer-right {
        justify-content: center;
        gap: 12px;
    }

}

/* ================= WSPÓŁPRACA MOBILE FIX ================= */

@media (max-width: 768px) {

    .cooperation-hero {
        padding: 80px 24px 40px 24px;
    }

    .cooperation-title {
font-size: clamp(36px, 8vw, 56px);
    line-height: 1.1;
    word-break: normal;
        line-height: 1.1;
        margin-bottom: 30px;
    }

    .cooperation-lead,
    .cooperation-inner {
        max-width: 100%;
        padding: 0 24px;
        font-size: 16px;
        line-height: 1.8;
    }

    .cooperation-image img {
        height: 50vh;
        object-fit: cover;
    }

    .cooperation-body {
        padding: 80px 0;
    }

    .cooperation-inner h2 {
        font-size: 24px;
        margin: 60px 0 24px 0;
    }

    .cooperation-inner blockquote {
        padding-left: 24px;
        font-size: 16px;
        margin-top: 80px;
        border-left: 2px solid #25F47D;
    }

}
@media (max-width: 768px) {

    .footer-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 32px;
    }

    /* MENU */
    .footer-left {
        order: 1;
    }

    /* jeśli masz coś w right */
    .footer-right {
        order: 2;
    }

    /* REALIZACJA – NA SAMYM DOLE */
    .footer-center {
        order: 3;
        margin-top: 20px;
    }

}

@media (max-width: 768px) {

    .main-nav-left,
    .main-nav-right {
        display: none;
    }

    .header-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 24px;
        height: 60px;
    }

    .site-logo img {
        height: 18px;
    }

/* Powiększony touch area dla dot */
.mobile-dot {
    width: 14px;
    height: 14px;
    background: #111;
    border-radius: 50%;
    border: none;
    position: relative;
    cursor: pointer;
    z-index: 300;
    transition: background 0.3s ease;
}

/* kreski */
.mobile-dot::before,
.mobile-dot::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 2px;
    background: #111;
    top: 50%;
    left: 50%;
    transform-origin: center;
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 0;
    transition: all 0.3s ease;
}

/* stan aktywny */
.mobile-dot.active {
    background: transparent;
}

.mobile-dot.active::before {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(45deg);
}

.mobile-dot.active::after {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-45deg);
}
    }

    .mobile-ig {
        font-size: 16px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        font-weight: 700;
        text-decoration: none;
        color: #111;
    }


.mobile-dot,
.mobile-ig {
    display: none;
}
@media (max-width: 768px) {

    .mobile-dot,
    .mobile-ig {
        display: block;
    }

}
.mobile-menu {
    display: none;
}
@media (max-width: 768px) {

    .mobile-menu {
		font-family: var(--site-font);
		font-weight: 600;
        position: fixed;
        inset: 0;
        background: #f8fbf8;
        padding: 120px 40px;
        display: flex;
        flex-direction: column;
        gap: 28px;
        z-index: 200;

        transform: translateY(-100%);
        transition: transform 0.4s ease;
    }

    .mobile-menu.active {
        transform: translateY(0);
    }

    .mobile-menu ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .mobile-menu li {
        margin-bottom: 20px;
    }

    .mobile-menu a {
        text-decoration: none;
        color: #111;
        font-size: 18px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }


    /* =========================
       RESET DESKTOP GRID
    ========================== */

    .article-row,
    .topper-text,
    .after-gallery,
    .editorial-fullwidth,
    .fw-top {
        display: block;
        grid-template-columns: none;
        gap: 0;
    }

    .article-wrapper {
        padding: 20px 24px 20px 24px;
    }

    /* =========================
       HEADER SECTION
    ========================== */

    .article-meta {
        text-align: left;
        margin-bottom: 10px;
		}

    .article-title {
        font-size: 22px;
        margin-bottom: 12px;
    }

    .article-excerpt {
        font-size: 15px;
    }

    .featured-image {
        margin: 20px 0;
    }

    /* =========================
       TOP TEXT
    ========================== */

    .topper-text-right {
        width: 100%;
    }

    .topper-text-left {
        display: none;
    }

    /* =========================
       PIERWSZE 3 ZDJĘCIA
    ========================== */

    .editorial-fullwidth {
        width: 100%;
        margin: 20px 0;
        padding: 0 0px;
    }

    .fw-left img {
        width: 70%;
        margin: 0 auto 32px auto;
        display: block;
    }

    .fw-top {
        display: flex;
        gap: 16px;
        margin-bottom: 20px;
    }

    .fw-top img {
        width: 50%;
    }

    /* =========================
       OSTATNIE 2 ZDJĘCIA
    ========================== */

    .after-gallery {
        padding: 0 0px;
    }

    .ag-left img {
        width: 80%;
        margin: 0 auto 0px auto;
        display: block;
    }

    .ag-right {
        width: 100%;
    }

    /* RESET DESKTOP LAYOUT */
    .editorial-fullwidth,
    .after-gallery,
    .topper-text {
        display: block;
        width: 100%;
    }

    .topper-text-left {
        display: none;
    }

    .topper-text-right {
        width: 100%;
        padding: 0 0px;
    }



    /* IMAGE 2 + 3 */


    /* DUŻE pierwsze */
    .fw-left img {
        width: 70%;
        margin: 20px auto;
        display: block;
    }

    /* WRAPPER dla dwóch dolnych */
   .fw-top {
        display: flex;
        justify-content: center;
        align-items: center; /* 🔥 to robi pionowe wyśrodkowanie */
        gap: 20px;
        margin-bottom: 20px;
    }

    .fw-top img:first-child {
        width: 35%;
        height: auto;
        display: block;
    }

    .fw-top img:last-child {
        width: 50%;
        height: auto;
        display: block;
    }



    .fw-top img {
        width: 50%;
    }

    /* IMAGE 4 */
    .fw-bottom img {
        width: 50%;
       padding: 20 0px;
	   margin-left: 50px;
        margin-bottom: 0px;
    }

    /* IMAGE 5 */
    .ag-left img {
        width: 100%;
        padding: 0 0px;
        margin-bottom: 20px;
    }

    /* TEXT */
    .ag-right {
        padding: 0 0px;
    }



    .article-header {
        padding: 0 20px;
    }

    .article-title {
        font-size: 22px;
        line-height: 1.25;
        margin-bottom: 16px;
    }

    .article-excerpt {
        font-size: 15px;
        line-height: 1.6;
        margin-bottom: 24px;
    }

    .article-meta {
        margin-bottom: 10px;
    }
	.topper-text-right{
		padding: 20px;
	}


    /* Pierwsza galeria normalnie */
    .editorial-fullwidth {
        display: block;
    }

    /* Rozdzielamy image5 i tekst */
    .after-gallery {
        display: flex;
        flex-direction: column;
    }

    /* Tekst jako pierwszy */
    .ag-right {
        order: 1;
        padding: 0 20px;
    }

    /* Image5 na sam koniec */
    .ag-left {
        order: 2;
        margin-top: 20px;
        padding: 0 0px;
    }

    .ag-left img {
        width: 100%;
        height: auto;
        display: block;
    }

    .next-post-thumb {
        display: none !important;
    }

    .prev-overlay {
        display: none !important;
    }


    .article-inner {
        max-width: 100% !important;
        padding: 0 !important;
    }



    .ag-right {
        width: 100% !important;
        padding: 0 20px !important;
        margin: 0 !important;
    }



    .after-gallery {
        display: flex !important;
        flex-direction: column !important;
    }

    /* najpierw tekst */
    .ag-right {
        order: 1;
        width: 100% !important;
        padding: 0 20px !important;
    }
    /* potem zdjęcie */
    .ag-left {
        order: 2;
        width: 100% !important;
        margin-top: 30px;
        text-align: center;
    }
    .ag-left img {
        width: 80%;
        height: auto;
    }
	.fw-right {
		gap: 0px;
	}
    .grid-40-60 {
        display: block !important;
    }
    .grid-40-60 > div:first-child {
        display: none; /* ukrywamy pustą kolumnę 40% */
    }
    .editorial-body {
        width: 100% !important;
        padding: 0 20px !important;
    }
    .editorial-b-gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 4px; /* trochę ciaśniej na mobile */
    }
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #f8fbf8;
}
}

.article-title {
    margin-top: 0;
}
@media (max-width: 768px) {
	
	.featured-image {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    aspect-ratio: 3 / 4;   /* możesz zmienić na 4 / 5 jeśli wolisz */
}

.featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Ukrycie meta nad tytułem */
.article-meta {
    display: none !important;
}

/* Ukrycie zajawki poprzedni / następny (ta z kropką) */
.prev-overlay,
.next-post-wrapper,
.next-post-title {
    display: none !important;
}
.mobile-gradient {
    position: fixed;
    top: 98px;
    left: 0;
    width: 100%;
    height: 120px; /* większa wysokość */

    pointer-events: none;
    z-index: 150;

    background: linear-gradient(
        to bottom,
        rgba(248,251,248,1) 0%,
        rgba(248,251,248,0.8) 25%,
        rgba(248,251,248,0.5) 55%,
        rgba(248,251,248,0.2) 80%,
        rgba(248,251,248,0) 100%
    );
}


/* ===== BOTTOM ===== */

.mobile-gradient-bottom {
    position: fixed;
    bottom: 0; /* zamiast top */
    left: 0;
    width: 100%;
    height: 120px;

    pointer-events: none;
    z-index: 150;

    background: linear-gradient(
        to top,
        rgba(248,251,248,1) 0%,
        rgba(248,251,248,0.8) 25%,
        rgba(248,251,248,0.5) 55%,
        rgba(248,251,248,0.2) 80%,
        rgba(248,251,248,0) 100%
    );
}


}
@media (min-width: 2000px) {
    .carousel-item {
        flex: 0 0 calc((100vw - (64px * 7)) / 8);
    }
}


  .next-post-title {
        position: fixed;
        top: 50vh;
        transform: translateY(-50%);
        left: 40px; /* dopasuj do layoutu */
        z-index: 400;
        max-width: clamp(240px, 18vw, 420px);
    }

    .prev-overlay {
        position: fixed;
        top: 50vh;
        transform: translateY(-50%);
        right: 40px;
        z-index: 400;
        max-width: clamp(240px, 18vw, 420px);
    }
.wp-block-embed {
    width: 100%;
    margin: 80px 0;
}

.wp-block-embed iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

.after-gallery {
    align-items: start;
}



.editorial-b-gallery {
    align-items: start;
}
.editorial-b-gallery > div {
    align-self: start;
}
.after-gallery {
    margin: 60px 0;
}

.after-gallery:empty {
    display: none;
}

.after-gallery:not(:has(img)) {
    margin: 0;
}