/**
 * Card grid layout — structural flex/grid rules for equal-height tiles.
 *
 * Visual styling lives in luxe.css; this file only handles alignment
 * and stretch behaviour across product, blog, and category cards.
 *
 * @package Elysian
 */

/* -------------------------------------------------------------------------
 * Grid rows — stretch every column to the tallest card in the row
 * ------------------------------------------------------------------------- */

.products-grid-row,
.blog-grid,
.categories-grid {
	align-items: stretch;
}

/* -------------------------------------------------------------------------
 * Column wrappers — flex containers so inner cards fill column height
 * ------------------------------------------------------------------------- */

.products-col-item,
.blog-col-item,
.categories-col-item {
	display: flex;
}

.products-col-item > .single-productsBox,
.products-col-item > .elysian-card--product,
.blog-col-item > .single-blog-post,
.blog-col-item > .elysian-card--blog,
.categories-col-item > .categories-box,
.categories-col-item > .elysian-card--category {
	width: 100%;
}

/* -------------------------------------------------------------------------
 * Shared card shell
 * ------------------------------------------------------------------------- */

.elysian-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}

.elysian-card__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	min-height: 0;
}

.elysian-card__title {
	margin: 0;
}

.elysian-card__title a,
.elysian-card--category .elysian-card__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	min-height: calc(1.3em * 2);
}

/* -------------------------------------------------------------------------
 * Product cards
 * ------------------------------------------------------------------------- */

.elysian-card--product .products-content .category:empty,
.elysian-card--product .products-content .category[aria-hidden="true"] {
	display: block;
	min-height: calc(10.5px * 1.4);
	visibility: hidden;
}

.elysian-card--product .products-content .price {
	flex-shrink: 0;
}

.elysian-card--product .products-content .add-to-cart {
	margin-top: auto !important;
}

/* -------------------------------------------------------------------------
 * Blog cards
 * ------------------------------------------------------------------------- */

.single-blog-post.elysian-card--blog {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.elysian-card--blog .post-content {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

.elysian-card--blog .post-content .category:empty,
.elysian-card--blog .post-content .category[aria-hidden="true"] {
	display: block;
	min-height: calc(10.5px * 1.4);
	visibility: hidden;
}

.elysian-card--blog .post-content .details-btn {
	margin-top: auto;
	align-self: flex-start;
}

/* -------------------------------------------------------------------------
 * Category cards — uniform tile height inside the grid
 * ------------------------------------------------------------------------- */

.elysian-card--category.categories-box {
	flex: 1 1 auto;
}

/* -------------------------------------------------------------------------
 * Responsive — preserve equal-height cards on narrow viewports
 * ------------------------------------------------------------------------- */

@media (max-width: 991px) {
	.products-grid-row {
		row-gap: 24px;
	}

	.blog-grid,
	.categories-grid {
		row-gap: 24px;
	}
}

@media (max-width: 767px) {
	.elysian-card__title a,
	.elysian-card--category .elysian-card__title {
		min-height: auto;
	}
}