/* WP Base Upsell – frontend dlaždice.
   Vše scoped pod .wpbu-tile, žádné globální styly na li.product.
   Sloupcové rozměry dědí dlaždice z tříd produktu (PHP) nebo naklonovaných tříd (JS). */

.wpbu-tile {
	list-style: none;
	box-sizing: border-box;
}
.wpbu-tile::marker { content: ""; }

/* Klikací obal */
.wpbu-tile .wpbu-tile__link {
	position: relative;
	display: block;
	height: 100%;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
}

/* Obrázek */
.wpbu-tile .wpbu-tile__media,
.wpbu-tile .wpbu-tile__picture {
	display: block;
	height: 100%;
}
.wpbu-tile .wpbu-tile__media img,
.wpbu-tile .wpbu-tile__picture img,
.wpbu-tile img.wpbu-tile__img,
.wpbu-tile .wpbu-tile__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}
.wpbu-tile .wpbu-tile__video { background: #000; pointer-events: none; }
.wpbu-tile .wpbu-tile__bg { display: block; width: 100%; height: 100%; min-height: 220px; }

/* Overlay (text/tlačítko přes obrázek) */
.wpbu-tile .wpbu-tile__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	padding: clamp(12px, 6%, 28px);
	box-sizing: border-box;
}
.wpbu-tile .wpbu-tile__overlay-inner {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 100%;
}
.wpbu-tile .wpbu-tile__heading {
	margin: 0;
	font-size: clamp(1.1rem, 0.9rem + 1.2vw, 1.9rem);
	font-weight: 700;
	line-height: 1.15;
}
.wpbu-tile .wpbu-tile__sub {
	margin: 0;
	font-size: clamp(0.85rem, 0.8rem + 0.3vw, 1.05rem);
	line-height: 1.4;
}
.wpbu-tile .wpbu-tile__btn {
	display: inline-block;
	margin-top: 4px;
	padding: 0.6em 1.25em;
	border-radius: 4px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	transition: opacity 0.15s ease;
}
.wpbu-tile .wpbu-tile__link:hover .wpbu-tile__btn { opacity: 0.9; }

/* Statická (neklikací) varianta */
.wpbu-tile .wpbu-tile__link--static { cursor: default; }

/* Šířka přes více sloupců.
   Grid je přesný; flex/float dostane přibližný fallback přes --wpbu-col-w. */
.wpbu-tile.wpbu-w-row {
	grid-column: 1 / -1;
	width: 100%;
	max-width: 100%;
	flex-basis: 100%;
	float: none;
	clear: both;
}
.wpbu-tile.wpbu-w-two {
	grid-column: span 2;
	flex-basis: calc(var(--wpbu-col-w, 50%) * 2);
}

/* Produktová dlaždice se stylem nedotýkáme – renderuje ji šablona. */
.wpbu-tile--product { display: block; }

/* Výška „jen jako fotka produktu" – v CSS grid/flex se buňka jinak natáhne na celou řadu. */
.wpbu-tile.wpbu-fit-image { align-self: start; }

/* Vlastní pevná výška dlaždice (grid) – nezávislá na výšce produktů
   (sjednotí banner i v gridu, který se výškou neřídí podle WooCommerce, např. vlastní filtr). */
.wpbu-tile.wpbu-gh { align-self: start; }
.wpbu-tile.wpbu-gh .wpbu-tile__link,
.wpbu-tile.wpbu-gh .wpbu-tile__media,
.wpbu-tile.wpbu-gh .wpbu-tile__picture { height: var(--wpbu-gh); }

/* Zaoblené rohy fotky banneru (grid + nad výpisem / na produktu / v košíku).
   POZN.: hlavní mechanismus je INLINE styl zapečený v HTML (render_promo_inner) –
   funguje i bez CSS proměnné, nezávisle na pořadí stylů / mobilním CSS bundlu (iOS).
   Tato pravidla jsou jen záloha – BEZ !important, aby inline styl měl přednost.
   Radius dáváme i na médium (img/video/pozadí); translateZ(0) vynutí ořez na iOS. */
.wpbu-tile.wpbu-rounded .wpbu-tile__link,
.wpbu-tile.wpbu-rounded .wpbu-tile__media,
.wpbu-tile.wpbu-rounded .wpbu-tile__picture,
.wpbu-tile.wpbu-rounded .wpbu-tile__media img,
.wpbu-tile.wpbu-rounded .wpbu-tile__picture img,
.wpbu-tile.wpbu-rounded img.wpbu-tile__img,
.wpbu-tile.wpbu-rounded .wpbu-tile__video,
.wpbu-tile.wpbu-rounded .wpbu-tile__bg { border-radius: var(--wpbu-r, 0); }
.wpbu-tile.wpbu-rounded .wpbu-tile__link { overflow: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); }

