/* =========================================================================
   CORAL PME — uzupelnienia do systemu projektowego motywu CORAL.
   Wymiary przepisane z makiety Figma "PME / Desktop 1440" (node 15:114).
   Klasy Tailwind z UI Kitu robia typografie i kolory; tutaj trafia tylko
   to, czego skompilowany build nie zawiera.
   ========================================================================= */

/* --- Rytm pionowy: Figma 80/80, ciemne pasy 90/90, hero 72/72 ---------- */
.cpme-sec  { padding-bottom: 3.75rem; padding-top: 3.75rem; }
.cpme-band { padding-bottom: 3.75rem; padding-top: 3.75rem; }
.cpme-hero { padding-bottom: 3rem;    padding-top: 3rem; }
@media (min-width: 1024px) {
	.cpme-sec  { padding-bottom: 5rem;     padding-top: 5rem; }
	.cpme-band { padding-bottom: 5.625rem; padding-top: 5.625rem; }
	.cpme-hero { padding-bottom: 4.5rem;   padding-top: 4.5rem; }
}

/* --- Proporcje kolumn z makiety ---------------------------------------- */
@media (min-width: 1024px) {
	.cpme-c7 { width: 58.3333%; }
	.cpme-c6 { width: 50%; }
	.cpme-c5 { width: 41.6667%; }
}

/* --- Obrazy: bez ramek i tla, jak w makiecie --------------------------- */
.cpme-img {
	display: block;
	height: auto;
	max-width: 100%;
}
/* Hero: laptop + tablet + telefon, 552x410 w makiecie */
@media (min-width: 1024px) {
	.cpme-img--hero { max-height: 25.625rem; width: 100%; object-fit: contain; }
}

/* Zrzut w panelu zakladki / modelu abonamentowym: 652x320 w makiecie */
.cpme-shot {
	align-items: center;
	display: flex;
	justify-content: center;
}
.cpme-shot .cpme-img {
	max-height: 20rem;
	width: auto;
}
@media (min-width: 1024px) {
	.cpme-shot { height: 20rem; }
	.cpme-shot--wide { height: 22rem; }
	.cpme-shot--wide .cpme-img { max-height: 22rem; width: 100%; object-fit: contain; }
}

/* --- Karty "Kluczowe funkcje": 5 kolumn, wysokosc 264 px --------------- */
.cpme-grid5 { display: grid; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .cpme-grid5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
	.cpme-grid5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.cpme-fcard { min-height: 16.5rem; }
}
.cpme-ficon svg { height: 44px; width: 44px; }

/* --- Numery konturowe: Number 96 px, interlinia 1 ---------------------- */
.cpme-num { line-height: 1.15; }

/* --- Kolumny z pionowa linia (korzysci / dla kogo) --------------------- */
@media (min-width: 1024px) {
	.cpme-col { padding-right: 2rem; }
	.cpme-col.lg\:border-l { padding-left: 2rem; }
}

/* --- Listy z czerwonym znacznikiem (badge-check) ----------------------- */
.cpme-check { list-style: none; margin: 0; padding: 0; }
.cpme-check > li { padding-left: 2rem; position: relative; }
.cpme-check > li::before {
	background: var(--cpme-check-img) center / contain no-repeat;
	content: "";
	height: 1.25rem;
	left: 0;
	position: absolute;
	top: 0.125rem;
	width: 1.25rem;
}
:root {
	--cpme-check-img: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23DA291C' d='M12 1.3l2.3 1.7 2.8-.3 1.4 2.5 2.5 1.4-.3 2.8L22.3 12l-1.6 2.9.3 2.8-2.5 1.4-1.4 2.5-2.8-.3L12 22.7l-2.3-1.7-2.8.3-1.4-2.5-2.5-1.4.3-2.8L1.7 12 3.3 9.1 3 6.3l2.5-1.4L6.9 2.4l2.8.3z'/%3E%3Cpath fill='%23fff' d='M10.6 16.1l-3.5-3.5 1.4-1.4 2.1 2.1 4.9-4.9 1.4 1.4z'/%3E%3C/svg%3E");
}

/* --- Listy punktowane w porownaniu ------------------------------------- */
.cpme-dot { list-style: none; margin: 0; padding: 0; }
.cpme-dot > li { padding-left: 1.25rem; position: relative; }
.cpme-dot > li::before {
	background-color: currentColor;
	border-radius: 9999px;
	content: "";
	height: 5px;
	left: 0;
	opacity: 0.9;
	position: absolute;
	top: 0.625rem;
	width: 5px;
}
.cpme-dot-red > li::before { background-color: var(--color-primary); opacity: 1; }

