/* ==========================================================================
   AKTUALNE OFERTY — warstwa publiczna
   --------------------------------------------------------------------------
   Pisane od telefonu w górę, nie odwrotnie. Karta na 390 px zajmuje CAŁĄ dostępną
   szerokość: przy poprzedniej korekcie mobilnej okazało się, że połówkowe karty
   w kolumnie zostawiają 190 px pustki i łamią opis po dwa słowa.

   Kolory z języka SEMANAT: navy = informacja handlowa, zielony = dostępność i akcja,
   bursztyn = ograniczenie, szary = nieznane. Nic nie przypomina sklepu.
   ========================================================================== */

.sem-offers-page,
.sem-offer-single {
	max-width: 1180px;
	margin: 0 auto;
	padding: 28px 20px 64px;          /* 20 px marginesu bocznego — ten sam, co reszta serwisu na mobile */
	box-sizing: border-box;
}

.sem-of-eyebrow {
	font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--sem-green-700, #1E7A46); margin: 0 0 6px;
}
.sem-of-h1 { font-size: 30px; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 12px; }
.sem-of-intro, .sem-of-lead { font-size: 16px; color: var(--sem-ink-soft, #44525E); max-width: 70ch; margin: 0 0 8px; }
.sem-of-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; letter-spacing: 0.02em; }

/* --- odznaki ------------------------------------------------------------- */
.sem-of-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 0; }
.sem-of-badge {
	display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
	text-transform: uppercase; padding: 5px 10px; border-radius: 999px; white-space: nowrap;
}
.sem-of-badge-ok   { background: var(--sem-green-050, #EAF5EE); color: var(--sem-green-700, #1E7A46); }
.sem-of-badge-info { background: var(--sem-blue-050, #EAF2F9); color: var(--sem-cta-buyer-bg, #0B6BB5); }
.sem-of-badge-warn { background: #FDF3E3; color: #8A5A08; }
.sem-of-badge-grey { background: #EFF2F4; color: var(--sem-ink-soft, #44525E); }

/* --- lista ofert ---------------------------------------------------------- */
.sem-of-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 26px 0 0; }

.sem-of-card {
	display: flex; flex-direction: column; overflow: hidden;
	background: var(--sem-surface, #fff); border: 1px solid var(--sem-border, #E1E6EA);
	border-radius: var(--sem-radius-md, 10px);
	transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.sem-of-card:hover { box-shadow: 0 18px 40px -22px rgba(11,31,58,.35); transform: translateY(-2px); border-color: #CBD3D9; }

.sem-of-card-media { display: block; background: #F4F6F8; aspect-ratio: 3 / 2; overflow: hidden; }
.sem-of-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sem-of-nothumb {
	display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
	font-size: 13px; color: var(--sem-muted, #7A8791);
}

.sem-of-card-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.sem-of-card-title { font-size: 19px; line-height: 1.25; margin: 0; }
.sem-of-card-title a { color: inherit; text-decoration: none; }
.sem-of-card-title a:hover { text-decoration: underline; }
.sem-of-card-sum { font-size: 15px; color: var(--sem-ink-soft, #44525E); margin: 0; }

.sem-of-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 2px 0 0; font-size: 14px; }
.sem-of-facts dt { color: var(--sem-muted, #7A8791); }
.sem-of-facts dd { margin: 0; font-weight: 600; }

.sem-of-card-foot {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 10px; margin: 6px 0 0; color: var(--sem-muted, #7A8791);
}

.sem-of-cta {
	display: inline-block; background: var(--sem-cta-buyer-bg, #0B6BB5); color: #fff;
	font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
	text-decoration: none; padding: 14px 24px; border-radius: 6px; min-height: 50px;
	line-height: 22px; box-sizing: border-box; text-align: center;
}
.sem-of-cta:hover { filter: brightness(1.08); color: #fff; }
.sem-of-cta-ghost { background: transparent; color: var(--sem-cta-buyer-bg, #0B6BB5); box-shadow: inset 0 0 0 2px currentColor; }

/* --- strona oferty -------------------------------------------------------- */
.sem-of-cover { margin: 18px 0 0; }
.sem-of-cover img { width: 100%; height: auto; display: block; border-radius: var(--sem-radius-md, 10px); }

.sem-of-block { margin: 34px 0 0; }
.sem-of-block > h2 {
	font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--sem-green-700, #1E7A46); margin: 0 0 14px;
}

.sem-of-kv { margin: 0; display: grid; grid-template-columns: 1fr; gap: 0; }
.sem-of-kv-row {
	display: grid; grid-template-columns: 1fr; gap: 2px;
	padding: 10px 0; border-bottom: 1px solid var(--sem-border, #E1E6EA);
}
.sem-of-kv dt { font-size: 13px; color: var(--sem-muted, #7A8791); }
.sem-of-kv dd { margin: 0; font-size: 16px; font-weight: 600; }
.sem-of-unknown { color: var(--sem-muted, #7A8791); font-weight: 400; font-style: italic; }
.sem-of-verified { font-size: 14px; color: var(--sem-ink-soft, #44525E); margin: 12px 0 0; }
.sem-of-unknown-note {
	font-size: 15px; color: var(--sem-ink-soft, #44525E); background: var(--sem-bg-alt, #F7F9FA);
	border: 1px solid var(--sem-border, #E1E6EA); border-radius: var(--sem-radius-md, 10px);
	padding: 16px 18px; margin: 0; max-width: 70ch;
}

.sem-of-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.sem-of-table th, .sem-of-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--sem-border, #E1E6EA); vertical-align: top; }
.sem-of-table th { width: 42%; font-weight: 600; color: var(--sem-ink-soft, #44525E); }

.sem-of-gallery { display: grid; grid-template-columns: 1fr; gap: 12px; }
.sem-of-gallery img { width: 100%; height: auto; display: block; border-radius: 8px; }
/* Nieparzysta liczba zdjec zostawialaby w ostatnim rzedzie dziure szeroka na pol siatki.
   Ostatnie osierocone zdjecie rozciagamy na cala szerokosc — rzad jest pelny, nie pusty. */
.sem-of-gallery > :last-child:nth-child(odd) { grid-column: 1 / -1; }

.sem-of-docs { margin: 0; padding-left: 20px; font-size: 16px; }
.sem-of-prose p { font-size: 16px; line-height: 1.65; }

.sem-of-ask {
	background: var(--sem-bg-alt, #F7F9FA); border: 1px solid var(--sem-border, #E1E6EA);
	border-radius: var(--sem-radius-md, 10px); padding: 22px;
}
.sem-of-ask-note, .sem-of-price { font-size: 15px; color: var(--sem-ink-soft, #44525E); margin: 0 0 10px; }
.sem-of-phone { font-size: 15px; margin: 14px 0 0; }

.sem-of-ended {
	background: #FDF3E3; border: 1px solid #F0DCB4; border-radius: var(--sem-radius-md, 10px);
	padding: 20px 22px; margin: 0 0 24px;
}
.sem-of-ended p { margin: 0 0 8px; }
.sem-of-ended-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }

.sem-of-empty {
	background: var(--sem-bg-alt, #F7F9FA); border: 1px solid var(--sem-border, #E1E6EA);
	border-radius: var(--sem-radius-md, 10px); padding: 26px 22px; margin: 26px 0 0;
}
.sem-of-pager { margin: 30px 0 0; display: flex; gap: 8px; flex-wrap: wrap; }
.sem-of-back { margin: 36px 0 0; font-size: 15px; }

/* --- telefon -------------------------------------------------------------- */
@media (max-width: 767px) {
	.sem-offers-page, .sem-offer-single { padding: 22px 20px 48px; }
	.sem-of-h1 { font-size: 25px; }
	.sem-of-card-body { padding: 20px; }
	/* CTA na całą szerokość — kciukiem trafia się w przycisk, nie w link */
	.sem-of-card-foot .sem-of-cta, .sem-of-ended-cta .sem-of-cta { width: 100%; }
	.sem-of-card-foot { flex-direction: column; align-items: flex-start; }
	.sem-of-table th { width: auto; display: block; border-bottom: 0; padding-bottom: 0; font-size: 13px; }
	.sem-of-table td { display: block; padding-top: 2px; }
	.sem-of-table tr { display: block; border-bottom: 1px solid var(--sem-border, #E1E6EA); padding: 8px 0; }
	.sem-of-table th, .sem-of-table td { padding-left: 0; padding-right: 0; }
	.sem-of-ask { padding: 20px; }
}

/* --- tablet i więcej ------------------------------------------------------ */
@media (min-width: 768px) {
	.sem-of-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
	.sem-of-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
	.sem-of-gallery { grid-template-columns: repeat(2, 1fr); }
	.sem-of-h1 { font-size: 34px; }
}

@media (min-width: 1100px) {
	.sem-of-grid { grid-template-columns: repeat(3, 1fr); }
	.sem-of-kv { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	/* Galeria CELOWO zostaje dwukolumnowa takze na desktopie.
	   Przy trzech kolumnach czwarte zdjecie stalo samo w drugim rzedzie, a obok niego
	   ciagnal sie pusty pas na dwie trzecie szerokosci — wygladalo to jak blad ukladu.
	   Dwie kolumny daja rowne 2x2 i zdjecia szersze o polowe (zmierzone: 385 -> 584 px),
	   co przy tej ofercie ma znaczenie handlowe: zanieczyszczenia musza byc widoczne. */
}

/* ==========================================================================
   Nadpisania dynamicznego CSS Astry
   --------------------------------------------------------------------------
   Astra ustawia kolor i rozmiar linków oraz nagłówków regułami o wyższej
   specyficzności niż pojedyncza klasa. Bez tego bloku przycisk „ZOBACZ OFERTĘ”
   dostawał ZIELONY tekst na NIEBIESKIM tle — kontrast 1,9:1, praktycznie
   nieczytelny — a tytuł karty zieleniał i rósł do 28 px.

   Zmierzone, nie założone: `color: rgb(30,122,70)` na `rgb(11,107,181)`.
   ========================================================================== */
body .sem-of-cta,
body a.sem-of-cta,
body .sem-of-cta:visited,
body .sem-of-cta:hover,
body .sem-of-cta:focus { color: #fff; text-decoration: none; }

body .sem-of-cta-ghost,
body a.sem-of-cta-ghost,
body .sem-of-cta-ghost:visited,
body .sem-of-cta-ghost:hover { color: var(--sem-cta-buyer-bg, #0B6BB5); background: transparent; }

/* `!important` jak w reszcie motywu przy starciu z dynamicznym CSS Astry: jej regula dla h2
   wygrywa specyficznoscia, a 28 px na karcie lamie tytul na dwa wiersze juz przy 390 px. */
body .sem-of-card-title { font-size: 19px !important; line-height: 1.25 !important; }
body .sem-of-card-title a,
body .sem-of-card-title a:visited { color: var(--sem-navy-800, #1B2228); text-decoration: none; }
body .sem-of-card-title a:hover { color: var(--sem-cta-buyer-bg, #0B6BB5); text-decoration: underline; }

/* Kod oferty ma być czytelny, a nie ledwie widoczny — poprzedni odcień dawał 4,0:1. */
body .sem-of-code { color: #566069; }

body .sem-of-block > h2 { font-size: 13px; letter-spacing: 0.08em; }
body .sem-of-docs a, body .sem-of-back a { color: var(--sem-cta-buyer-bg, #0B6BB5); }

@media (min-width: 768px) {
	body .sem-of-card-title { font-size: 20px !important; }
}