/* ============================================================================
   FashionX Vogue Grid
   Editorial post grid rendered by the [fashionx_vogue_grid] shortcode.
   Self-contained markup (.fashionx-vg-item) => no !important needed.

   Layout (desktop, 12-col grid, designed for 7 posts):
     - Left  column : items 2 & 3   (stacked)
     - Center       : item 1        (hero)
     - Right column : items 4..7    (compact image + title rows)
   ========================================================================== */

.fashionx-vogue-grid {
	width: 100%;
	box-sizing: border-box;
}

.fashionx-vogue-grid__heading {
	margin: 0 0 1.5rem;
	font-size: 1.5rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.fashionx-vogue-grid *,
.fashionx-vogue-grid *::before,
.fashionx-vogue-grid *::after {
	box-sizing: border-box;
}

/* ---- Item base (shared) ---- */
.fashionx-vg-item {
	display: flex;
	flex-direction: column;
	margin: 0;
}

.fashionx-vg-item__image {
	display: block;
	overflow: hidden;
}

.fashionx-vg-item__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fashionx-vg-item__content {
	padding-top: 0.75rem;
}

.fashionx-vg-item__category {
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	margin-bottom: 0.35rem;
}

.fashionx-vg-item__category a {
	text-decoration: none;
	color: #9e011f; /* editorial accent */
}

/* Titles carry the theme's own .eltdf-post-title class, so font-family, color
   and weight are inherited from the theme (IBM Plex Serif) and stay consistent
   with the rest of the site. We only override margin/size for the grid. */
.fashionx-vogue-grid .fashionx-vg-item__title {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.3;
}

.fashionx-vg-item__title a {
	text-decoration: none;
	color: inherit;
}

.fashionx-vg-item__excerpt {
	margin-top: 0.5rem;
	font-size: 0.92rem;
	line-height: 1.45;
	color: #555;
}

/* ---- Mobile first: simple single-column stack ---- */
.fashionx-vogue-grid__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

.fashionx-vg-item.is-hero .fashionx-vg-item__image img {
	height: 240px;
}

.fashionx-vg-item.is-stacked .fashionx-vg-item__image img,
.fashionx-vg-item.is-compact .fashionx-vg-item__image img {
	height: 200px;
}

/* ============================================================================
   DESKTOP (>= 993px): the Vogue 3-column editorial grid
   ========================================================================== */
@media (min-width: 993px) {

	.fashionx-vogue-grid__inner {
		grid-template-columns: repeat(12, 1fr);
		grid-auto-rows: minmax(0, auto);
		gap: 1.25rem 1.5rem;
		align-items: start;
	}

	/* --- Center hero: item 1 --- */
	.fashionx-vg-item.is-hero {
		grid-column: 4 / span 6;
		grid-row: 1 / span 4;
		padding: 0 1.5rem;
		border-left: 1px solid #e5e5e5;
		border-right: 1px solid #e5e5e5;
	}

	.fashionx-vg-item.is-hero .fashionx-vg-item__image img {
		height: 360px;
	}

	.fashionx-vogue-grid .fashionx-vg-item.is-hero .fashionx-vg-item__title {
		font-size: 1.85rem;
		line-height: 1.25;
		margin: 0.3rem 0 0;
	}

	/* --- Left column: stacked items 2 & 3 --- */
	.fashionx-vg-item.is-stacked:nth-child(2) {
		grid-column: 1 / span 3;
		grid-row: 1 / span 2;
	}

	.fashionx-vg-item.is-stacked:nth-child(3) {
		grid-column: 1 / span 3;
		grid-row: 3 / span 2;
	}

	.fashionx-vg-item.is-stacked .fashionx-vg-item__image img {
		height: 170px;
	}

	/* --- Right column: compact items 4..7 --- */
	.fashionx-vg-item.is-compact {
		grid-column: 10 / span 3;
	}

	.fashionx-vg-item.is-compact:nth-child(4) { grid-row: 1; }
	.fashionx-vg-item.is-compact:nth-child(5) { grid-row: 2; }
	.fashionx-vg-item.is-compact:nth-child(6) { grid-row: 3; }
	.fashionx-vg-item.is-compact:nth-child(7) { grid-row: 4; }

	/* Compact = small image on the right, title on the left */
	.fashionx-vg-item.is-compact {
		display: grid;
		grid-template-columns: 1fr 80px;
		gap: 12px;
		align-items: start;
	}

	.fashionx-vg-item.is-compact .fashionx-vg-item__image {
		order: 2;
		width: 80px;
		height: 60px;
	}

	.fashionx-vg-item.is-compact .fashionx-vg-item__image img {
		height: 60px;
	}

	.fashionx-vg-item.is-compact .fashionx-vg-item__content {
		order: 1;
		padding-top: 0;
	}

	.fashionx-vogue-grid .fashionx-vg-item.is-compact .fashionx-vg-item__title {
		font-size: 0.88rem;
		line-height: 1.25;
		margin: 0;
	}
}