/* =============================================================
   KOMPONENT: Bio autora (.mbw-author)
   Render: inc/mbw-author.php (pod wpisem w single.php + shortcode [mbw_autor]).
   Układ: zdjęcie w kółku (lewo) + treść (prawo); na telefonie jedno pod drugim.
   WYGLĄD RAMKI (12.10.2026, decyzja Olgi) = jak karta wpisu na blogu (.mbw-postcard):
   białe tło, cienka obwódka, zaokrąglenie 12px, sygnaturowa krecha pod treścią —
   ale w KOLORZE OSOBY (akcent podstawowy). Bez ozdobników (żółty pierścień,
   żółta krecha u góry, cień — usunięte).
   Cały wygląd sterowany tokenami poniżej — override w węższym selektorze,
   np. `.strona-zespol .mbw-author { --mbw-author-bg: #fff; }`.
   ============================================================= */
.mbw-author {
	--mbw-author-bg:          var(--wp--preset--color--theme-palette-9, #fff);    /* białe jak karta bloga */
	--mbw-author-text:        var(--wp--preset--color--theme-palette-3, #262626); /* grafit */
	--mbw-author-muted:       color-mix(in srgb, var(--mbw-author-text) 70%, transparent);
	--mbw-author-accent:      var(--mbw-turkus, #29b1a5); /* KOLOR OSOBY: obwódka, krecha, nadtytuł, przycisk (podstawowy) */
	--mbw-author-accent-hover:#1e8178;                    /* hover przycisku: ten sam kolor −27% */
	--mbw-author-border-w:    3px;                        /* grubość obwódki ramki */
	--mbw-author-photo:       120px;
	--mbw-author-photo-m:     96px;
	--mbw-author-radius:      12px;
	--mbw-author-pad:         2rem;
	--mbw-author-gap:         1.75rem;
	--mbw-author-name-size:   1.5rem;
	--mbw-author-text-size:   1rem;
	--mbw-author-margin-top:  3.5rem;
	/* Proza wpisu (style.css: .mbw-page .entry-content h2/h3 z !important) czyta te tokeny —
	   wewnątrz karty zerujemy je, żeby imię nie dostało marginesu sekcji artykułu. */
	--mbw-prose-h2-top: 0; --mbw-prose-h2-bottom: 0;
	--mbw-prose-h3-top: 0; --mbw-prose-h3-bottom: 0;

	display: grid;
	grid-template-columns: var(--mbw-author-photo) minmax(0, 1fr);
	gap: var(--mbw-author-gap);
	align-items: start;
	margin-top: var(--mbw-author-margin-top);
	padding: var(--mbw-author-pad);
	background: var(--mbw-author-bg);
	color: var(--mbw-author-text);
	border: var(--mbw-author-border-w) solid var(--mbw-author-accent);   /* obwódka w kolorze osoby */
	border-radius: var(--mbw-author-radius);
	font-family: var(--wp--preset--font-family--jost, system-ui, sans-serif);
	font-size: var(--mbw-author-text-size);
	line-height: 1.6;
}

.mbw-author__photo {
	width: var(--mbw-author-photo);
	aspect-ratio: 1;
	border-radius: 50%;
}

.mbw-author__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

/* Bez ozdobnika pod treścią (kreska usunięta — decyzja Olgi 12.10.2026; Olga wymyśli coś potem). */

/* KOLOR OSOBY (= tło jej zdjęcia): po user_nicename w data-osoba */
.mbw-author[data-osoba="olga"]              { --mbw-author-accent: var(--mbw-turkus, #29b1a5); --mbw-author-accent-hover: #1e8178; }
.mbw-author[data-osoba="artur-kempinski"]   { --mbw-author-accent: var(--mbw-koral,  #f07b6b); --mbw-author-accent-hover: #af5a4e; }
.mbw-author[data-osoba="karina-andriasyan"] { --mbw-author-accent: var(--mbw-malina, #af3d67); --mbw-author-accent-hover: #802d4b; }

/* Nadtytuł („O autorce”, „Współpraca projektowa”…) = TEN SAM styl co nadtytuły na całej stronie
   (.mbw-desc: Jost 500, UPPERCASE, letter-spacing 2px) — decyzja Olgi 12.10.2026.
   Rozmiar 19px jak .mbw-desc w dużej ramce; w mniejszych ramkach 15px (ta sama czcionka). */
.mbw-author__eyebrow {
	display: block;
	margin-bottom: .35rem;
	color: var(--mbw-author-accent);
	font-family: var(--wp--preset--font-family--jost, system-ui, sans-serif);
	font-weight: 500;
	font-size: 15px;
	line-height: 1.4;
	letter-spacing: 2px;
	text-transform: uppercase;
}
.mbw-author--duzy .mbw-author__eyebrow {
	font-size: 19px;
	line-height: 25px;
}

/* Selektor celowo mocniejszy: style treści (.entry-content h2/h3) dodają duży margines nad nagłówkami. */
.mbw-author .mbw-author__body > .mbw-author__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair, Georgia, serif);
	font-size: var(--mbw-author-name-size);
	line-height: 1.25;
	text-transform: none;
	color: var(--mbw-author-text);
}

/* Dodatkowy opis małą czcionką pod imieniem — UKRYTY (decyzja Olgi 12.10.2026).
   Pole „rola” zostaje w profilu, tylko go nie pokazujemy. */
.mbw-author__role { display: none; }

.mbw-author__bio {
	margin-top: .875rem;
}
.mbw-author__bio p { margin: 0 0 .75em; }
.mbw-author__bio p:last-child { margin-bottom: 0; }

.mbw-author__links {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	margin: 1rem 0 0;
	font-size: .9375rem;
}

/* Linki (Wszystkie wpisy / LinkedIn / Portfolio) = KOLOROWE PRZYCISKI w kolorze osoby,
   wzór przycisku marki jak „Umów konsultację” w stopce (pill, Jost UPPERCASE, biały napis).
   Hover płaski: tło ciemnieje, nic się nie rusza. */
.mbw-author__link {
	display: inline-block;
	padding: 12px 24px;
	border-radius: 999px;
	background: var(--mbw-author-accent);
	color: #fff;
	font-family: var(--wp--preset--font-family--jost, system-ui, sans-serif);
	font-size: 15px;
	font-weight: 500;
	line-height: 24px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .2s ease;
}
/* napis ZAWSZE biały — także dla odwiedzonego linku (globalne a:visited barwiło go na brąz) */
.mbw-author .mbw-author__link,
.mbw-author .mbw-author__link:visited {
	color: #fff;
}
.mbw-author .mbw-author__link:hover,
.mbw-author .mbw-author__link:focus-visible {
	background: var(--mbw-author-accent-hover);
	color: #fff;
}

@media (max-width: 600px) {
	.mbw-author {
		--mbw-author-pad: 1.5rem;
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}
	.mbw-author__photo { width: var(--mbw-author-photo-m); }
	.mbw-author__links { justify-content: center; }
}

/* ---------- WARIANT „duzy” — właścicielka na stronie O nas ---------- */
.mbw-author--duzy {
	--mbw-author-photo:      220px;
	--mbw-author-photo-m:    160px;
	--mbw-author-name-size:  2rem;
	--mbw-author-pad:        2.5rem;
	--mbw-author-gap:        2.5rem;
	--mbw-author-margin-top: 0;
	--mbw-author-text-size:  1.0625rem;
	align-items: center;
}

/* ---------- WARIANT „karta” — współpracownicy w siatce .mbw-zespol ---------- */
.mbw-zespol {
	--mbw-zespol-min: 300px;   /* minimalna szerokość karty → liczba kolumn sama się dobiera */
	--mbw-zespol-gap: 1.75rem;
	--mbw-zespol-after: 3rem;  /* odstęp pod siatką (np. przed CTA) */
	display: grid;
	/* auto-fill (nie auto-fit): jedna osoba nie rozciąga się na całą szerokość */
	grid-template-columns: repeat(auto-fill, minmax(min(var(--mbw-zespol-min), 100%), 1fr));
	gap: var(--mbw-zespol-gap);
	margin: 1.5rem 0 var(--mbw-zespol-after);
}

.mbw-author--karta {
	--mbw-author-photo:      140px;
	--mbw-author-name-size:  1.375rem;
	--mbw-author-margin-top: 0;
	--mbw-author-bg:         var(--wp--preset--color--theme-palette-9, #fff);
	grid-template-columns: 1fr;
	justify-items: center;
	align-content: start;
	text-align: center;
}
.mbw-author--karta .mbw-author__links { justify-content: center; }
.mbw-author--karta .mbw-author__photo { width: var(--mbw-author-photo); }

@media (max-width: 600px) {
	.mbw-author--duzy { --mbw-author-pad: 1.5rem; --mbw-author-gap: 1.25rem; --mbw-author-name-size: 1.625rem; }
}