/*
	CORVUS — styl marki nałożony na szablon Strata (HTML5 UP).
	Źródło: brandbook-corvus.html (kolory: str. 6–8, typografia: str. 9) —
	leży w folderze WWW/_materialy, poza folderem strony.
	Ładowany PO main.css, więc nadpisuje tylko to, co trzeba.
	Zawiera też styl osi czasu Work History (dawniej work-history.css).
*/

/* ===== Czcionki — serwowane z własnego serwera =====
   Zamiast Google Fonts: odwiedzający nie wysyłają swojego adresu IP do Google
   (RODO), a strona nie zależy od zewnętrznego serwera. Pliki to wersje
   „variable” (jeden plik = wszystkie grubości) z projektu Fontsource,
   licencja SIL Open Font License. Zestaw latin-ext zawiera polskie znaki
   i pobiera się tylko wtedy, gdy są na stronie. */

	@font-face {
		font-family: 'Work Sans';
		font-style: normal;
		font-display: swap;
		font-weight: 100 900;
		src: url("../fonts/work-sans-latin-ext-wght-normal.woff2") format("woff2");
		unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
	}

	@font-face {
		font-family: 'Work Sans';
		font-style: normal;
		font-display: swap;
		font-weight: 100 900;
		src: url("../fonts/work-sans-latin-wght-normal.woff2") format("woff2");
		unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	}

	@font-face {
		font-family: 'Space Grotesk';
		font-style: normal;
		font-display: swap;
		font-weight: 300 700;
		src: url("../fonts/space-grotesk-latin-ext-wght-normal.woff2") format("woff2");
		unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
	}

	@font-face {
		font-family: 'Space Grotesk';
		font-style: normal;
		font-display: swap;
		font-weight: 300 700;
		src: url("../fonts/space-grotesk-latin-wght-normal.woff2") format("woff2");
		unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	}

	@font-face {
		font-family: 'Fira Code';
		font-style: normal;
		font-display: swap;
		font-weight: 300 700;
		src: url("../fonts/fira-code-latin-ext-wght-normal.woff2") format("woff2");
		unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
	}

	@font-face {
		font-family: 'Fira Code';
		font-style: normal;
		font-display: swap;
		font-weight: 300 700;
		src: url("../fonts/fira-code-latin-wght-normal.woff2") format("woff2");
		unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	}

:root {
	/* kolory podstawowe */
	--corvus-fiolet: #7005DC;
	--corvus-fiolet-hover: #5d04b8;     /* fiolet po najechaniu */
	--corvus-blekit: #40A6F2;
	--corvus-niebieski: #2E7DE0;
	--corvus-ciemny: #0A0518;
	--corvus-jasny: #F9FAFB;

	/* warianty trybu */
	--corvus-fiolet-jasny: #B076EC;      /* tekst na ciemnym tle */
	--corvus-blekit-ciemny: #1D4B6D;     /* tekst na jasnym tle */
	--corvus-niebieski-ciemny: #1C4B86;  /* tekst na jasnym tle */

	/* neutralne pomocnicze z brandbooka */
	--corvus-ink: #151022;
	--corvus-tekst: #3a3450;             /* tekst główny (w trybie ciemnym #C9C4DE) */
	--corvus-szary: #726B87;
	--corvus-linia: #e2ddef;
	--corvus-tlo-karty: #ffffff;
	--corvus-tlo-subtelne: #f6f4fb;

	/* typografia */
	--font-disp: 'Space Grotesk', sans-serif;
	--font-body: 'Work Sans', Helvetica, sans-serif;
	--font-mono: 'Fira Code', monospace;
}

/* ===== Podstawy ===== */

	body {
		background: var(--corvus-jasny);
	}

	/* Bazowy rozmiar czcionki (main.css: 16pt > 1800px, 12pt <= 1800px).
	   Większość odstępów i rozmiarów w szablonie jest liczona w em względem
	   tej wartości, więc zmiana skaluje całą stronę, nie tylko tekst.
	   Tekst główny: ok. 15 px na laptopie, 16 px na telefonie (poniżej 16 px
	   iPhone przybliża stronę po kliknięciu w pole formularza). */
	body, input, select, textarea {
		color: var(--corvus-tekst);
		font-family: var(--font-body);
		font-size: 13pt;
	}

	@media screen and (max-width: 1800px) {
		body, input, select, textarea {
			font-size: 11.5pt;
		}
	}

	@media screen and (max-width: 736px) {
		body, input, select, textarea {
			font-size: 12pt;
		}
	}

	p {
		line-height: 1.7;
	}

	strong, b {
		color: var(--corvus-ciemny);
		font-weight: 600;
	}

	a {
		color: var(--corvus-niebieski-ciemny);
		border-bottom: 1px solid rgba(28, 75, 134, 0.3);
	}

	a:hover {
		color: var(--corvus-fiolet) !important;
		border-bottom-color: var(--corvus-fiolet);
	}

	h1, h2, h3, h4, h5, h6 {
		font-family: var(--font-disp);
		color: var(--corvus-ciemny);
		font-weight: 600;
		line-height: 1.25;
	}

	#main h2 {
		color: var(--corvus-fiolet);
		font-weight: 600;
	}

	#main header.major h2 {
		color: var(--corvus-ciemny);
		font-weight: 700;
		line-height: 1.2;
		letter-spacing: -0.01em;
	}

	::selection {
		background: var(--corvus-fiolet);
		color: #fff;
	}

