/* =========================================================
   MONIKA FOTO — GŁÓWNY ARKUSZ STYLÓW
   Paleta: ciepły beż / pudrowy róż + śliwkowy / mauve
   Typografia: Cormorant Garamond (serif, nagłówki) + Jost (sans-serif)
   ========================================================= */

:root{
	--color-bg:            #FBF3EC;   /* jasny, ciepły beż */
	--color-bg-alt:        #F6E9E3;   /* pudrowy róż na przemienne sekcje */
	--color-card:          #FFFDF9;   /* karty — niemal biel z ciepłym odcieniem */
	--color-text:          #4A3238;   /* ciemny, przygaszony śliwkowy */
	--color-text-soft:     #7A6066;   /* śliwkowy, jaśniejszy do tekstu pomocniczego */
	--color-accent:        #8C5A68;   /* śliwkowy / mauve — akcent główny */
	--color-accent-dark:   #6E4451;   /* hover / ciemniejszy ton */
	--color-accent-soft:   #D9B8B0;   /* jasny róż-mauve, obrysy, tła subtelne */
	--color-border:        #E7D6CC;
	--radius-sm: 10px;
	--radius-md: 18px;
	--radius-lg: 28px;
	--shadow-soft: 0 20px 45px -25px rgba(74,50,56,0.35);
	--shadow-card: 0 12px 30px -18px rgba(74,50,56,0.28);
	--font-serif: 'Cormorant Garamond', 'Times New Roman', serif;
	--font-sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;
	--container-w: 1180px;
	--container-narrow-w: 760px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 17px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin: 0; padding: 0; }
button{ font-family: inherit; cursor: pointer; background: none; border: none; }

.container{ max-width: var(--container-w); margin: 0 auto !important; padding: 0 28px !important; box-sizing: border-box !important; }
.container-narrow{ max-width: var(--container-narrow-w); margin: 0 auto !important; padding: 0 28px !important; box-sizing: border-box !important; }

/* Dodatkowa, bezpośrednia siatka bezpieczeństwa na samej treści — nawet gdyby coś
   nadpisało .container z zewnątrz, te elementy i tak będą miały własny margines. */
.entry-content, .offer-description, .story-content, .page-content,
.offer-body, .offer-gallery, .offer-faq, .offer-cta, .offer-related {
	padding-left: 20px !important;
	padding-right: 20px !important;
	box-sizing: border-box !important;
}
@media (min-width: 600px){
	.entry-content, .offer-description, .story-content, .page-content,
	.offer-body, .offer-gallery, .offer-faq, .offer-cta, .offer-related {
		padding-left: 28px !important;
		padding-right: 28px !important;
	}
}
.center{ text-align: center; }

.serif{ font-family: var(--font-serif); font-weight: 400; letter-spacing: 0.2px; }

h1, h2, h3{ font-family: var(--font-serif); font-weight: 400; color: var(--color-text); margin: 0 0 18px; }
h1{ font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 1.05; }
h2{ font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1.15; }
h3{ font-size: 1.5rem; }

.eyebrow{
	font-family: var(--font-sans);
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 0.78rem;
	color: var(--color-accent);
	margin: 0 0 14px;
}

/* Podstrony Historii: etykieta kategorii ("Historia Narzeczeńska" itp.) i cała treść
   poniżej (akapity, wstawione zdjęcia) są wyśrodkowane. Selektor oparty tylko o klasę
   nadrzędnego <article class="story-detail"> (unikalną dla Historii), żeby na pewno
   zadziałać niezależnie od dokładnego zagnieżdżenia elementów pomiędzy.
   Uwaga: gdy dana historia nie ma jeszcze przypisanej kategorii, ta etykieta pokazuje się
   jako .offer-lead (zajawka/excerpt) zamiast .eyebrow — dlatego celujemy w oba warianty. */
.story-detail .eyebrow,
.story-detail .offer-lead{ text-align: center !important; }
.story-detail .story-content{ text-align: center; }
.story-detail .story-content img,
.story-detail .story-content figure{ margin-left: auto; margin-right: auto; }

