/* =============================================================
   PORTFOLIO — siatka realizacji (.mbw-portfolio / .mbw-grid / .mbw-card)
   + filtr (.mbw-filter) w stylu breadcrumb + opis „z kreskami" pod tytułem.
   Render: page-portfolio.php. JS filtra: assets/js/mbw-portfolio.js.
   Tokeny/kolory z theme.json. Hover = mikroanimacja BEZ nakładki.
   ============================================================= */
:root {
	--mbw-pf-gap:        2rem;     /* odstęp w siatce */
	--mbw-pf-radius:     10px;     /* zaokrąglenie miniatur */
	--mbw-pf-ratio:      16 / 9;   /* proporcja miniatury — 16:9 pod panoramiczne zrzuty stron/sklepów
	                                  (okładki mają realnie ~1.78–2.0; 3:2=1.5 przycinało je po bokach) */
	--mbw-pf-cols:       2;        /* kolumny desktop — 2 w rzędzie = większe karty, mniej przycięcia */
}

/* Filtr + siatka zostają w kontenerze (układ z marginesem, jak nagłówek).
   .mbw-portfolio__wide = grupa bez własnej szerokości (decyzja Olgi: bez full-width). */

/* ---------- OPIS „Z KRESKAMI" pod tytułem (lead na portfolio) ----------
   Każdy akapit leada = callout z pionową kreską z lewej (wzór hp4u).
   Treść: pole ACF „Opis nagłówka" strony — oddzielaj akapity pustą linią. */