/* ===== Nagłówek (lewa kolumna) — tryb ciemny ===== */

	#header {
		background-color: var(--corvus-ciemny);
		background-image: linear-gradient(180deg, rgba(10, 5, 24, 0.15), rgba(10, 5, 24, 0.55)), url("../../images/bg.jpg");
		background-position: center, center;
		background-repeat: no-repeat, no-repeat;
		background-size: cover, cover;
		color: #c9c4de;
	}

	#header .image.avatar {
		width: 7em;
		border: 0;
	}

	#header .image.avatar img {
		height: auto;    /* HTML ma width/height — rezerwuje miejsce przed wczytaniem zdjęcia */
		border-radius: 50%;
		box-shadow: 0 0 0 3px var(--corvus-ciemny), 0 0 0 5px var(--corvus-fiolet-jasny);
	}

	/* imię i nazwisko */
	#header h1:first-of-type {
		font-family: var(--font-disp);
		font-size: 1.9em;
		line-height: 1.2;
		margin-bottom: 0.5em;
	}

	#header h1:first-of-type strong {
		color: var(--corvus-jasny);
		font-weight: 700;
	}

	/* Zawsze w dwóch liniach wg <br> w HTML — main.css na niektórych
	   szerokościach (<=980px i <=480px) ten <br> ukrywa, więc tekst
	   zawija się samowolnie wg szerokości ekranu; tu wymuszamy stały
	   podział na dwie linie na każdej szerokości. */
	#header h1 br,
	#header .header-role br {
		display: inline !important;
	}

	/* rola (akapit pod imieniem) — jak na wizytówce z brandbooka */
	#header .header-role {
		font-family: var(--font-mono);
		font-size: 0.8em;
		font-weight: 400;
		line-height: 1.8;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--corvus-blekit);
	}

	/* Stopka — zawsze pod formularzem kontaktowym, na samym dole strony
	   (main.js nie przenosi jej już do ciemnej kolumny nagłówka).
	   Szerokość/wcięcie powtarza wartości #main z main.css, żeby tekst
	   stopki był wyrównany do tej samej kolumny co treść i formularz. */

	#footer {
		background: transparent;
		margin-left: 35%;
		width: calc(100% - 35%);
		max-width: 54em;
		padding: 1.25em 4em 3em;
		text-align: center;
	}

	#footer .copyright {
		font-family: var(--font-mono);
		font-size: 0.75em;
		letter-spacing: 0.02em;
		color: var(--corvus-szary);   /* kontrast 5:1 — wcześniej #b3accb (2:1) */
		margin: 0;
	}

	#footer .copyright li {
		border-left-color: var(--corvus-linia);
	}

	#footer .copyright li a {
		color: inherit;
		border-bottom-color: rgba(21, 16, 34, 0.15);
	}

	#footer .copyright li a:hover {
		color: var(--corvus-fiolet) !important;
	}

	@media screen and (max-width: 1280px) {
		#footer {
			margin-left: 30%;
			width: calc(100% - 30%);
			max-width: none;
		}
	}

	@media screen and (max-width: 980px) {
		#footer {
			margin-left: 0;
			width: 100%;
			max-width: none;
			padding: 1.25em 2em 3em;
		}
	}

	/* Szerokie/pełne ekrany — na szerokich viewportach main.css ogranicza
	   #main do max-width:54em, ale trzyma go "przyklejone" lewą krawędzią
	   zaraz za kolumną nagłówka (margin-left:35% ustalone na sztywno), więc
	   cała dodatkowa przestrzeń ląduje po prawej i treść wygląda, jakby
	   trzymała się lewej strony. Tutaj: (1) poszerzamy kolumnę treści, żeby
	   kafelki Work History miały więcej miejsca i wymagały mniej scrolowania
	   opisów, (2) wyśrodkowujemy tę (poszerzoną) kolumnę w dostępnej
	   przestrzeni na prawo od nagłówka, zamiast trzymać ją sztywno przy nim.
	   margin-left liczony tak, by przy nadmiarze miejsca dokładać połowę
	   nadwyżki do lewego marginesu (drugą połowa zostaje naturalnie po
	   prawej) — poniżej progu (gdy treść i tak wypełnia całą dostępną
	   szerokość) formuła sprowadza się z powrotem do zwykłych 35%. */

	@media screen and (min-width: 1281px) {
		#header {
			width: 28%;
		}

		#main {
			max-width: 88em;
			margin-left: max(28%, calc(28% + (100% - 28% - 88em) / 2));
			width: calc(100% - 28%);
		}

		#footer {
			max-width: 88em;
			margin-left: max(28%, calc(28% + (100% - 28% - 88em) / 2));
			width: calc(100% - 28%);
		}
	}

/* ===== Odstęp treści od górnej krawędzi =====
   main.css: 8em (> 1280px) i 6em (981–1280px). Tu większy, żeby
   pierwsza sekcja nie zaczynała się tak blisko góry ekranu.
   Na mniejszych ekranach (nagłówek nad treścią) bez zmian. */

	#main {
		padding-top: 11em;
	}

	@media screen and (max-width: 1280px) {
		#main {
			padding-top: 8.5em;
		}
	}

	@media screen and (max-width: 980px) {
		#main {
			padding-top: 6em;
		}
	}

	@media screen and (max-width: 736px) {
		#main {
			padding-top: 2.25em;
		}
	}

/* ===== Sekcje ===== */

	#main > section {
		border-top: 1px solid var(--corvus-linia);
	}

/* ===== Przyciski ===== */

	/* główne wezwanie do działania — „Wyślij” (jedyny przycisk tego typu na stronie) */
	input[type="submit"] {
		font-family: var(--font-disp);
		font-weight: 600;
		letter-spacing: 0.02em;
		border: 2px solid var(--corvus-fiolet);
		color: #fff !important;
		background-color: var(--corvus-fiolet);
		border-radius: 0.4em;
	}

	input[type="submit"]:hover {
		background-color: var(--corvus-fiolet-hover);
		border-color: var(--corvus-fiolet-hover);
		color: #fff !important;
	}

	input[type="submit"]:focus-visible {
		outline: 2px solid var(--corvus-blekit);
		outline-offset: 2px;
	}

