/**
 * Otthon Íze — bejegyzés- / receptkártya (template-parts/card-post.php).
 *
 * Az élő oldal cikk-kártyáit követi: kép, alján középen fehér, felfelé
 * mutató jelölő-háromszög; alatta középre zárt kategória (uppercase
 * Montserrat), Sanchez cím, Lora kivonat, és egy 2px blush vonal fölött
 * „Elolvasom” + elkészítési idő. A recept-rács, a gyűjtemény és a
 * „A hónap receptje” blokk használja.
 */

/* Rács a kártyáknak (recept-rács, gyűjtemény) */
.otthonizei-card-grid {
	display: grid;
	grid-template-columns: repeat(var(--otthonizei-cols, 4), minmax(0, 1fr));
	gap: calc(var(--wp--preset--spacing--50) + 5px) calc(var(--wp--preset--spacing--40) + 5px);
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	list-style: none;
}

.otthonizei-card-grid > li {
	display: flex;
	margin: 0;
}

@media (max-width: 1099px) {
	.otthonizei-card-grid {
		grid-template-columns: repeat(min(var(--otthonizei-cols, 4), 2), minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.otthonizei-card-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Kártya: fehér doboz lágy árnyékkal (mint a fejléc sávja) */
.otthonizei-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	background-color: var(--wp--preset--color--base);
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.1);
	text-align: center;
}

.otthonizei-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background-color: var(--wp--preset--color--base-2);
}

/* A brand jelölője: fehér háromszög a kép alján, a szöveg felé mutat */
.otthonizei-card__media::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: calc(50% - 7px);
	z-index: 1;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 7px 10px 7px;
	border-color: transparent transparent var(--wp--preset--color--base) transparent;
}

.otthonizei-card .otthonizei-card__image {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.otthonizei-card:hover .otthonizei-card__image {
	transform: scale(1.04);
}

.otthonizei-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) 0.35rem;
}

.otthonizei-card__category {
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--contrast-2);
	font-family: var(--wp--preset--font-family--meta);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 500;
	letter-spacing: 1px;
	line-height: 1.6;
	text-transform: uppercase;
}

.otthonizei-card__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	line-height: 1.3;
}

.otthonizei-card__title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

/* Az egész kártya kattintható */
.otthonizei-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.otthonizei-card:hover .otthonizei-card__title a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.otthonizei-card:has(a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 4px;
}

.otthonizei-card__title a:focus-visible {
	outline: none;
}

.otthonizei-card__excerpt {
	margin: 0.75rem 0 0;
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

.otthonizei-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: auto;
	padding-block: 10px;
	border-top: 2px solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--meta);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 500;
	letter-spacing: 1px;
	line-height: 1.6;
	text-transform: uppercase;
}

/* A meta-sor a kivonat / cím után legalább ennyivel lejjebb kezdődjön */
.otthonizei-card__body > :nth-last-child(2) {
	margin-bottom: var(--wp--preset--spacing--30);
}

.otthonizei-card__time {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-left: auto;
	color: var(--wp--preset--color--contrast-2);
}

/* Csak az „Elolvasom” van: középre */
.otthonizei-card__meta:not(:has(.otthonizei-card__time)) {
	justify-content: center;
}

/* Típusjelölő a kép bal felső sarkában (vegyes rácsokban: Recept / A kamrából) */
.otthonizei-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.45em 0.8em;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--meta);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 600;
	letter-spacing: 1px;
	line-height: 1.3;
	text-transform: uppercase;
}

.otthonizei-card__badge--product {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* Ha akciós is, az „Akció!” a jobb felső sarokba kerül */
.otthonizei-card--product .otthonizei-card__badge ~ .onsale,
.otthonizei-card--product .onsale:has(~ .otthonizei-card__badge) {
	right: 12px;
	left: auto;
}

/* ---- Termékkártya (template-parts/card-product.php) ---- */
.otthonizei-card--product .onsale {
	position: absolute;
	z-index: 1;
}

.otthonizei-card--product .otthonizei-card__meta {
	flex-wrap: wrap;
}

.otthonizei-card__price {
	text-align: left;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: none;
}

.otthonizei-card__price ins {
	text-decoration: none;
}

.otthonizei-card__cart {
	position: relative;
	z-index: 3;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem;
	margin-left: auto;
}

/* Kosárba: uppercase link-szerű CTA, mint a termékrácsban */
.woocommerce .otthonizei-card__cart .button,
.otthonizei-card__cart .button {
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--meta);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 500;
	letter-spacing: 1px;
	line-height: 1.6;
	text-transform: uppercase;
}

