/* =========================================================================
   Akademia BHP UG – Oferta zajęć
   Wszystko w przestrzeni .bhpo, z resetami pod Divi 4.
   ========================================================================= */

.bhpo {
	--bhpo-primary: #0b2d5b;
	--bhpo-accent: #1f5fd1;
	--bhpo-text: #1c2533;
	--bhpo-muted: #5d6b7e;
	--bhpo-line: #e3e8f0;
	--bhpo-soft: #f4f7fc;
	--bhpo-soft-2: #eaf1fd;
	--bhpo-radius: 14px;
	--bhpo-shadow: 0 1px 2px rgba(16, 33, 64, .04), 0 6px 20px rgba(16, 33, 64, .06);
	--bhpo-scroll-offset: 110px; /* wysokość nagłówka Divi przy przewijaniu */
	color: var(--bhpo-text);
	font-size: 15px;
	line-height: 1.55;
}

.bhpo *,
.bhpo *::before,
.bhpo *::after { box-sizing: border-box; }

/* --- Resety pod Divi ---------------------------------------------------- */
.bhpo ul,
.bhpo ol { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.bhpo li { margin: 0; padding: 0; }
.bhpo p { padding: 0; margin: 0; }
.bhpo h2,
.bhpo h3 { padding: 0; margin: 0; color: var(--bhpo-primary); font-weight: 700; }
.bhpo figure { margin: 0; }
.bhpo button { font: inherit; letter-spacing: normal; text-transform: none; }
.bhpo .bhpo-sec-body ul:not(.bhpo-checklist) { list-style: disc !important; padding-left: 1.2em !important; margin: .4em 0 !important; }
.bhpo .bhpo-sec-body p + p { margin-top: .7em; }
.bhpo .screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

.bhpo-ico { width: 1.15em; height: 1.15em; flex: none; display: inline-block; vertical-align: -.2em; }

/* --- Siatka 1:2 ---------------------------------------------------------- */
.bhpo-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: 28px;
	align-items: start;
}

/* --- Narzędzia (wyszukiwarka, filtry) ----------------------------------- */
.bhpo-tools { display: grid; gap: 10px; margin-bottom: 14px; }
.bhpo-search {
	display: flex; align-items: center; gap: 8px;
	background: #fff; border: 1px solid var(--bhpo-line); border-radius: 10px;
	padding: 0 12px; color: var(--bhpo-muted);
}
.bhpo-search:focus-within { border-color: var(--bhpo-accent); box-shadow: 0 0 0 3px rgba(31, 95, 209, .15); }
.bhpo .bhpo-search input {
	border: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important;
	padding: 11px 0 !important; width: 100%; font: inherit; color: var(--bhpo-text); margin: 0;
}
.bhpo-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.bhpo-filters label { flex: 1 1 0; min-width: 120px; }
.bhpo .bhpo-filters select {
	width: 100%; font: inherit; font-size: 13px; color: var(--bhpo-text);
	background: #fff; border: 1px solid var(--bhpo-line); border-radius: 9px;
	padding: 8px 10px; cursor: pointer; margin: 0;
}

/* --- Lista kafelków ------------------------------------------------------ */
.bhpo-list { display: grid; gap: 10px; container-type: inline-size; }
.bhpo-item[hidden] { display: none !important; }