/* ===== Formularz ===== */

	input[type="text"],
	input[type="email"],
	textarea {
		background: var(--corvus-tlo-karty);
		border: 1px solid var(--corvus-linia);
		color: var(--corvus-ink);
	}

	input[type="text"]:focus,
	input[type="email"]:focus,
	textarea:focus {
		border-color: var(--corvus-fiolet);
		box-shadow: 0 0 0 3px rgba(112, 5, 220, 0.12);
	}

	::placeholder {
		color: var(--corvus-szary) !important;
		opacity: 1;
	}

/* ===== Kontakt — ikony CORVUS ===== */

	ul.labeled-icons li {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		column-gap: 0.75em;
		padding-left: 0;
		line-height: 1.5;
	}

	ul.labeled-icons .ci {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.4em;
		height: 2.4em;
		border-radius: 0.5em;
		background: var(--corvus-tlo-subtelne);
		border: 1px solid var(--corvus-linia);
		color: var(--corvus-fiolet);    /* oficjalna kombinacja: fiolet na jasnym tle */
	}

	ul.labeled-icons .ci svg {
		width: 1.25em;
		height: 1.25em;
	}

	ul.labeled-icons li a {
		font-family: var(--font-mono);
		font-size: 0.8em;
		color: var(--corvus-ink);
		border-bottom: 0;
		word-break: break-word;
		min-width: 0;
		flex: 1 1 0;
	}

	ul.labeled-icons li a:hover {
		color: var(--corvus-fiolet) !important;
	}

	/* Ukryty kontakt (telefon / e-mail) — rozmyty, odsłaniany kliknięciem.
	   Prawdziwe dane nie występują w HTML; wstawia je main.js. */

	ul.labeled-icons .contact-reveal {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 0;
		border-radius: 0.4em;
		overflow: hidden;
	}

	ul.labeled-icons .contact-reveal__blur {
		font-family: var(--font-mono);
		font-size: 0.8em;
		color: var(--corvus-ink);
		font-weight: 600;
		text-shadow: 0 0 1px currentColor, 0 0 6px currentColor;
		filter: blur(8px);
		user-select: none;
		pointer-events: none;
		white-space: nowrap;
		letter-spacing: 0.12em;
		padding: 0.35em 0.9em;
	}

	ul.labeled-icons .contact-reveal__btn {
		all: unset;
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(249, 250, 251, 0.35);
		color: var(--corvus-fiolet);
		font-family: var(--font-mono);
		font-size: 0.7em;
		font-weight: 600;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		cursor: pointer;
		border-radius: 0.4em;
		transition: background 0.2s ease, color 0.2s ease;
	}

	ul.labeled-icons .contact-reveal__btn:hover {
		background: rgba(112, 5, 220, 0.08);
		color: var(--corvus-fiolet-hover);
	}

	ul.labeled-icons .contact-reveal__btn:focus-visible {
		outline: 2px solid var(--corvus-fiolet);
		outline-offset: 2px;
	}

	ul.labeled-icons li:hover .ci {
		background: var(--corvus-fiolet);
		border-color: var(--corvus-fiolet);
		color: #fff;
	}

	/* Kolumna z danymi kontaktowymi (#three .col-5) — ma tę samą wysokość
	   co kolumna formularza (.row domyślnie robi align-items:stretch).
	   Blok z ikonami ma być bardziej na środku tej przestrzeni w poziomie
	   (nie przyklejony do lewej krawędzi kolumny) i rozłożony w pionie tak,
	   żeby pierwsza pozycja zaczynała się, a ostatnia kończyła na wysokości
	   formularza kontaktowego — stąd justify-content:space-between na
	   pełnej wysokości. */

	#three .row > .col-5 {
		display: flex;
		justify-content: center;
	}

	#three .col-5 ul.labeled-icons {
		width: fit-content;
		max-width: 100%;
		/* Kolumna z ikonami ma sięgać od górnej krawędzi pola „Imię”
		   do dolnej krawędzi pola „Wiadomość” (bez przycisku i notek pod nim).
		   11.8em = zmierzona wysokość pól formularza (dwa rzędy + odstęp);
		   wszystko jest w em, więc wartość zgadza się przy każdym rozmiarze tekstu. */
		height: 11.8em;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	#three .col-5 ul.labeled-icons li {
		margin: 0;
	}

	/* telefon / wąskie ekrany: ikony pod formularzem, jedna pod drugą z odstępem */
	@media screen and (max-width: 736px) {
		#three .row > .col-5 {
			justify-content: flex-start;
		}

		#three .col-5 ul.labeled-icons {
			height: auto;
			gap: 0.9em;
			justify-content: flex-start;
		}
	}

/* ===== Mniejsze ekrany: nagłówek nad treścią, wyśrodkowany ===== */

	@media screen and (max-width: 980px) {
		#header h1:first-of-type {
			font-size: 1.6em;
		}
		#header .image.avatar {
			margin-left: auto;
			margin-right: auto;
		}
	}

/* ===== Formularz kontaktowy — rozmiary ===== */

	#three input[type="text"],
	#three input[type="email"],
	#three textarea {
		font-size: 0.92em;
	}

	/* na telefonie pełne 16 px — mniejszy tekst w polu powoduje przybliżanie strony na iPhonie */
	@media screen and (max-width: 736px) {
		#three input[type="text"],
		#three input[type="email"],
		#three textarea {
			font-size: 1em;
		}
	}

	#three input[type="text"],
	#three input[type="email"] {
		height: 2.9em;
	}

	/* „Wyślij” wyśrodkowany pod polem wiadomości, odrobinę mniejszy */
	#three ul.actions {
		justify-content: center;
		margin-left: 0;
	}

	#three ul.actions li {
		padding-left: 0;
	}

	#three ul.actions input[type="submit"] {
		font-size: 0.85em;
		min-width: 9em;
		height: calc(2.5em + 4px);
		line-height: 2.5em;
		padding: 0 1.75em;
	}