/* --- Zakladki ---------------------------------------------------------- */
.cpme-tablist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px)  { .cpme-tablist { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cpme-tablist { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.cpme-tab.active,
.cpme [data-tab-buttons] > .cpme-tab.active {
	background-color: color-mix(in srgb, var(--color-primary) 10%, transparent) !important;
	border-color: var(--color-primary) !important;
	color: var(--color-primary) !important;
}
@media (min-width: 1024px) {
	.cpme-panel { min-height: 20rem; }
}

/* --- Ciemne sekcje ------------------------------------------------------ */
.cpme-mut { color: rgba(255, 255, 255, 0.72); }
.cpme-dark a:not([class*="bg-"]) { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.cpme-dark a:not([class*="bg-"]):hover { color: var(--color-primary); }

/* --- Proces reakcji serwisowej: kafle 146x104 + strzalki --------------- */
.cpme-flow { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cpme-flow-sep { display: none; }
.cpme-flow-card { display: flex; flex-direction: column; justify-content: space-between; min-height: 7rem; }
.cpme-flow-nr { font-size: 0.5625rem; line-height: 1.1; opacity: 0.85; padding-top: 0.125rem; }
.cpme-flow-icon { align-self: flex-end; display: block; }
.cpme-flow-icon svg { height: 44px; width: 44px; }
@media (min-width: 1024px) {
	.cpme-flow-text { width: 37%; }
	.cpme-flow { align-items: stretch; display: flex; gap: 0; width: 58%; }
	.cpme-flow-card { flex: 1 1 0; max-width: 9.25rem; min-height: 6.5rem; }
	.cpme-flow-sep {
		align-items: center;
		color: rgba(255, 255, 255, 0.55);
		display: flex;
		flex: 0 0 auto;
		justify-content: center;
		width: 2.75rem;
	}
}

/* --- Cytat dla samorzadow ---------------------------------------------- */
.cpme-quote { align-items: flex-start; display: flex; gap: 1.5rem; margin: 0; padding: 2.5rem 0; }
.cpme-quote-mark { color: var(--color-primary); flex: 0 0 auto; }
.cpme-quote-mark svg { display: block; }
.cpme-quote-close { align-self: flex-end; }
@media (max-width: 767px) { .cpme-quote-close { display: none; } }

/* --- Tresc redakcyjna (wpautop): odstep miedzy akapitami 26 px --------- */
.cpme-rich p + p { margin-top: 1.625rem; }
.cpme-rich strong { color: var(--color-secondary); font-weight: 700; }

/* --- Akordeon ---------------------------------------------------------- */
[accordion-button].active .cpme-chevron { transform: rotate(180deg); }
.cpme div[accordion-button].active {
	background-color: color-mix(in srgb, var(--color-secondary) 10%, transparent);
	color: var(--color-secondary);
}
.cpme div[accordion-button].active h3 { color: var(--color-secondary); }
.cpme div[accordion-button].active svg path { fill: none; stroke: var(--color-secondary); }

/* --- Kwadratowe numery "Co zyskujesz" (52 px) -------------------------- */
.cpme .size-13 { height: 3.25rem; width: 3.25rem; }

/* --- Klasy uzytkowe brakujace w skompilowanym buildzie Tailwinda -------
   Motyw kompiluje tylko klasy uzyte w istniejacych szablonach, wiec
   wartosci potrzebne w makiecie PME dopisujemy tutaj 1:1. */
.mb-7 { margin-bottom: 1.75rem; }
.text-secondary\/30 { color: color-mix(in srgb, var(--color-secondary) 30%, transparent); }
@media (min-width: 768px) {
	.md\:max-w-xs { max-width: 20rem; }
	.md\:pt-1 { padding-top: 0.25rem; }
	.md\:pb-9 { padding-bottom: 2.25rem; }
}
@media (min-width: 1024px) {
	.lg\:gap-10   { gap: 2.5rem; }
	.lg\:gap-x-10 { column-gap: 2.5rem; }
	.lg\:gap-y-10 { row-gap: 2.5rem; }
	.lg\:p-5      { padding: 1.25rem; }
	.lg\:mb-14    { margin-bottom: 3.5rem; }
}

@media (min-width: 1024px) {
	.cpme-gy48 { row-gap: 3rem; }
}

/* --- Przycisk wysylki formularza (CF7 nie przepuszcza klas z ".", "[" i ":",
   wiec styl przepisany 1:1 z przycisku uzywanego na reszcie serwisu) ----- */
.cpme .wpcf7-submit {
	align-items: center;
	background-color: var(--color-primary);
	border: 1px solid var(--color-primary);
	border-radius: 0.625rem;
	color: #fff;
	cursor: pointer;
	display: flex;
	font-family: var(--font-TTLakesNeue, inherit);
	font-size: 1rem;
	font-weight: 600;
	height: 3.125rem;
	justify-content: center;
	line-height: 1.5rem;
	padding-inline: 1.25rem;
	text-align: center;
	text-wrap: nowrap;
	transition: all 0.3s;
	width: 100%;
}
.cpme .wpcf7-submit:hover {
	background-color: #fff;
	border-color: var(--color-secondary);
	color: var(--color-secondary);
}
.cpme .wpcf7-form p { margin: 0; }
.cpme .wpcf7-list-item { margin: 0; }
.cpme .wpcf7-acceptance input[type="checkbox"] {
	accent-color: var(--color-primary);
	border-radius: 2px;
	height: 1rem;
	margin-top: 0.125rem;
	width: 1rem;
}
.cpme .wpcf7-not-valid-tip {
	color: var(--color-primary);
	font-size: 0.75rem;
	margin-top: 0.375rem;
}
.cpme .wpcf7-response-output {
	border-radius: 0.625rem;
	margin: 1.5rem 0 0;
	padding: 0.75rem 1rem;
}