.bhpo .bhpo-tile {
	all: unset;
	box-sizing: border-box;
	width: 100%;
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr) auto 16px;
	grid-template-areas: "ico main prices chev";
	align-items: center;
	gap: 6px 12px;
	padding: 14px 14px 14px 12px;
	background: #fff;
	border: 1px solid var(--bhpo-line);
	border-radius: 12px;
	cursor: pointer;
	text-align: left;
	color: var(--bhpo-text);
	transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.bhpo .bhpo-tile:hover { background: var(--bhpo-soft); border-color: #cdd8ea; }
.bhpo .bhpo-tile:focus-visible { outline: 3px solid rgba(31, 95, 209, .35); outline-offset: 2px; }
.bhpo .bhpo-tile.is-active {
	background: var(--bhpo-soft-2);
	border-color: var(--bhpo-accent);
	box-shadow: inset 3px 0 0 var(--bhpo-accent), var(--bhpo-shadow);
}

.bhpo-tile-ico {
	grid-area: ico;
	width: 42px; height: 42px; border-radius: 10px;
	display: grid; place-items: center;
	background: var(--bhpo-soft-2); color: var(--bhpo-accent);
}
.bhpo-tile-ico .bhpo-ico { width: 22px; height: 22px; }
.bhpo .bhpo-tile.is-active .bhpo-tile-ico { background: #fff; }

.bhpo-tile-main { grid-area: main; display: grid; gap: 3px; min-width: 0; }
.bhpo-tile-title { font-weight: 650; font-size: 14.5px; line-height: 1.3; color: var(--bhpo-primary); }
.bhpo-tile-date { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--bhpo-muted); }
.bhpo-tile-date .bhpo-ico { width: 14px; height: 14px; color: var(--bhpo-accent); }

.bhpo-tile-prices { grid-area: prices; display: grid; gap: 4px; justify-items: end; text-align: right; }
.bhpo-tile-chev { grid-area: chev; color: #9aa7ba; display: grid; place-items: center; }
.bhpo .bhpo-tile.is-active .bhpo-tile-chev { color: var(--bhpo-accent); }

.bhpo-pr { display: grid; line-height: 1.15; }
.bhpo-pr small { font-size: 10.5px; color: var(--bhpo-muted); text-transform: uppercase; letter-spacing: .03em; }
.bhpo-pr b { font-size: 14.5px; font-weight: 700; color: var(--bhpo-text); white-space: nowrap; }
.bhpo-pr.has-promo b { color: var(--bhpo-muted); font-weight: 600; }
/* Jeśli wolisz przekreśloną cenę regularną przy promocji – odkomentuj:
.bhpo-pr.has-promo b { text-decoration: line-through; } */
.bhpo-pr.is-promo b { color: var(--bhpo-accent); }

.bhpo-badge {
	justify-self: start; font-size: 11px; font-weight: 600; line-height: 1;
	padding: 4px 7px; border-radius: 999px; margin-top: 2px;
}
.bhpo-badge--muted { background: #eef0f3; color: #6b7480; }

/* Wąska kolumna: ceny pod tytułem w jednym wierszu */
@container (max-width: 380px) {
	.bhpo .bhpo-tile {
		grid-template-columns: 42px minmax(0, 1fr) 16px;
		grid-template-areas: "ico main chev" "ico prices chev";
		align-items: start;
	}
	.bhpo-tile-chev { align-self: center; }
	.bhpo-tile-prices { display: flex; gap: 16px; justify-content: flex-start; text-align: left; justify-items: start; }
}

.bhpo-empty { padding: 18px; text-align: center; color: var(--bhpo-muted); background: var(--bhpo-soft); border-radius: 12px; }

/* --- Panel szczegółów --------------------------------------------------- */
.bhpo-panels { min-width: 0; }
.bhpo-panel {
	background: #fff;
	border: 1px solid var(--bhpo-line);
	border-radius: var(--bhpo-radius);
	box-shadow: var(--bhpo-shadow);
	overflow: hidden;
	container-type: inline-size;
	scroll-margin-top: var(--bhpo-scroll-offset);
	outline: none;
}
.bhpo-panel[hidden] { display: none !important; }
.bhpo-panel.is-entering { animation: bhpo-in .25s ease-out; }
@keyframes bhpo-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bhpo-panel.is-entering { animation: none; } }

.bhpo-hero { aspect-ratio: 16 / 6; background: linear-gradient(135deg, var(--bhpo-primary), var(--bhpo-accent)); overflow: hidden; }
.bhpo-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bhpo-hero-ph { width: 100%; height: 100%; display: grid; place-items: center; color: rgba(255, 255, 255, .85); }
.bhpo-hero-ph .bhpo-ico { width: 72px; height: 72px; stroke-width: 1.2; }

.bhpo-head { padding: 24px 28px 20px; display: grid; gap: 14px; border-bottom: 1px solid var(--bhpo-line); }
.bhpo .bhpo-title { font-size: 28px; line-height: 1.2; letter-spacing: -.01em; }
.bhpo-head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.bhpo-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.bhpo-meta li { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--bhpo-text); }
.bhpo-meta .bhpo-ico { color: var(--bhpo-accent); width: 18px; height: 18px; }

.bhpo-prices { display: flex; flex-wrap: wrap; gap: 10px; }
.bhpo-prices .bhpo-pr { background: var(--bhpo-soft); border-radius: 10px; padding: 8px 14px; }
.bhpo-prices .bhpo-pr b { font-size: 17px; }
.bhpo-prices .bhpo-pr.is-promo { background: var(--bhpo-soft-2); }
.bhpo-prices .bhpo-pr em { font-style: normal; font-size: 12px; color: var(--bhpo-muted); margin-top: 3px; }

/* Przycisk */
.bhpo .bhpo-btn {
	all: unset;
	box-sizing: border-box;
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	background: var(--bhpo-primary); color: #fff;
	font-weight: 600; font-size: 14.5px; line-height: 1.2;
	padding: 12px 18px; border-radius: 10px;
	cursor: pointer; text-align: center;
	transition: background-color .15s, transform .15s, box-shadow .15s;
}
.bhpo .bhpo-btn:hover { background: var(--bhpo-accent); box-shadow: 0 6px 16px rgba(31, 95, 209, .25); }
.bhpo .bhpo-btn:focus-visible { outline: 3px solid rgba(31, 95, 209, .4); outline-offset: 2px; }
.bhpo .bhpo-btn .bhpo-ico { transition: transform .15s; }
.bhpo .bhpo-btn:hover .bhpo-ico { transform: translateX(3px); }
.bhpo .bhpo-btn.is-disabled { background: #e9ecf1; color: #6b7480; cursor: default; box-shadow: none; }
.bhpo .bhpo-btn--ghost { background: transparent; color: var(--bhpo-primary); border: 1px solid var(--bhpo-line); }
.bhpo .bhpo-btn--ghost:hover { background: var(--bhpo-soft); box-shadow: none; }
.bhpo .bhpo-btn--wide { width: 100%; }
.bhpo .bhpo-btn[aria-busy="true"] { opacity: .7; pointer-events: none; }

/* Sekcje */
.bhpo-sec {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 10px 24px;
	padding: 22px 28px;
	border-bottom: 1px solid var(--bhpo-line);
}
.bhpo .bhpo-sec-h { display: flex; align-items: center; gap: 12px; font-size: 16px; line-height: 1.3; align-self: start; }
.bhpo-sec-ico {
	width: 38px; height: 38px; border-radius: 50%; flex: none;
	display: grid; place-items: center;
	background: var(--bhpo-soft-2); color: var(--bhpo-accent);
}
.bhpo-sec-ico .bhpo-ico { width: 19px; height: 19px; }
.bhpo-sec-body { color: var(--bhpo-text); padding-top: 7px; }
.bhpo-sec-body a { color: var(--bhpo-accent); }

.bhpo-checklist { display: grid; gap: 8px; }
.bhpo-checklist li { display: flex; gap: 10px; align-items: flex-start; }
.bhpo-checklist .bhpo-ico { color: #fff; background: var(--bhpo-accent); border-radius: 50%; padding: 3px; width: 18px; height: 18px; margin-top: 3px; stroke-width: 3; }

/* Organizacja + kontakt */
.bhpo-sec--org { grid-template-columns: 1fr; }
.bhpo-org { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; padding-top: 4px; }
.bhpo-dl { margin: 0; display: grid; gap: 12px; align-content: start; }
.bhpo-dl > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
.bhpo-dl dt { display: flex; align-items: center; gap: 8px; font-weight: 650; color: var(--bhpo-primary); }
.bhpo-dl dt .bhpo-ico { color: var(--bhpo-accent); width: 16px; height: 16px; }
.bhpo-dl dd { margin: 0; }

.bhpo-contact { background: var(--bhpo-soft); border-radius: 12px; padding: 16px 18px; display: grid; gap: 8px; align-content: start; }
.bhpo-contact-h { display: flex; align-items: center; gap: 8px; color: var(--bhpo-primary); }
.bhpo-contact-h .bhpo-ico { color: var(--bhpo-accent); }
.bhpo-contact-txt { color: var(--bhpo-muted); font-size: 14px; }
.bhpo-contact ul { display: grid; gap: 6px; }
.bhpo-contact li { display: flex; align-items: center; gap: 9px; }
.bhpo-contact li .bhpo-ico { color: var(--bhpo-accent); width: 16px; height: 16px; }
.bhpo-contact a { color: var(--bhpo-text); text-decoration: none; font-weight: 600; word-break: break-word; }
.bhpo-contact a:hover { color: var(--bhpo-accent); text-decoration: underline; }

.bhpo-foot { padding: 20px 28px 24px; background: #fafbfd; }

/* Wąski panel (container query) */
@container (max-width: 640px) {
	.bhpo-head { padding: 20px; }
	.bhpo .bhpo-title { font-size: 23px; }
	.bhpo-sec { grid-template-columns: 1fr; padding: 18px 20px; }
	.bhpo-sec-body { padding-top: 0; }
	.bhpo-org { grid-template-columns: 1fr; }
	.bhpo-foot { padding: 16px 20px 20px; }
	.bhpo-head-row .bhpo-btn { width: 100%; }
}

/* --- Mobile: akordeon ---------------------------------------------------- */
@media (max-width: 980px) {
	.bhpo-grid { grid-template-columns: 1fr; gap: 0; }
	.bhpo-panels { display: none; }
	.bhpo-item > .bhpo-panel { margin: 10px 0 8px; }
	.bhpo .bhpo-tile.is-active .bhpo-tile-chev .bhpo-ico { transform: rotate(90deg); }
	.bhpo-tile-chev .bhpo-ico { transition: transform .2s; }
}

/* --- Okno formularza ---------------------------------------------------- */
.bhpo-dialog {
	width: min(760px, calc(100vw - 24px));
	max-height: calc(100dvh - 24px);
	padding: 0; border: 0; border-radius: 18px;
	box-shadow: 0 30px 80px rgba(8, 22, 48, .35);
	color: var(--bhpo-text);
	overscroll-behavior: contain;
}
.bhpo-dialog::backdrop { background: rgba(8, 22, 48, .55); backdrop-filter: blur(2px); }
.bhpo-dialog[open] { animation: bhpo-pop .2s ease-out; }
@keyframes bhpo-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

.bhpo-dialog-in { position: relative; padding: 28px 32px 30px; }
.bhpo .bhpo-dialog-x {
	all: unset; position: absolute; top: 14px; right: 14px;
	width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
	cursor: pointer; color: var(--bhpo-muted);
}
.bhpo .bhpo-dialog-x:hover { background: var(--bhpo-soft); color: var(--bhpo-primary); }
.bhpo .bhpo-dialog-x:focus-visible { outline: 3px solid rgba(31, 95, 209, .35); }
.bhpo-dialog-kicker { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--bhpo-accent); }
.bhpo .bhpo-dialog-title { font-size: 24px; line-height: 1.25; margin: 4px 40px 8px 0; }
.bhpo-dialog-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--bhpo-muted); font-size: 14px; margin-bottom: 18px !important; }
.bhpo-dialog-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.bhpo-dialog-meta .bhpo-ico { color: var(--bhpo-accent); }

.bhpo-fs { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.bhpo-fs legend {
	font-weight: 700; color: var(--bhpo-primary); font-size: 15px; padding: 0; margin-bottom: 10px;
}
.bhpo-fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.bhpo-fgrid[hidden] { display: none; }
.bhpo-field { grid-column: span 2; display: grid; gap: 5px; }
.bhpo-field.is-half { grid-column: span 1; }
.bhpo-field label { font-size: 13.5px; font-weight: 600; }
.bhpo abbr { color: #c0392b; text-decoration: none; border: 0; }
.bhpo .bhpo-field input,
.bhpo .bhpo-field textarea {
	width: 100%; font: inherit; color: var(--bhpo-text);
	background: #fff !important; border: 1px solid #cdd6e3 !important; border-radius: 9px;
	padding: 10px 12px !important; margin: 0; box-shadow: none;
	transition: border-color .15s, box-shadow .15s;
}
.bhpo .bhpo-field textarea { resize: vertical; min-height: 64px; }
.bhpo .bhpo-field input:focus,
.bhpo .bhpo-field textarea:focus { outline: 0; border-color: var(--bhpo-accent) !important; box-shadow: 0 0 0 3px rgba(31, 95, 209, .15); }
.bhpo .bhpo-field.has-error input,
.bhpo .bhpo-field.has-error textarea { border-color: #c0392b !important; }
.bhpo-err { color: #c0392b; font-size: 12.5px; min-height: 0; }
.bhpo-err:empty { display: none; }

.bhpo-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; margin-bottom: 12px; font-size: 14px; }
.bhpo-check input { margin: 3px 0 0; width: 18px; height: 18px; accent-color: var(--bhpo-accent); flex: none; }
.bhpo-check--rodo { font-size: 13px; color: var(--bhpo-muted); margin: 4px 0 4px; }
.bhpo-check--rodo a { color: var(--bhpo-accent); }

.bhpo-rodo-info { font-size: 12.5px; color: var(--bhpo-muted); margin: 8px 0 0; }
.bhpo-rodo-info summary { cursor: pointer; color: var(--bhpo-accent); }
.bhpo-rodo-info div { margin-top: 6px; max-height: 180px; overflow: auto; }

.bhpo-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.bhpo-form-msg { margin-top: 14px; padding: 10px 14px; border-radius: 9px; background: #fdecea; color: #8e2a1f; font-size: 14px; }
.bhpo-form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; flex-wrap: wrap; }

.bhpo-success { text-align: center; padding: 18px 0 4px; display: grid; gap: 16px; justify-items: center; }
.bhpo-success[hidden] { display: none; }
.bhpo-success-ico { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: #e6f6ec; color: #1e8e4a; }
.bhpo-success-ico .bhpo-ico { width: 30px; height: 30px; stroke-width: 2.5; }
.bhpo-success p { font-size: 16px; max-width: 46ch; }

@media (max-width: 560px) {
	.bhpo-dialog-in { padding: 22px 18px 22px; }
	.bhpo .bhpo-dialog-title { font-size: 20px; }
	.bhpo-fgrid { grid-template-columns: 1fr; }
	.bhpo-field,
	.bhpo-field.is-half { grid-column: 1 / -1; }
	.bhpo-form-actions .bhpo-btn { flex: 1 1 auto; }
}

body.bhpo-lock { overflow: hidden; }