/* ===== Work History — oś czasu z naprzemiennymi kafelkami =====
   (dawniej osobny plik work-history.css; kolory z palety CORVUS) */

	#work-history {
		--wh-line: #cbc2e0;
		--wh-gap: 3em;           /* odstęp między kolumnami — w nim biegnie linia */
		--wh-dot-top: 2.05em;    /* kropka na wysokości daty w kafelku */
		container-type: inline-size;
	}

	#work-history .timeline-wrap {
		position: relative;
		margin: 2em 0 0 0;
	}

	/* Pionowa przerywana linia */
	#work-history .timeline-wrap:before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0.7em;
		border-left: 1px dashed var(--wh-line);
	}

	/* Znaczniki na początku i końcu linii */
	#work-history .timeline-cap {
		position: relative;
		z-index: 1;
		display: block;
		width: max-content;
		margin: 0 0 1.75em 0;
		padding: 0.2em 1em;
		border-radius: 2em;
		background: var(--corvus-fiolet);
		color: #fff;
		font-family: var(--font-mono);
		font-size: 0.75em;
		font-weight: 600;
		letter-spacing: 0.1em;
	}

	#work-history .timeline-cap:last-child {
		margin: 0.5em 0 0 0;
		background: var(--corvus-jasny);
		color: var(--corvus-szary);
		box-shadow: inset 0 0 0 2px var(--wh-line);
	}

	#work-history .timeline {
		position: relative;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* Wpis (widok wąski: jedna kolumna, linia po lewej) */

	#work-history .timeline-item {
		position: relative;
		margin: 0 0 2.25em 0;
		padding: 0 0 0 2.5em;
	}

	/* kropka */
	#work-history .timeline-item:before {
		content: '';
		position: absolute;
		z-index: 1;
		top: var(--wh-dot-top);
		left: calc(0.7em - 6px);
		width: 13px;
		height: 13px;
		margin-top: -6px;
		border-radius: 50%;
		background: #fff;
		border: 2px solid var(--wh-line);
		transition: border-color 0.2s ease, background-color 0.2s ease;
	}

	/* pozioma kreska od linii do kafelka */
	#work-history .timeline-item:after {
		content: '';
		position: absolute;
		top: var(--wh-dot-top);
		left: 0.7em;
		width: 1.8em;
		border-top: 1px dashed var(--wh-line);
	}

	#work-history .timeline-item.is-expanded:before,
	#work-history .timeline-item:first-child:before {
		border-color: var(--corvus-fiolet);
	}

	#work-history .timeline-item.is-expanded:before {
		background: var(--corvus-fiolet);
	}

	/* Kafelek */

	#work-history .timeline-card {
		position: relative;
		background: var(--corvus-tlo-karty);
		border: 1px solid var(--corvus-linia);
		border-radius: 0.5em;
		padding: 1.5em 1.5em 1.25em 1.5em;
		text-align: center;
		transition: border-color 0.2s ease, box-shadow 0.2s ease;
	}

	#work-history .timeline-item.is-expanded .timeline-card {
		border-color: var(--corvus-fiolet);
		box-shadow: 0 0.35em 1.25em rgba(0, 0, 0, 0.05);
	}

	#work-history .timeline-card h3 {
		margin: 0 0 0.35em 0;
		font-size: 1.1em;
		line-height: 1.35;
	}

	#work-history .timeline-org {
		margin: 0;
		font-size: 0.85em;
		font-style: italic;
		line-height: 1.4;
		color: var(--corvus-szary);
	}

	#work-history .timeline-date {
		margin: 0 0 0.6em 0;
		font-family: var(--font-mono);
		font-size: 0.7em;
		font-weight: 500;
		line-height: 1.4;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		color: var(--corvus-niebieski-ciemny);
	}

	/* Przycisk „Zakres obowiązków” */

	#work-history .timeline-toggle {
		display: inline-flex;
		align-items: center;
		gap: 0.4em;
		margin: 0.9em 0 0 0;
		padding: 0.15em 0.2em;
		background: none;
		border: none;
		border-radius: 0.25em;
		color: var(--corvus-fiolet);
		font-family: var(--font-mono);
		font-size: 0.72em;
		font-weight: 600;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		cursor: pointer;
	}

	#work-history .timeline-toggle:hover {
		color: var(--corvus-fiolet-hover);
	}

	#work-history .timeline-toggle:focus-visible {
		outline: 2px solid var(--corvus-fiolet);
		outline-offset: 2px;
	}

	#work-history .timeline-toggle .icon {
		display: inline-block;
		transition: transform 0.25s ease;
	}

	#work-history .timeline-item.is-expanded .timeline-toggle .icon {
		transform: rotate(180deg);
	}

	/* Rozwijany opis — otwiera się WYŁĄCZNIE po kliknięciu */

	#work-history .timeline-details {
		display: grid;
		grid-template-rows: 0fr;
		visibility: hidden;
		text-align: left;
		transition: grid-template-rows 0.35s ease, visibility 0s linear 0.35s;
	}

	#work-history .timeline-item.is-expanded .timeline-details {
		grid-template-rows: 1fr;
		visibility: visible;
		transition: grid-template-rows 0.35s ease, visibility 0s linear 0s;
	}

	#work-history .timeline-details-inner {
		overflow: hidden;
		min-height: 0;
	}

	#work-history .timeline-details-inner > :first-child {
		margin-top: 1em;
		padding-top: 1em;
		border-top: 1px solid var(--corvus-linia);
	}

	#work-history .timeline-details ul {
		margin: 0;
		padding-left: 1.15em;
		list-style: disc;
		color: var(--corvus-tekst);
		font-size: 0.85em;
		line-height: 1.55;
	}

	#work-history .timeline-details ul ul {
		margin: 0.35em 0 0 0;
		font-size: 1em;
		list-style: circle;
	}

	#work-history .timeline-details li {
		margin: 0 0 0.45em 0;
		padding: 0;
	}

	#work-history .timeline-details li:last-child {
		margin-bottom: 0;
	}

	#work-history .timeline-role + .timeline-role {
		margin-top: 1.25em;
	}

	#work-history .timeline-role h4 {
		margin: 0;
		font-size: 0.85em;
		line-height: 1.4;
	}

	#work-history .timeline-role-date {
		margin: 0.1em 0 0.5em 0;
		font-family: var(--font-mono);
		font-size: 0.7em;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		color: var(--corvus-fiolet);
	}

	/* Szeroki widok: linia na środku, kafelki na przemian lewo/prawo */

	@container (min-width: 640px) {

		#work-history .timeline-wrap:before {
			left: 50%;
		}

		#work-history .timeline-cap,
		#work-history .timeline-cap:last-child {
			margin-left: auto;
			margin-right: auto;
		}

		#work-history .timeline-item {
			width: calc(50% - var(--wh-gap) / 2);
			padding: 0;
			margin-bottom: 2.25em;
		}

		#work-history .timeline-item:nth-child(odd) {
			margin-right: auto;
		}

		#work-history .timeline-item:nth-child(even) {
			margin-left: auto;
		}

		/* „schodki” — każdy kolejny kafelek podciągnięty w górę */
		#work-history .timeline-item + .timeline-item {
			margin-top: -4.5em;
		}

		#work-history .timeline-item:after {
			width: calc(var(--wh-gap) / 2);
		}

		#work-history .timeline-item:nth-child(odd):after {
			left: 100%;
		}

		#work-history .timeline-item:nth-child(odd):before {
			left: calc(100% + var(--wh-gap) / 2 - 6.5px);
		}

		#work-history .timeline-item:nth-child(even):after {
			left: auto;
			right: 100%;
		}

		#work-history .timeline-item:nth-child(even):before {
			left: auto;
			right: calc(100% + var(--wh-gap) / 2 - 6.5px);
		}

	}

	@media (prefers-reduced-motion: reduce) {
		#work-history .timeline-details,
		#work-history .timeline-item.is-expanded .timeline-details,
		#work-history .timeline-toggle .icon {
			transition: none;
		}
	}