.section{ padding: 96px 0; }
.section:nth-of-type(even){ background: var(--color-bg-alt); }
.section-heading{ max-width: 640px; margin: 0 auto 52px; }
.section-subtitle{ color: var(--color-text-soft); font-size: 1.05rem; }

.img-placeholder{
	width: 100%; height: 100%; min-height: 220px;
	background: linear-gradient(135deg, var(--color-accent-soft), var(--color-bg-alt));
	border-radius: var(--radius-md);
}

/* -------------------- PRZYCISKI -------------------- */
.btn{
	display: inline-flex; align-items: center; justify-content: center;
	padding: 15px 34px;
	border-radius: 999px;
	font-size: 0.92rem;
	letter-spacing: 0.5px;
	font-weight: 500;
	transition: all .3s ease;
	white-space: nowrap;
}
.btn-primary{ background: var(--color-accent); color: #fff; }
.btn-primary:hover{ background: var(--color-accent-dark); transform: translateY(-2px); }
.btn-outline{ border: 1px solid var(--color-accent); color: var(--color-accent); }
.btn-outline:hover{ background: var(--color-accent); color: #fff; }
.btn-small{ padding: 10px 22px; font-size: 0.82rem; }
.btn-block{ width: 100%; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
	position: sticky; top: 0; z-index: 500;
	background: rgba(251, 243, 236, 0.92);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--color-border);
}
.header-inner{
	max-width: var(--container-w); margin: 0 auto; padding: 18px 28px;
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.logo-text{ font-family: var(--font-serif); font-size: 1.7rem; color: var(--color-text); letter-spacing: 0.5px; }
.logo-text em{ font-style: normal; color: var(--color-accent); }
.logo-text.small{ font-size: 1.4rem; }

.main-navigation{ display: none; }
@media (min-width: 992px){ .main-navigation{ display: block; } }

.primary-menu{ display: flex; align-items: center; gap: 6px; }
.primary-menu > .menu-item{ position: relative; }
.menu-link{
	display: inline-block; padding: 10px 16px;
	font-size: 0.95rem; font-weight: 400; color: var(--color-text);
	transition: color .25s ease;
}
.menu-link:hover{ color: var(--color-accent); }

.primary-menu .has-submenu > .submenu-toggle{ display: none; }

.mfoto-submenu{
	position: absolute; top: calc(100% + 10px); left: 0;
	min-width: 240px;
	background: var(--color-card);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-soft);
	padding: 10px;
	opacity: 0; visibility: hidden; transform: translateY(8px);
	transition: all .25s ease;
}
.primary-menu .has-submenu:hover .mfoto-submenu,
.primary-menu .has-submenu:focus-within .mfoto-submenu{
	opacity: 1; visibility: visible; transform: translateY(0);
}
.mfoto-submenu li a{
	display: block; padding: 10px 14px; border-radius: var(--radius-sm);
	font-size: 0.9rem; color: var(--color-text);
}
.mfoto-submenu li a:hover{ background: var(--color-bg-alt); color: var(--color-accent); }

/* Mobile toggle */
.mobile-menu-toggle{
	display: flex; flex-direction: column; gap: 5px; padding: 10px;
}
.mobile-menu-toggle span{ width: 26px; height: 2px; background: var(--color-text); transition: all .3s ease; }
@media (min-width: 992px){
	.mobile-menu-toggle{ display: none; }
	.mobile-navigation{ display: none !important; }
}

.mobile-navigation{
	position: fixed;
	top: var(--mfoto-header-h, 70px);
	left: 0; right: 0; bottom: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	background: var(--color-card);
	border-top: 1px solid var(--color-border);
	opacity: 0; visibility: hidden; transform: translateY(-8px);
	transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
	z-index: 501;
}
.mobile-navigation.open{
	opacity: 1; visibility: visible; transform: translateY(0);
	transition: opacity .25s ease, transform .25s ease;
}
html.mfoto-nav-open, html.mfoto-nav-open body{ overflow: hidden; height: 100%; } /* blokuje przewijanie tła, gdy menu jest otwarte — przewija się tylko panel menu */
.mobile-menu{ padding: 10px 28px 40px; min-height: 100%; }
.mobile-menu > .menu-item > a{ display: block; padding: 14px 0; font-size: 1.05rem; border-bottom: 1px solid var(--color-border); }
.accordion-head{ display: flex; align-items: center; justify-content: space-between; }
.accordion-toggle{ width: 36px; height: 36px; position: relative; flex-shrink: 0; }
.accordion-toggle span, .accordion-toggle::before{
	content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: 1px; background: var(--color-text);
}
.accordion-toggle span{ transform: rotate(90deg); transition: transform .25s ease; }
.accordion-toggle[aria-expanded="true"] span{ transform: rotate(0deg); }
.accordion-panel{ max-height: 0; overflow: hidden; transition: max-height .3s ease; padding-left: 14px; }
.accordion-item.open .accordion-panel{ max-height: 2000px; } /* wystarczająco duży zapas, żeby żadna, nawet długa lista podpozycji się nie ucięła — realne przewijanie i tak zapewnia .mobile-navigation */
.accordion-panel li a{ display: block; padding: 10px 0; color: var(--color-text-soft); font-size: 0.95rem; }

.submenu-toggle{ width: 30px; height: 30px; position: relative; }
.submenu-toggle span{ position: absolute; left: 6px; right: 6px; top: 50%; height: 1px; background: var(--color-text); }
.submenu-toggle span::before{ content:""; position:absolute; left: 8px; right: 8px; top: 0; height: 1px; background: var(--color-text); transform: rotate(90deg); transition: transform .2s ease; }
.submenu-toggle[aria-expanded="true"] span::before{ transform: rotate(0); }

/* =========================================================
   HERO
   ========================================================= */
.hero-section{ padding: 64px 0 96px; }
.hero-grid{ display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
@media (min-width: 992px){ .hero-grid{ grid-template-columns: 1fr 1fr; gap: 64px; } }
.hero-title{ margin-bottom: 22px; }
.hero-lead{ color: var(--color-text-soft); font-size: 1.1rem; max-width: 460px; margin-bottom: 34px; }
.hero-cta{ display: flex; gap: 16px; flex-wrap: wrap; }
.hero-media img, .hero-placeholder{
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
	max-width: 420px; max-height: 320px;
	margin: 0 auto;
	display: block;
}
@media (min-width: 992px){
	.hero-media img, .hero-placeholder{
		aspect-ratio: 4 / 3.4;
		max-width: 480px; max-height: 520px;
	}
}

/* =========================================================
   O MNIE
   ========================================================= */
.o-mnie-full .entry-content{ margin-top: 30px; text-align: left; }
.o-mnie-full .entry-content p{ color: var(--color-text-soft); }

/* =========================================================
   SLIDERY / KARUZELE (Swiper)
   ========================================================= */
.slider-section .swiper{ padding-bottom: 56px; }
.mfoto-swiper{ position: relative; }
.mfoto-card{
	background: var(--color-card);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	height: 100%;
	display: flex; flex-direction: column;
}
.mfoto-card-media{ display: block; aspect-ratio: 4/5; overflow: hidden; }
.mfoto-card-media img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.mfoto-card:hover .mfoto-card-media img{ transform: scale(1.04); }
.mfoto-card-body{ padding: 26px 26px 30px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.mfoto-card-category{
	text-transform: uppercase; letter-spacing: 2px; font-size: 0.72rem; color: var(--color-accent);
}
.mfoto-card-title{ font-size: 1.4rem; margin: 0; }
.mfoto-card-excerpt{ color: var(--color-text-soft); font-size: 0.92rem; flex: 1; }
.mfoto-card-price{ font-weight: 500; color: var(--color-accent-dark); }
.mfoto-card-body .btn{ align-self: flex-start; margin-top: 8px; }

.swiper-pagination-bullet{ background: var(--color-accent-soft); opacity: 1; }
.swiper-pagination-bullet-active{ background: var(--color-accent); }
.mfoto-swiper-nav{
	width: 46px; height: 46px; border-radius: 50%;
	background: var(--color-card); box-shadow: var(--shadow-card);
	color: var(--color-accent);
}
.mfoto-swiper-nav::after{ font-size: 16px; }
.section-more{ margin-top: 40px; }

.section-opinie .swiper{ padding-bottom: 40px; }

/* ---------- Sekcja "Przed i po" (O mnie) ---------- */
.section-before-after .swiper{ padding-bottom: 40px; }
/* Slajdy mają szerokość "auto" (Swiper w trybie slidesPerView:'auto') — każde zdjęcie
   zachowuje swoje naturalne proporcje kadru, przy wspólnej, stałej wysokości rzędu. */
.mfoto-swiper-before-after .swiper-slide{ width: auto; height: 340px; }
/* Uwaga: NIE wyśrodkowujemy tego na mobile — przy większej liczbie zdjęć (szerszych niż ekran)
   psuje to Swiperowi wyliczanie pozycji startowej (karuzela zaczynała się od 2. zdjęcia
   zamiast od 1.). Na desktopie ekran jest wystarczająco szeroki, żeby to nie był problem,
   więc tam wyśrodkowujemy — a na telefonie zostaje bezpieczne wyrównanie do lewej. */
@media (min-width: 992px){
	.mfoto-swiper-before-after .swiper-wrapper{ justify-content: center; }
}
.before-after-item{
	display: block; height: 100%; border-radius: var(--radius-sm); overflow: hidden;
	box-shadow: var(--shadow-card); cursor: zoom-in; position: relative;
}
.before-after-item img{ height: 100%; width: auto; display: block; object-fit: contain; }
.before-after-item::after{ content:""; position:absolute; inset:0; background: rgba(74,50,56,0); transition: background .2s ease; }
.before-after-item:hover::after{ background: rgba(74,50,56,0.15); }
@media (max-width: 600px){
	.mfoto-swiper-before-after .swiper-slide{ height: 240px; }
}
.opinia-card{
	background: var(--color-card); border-radius: var(--radius-md); padding: 40px;
	box-shadow: var(--shadow-card); text-align: center; height: 100%;
}
.opinia-text{ font-family: var(--font-serif); font-size: 1.25rem; color: var(--color-text); margin-bottom: 18px; }
.opinia-author{ font-size: 0.9rem; color: var(--color-text-soft); }
.opinia-author span{ display: block; color: var(--color-accent); font-size: 0.8rem; margin-top: 4px; }

/* =========================================================
   KONTAKT / FORMULARZ
   ========================================================= */
.kontakt-grid{ display: grid; grid-template-columns: 1fr; gap: 40px; margin-top: 20px; max-width: 640px; margin-left: auto; margin-right: auto; }
.kontakt-info{ text-align: center; }
.kontakt-info .footer-social{ justify-content: center; }
.kontakt-info ul{ margin-bottom: 26px; }
.kontakt-info li{ margin-bottom: 12px; color: var(--color-text-soft); }
.footer-social{ display: flex; gap: 18px; }
.footer-social a{ color: var(--color-accent); font-size: 0.9rem; letter-spacing: 0.4px; }
.footer-social a:hover{ color: var(--color-accent-dark); }

.mfoto-contact-form{ background: var(--color-card); padding: 36px; border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.form-row{ margin-bottom: 20px; }
.form-row label{ display: block; margin-bottom: 8px; font-size: 0.88rem; color: var(--color-text-soft); }
.form-row input, .form-row textarea{
	width: 100%; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
	background: var(--color-bg); font-family: var(--font-sans); font-size: 0.95rem; color: var(--color-text);
}
.form-row input:focus, .form-row textarea:focus{ outline: none; border-color: var(--color-accent); }
.form-status{ min-height: 20px; font-size: 0.9rem; color: var(--color-accent-dark); }

/* =========================================================
   PODSTRONY: OFERTA / PRODUKT / WARSZTAT / HISTORIA
   ========================================================= */
.offer-hero{ position: relative; padding-top: 40px; }
.offer-hero-media{ aspect-ratio: 16/8; overflow: hidden; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.offer-hero-media img{ width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 992px){
	/* Na szerokich ekranach stały stosunek szerokości do wysokości robił banner coraz szerszy
	   i coraz krótszy wraz ze wzrostem szerokości okna — efekt mocno "rozjechanego", zbyt
	   przyciętego kadru. Zamiast tego ograniczamy realną wysokość zdjęcia niezależnie od
	   szerokości ekranu, dodajemy marginesy po bokach (czystszy wygląd, bez "pełnego bleedu")
	   i zamieniamy przycinanie (cover) na skalowanie z zachowaniem całego kadru (contain) —
	   zdjęcie się dopasowuje, ale nic z niego nie znika (np. głowa na górze).
	   Mobile (gdzie już dobrze wygląda) zostaje całkowicie bez zmian. */
	.offer-hero-media{
		aspect-ratio: auto; height: 58vh; min-height: 420px; max-height: 620px;
		max-width: var(--container-w); margin: 0 auto; padding: 0 28px; box-sizing: border-box;
		background: var(--color-bg-alt);
	}
	.offer-hero-media img{ object-fit: contain; }
}
.offer-hero-text{ margin-top: -80px; position: relative; background: var(--color-card); border-radius: var(--radius-lg); padding: 44px 44px 34px; box-shadow: var(--shadow-soft); text-align: center; }
.offer-hero-text .hero-cta, .offer-hero-text .btn{ margin-left: auto; margin-right: auto; }
/* Karta z tytułem dzieli tę samą szerokość i te same marginesy co zdjęcie nad nią (.offer-hero-media),
   żeby ich lewa/prawa krawędź zawsze się pokrywały — inaczej (węższa karta na środku szerszego zdjęcia)
   wyglądało to na "rozjechane", mimo że oba elementy technicznie były wyśrodkowane. */
.offer-hero .offer-hero-text.container-narrow{ max-width: var(--container-w) !important; }
.offer-title{ margin: 10px 0 16px; }
.offer-lead{ color: var(--color-text-soft); font-size: 1.1rem; margin-bottom: 26px; }

.mfoto-breadcrumbs{ font-size: 0.82rem; color: var(--color-text-soft); margin-bottom: 18px; }
.mfoto-breadcrumbs a{ color: var(--color-accent); }
.mfoto-breadcrumbs span{ margin: 0 6px; }

.offer-body{ padding: 70px 0; }
.offer-body-grid{ display: grid; grid-template-columns: 1fr; gap: 50px; }
@media (min-width: 992px){ .offer-body-grid{ grid-template-columns: 1.5fr 1fr; } }
.offer-body-grid.offer-body-grid-full{ grid-template-columns: 1fr; }

.offer-benefits-full{ padding: 10px 0 75px !important; margin-top: 45px !important; }
.offer-benefits-full .offer-benefits{ background: var(--color-card); border-radius: var(--radius-md); padding: 30px 34px; box-shadow: var(--shadow-card); }
.offer-benefits-full .offer-benefits ul{ max-width: 480px; margin: 14px auto 0; }
.offer-description p{ color: var(--color-text-soft); }
.offer-sidebar{ display: flex; flex-direction: column; gap: 28px; }
.offer-sidebar-full{ display: flex; flex-direction: column; gap: 28px; padding: 10px 0 60px; }
.offer-price-box{
	background: var(--color-accent); color: #fff; border-radius: var(--radius-md); padding: 30px; text-align: center;
}
.offer-price-label{ display: block; font-size: 0.8rem; letter-spacing: 1.5px; text-transform: uppercase; opacity: 0.85; margin-bottom: 8px; }
.offer-price-value{ display: block; font-family: var(--font-serif); font-size: 2rem; margin-bottom: 20px; }
.offer-price-box .btn-primary{ background: #fff; color: var(--color-accent); }
.offer-price-box .btn-primary:hover{ background: var(--color-bg); }
.offer-benefits{ background: var(--color-card); border-radius: var(--radius-md); padding: 28px; box-shadow: var(--shadow-card); }
.offer-benefits ul{ margin-top: 14px; }
.offer-benefits li{ padding: 8px 0 8px 22px; position: relative; color: var(--color-text-soft); border-bottom: 1px solid var(--color-border); }
.offer-benefits li:last-child{ border-bottom: none; }
.offer-benefits li::before{ content: "✦"; position: absolute; left: 0; color: var(--color-accent); }

.offer-gallery{ padding-bottom: 70px; }
.offer-gallery-product-gap{ padding-bottom: 75px !important; }
.gallery-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 768px){ .gallery-grid{ grid-template-columns: repeat(4, 1fr); } }
.gallery-item{ border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 1/1; display: block; cursor: zoom-in; position: relative; }
.gallery-item::after{
	content: ""; position: absolute; inset: 0; background: rgba(74,50,56,0); transition: background .2s ease;
}
.gallery-item:hover::after{ background: rgba(74,50,56,0.15); }

/* ---------------- LIGHTBOX ---------------- */
.mfoto-lightbox-overlay{
	position: fixed; inset: 0; z-index: 900;
	background: rgba(30,20,22,0.92);
	display: flex; align-items: center; justify-content: center;
	opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s;
	padding: 40px;
}
.mfoto-lightbox-overlay.open{ opacity: 1; visibility: visible; transition: opacity .25s ease; }
.mfoto-lightbox-img{
	max-width: 100%; max-height: 100%; border-radius: var(--radius-sm);
	box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6);
}
.mfoto-lightbox-close{
	position: absolute; top: 22px; right: 28px;
	width: 46px; height: 46px; border-radius: 50%;
	background: rgba(255,255,255,0.12); color: #fff; font-size: 28px; line-height: 1;
	border: none; cursor: pointer; transition: background .2s ease;
}
.mfoto-lightbox-close:hover{ background: rgba(255,255,255,0.25); }
.mfoto-lightbox-arrow{
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 52px; height: 52px; border-radius: 50%;
	background: rgba(255,255,255,0.12); color: #fff; font-size: 30px; line-height: 1;
	border: none; cursor: pointer; transition: background .2s ease;
	display: flex; align-items: center; justify-content: center;
}
.mfoto-lightbox-arrow:hover{ background: rgba(255,255,255,0.25); }
.mfoto-lightbox-prev{ left: 16px; }
.mfoto-lightbox-next{ right: 16px; }
html.mfoto-lightbox-open, html.mfoto-lightbox-open body{ overflow: hidden; }
@media (max-width: 600px){
	.mfoto-lightbox-overlay{ padding: 16px; }
	.mfoto-lightbox-close{ top: 12px; right: 12px; width: 40px; height: 40px; font-size: 24px; }
	.mfoto-lightbox-arrow{ width: 42px; height: 42px; font-size: 24px; }
	.mfoto-lightbox-prev{ left: 6px; }
	.mfoto-lightbox-next{ right: 6px; }
}
.gallery-item img{ width: 100%; height: 100%; object-fit: cover; }

.offer-faq{ padding-bottom: 70px; }
.faq-list{ margin-top: 30px; display: flex; flex-direction: column; gap: 14px; }
.faq-item{ background: var(--color-card); border-radius: var(--radius-sm); padding: 20px 24px; box-shadow: var(--shadow-card); }
.faq-item summary{ cursor: pointer; font-weight: 500; }
.faq-item p{ color: var(--color-text-soft); margin: 14px 0 0; }

.offer-cta{ padding: 70px 0; }
.offer-related{ padding-bottom: 90px; }
.story-detail .offer-cta{ margin-top: 44px; }
.story-detail .offer-related{ margin-top: 44px; }
.story-detail .related-title{ text-align: center; display: block; }
.related-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 30px; }
@media (min-width: 768px){ .related-grid{ grid-template-columns: repeat(3, 1fr); } }
.related-card{ display: block; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); background: var(--color-card); }
.related-thumb{ aspect-ratio: 4/5; overflow: hidden; }
.related-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.related-title{ display: block; padding: 16px; font-family: var(--font-serif); font-size: 1.1rem; }

/* =========================================================
   ARCHIWA / LISTY
   ========================================================= */
.archive-hero{ padding: 60px 0 20px; }
.archive-grid, .post-grid{ display: grid; grid-template-columns: 1fr; gap: 30px; padding: 30px 0 80px; }
@media (min-width: 700px){ .archive-grid, .post-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px){ .archive-grid, .post-grid{ grid-template-columns: repeat(3, 1fr); } }
.archive-card, .post-card{ background: var(--color-card); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); }
.archive-card-thumb, .post-card-thumb{ display: block; aspect-ratio: 4/5; overflow: hidden; }
.archive-card-thumb img, .post-card-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.archive-card-body, .post-card-body{ padding: 24px; text-align: center; }
.archive-card-excerpt, .post-card-excerpt{ color: var(--color-text-soft); font-size: 0.92rem; margin-bottom: 16px; }

/* =========================================================
   STRONA GENERYCZNA / POST
   ========================================================= */
.page-generic, .site-main.container-narrow{ padding: 60px 0 90px; }
.page-header{ margin-bottom: 30px; }
.page-thumb{ border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 40px; aspect-ratio: 16/9; }
.page-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.entry-content p{ color: var(--color-text-soft); }

/* Strona O mnie: zdjęcia i tekst wstawione w treści przez blok "Kolumny" w edytorze
   WordPressa mają subtelne, spójne ze stroną stylowanie (zaokrąglenie, cień, odstępy) —
   dzięki temu możesz samodzielnie ułożyć dowolny układ (np. zdjęcie w jednej kolumnie,
   tekst w drugiej), przeciągając bloki w edytorze, a wygląd i tak będzie pasował do reszty. */
.o-mnie-full .entry-content .wp-block-columns{
	gap: 40px; margin: 28px 0;
	display: flex; flex-wrap: wrap; /* WordPress domyślnie już to ustawia, ale wymuszamy na wszelki wypadek */
}
.o-mnie-full .entry-content .wp-block-column{
	min-width: 0; /* KLUCZOWE: bez tego zdjęcie potrafi rozepchnąć kolumnę szerzej niż dostępne miejsce */
	flex: 1 1 320px; /* każda kolumna kurczy się elastycznie, zamiast "rozjeżdżać" układ */
}
.o-mnie-full .entry-content .wp-block-column img{
	border-radius: var(--radius-md); box-shadow: var(--shadow-card);
	width: 100%; height: auto; max-width: 100%; display: block;
}
@media (max-width: 700px){
	.o-mnie-full .entry-content .wp-block-columns{ gap: 20px; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background: #F1E2DA; border-top: 1px solid var(--color-border); padding: 80px 0 0; }
.footer-inner{
	max-width: var(--container-w); margin: 0 auto; padding: 0 28px 60px;
	display: grid; grid-template-columns: 1fr; gap: 44px;
}
@media (min-width: 768px){ .footer-inner{ grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-brand p{ color: var(--color-text-soft); margin: 16px 0 20px; }
.footer-widget-title{ font-size: 1.1rem; margin-bottom: 18px; }
.footer-menu li, .footer-contact li{ margin-bottom: 10px; color: var(--color-text-soft); }
.footer-menu a:hover{ color: var(--color-accent); }
.footer-bottom{ border-top: 1px solid var(--color-border); padding: 22px 28px; text-align: center; font-size: 0.82rem; color: var(--color-text-soft); }

/* =========================================================
   WOOCOMMERCE — dopasowanie do estetyki motywu
   ========================================================= */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
	background: var(--color-card); border-radius: var(--radius-md); padding: 20px; box-shadow: var(--shadow-card);
}
.woocommerce a.button, .woocommerce button.button, .woocommerce #respond input#submit{
	background: var(--color-accent); color: #fff; border-radius: 999px; padding: 14px 30px; border: none; font-family: var(--font-sans);
}
.woocommerce a.button:hover, .woocommerce button.button:hover{ background: var(--color-accent-dark); }
.woocommerce span.price{ color: var(--color-accent-dark); }

/* =========================================================
   SKIP LINK / ACCESSIBILITY
   ========================================================= */
.skip-link{ position: absolute; left: -9999px; top: 0; background: var(--color-accent); color: #fff; padding: 12px 20px; z-index: 999; }
.skip-link:focus{ left: 10px; top: 10px; }

@media (max-width: 600px){
	.section{ padding: 64px 0; }
	.offer-hero-text{ padding: 30px 24px; margin-top: -50px; }
	.header-inner{ padding: 14px 20px; }
}