/*
 * Course grid - karta kurzu grid-2 (override)
 *
 * LearnDash nacte TENHLE soubor misto sveho - Utilities::get_card_style()
 * hleda style.css na stejne ceste jako sablonu karty. Proto je tu jak zaklad
 * prevzaty z originalu, tak nase upravy.
 *
 * Original: sfwd-lms/includes/course-grid/templates/cards/grid-2/style.css (LD 5.1.8)
 * Vypustena pravidla pro .ribbon a .thumbnail .arrow - sablona je uz nevykresluje.
 *
 * Pri aktualizaci LearnDash porovnej original s timto souborem.
 */

/* --- Zaklad prevzaty z originalu --------------------------------------- */

.learndash-course-grid .items-wrapper .grid-2 .post {
	line-height: 1.428571429;
	background-color: #ffffff;
	border: 1px solid #dddddd;
	border-radius: 4px;
	transition: all 0.2s ease-in-out;
	display: block;
	max-width: 100%;
	position: relative;
	padding: 0;
	margin: 0;
	box-shadow: 2px 2px 2px 1px rgb(0 0 0 / 5%);
}

.learndash-course-grid .items-wrapper .grid-2 .content {
	padding: 30px 22px;
	color: #333333;
}

.learndash-course-grid .items-wrapper .grid-2 .content > *:not(:last-child) {
	margin-bottom: 20px;
}

.learndash-course-grid .items-wrapper .grid-2 .content .entry-title,
.learndash-course-grid .items-wrapper .grid-2 .content .entry-title a {
	font-size: 1.2rem;
	font-weight: bold;
	line-height: 1.2;
	color: #333;
}

.learndash-course-grid .items-wrapper .grid-2 .content .entry-title a {
	text-decoration: none;
}

.learndash-course-grid .items-wrapper .grid-2 .content .button {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 5px;
	width: 100%;
}

.learndash-course-grid .items-wrapper .grid-2 .content .button a {
	color: #ffffff;
	font-weight: bold;
	text-decoration: none;
	transition: all 0.3s ease;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	background-color: #143f5e;
	border-color: #143f5e;
	border-radius: 5px;
	font-size: 1rem;
	padding: 12px 0;
}

.learndash-course-grid .items-wrapper .grid-2 .content .button a:hover {
	background: #29648f;
	border-color: #29648f;
}

/* --- Nase upravy -------------------------------------------------------- */

/* Roztazeny odkaz: klikatelna je cela karta, ale v DOM je odkaz jen na nadpisu,
   takze ctecka precte nazev kurzu a ne obsah cele karty. */
.pz-card__inner {
	position: relative;
}

.pz-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Focus musi byt videt na cele karte, ne jen na textu nadpisu. */
.pz-card__inner:focus-within {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.pz-card__link:focus {
	outline: none;
}

/* Obrazek ma vzdy stejny pomer stran bez ohledu na to, co klientka nahraje.
   <figure> ma v prohlizecich vlastni margin - proto ho nulujeme.
   Pomer se meni na jednom miste, promennou --pz-card-ratio. */
.pz-card {
	--pz-card-ratio: 16/9;
}

/* Selektory schvalne se zvysenou specificitou: Kadence ma ".single-content figure"
   s margin-bottom (0,1,1) a na obrazky tlaci height:auto - holy .pz-card__media
   (0,1,0) by prohral. ".pz-card figure.pz-card__media" je 0,2,1 a vyhraje
   bez !important. */
.pz-card figure.pz-card__media {
	/* Obal karty je flex kontejner - bez flex:0 0 auto by se figure jako flex
	   polozka smrskla, protoze grid_height_equal fixuje vysku karty. Pak by
	   aspect-ratio neplatilo a obrazek by byl nizsi, nez ma byt. */
	flex: 0 0 auto;
	display: block;
	margin: 0;
	padding: 0;
	position: relative;
	aspect-ratio: var(--pz-card-ratio);
	overflow: hidden;
}

.pz-card figure.pz-card__media img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: center;
	margin: 0;
	border-radius: 0;
}

.pz-card__video,
.pz-card__video iframe,
.pz-card__video video {
	display: block;
	width: 100%;
	height: 100%;
}

@supports not (aspect-ratio: 16/9) {
	.pz-card figure.pz-card__media {
		height: 0;
		padding-top: 56.25%;
	}

	.pz-card figure.pz-card__media img {
		position: absolute;
		inset: 0;
	}
}

/* Progress a tlacitko v jednom obalu.
   Blok ma zapnute grid_height_equal a LearnDash k nemu generuje pravidlo
   "#ld-cg-... .content > *:last-child { margin-top: auto }". Diky tomuto obalu
   je poslednim potomkem on, odsune se cely a progress zustane tesne nad
   tlacitkem - nemusime nic prebijet pres !important. */
.pz-card__foot {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pz-card__progress {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.pz-card__track {
	flex: 1 1 auto;
	height: 3px;
	border-radius: 2px;
	background: rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

/* Sirka vyplne prichazi ze sablony jako promenna --pz-progress - je to jedina
   hodnota, ktera se lisi kurz od kurzu, takze do stylesheetu patrit nemuze. */
.pz-card__fill {
	display: block;
	width: var(--pz-progress, 0%);
	height: 100%;
	background: currentColor;
}

.pz-card__steps {
	flex: 0 0 auto;
	font-size: 0.8em;
	opacity: 0.6;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Radek s datem pristupu vykresluje pz_mend_grid_badge() (snippet 17). */
.pz-card .pz-cg-access {
	margin: 0;
}