/* ===== Umiejętności i narzędzia (dawniej wspólna sekcja Blog, teraz
   dwie osobne sekcje: #skills i #tools) =====
   Odstęp i pozioma linia między nimi to zwykły podział #main > section,
   ten sam co między innymi sekcjami strony — nic dodatkowego nie trzeba
   dorysowywać. Karty narzędzi mają celowo tę samą ramkę co pola formularza
   kontaktowego (border: 1px solid var(--corvus-linia); border-radius: 0.35em)
   — patrz input[type="text"] itd. wyżej w tym pliku. */

	#skills .skills-groups {
		display: grid;
		gap: 2.25em;
		margin: 2em 0 2.75em;
	}

	#skills .skills-group-title {
		font-family: var(--font-mono);
		font-size: 0.72em;
		font-weight: 500;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--corvus-fiolet);
		margin: 0 0 1.1em;
	}

	#skills .skill-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 0.75em;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	#skills .skill-tags li {
		font-family: var(--font-mono);
		font-size: 0.78em;
		line-height: 1.4;
		padding: 0.45em 0.9em;
		border-radius: 999px;
		background: var(--corvus-tlo-subtelne);
		border: 1px solid var(--corvus-linia);
		color: var(--corvus-blekit-ciemny);   /* tekst na jasnym tle */
	}

	/* Flagi przy Językach — SVG zamiast emoji, żeby wyglądały tak samo
	   na każdym systemie/przeglądarce. Cienka ramka daje ostrą krawędź
	   (biały pasek flagi PL inaczej zlewa się z jasnym tłem plakietki). */
	#skills .skill-tags .flag-icon {
		vertical-align: -0.15em;
		margin-right: 0.4em;
		border-radius: 0.2em;
		border: 1px solid rgba(21, 16, 34, 0.12);
	}

	/* Kafelki wielokrotnego użytku — Certyfikaty (#certificates) i
	   Edukacja (#education). Ten sam język wizualny co karty Narzędzi
	   (#tools .tool-card): ramka jak w formularzu kontaktowym, ikona na
	   równi z pierwszą linią tytułu. */
	.grid-cards {
		display: grid;
		gap: 1.25em;
		margin: 2em 0 0;
	}

	.grid-cards-3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.grid-cards-2 {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Karta podzielona na dwie części: logo po lewej (większe, na całą
	   wysokość karty) i tekst po prawej — wyśrodkowany w pionie względem
	   logo, ale w poziomie "przyklejony" do lewej (zaraz obok logo, bez
	   dodatkowego wyśrodkowania w poziomie). */
	.grid-card {
		display: flex;
		align-items: center;
		gap: 1.1em;
		background: var(--corvus-tlo-karty);
		border: 1px solid var(--corvus-linia);
		border-radius: 0.35em;
		padding: 1.1em 1.4em;
		transition: border-color 0.2s ease, box-shadow 0.2s ease;
	}

	.grid-card:hover {
		border-color: var(--corvus-fiolet);
		box-shadow: 0 0.35em 1.25em rgba(0, 0, 0, 0.05);
	}

	.grid-card-icon {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		height: 6.8em;
		width: 6.8em;
		padding: 0 0.5em;
		border-radius: 0.5em;
		background: var(--corvus-tlo-subtelne);
		color: var(--corvus-fiolet);
	}

	/* Prawdziwe loga certyfikatów/uczelni (obrazek zamiast ikony SVG) —
	   x2 względem poprzedniej wersji (4.6em), bo tekst na plakietkach
	   (np. CompTIA, ISO) był nieczytelny przy mniejszym rozmiarze.
	   Szerokość nadal dopasowuje się do proporcji loga: badge/pieczątka
	   zostaje ~kwadratowy, szeroki wordmark (np. Splunk) rozciąga się na
	   boki zamiast kurczyć w kwadratowym polu. */
	.grid-card-icon img {
		width: auto;
		height: auto;
		max-width: 5.8em;
		max-height: 4.6em;
		object-fit: contain;
	}

	/* Wordmark Splunk jest bardzo szeroki i niski (proporcje ok. 3.3:1) —
	   przy dopasowaniu do jednakowej szerokości plakietki wygląda
	   nieproporcjonalnie duży względem kwadratowych logotypów obok. */
	.grid-card-icon img[src*="splunk"] {
		max-width: 4.6em;
	}

	.grid-card-body {
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: left;
		min-width: 0;
	}

	.grid-card-body h3 {
		font-family: var(--font-disp);
		font-size: 1em;
		font-weight: 600;
		line-height: 1.3;
		margin: 0;
		color: var(--corvus-ink);
	}

	.grid-card-meta {
		font-family: var(--font-mono);
		font-size: 0.72em;
		color: var(--corvus-szary);
		margin: 0.3em 0 0;
	}

	/* Edukacja — kierunek studiów na górze kafelka, odstęp, a pod nim
	   reszta informacji (uczelnia/tryb/rok), zamiast wyśrodkowania
	   w pionie jak przy Certyfikatach. */
	#education .grid-card {
		align-items: flex-start;
	}

	#education .grid-card-body h3 {
		margin-bottom: 0.6em;
	}

	@media screen and (max-width: 1280px) {
		.grid-cards-3 {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media screen and (max-width: 736px) {
		.grid-cards-3,
		.grid-cards-2 {
			grid-template-columns: 1fr;
		}
	}

	#tools .tools-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1.25em;
	}

	#tools .tool-card {
		background: var(--corvus-tlo-karty);
		border: 1px solid var(--corvus-linia);
		border-radius: 0.35em;
		padding: 1.25em 1.5em 1.5em;
		transition: border-color 0.2s ease, box-shadow 0.2s ease;
	}

	#tools .tool-card:hover {
		border-color: var(--corvus-fiolet);
		box-shadow: 0 0.35em 1.25em rgba(0, 0, 0, 0.05);
	}

	/* ikona na równi (w jednej linii) z tytułem karty */
	#tools .tool-card-head {
		display: flex;
		align-items: flex-start;
		gap: 0.75em;
		margin: 0 0 1em;
	}

	/* Chip zostaje tej samej wielkości co przy kontakcie (2.4em), ale
	   tytuł karty ma line-height 1.3em — mniej niż chip. Ujemny margines
	   dociąga środek chipa do środka PIERWSZEJ linii tytułu, więc ikona
	   zostaje na jego wysokości również wtedy, gdy tytuł łamie się na
	   dwie linie: (1.3em − 2.4em) / 2. */
	#tools .tool-card-icon {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.4em;
		height: 2.4em;
		margin-top: -0.55em;
		border-radius: 0.5em;
		background: var(--corvus-tlo-subtelne);
		color: var(--corvus-fiolet);
	}

	#tools .tool-card-icon svg {
		width: 1.25em;
		height: 1.25em;
	}

	#tools .tool-card-head h3 {
		font-family: var(--font-disp);
		font-size: 1em;
		font-weight: 600;
		line-height: 1.3;
		margin: 0;
		color: var(--corvus-ink);
	}

	#tools .tool-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 0.4em;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	#tools .tool-tags li {
		font-family: var(--font-mono);
		font-size: 0.72em;
		line-height: 1.5;
		padding: 0.3em 0.65em;
		border-radius: 0.35em;
		background: var(--corvus-tlo-subtelne);
		color: var(--corvus-szary);
		border: 1px solid var(--corvus-linia);
	}

	@media screen and (max-width: 1280px) {
		#tools .tools-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media screen and (max-width: 736px) {
		#skills .skills-groups {
			gap: 1.75em;
		}
		#tools .tools-grid {
			grid-template-columns: 1fr;
		}
	}


