/* Override Bootstrap card background color */
.qjk-bs { --bs-card-bg: #fffcf8d1; }
/* Ensure .card uses the variable if not already */
.qjk-bs .card { background-color: var(--bs-card-bg); }

/* Modal animation (fade + scale) */
.modal { transition: opacity .25s ease; }
.modal-dialog { transform: translateY(10px) scale(.95); opacity: 0; }
.modal.open .modal-dialog { opacity: 1; transform: translateY(0) scale(1); }
.modal-dialog { transition: opacity .35s cubic-bezier(.4,0,.2,1), transform .45s cubic-bezier(.4,0,.2,1); will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) { .modal-dialog { transition: none !important; } }

/* Page transition fade (manual when leaving via modal CTA) */
.page-fade-out {
	opacity: 0 !important;
	transition: opacity .45s cubic-bezier(.4,0,.2,1);
}
body.page-fade-prep { opacity: 1; }

/* Global page fade transitions */
body.page-fade-init { opacity:0; }
body.page-fade-init.page-fade-in { opacity:1; transition: opacity .55s cubic-bezier(.4,0,.2,1); }
/* Fallback: ensure page becomes visible after 100ms even if JavaScript fails */
body.page-fade-init { animation: page-fade-fallback 0s 100ms forwards; }
@keyframes page-fade-fallback { to { opacity: 1; } }
/* Outgoing (reuses existing .page-fade-out) */
body.page-fade-out { pointer-events:none; }
/* Ensure fade-out opacity transition always applies (some pages may skip initial fade if cached) */
body.page-fade-out { opacity:0 !important; transition: opacity .55s cubic-bezier(.4,0,.2,1); }
@media (prefers-reduced-motion: reduce){
	body.page-fade-init, body.page-fade-init.page-fade-in, body.page-fade-out { opacity:1 !important; transition:none !important; }
}

/* Modal enriched styling */
.modal-dialog { position:relative; }
.modal-icon-wrap { width:66px; height:66px; border-radius:18px; display:flex; align-items:center; justify-content:center; margin:0 0 10px; background:linear-gradient(135deg,#0b61d5 0%,#4e8fe9 100%); color:#fff; box-shadow:0 4px 18px rgba(11,97,213,0.35); font-size:34px; line-height:1; }
.modal-icon-wrap svg { width:38px; height:38px; display:block; }
.modal-icon-wrap[data-type="okna"], .modal-icon-wrap[data-type="systemy"], .modal-icon-wrap[data-type="zaluzje"] { background:linear-gradient(135deg,#0b61d5 0%,#2e9d73 100%); }
.modal-icon-wrap[data-type="drzwi"] { background:linear-gradient(135deg,#ff5e6c 0%,#feb300 100%); }
.modal-icon-wrap[data-type="rolety"], .modal-icon-wrap[data-type="zaluzje"] { background:linear-gradient(135deg,#ff8c42 0%,#ff5e6c 100%); }
.modal-icon-wrap[data-type="pergola"] { background:linear-gradient(135deg,#2e9d73 0%,#0b61d5 100%); }
.modal-icon-wrap[data-type="parapety"], .modal-icon-wrap[data-type="dodatki"] { background:linear-gradient(135deg,#6b7280 0%,#0b61d5 100%); }

/* Keyword highlighting */
.modal-desc-kw { font-weight:600; color:#0b61d5; position:relative; }
.modal-desc-kw[data-accent="alert"] { color:#d62828; }
.modal-desc-kw[data-accent="green"] { color:#2e9d73; }
.modal-desc-kw::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:currentColor; opacity:.25; border-radius:2px; }

/* Slightly larger spacing for enriched content */
#modal-desc p { margin-bottom:1rem; }

/* --- MOBILE FIX: Oferta i usługi karty na stronie głównej ---
	 Problem: w sekcji #kontakt (na stronie głównej "Oferta i usługi") karty mają layout odziedziczony
	 po ogólnych regułach .contact-card (wysokości 100%, image-col i content-col z height:100%),
	 co przy display:block (media query w style.min.css) powoduje, że kolumna z tekstem może mieć zerową
	 wysokość lub być ściskana przez układ h-100.
	 Rozwiązanie: na małych szerokościach wymuszamy kolumnowe ułożenie (stack), reset wysokości i pełną
	 szerokość obrazka oraz standardowy padding treści. Używamy id #kontakt + .contact-card ponieważ sekcja
	 na stronie głównej ma id="kontakt". */
@media (max-width: 768px){
	/* Stos ma być: obrazek u góry, tekst pod spodem */
	#kontakt .contact-card .row.g-0.h-100 { display:flex; flex-direction:column; height:auto !important; }
	#kontakt .contact-card .image-col,
	#kontakt .contact-card .content-col { flex:unset; width:100% !important; height:auto !important; }
	/* Większe zdjęcie na mobile: dynamiczna wysokość zależna od szerokości viewportu */
	#kontakt .contact-card { --card-img-mobile-h: clamp(210px, 60vw, 320px); }
	#kontakt .contact-card .image-col { display:flex; justify-content:center; align-items:center; padding:0; position:relative; overflow:hidden; height:var(--card-img-mobile-h); }
	/* Obrazek: pełna szerokość/ wysokość kontenera, cover aby wypełniał */
	#kontakt .contact-card .image-col img { width:100%; height:100% !important; object-fit:cover; border-radius:var(--card-radius) var(--card-radius) 0 0; background:#fff; }
	/* Treść: większy tytuł, akcent kolorystyczny, lepsza czytelność opisu */
	#kontakt .contact-card .card-body { padding:.85rem .95rem 1.05rem; height:auto !important; justify-content:flex-start; display:flex; flex-direction:column; gap:.35rem; }
	#kontakt .contact-card .card-title { font-size:1.18rem; line-height:1.15; margin:0; font-weight:700; color:var(--brand,#ff5e6c); letter-spacing:-.25px; }
	#kontakt .contact-card .card-text { font-size:.82rem; line-height:1.35; margin:0; color:#555; }
	/* Delikatny separator przy dłuższych tytułach (pseudo-element) */
	#kontakt .contact-card .card-title::after { content:""; display:block; width:44px; height:3px; background:linear-gradient(90deg,var(--brand,#ff5e6c),#feb300); border-radius:3px; margin:.45rem 0 .1rem; opacity:.85; }
}

/* Drobny reset dla pewności na bardzo wąskich urządzeniach */
@media (max-width: 440px){
	#kontakt .contact-card .image-col img { border-radius:var(--card-radius) var(--card-radius) 0 0; }
}

/* Desktop / tablet (>=769px) – upodobnienie stylu do mobilnego, pozostawienie układu kolumnowego */
@media (min-width: 769px){
	/* Wyrównanie wysokości treści w osi pionowej i lepsza typografia */
	#kontakt .contact-card .card-body { display:flex; flex-direction:column; justify-content:center; gap:.45rem; padding:1rem .95rem; }
	#kontakt .contact-card .card-title { font-size:1.15rem; line-height:1.15; font-weight:700; color:var(--brand,#ff5e6c); letter-spacing:-.25px; position:relative; margin:0; }
	#kontakt .contact-card .card-title::after { content:""; display:block; width:40px; height:3px; background:linear-gradient(90deg,var(--brand,#ff5e6c),#feb300); border-radius:3px; margin:.40rem 0 .05rem; opacity:.85; }
	#kontakt .contact-card .card-text { font-size:.80rem; line-height:1.35; margin:0; color:#555; }
	/* Obrazek: pełne wypełnienie kolumny bez deformacji */
	#kontakt .contact-card .image-col { position:relative; overflow:hidden; }
	#kontakt .contact-card .image-col img { width:100%; height:100%; object-fit:cover; border-radius:var(--card-radius) 0 0 var(--card-radius); }
	/* Delikatny hover tylko na większych ekranach */
	#kontakt .contact-card:hover .image-col img { transform:scale(1.04); transition:transform .35s cubic-bezier(.4,0,.2,1); }
	#kontakt .contact-card .image-col img { transition:transform .40s cubic-bezier(.4,0,.2,1); }
}