.wpbu-abanner.wpbu-rounded,
.wpbu-abanner.wpbu-rounded .wpbu-tile__media,
.wpbu-abanner.wpbu-rounded .wpbu-tile__picture,
.wpbu-abanner.wpbu-rounded .wpbu-tile__media img,
.wpbu-abanner.wpbu-rounded .wpbu-tile__picture img,
.wpbu-abanner.wpbu-rounded img.wpbu-tile__img,
.wpbu-abanner.wpbu-rounded .wpbu-tile__video,
.wpbu-abanner.wpbu-rounded .wpbu-tile__bg { border-radius: var(--wpbu-r, 0); }
.wpbu-abanner.wpbu-rounded { overflow: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); }

/* =====================================================================
 * Hover efekty (wpbu-fx-*) – fungují i bez overlay textu.
 * ===================================================================== */
.wpbu-tile[class*="wpbu-fx-"] .wpbu-tile__media { position: relative; overflow: hidden; }
.wpbu-tile[class*="wpbu-fx-"] .wpbu-tile__img { transition: transform .5s ease, filter .45s ease; }

/* Přiblížení */
.wpbu-tile.wpbu-fx-zoom:hover .wpbu-tile__img { transform: scale(1.08); }

/* Ztmavení */
.wpbu-tile.wpbu-fx-darken:hover .wpbu-tile__img { filter: brightness(.66); }

/* Nadzvednutí + stín */
.wpbu-tile.wpbu-fx-lift { transition: transform .25s ease, box-shadow .25s ease; }
.wpbu-tile.wpbu-fx-lift:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(15, 23, 42, .22); z-index: 2; }

/* Z černobílé do barvy */
.wpbu-tile.wpbu-fx-grayscale .wpbu-tile__img { filter: grayscale(1); }
.wpbu-tile.wpbu-fx-grayscale:hover .wpbu-tile__img { filter: grayscale(0); }

/* Lesk – přejezd světla */
.wpbu-tile.wpbu-fx-shine .wpbu-tile__media::after {
	content: ""; position: absolute; top: 0; left: -90%; width: 60%; height: 100%;
	background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .45) 50%, transparent 100%);
	transform: skewX(-20deg); pointer-events: none; transition: left .65s ease;
}
.wpbu-tile.wpbu-fx-shine:hover .wpbu-tile__media::after { left: 130%; }
.wpbu-tile.wpbu-fx-shine:hover .wpbu-tile__img { transform: scale(1.04); }

/* Odhalení textu – zoom + overlay se objeví */
.wpbu-tile.wpbu-fx-reveal:hover .wpbu-tile__img { transform: scale(1.06); }
.wpbu-tile.wpbu-fx-reveal .wpbu-tile__overlay { opacity: 0; transition: opacity .4s ease; }
.wpbu-tile.wpbu-fx-reveal:hover .wpbu-tile__overlay { opacity: 1; }

/* =====================================================================
 * „Wide" banner nad / pod výpisem produktů.
 * ===================================================================== */
.wpbu-abanner { position: relative; display: block; width: var(--wpbu-ab-w, 100%); max-width: 100%; overflow: hidden; height: var(--wpbu-ab-h, 200px); min-height: 60px; }
.wpbu-abanner[data-wpbu-pos="above"] { margin: 0 auto var(--wpbu-ab-gap, 24px); }
.wpbu-abanner[data-wpbu-pos="below"] { margin: var(--wpbu-ab-gap, 24px) auto 0; }
.wpbu-abanner[data-wpbu-pos="none"] { margin-left: auto; margin-right: auto; }
.wpbu-abanner .wpbu-tile__heading { font-size: clamp(1.4rem, 1rem + 2.4vw, 3rem); }
.wpbu-abanner .wpbu-tile__sub { font-size: clamp(0.95rem, 0.85rem + 0.6vw, 1.3rem); }
.wpbu-abanner .wpbu-tile__btn { font-size: clamp(0.9rem, 0.85rem + 0.3vw, 1.05rem); }

/* Režim „Celý obrázek" – výška podle obrázku (responsivní, nikdy neořezává okraje). */
.wpbu-abanner.wpbu-ab-contain { height: auto; min-height: 0; }
.wpbu-abanner.wpbu-ab-contain .wpbu-tile__link,
.wpbu-abanner.wpbu-ab-contain .wpbu-tile__media,
.wpbu-abanner.wpbu-ab-contain .wpbu-tile__picture { height: auto; }
.wpbu-abanner.wpbu-ab-contain .wpbu-tile__media img,
.wpbu-abanner.wpbu-ab-contain .wpbu-tile__picture img,
.wpbu-abanner.wpbu-ab-contain img.wpbu-tile__img,
.wpbu-abanner.wpbu-ab-contain .wpbu-tile__video { height: auto; object-fit: contain; }

@media (max-width: 768px) {
	.wpbu-abanner { height: auto; aspect-ratio: 16 / 8; }
	.wpbu-abanner.wpbu-ab-contain { aspect-ratio: auto; }
}