/* ===== Formularz kontaktowy — stany i pola pomocnicze ===== */

	/* tekst tylko dla czytników ekranu (etykiety pól, nazwy ikon kontaktu) */
	.sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	/* pułapka na boty — pole niewidoczne dla ludzi */
	.hp-field {
		position: absolute;
		left: -9999px;
		width: 1px;
		height: 1px;
		overflow: hidden;
	}

	#contact-form .actions {
		margin-top: 1.5em;
		margin-bottom: 0.5em;
	}

	#contact-form input[type="submit"]:disabled {
		opacity: 0.6;
		cursor: wait;
	}

	.form-status {
		min-height: 1.5em;
		margin: 0 0 0.5em 0;
		font-weight: 500;
	}

	.form-status.is-ok {
		color: #1a7f4b;
	}

	.form-status.is-error {
		color: #c0262d;
	}

	.form-note {
		font-size: 0.85em;
		color: var(--corvus-szary);
		margin: 0;
	}

	/* klauzula informacyjna RODO — zwinięta pod notką */
	.form-privacy {
		margin: 0.6em 0 0;
		font-size: 0.8em;
		color: var(--corvus-szary);
	}

	.form-privacy summary {
		cursor: pointer;
		color: var(--corvus-niebieski-ciemny);
		width: fit-content;
	}

	.form-privacy summary:focus-visible {
		outline: 2px solid var(--corvus-fiolet);
		outline-offset: 2px;
	}

	.form-privacy p {
		margin: 0.6em 0 0;
		line-height: 1.6;
	}