.woocommerce .otthonizei-card__cart .button:hover,
.otthonizei-card__cart .button:hover {
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--dark);
	text-decoration: underline;
}

.otthonizei-card__cart .button.loading {
	opacity: 0.5;
}

.woocommerce .otthonizei-card__cart .button.loading::after {
	display: none;
}

.otthonizei-card__cart .button.added {
	display: none;
}

.otthonizei-card__cart .added_to_cart {
	color: var(--wp--preset--color--contrast);
}

/* Kiemelt termékkártya (card-product.php, highlight arg): blush alap, nagyobb ár, keretes
   kosárba gomb — első ránézésre más, mint a receptkártya. Receptoldal alsó ajánlója,
   Termékválogatás blokk (pl. „A kamra kedvencei”). */
.otthonizei-card--highlight {
	background-color: var(--wp--preset--color--accent);
}

.otthonizei-card--highlight .otthonizei-card__media::after {
	border-bottom-color: var(--wp--preset--color--accent);
}

.otthonizei-card--highlight .otthonizei-card__meta {
	flex-direction: column;
	align-items: stretch;
	gap: 0.6rem;
	padding-bottom: var(--wp--preset--spacing--30);
	border-top-color: rgba(0, 0, 0, 0.12);
}

.otthonizei-card--highlight .otthonizei-card__price {
	font-size: var(--wp--preset--font-size--medium);
	text-align: center;
}

.otthonizei-card--highlight .otthonizei-card__cart {
	justify-content: center;
	margin-left: 0;
}

.otthonizei-card--highlight .otthonizei-card__cart .button {
	width: 100%;
	padding: calc(0.8em - 1px) 1em;
	border: 1px solid var(--wp--preset--color--contrast);
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
	text-align: center;
}

/* Keretes gomb, rámutatva telik ki */
.otthonizei-card--highlight .otthonizei-card__cart .button:hover {
	border-color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.otthonizei-card--highlight .otthonizei-card__cart .button.added {
	display: inline-block;
}

/* Kiemelt kártya háttérszín nélkül (pl. a Szezonális gyűjtemény blokkban): marad a fehér alap */
.otthonizei-card--highlight-plain {
	background-color: var(--wp--preset--color--base);
}

.otthonizei-card--highlight-plain .otthonizei-card__media::after {
	border-bottom-color: var(--wp--preset--color--base);
}

.otthonizei-card--highlight-plain .otthonizei-card__meta {
	border-top-color: var(--wp--preset--color--accent);
}

/* Széles magazin-kártya (Jó helyek, Ajánló kategórialista): kép balra,
   szöveg jobbra függőlegesen középen, a jelölő a kép jobb szélén balra mutat */
.otthonizei-card-list {
	container-type: inline-size;
	display: grid;
	gap: calc(var(--wp--preset--spacing--50) + 5px);
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	list-style: none;
}

.otthonizei-card-list > li {
	display: flex;
	margin: 0;
}

.otthonizei-card--wide {
	flex-direction: row;
	text-align: left;
}

.otthonizei-card--wide .otthonizei-card__media {
	flex: 0 0 48%;
	aspect-ratio: auto;
	/* A régi oldal arányai: kép a kártya ~48%-a, magassága a kártyaszélesség ~43%-a */
	min-height: clamp(260px, 43cqw, 440px);
}

.otthonizei-card--wide .otthonizei-card__image {
	position: absolute;
	inset: 0;
}

.otthonizei-card--wide .otthonizei-card__media::after {
	top: calc(50% - 7px);
	right: 0;
	bottom: auto;
	left: auto;
	border-width: 7px 10px 7px 0;
	border-color: transparent var(--wp--preset--color--base) transparent transparent;
}

.otthonizei-card--wide .otthonizei-card__body {
	justify-content: center;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) 30px;
}

.otthonizei-card--wide .otthonizei-card__category {
	margin-bottom: 0.9rem;
}

.otthonizei-card--wide .otthonizei-card__title {
	font-size: 1.375rem;
	line-height: 1.3;
}

.otthonizei-card--wide .otthonizei-card__excerpt {
	margin-top: 1.1rem;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
}