.mbw-portfolio .mbw-page__lead {
	max-width: 60ch;
}
.mbw-portfolio .mbw-page__lead > p {
	border-left: 4px solid var(--wp--preset--color--theme-palette-6, #2980b9);
	padding-left: 1rem;
	margin: 0 0 0.9rem;
}

/* ---------- FILTR (styl breadcrumb: mbw-desc + pionowe kreski) ---------- */
.mbw-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1em;
	margin: 2.5rem 0 2rem;
}
/* Tekst filtra GRAFITOWY (pobija domyślny niebieski z .mbw-desc). */
.mbw-filter.mbw-desc {
	color: var(--wp--preset--color--theme-palette-3, #262626) !important;
}
.mbw-filter__btn {
	position: relative;
	background: none;
	border: 0;
	padding: 0 0 4px;
	margin: 0;
	font: inherit;                 /* dziedziczy mbw-desc (Jost UPPERCASE) */
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;                /* grafit z .mbw-filter; tekst NIE zmienia się na hover/aktywnym */
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}
/* Kadence dokłada przyciskom tło/box-shadow na hover/focus — kasujemy je
   we WSZYSTKICH stanach. Zostaje wyłącznie gruba kreska (::after), jak w menu. */
.mbw-filter__btn,
.mbw-filter__btn:hover,
.mbw-filter__btn:focus,
.mbw-filter__btn:focus-visible,
.mbw-filter__btn:active {
	background: transparent !important;
	box-shadow: none !important;
	color: var(--wp--preset--color--theme-palette-3, #262626) !important;  /* grafit ZAWSZE (Kadence dawał biały na hover) */
	outline: none;
}
/* gruba kreska wjeżdżająca L→R (jak w menu) — na hover i aktywnym */
.mbw-filter__btn::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: var(--mbw-nav-line, 4px);
	background: var(--wp--preset--color--theme-palette-6, #2980b9);  /* podkreślenie NIEBIESKIE (tekst zostaje grafit) */
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .25s ease;
}
/* hover / aktywny = TYLKO gruba kreska wjeżdża; tekst bez zmian (zawsze niebieski) */
.mbw-filter__btn:hover::after,
.mbw-filter__btn:focus-visible::after,
.mbw-filter__btn.is-active::after {
	transform: scaleX(1);
}
/* separator = gruba pionowa kreska (jak w breadcrumbie) */
.mbw-filter__sep {
	flex: 0 0 auto;
	width: var(--mbw-nav-line, 4px);
	height: 0.9em;
	background: currentColor;
	opacity: 0.55;
}

/* ---------- SIATKA ---------- */
.mbw-portfolio__grid {
	display: grid;
	grid-template-columns: repeat(var(--mbw-pf-cols), minmax(0, 1fr));
	gap: var(--mbw-pf-gap);
}
.mbw-card { margin: 0; }
.mbw-card[hidden] { display: none; }   /* ukryte przez filtr */

/* link karty = cały kafelek; bez podkreśleń */
.mbw-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

/* miniatura — kontener z overflow hidden (do zoomu), stała proporcja */
.mbw-card__media {
	display: block;
	overflow: hidden;
	border-radius: var(--mbw-pf-radius);
	aspect-ratio: var(--mbw-pf-ratio);
	background: #ece7e1;          /* tło zanim obraz dojdzie */
}
.mbw-card__img,
.mbw-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;     /* kadr od GÓRY — pokazuje nagłówek strony, nie środek */
	display: block;
	transition: transform .45s cubic-bezier(.2,.6,.2,1);
}

/* BRANDINGI (identyfikacje): logo jest wyśrodkowane w grafice okładki, więc kadr od GÓRY
   spychał je w dół / ucinał („logo obniżone”). Dla kart z terminem `branding` kadrujemy
   od ŚRODKA. Trafia tylko w brandingi (strony/sklepy nie mają slug `branding`). */
.mbw-card[data-category~="branding"] .mbw-card__img,
.mbw-card[data-category~="branding"] .mbw-card__media img {
	object-position: center;
}

/* treść pod miniaturą */
.mbw-card__body {
	display: block;
	padding: 0.9rem 0 0;
}
.mbw-card__cat {
	display: block;
	font-family: var(--wp--preset--font-family--jost, system-ui, sans-serif);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--wp--preset--color--theme-palette-6, #2980b9);
	margin-bottom: 0.35rem;
}
.mbw-card__title {
	display: block;
	font-family: var(--wp--preset--font-family--playfair, Georgia, serif);
	font-size: 1.375rem;
	line-height: 1.25;
	color: var(--wp--preset--color--theme-palette-3, #262626);
	transition: color .15s ease;
}
/* Data wykonania pod tytułem — mała, dyskretna etykieta (Jost). */
.mbw-card__date {
	display: block;
	margin-top: 0.4rem;
	font-family: var(--wp--preset--font-family--jost, system-ui, sans-serif);
	font-size: 0.8125rem;
	color: var(--wp--preset--color--theme-palette-4, #777);
}

/* ---------- HOVER: mikroanimacja BEZ nakładki ----------
   miniatura lekko się przybliża, karta unosi się z miękkim cieniem,
   tytuł zmienia kolor na niebieski. Żadnego niebieskiego overlaya. */
.mbw-card__link:hover .mbw-card__img,
.mbw-card__link:focus-visible .mbw-card__img {
	transform: scale(1.05);
}
.mbw-card__link:hover .mbw-card__media,
.mbw-card__link:focus-visible .mbw-card__media {
	box-shadow: 0 14px 30px -12px rgba(38, 38, 38, 0.35);
}
.mbw-card__link:hover .mbw-card__title,
.mbw-card__link:focus-visible .mbw-card__title {
	color: var(--wp--preset--color--theme-palette-6, #2980b9);
}

/* ---------- RESPONSYWNOŚĆ ---------- */
@media (max-width: 900px) {
	.mbw-portfolio__grid { --mbw-pf-cols: 2; gap: 1.5rem; }
}
@media (max-width: 600px) {
	.mbw-portfolio__grid { --mbw-pf-cols: 1; }
	.mbw-filter { gap: 0.7em; }
}

/* Bez animacji dla osób, które tego nie chcą (a11y). */
@media (prefers-reduced-motion: reduce) {
	.mbw-card__img,
	.mbw-card__title,
	.mbw-filter__btn::after { transition: none; }
}