/* ===== Przełącznik języka (PL / EN) i motywu ===== */

	/* ukryty „magazyn” symboli SVG (flagi) używanych przez <use href="#flag-…"> */
	.svg-sprite {
		position: absolute;
		width: 0;
		height: 0;
		overflow: hidden;
	}

	.lang-switch {
		position: fixed;
		top: 16px;
		right: 16px;
		z-index: 1000;
		display: flex;
		align-items: center;
		gap: 5px;
		font-family: var(--font-mono);
		font-size: 0.7rem;
		background: rgba(249, 250, 251, 0.92);
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
		padding: 1px 6px 1px 9px;
		border-radius: 999px;
		box-shadow: 0 2px 10px rgba(10, 5, 24, 0.12);
	}

	.lang-switch a {
		display: flex;
		align-items: center;
		gap: 5px;
		padding: 2px 2px 3px;
		color: var(--corvus-szary);
		text-decoration: none;
		border: 0;
		border-bottom: 2px solid transparent;
		line-height: 1;
	}

	.lang-switch a:hover {
		color: var(--corvus-ink);
	}

	.lang-switch a[aria-current="page"] {
		color: var(--corvus-ink);
		font-weight: 600;
		border-bottom-color: var(--corvus-fiolet);
	}

	.lang-switch .flag {
		display: block;
		width: 15px;
		height: 10px;
		border-radius: 2px;
		flex: none;
		box-shadow: 0 0 0 1px rgba(10, 5, 24, 0.16);
	}

	.lang-switch-sep {
		color: var(--corvus-linia);
	}

	@media screen and (max-width: 480px) {
		.lang-switch {
			top: 10px;
			right: 10px;
			padding: 1px 5px 1px 7px;
			font-size: 0.64rem;
		}
		.lang-switch .flag {
			width: 14px;
			height: 9px;
		}
	}