.otthonizei-card--wide .otthonizei-card__meta {
	justify-content: space-between;
	margin-top: 0;
	padding-block: 14px 0;
}

.otthonizei-card--wide .otthonizei-card__body > :nth-last-child(2) {
	margin-bottom: 1.1rem;
}

.otthonizei-card__comments {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-left: auto;
}

/* A lista szélességéhez igazodik (oldalsáv mellett is) */
@container (max-width: 699px) {
	.otthonizei-card--wide {
		flex-direction: column;
	}

	.otthonizei-card--wide .otthonizei-card__media {
		flex-basis: auto;
		aspect-ratio: 4 / 3;
		min-height: 0;
	}

	.otthonizei-card--wide .otthonizei-card__media::after {
		top: auto;
		right: auto;
		bottom: 0;
		left: calc(50% - 7px);
		border-width: 0 7px 10px 7px;
		border-color: transparent transparent var(--wp--preset--color--base) transparent;
	}

	.otthonizei-card--wide .otthonizei-card__body {
		padding: var(--wp--preset--spacing--40);
	}

	.otthonizei-card--wide .otthonizei-card__title {
		font-size: var(--wp--preset--font-size--large);
	}

	.otthonizei-card--wide .otthonizei-card__excerpt {
		font-size: var(--wp--preset--font-size--small);
	}
}

/* Cím a képen (Magazin: 'tile' mozaik-csempe, 'overlay' kiemelt kártya):
   kategória + cím fehéren, középre zárva, alul sötét fátyol. A kép a média
   saját rétegében (isolation) hátul, a felirat előtte, a jelölő fölötte. */
.otthonizei-card--tile .otthonizei-card__media,
.otthonizei-card--overlay .otthonizei-card__media {
	display: flex;
	align-items: flex-end;
	isolation: isolate;
}

.otthonizei-card--tile .otthonizei-card__image,
.otthonizei-card--overlay .otthonizei-card__image {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.otthonizei-card__caption {
	width: 100%;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40) calc(var(--wp--preset--spacing--40) + 10px);
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);
	color: var(--wp--preset--color--base);
	text-align: center;
}

/* Fehér felirat (a h2/h3 a theme.json-ból fekete színt kapna, ezért közvetlenül) */
.otthonizei-card__caption .otthonizei-card__category,
.otthonizei-card__caption .otthonizei-card__title,
.otthonizei-card__caption .otthonizei-card__title a {
	color: var(--wp--preset--color--base);
}

.otthonizei-card__caption .otthonizei-card__title a {
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.otthonizei-card--overlay .otthonizei-card__title {
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.25;
}

/* Csempe: csak kép, a rácscella teljes magasságában */
.otthonizei-card--tile {
	height: 100%;
}

.otthonizei-card--tile .otthonizei-card__media {
	flex: 1 1 auto;
	aspect-ratio: auto;
	min-height: 0;
}

.otthonizei-card--tile .otthonizei-card__title {
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.25;
}

.otthonizei-magazine-mosaic > li:first-child .otthonizei-card--tile .otthonizei-card__title {
	font-size: var(--wp--preset--font-size--xx-large);
}

/* Kiemelt kártya: kép 4:3, alatta balra zárt kivonat + meta */
.otthonizei-card--overlay {
	text-align: left;
}

.otthonizei-card--overlay .otthonizei-card__body {
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50) 0.35rem;
}

.otthonizei-card--overlay .otthonizei-card__excerpt {
	margin-top: 0;
	color: var(--wp--preset--color--contrast);
	font-size: 1.125rem;
}

.otthonizei-card--overlay .otthonizei-card__meta {
	justify-content: space-between;
}

@media (max-width: 699px) {
	.otthonizei-card--tile .otthonizei-card__title,
	.otthonizei-card--overlay .otthonizei-card__title,
	.otthonizei-magazine-mosaic > li:first-child .otthonizei-card--tile .otthonizei-card__title {
		font-size: var(--wp--preset--font-size--large);
	}

	.otthonizei-card--overlay .otthonizei-card__body {
		padding-inline: var(--wp--preset--spacing--40);
	}

	.otthonizei-card--overlay .otthonizei-card__excerpt {
		font-size: var(--wp--preset--font-size--small);
	}
}

@media (prefers-reduced-motion: reduce) {
	.otthonizei-card__image {
		transition: none;
	}
}