/* ===== Motyw ciemny =====
   Włączany atrybutem data-theme="dark" na <html>. Ustawia go skrypt
   w <head> (zanim strona się narysuje, więc bez mignięcia jasnego tła):
   najpierw wybór zapisany przełącznikiem, a jeśli go nie ma — ustawienie
   systemu odwiedzającego (prefers-color-scheme). Kolory wyłącznie
   z brandbooka: tło #0A0518, tekst #F9FAFB, akcenty fiolet jasny
   #B076EC / błękit #40A6F2 / niebieski #2E7DE0 (oficjalne kombinacje
   na ciemnym tle). Fiolet bazowy #7005DC zostaje tylko jako wypełnienie
   (przycisk „Wyślij”, znaczniki) — nigdy jako kolor tekstu na ciemnym. */

	:root[data-theme="dark"] {
		color-scheme: dark;

		/* neutralne pomocnicze — wersje na ciemne tło */
		--corvus-ink: #EEEAFB;
		--corvus-szary: #9A8CC4;
		--corvus-linia: #2A2147;
		--corvus-tlo-karty: #120A2A;
		--corvus-tlo-subtelne: #1A1138;
		--corvus-tekst: #C9C4DE;
		--corvus-fiolet-jasny-hover: #C89BF2;
	}

	/* Podstawy */

	:root[data-theme="dark"] body {
		background: var(--corvus-ciemny);
	}

	:root[data-theme="dark"] strong,
	:root[data-theme="dark"] b,
	:root[data-theme="dark"] h1,
	:root[data-theme="dark"] h2,
	:root[data-theme="dark"] h3,
	:root[data-theme="dark"] h4,
	:root[data-theme="dark"] h5,
	:root[data-theme="dark"] h6 {
		color: var(--corvus-jasny);
	}

	:root[data-theme="dark"] #main h2 {
		color: var(--corvus-fiolet-jasny);
	}

	:root[data-theme="dark"] #main header.major h2 {
		color: var(--corvus-jasny);
	}

	:root[data-theme="dark"] a {
		color: var(--corvus-blekit);
		border-bottom-color: rgba(64, 166, 242, 0.35);
	}

	:root[data-theme="dark"] a:hover {
		color: var(--corvus-fiolet-jasny) !important;
		border-bottom-color: var(--corvus-fiolet-jasny);
	}

	/* Lewa kolumna — już ciemna; cienka linia oddziela ją od ciemnej treści */
	:root[data-theme="dark"] #header {
		box-shadow: inset -1px 0 0 var(--corvus-linia);
	}

	/* Stopka */
	:root[data-theme="dark"] #footer .copyright li a {
		border-bottom-color: rgba(238, 234, 251, 0.2);
	}

	:root[data-theme="dark"] #footer .copyright li a:hover {
		color: var(--corvus-fiolet-jasny) !important;
	}

	/* Formularz */
	:root[data-theme="dark"] input[type="text"]:focus,
	:root[data-theme="dark"] input[type="email"]:focus,
	:root[data-theme="dark"] textarea:focus {
		border-color: var(--corvus-fiolet-jasny);
		box-shadow: 0 0 0 3px rgba(176, 118, 236, 0.18);
	}

	:root[data-theme="dark"] .form-status.is-ok { color: #5FD699; }
	:root[data-theme="dark"] .form-status.is-error { color: #FF8A8F; }

	:root[data-theme="dark"] .form-privacy summary {
		color: var(--corvus-blekit);
	}

	/* Kontakt — ikony: fiolet jasny na ciemnym (oficjalna kombinacja) */
	:root[data-theme="dark"] ul.labeled-icons .ci {
		color: var(--corvus-fiolet-jasny);
	}

	:root[data-theme="dark"] ul.labeled-icons li:hover .ci {
		color: #fff;
	}

	:root[data-theme="dark"] ul.labeled-icons li a:hover {
		color: var(--corvus-fiolet-jasny) !important;
	}

	:root[data-theme="dark"] ul.labeled-icons .contact-reveal__btn {
		background: rgba(10, 5, 24, 0.35);
		color: var(--corvus-fiolet-jasny);
	}

	:root[data-theme="dark"] ul.labeled-icons .contact-reveal__btn:hover {
		background: rgba(176, 118, 236, 0.12);
		color: var(--corvus-fiolet-jasny-hover);
	}

	:root[data-theme="dark"] ul.labeled-icons .contact-reveal__btn:focus-visible {
		outline-color: var(--corvus-fiolet-jasny);
	}

	/* Work History */
	:root[data-theme="dark"] #work-history {
		--wh-line: #3D3063;
	}

	:root[data-theme="dark"] #work-history .timeline-cap:last-child {
		background: var(--corvus-tlo-karty);
	}

	:root[data-theme="dark"] #work-history .timeline-item:before {
		background: var(--corvus-ciemny);
	}

	:root[data-theme="dark"] #work-history .timeline-item.is-expanded:before,
	:root[data-theme="dark"] #work-history .timeline-item:first-child:before {
		border-color: var(--corvus-fiolet-jasny);
	}

	:root[data-theme="dark"] #work-history .timeline-item.is-expanded:before {
		background: var(--corvus-fiolet-jasny);
	}

	:root[data-theme="dark"] #work-history .timeline-item.is-expanded .timeline-card,
	:root[data-theme="dark"] .grid-card:hover,
	:root[data-theme="dark"] #tools .tool-card:hover {
		border-color: var(--corvus-fiolet-jasny);
		box-shadow: 0 0.35em 1.25em rgba(0, 0, 0, 0.45);
	}

	:root[data-theme="dark"] #work-history .timeline-date {
		color: var(--corvus-blekit);
	}

	:root[data-theme="dark"] #work-history .timeline-toggle,
	:root[data-theme="dark"] #work-history .timeline-role-date {
		color: var(--corvus-fiolet-jasny);
	}

	:root[data-theme="dark"] #work-history .timeline-toggle:hover {
		color: var(--corvus-fiolet-jasny-hover);
	}

	:root[data-theme="dark"] #work-history .timeline-toggle:focus-visible {
		outline-color: var(--corvus-fiolet-jasny);
	}

	/* Umiejętności, narzędzia, certyfikaty, edukacja */
	:root[data-theme="dark"] #skills .skills-group-title,
	:root[data-theme="dark"] .grid-card-icon,
	:root[data-theme="dark"] #tools .tool-card-icon {
		color: var(--corvus-fiolet-jasny);
	}

	:root[data-theme="dark"] #skills .skill-tags li {
		color: var(--corvus-blekit);
	}

	:root[data-theme="dark"] #skills .skill-tags .flag-icon {
		border-color: rgba(238, 234, 251, 0.2);
	}

	/* Loga certyfikatów/uczelni mają białe tło — zostają na jasnej
	   plakietce, żeby nie wyglądały jak wycięte prostokąty. */
	:root[data-theme="dark"] .grid-card-icon:has(img) {
		background: var(--corvus-jasny);
	}

	/* Przełącznik języka i motywu */
	:root[data-theme="dark"] .lang-switch {
		background: rgba(21, 12, 56, 0.9);
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), inset 0 0 0 1px var(--corvus-linia);
	}

	:root[data-theme="dark"] .lang-switch a {
		color: var(--corvus-szary);
		border-bottom-color: transparent;
	}

	:root[data-theme="dark"] .lang-switch a:hover {
		color: var(--corvus-ink) !important;
	}

	:root[data-theme="dark"] .lang-switch a[aria-current="page"] {
		color: var(--corvus-ink);
		border-bottom-color: var(--corvus-fiolet-jasny);
	}

	:root[data-theme="dark"] .lang-switch .flag {
		box-shadow: 0 0 0 1px rgba(238, 234, 251, 0.25);
	}

	/* Przycisk przełączania motywu (w pigułce języka) */
	.theme-toggle {
		all: unset;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 24px;            /* min. pole kliknięcia wg WCAG 2.2 (2.5.8) */
		height: 24px;
		border-radius: 50%;
		color: var(--corvus-szary);
		cursor: pointer;
		transition: color 0.2s ease, background-color 0.2s ease;
	}

	.theme-toggle:hover {
		color: var(--corvus-ink);
		background: var(--corvus-tlo-subtelne);
	}

	.theme-toggle:focus-visible {
		outline: 2px solid var(--corvus-blekit);
		outline-offset: 2px;
	}

	.theme-toggle svg {
		width: 13px;
		height: 13px;
	}

	/* w trybie jasnym widać księżyc (przejdź na ciemny), w ciemnym — słońce */
	.theme-toggle .ti-sun,
	:root[data-theme="dark"] .theme-toggle .ti-moon {
		display: none;
	}

	:root[data-theme="dark"] .theme-toggle .ti-sun {
		display: block;
	}


/* ===== Strona z komunikatem formularza (kontakt.php bez JavaScriptu) ===== */

	.form-result {
		max-width: 36em;
		margin: 15vh auto;
		padding: 0 1.5em;
		font-family: var(--font-body);
		color: var(--corvus-tekst);
	}

	.form-result h1 {
		font-size: 1.6em;
		margin: 0 0 0.75em;
	}