/**
 * Velvet Experiences - Asymmetrical editorial archive grid
 * Luxury magazine layout: 60% vertical | 40% stacked (wide + 2 small)
 */

/* ----------------------------------------------
   Section
---------------------------------------------- */
.velvet-experiences {
	padding: 100px 0 100px;
	background-color: #F7F5F0;
}

.velvet-experiences__container {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 48px;
}

/* ----------------------------------------------
   Header - Centered
---------------------------------------------- */
.velvet-experiences__header {
	text-align: center;
	margin-bottom: 48px;
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
}

.velvet-experiences__title {
	margin: 0 0 20px;
	font-family: 'Cormorant Garamond', 'Libre Baskerville', Georgia, serif;
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.2;
	color: #111111;
}

.velvet-experiences__desc {
	margin: 0;
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 0.9rem;
	font-weight: 300;
	line-height: 1.7;
	color: #555555;
}

/* ----------------------------------------------
   Grid - Asymmetrical layout
   Left: 60% large vertical | Right: 40% (wide top, 2 small bottom)
---------------------------------------------- */
.velvet-experiences__grid {
	display: grid;
	grid-template-columns: 3fr 2fr;
	grid-template-rows: 1fr 1fr;
	gap: 20px;
	height: 460px;
}

/* Large vertical - spans full height, left column */
.velvet-experiences__card--large {
	grid-column: 1;
	grid-row: 1 / -1;
}

/* Wide horizontal - right column, top */
.velvet-experiences__card--wide {
	grid-column: 2;
	grid-row: 1;
}

/* Small cards group - right column, bottom */
.velvet-experiences__card-group {
	grid-column: 2;
	grid-row: 2;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

/* ----------------------------------------------
   Card base
---------------------------------------------- */
.velvet-experiences__card {
	display: block;
	height: 100%;
	text-decoration: none;
	color: inherit;
	overflow: hidden;
}

.velvet-experiences__card-image {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 200px;
	overflow: hidden;
	background: linear-gradient(135deg, #e8e4dc 0%, #ddd8ce 100%);
}

.velvet-experiences__card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.6s ease;
}

.velvet-experiences__card:hover .velvet-experiences__card-image img {
	transform: scale(1.05);
}

/* Dark gradient overlay - bottom for text readability */
.velvet-experiences__card-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.55) 0%,
		rgba(0, 0, 0, 0.15) 45%,
		transparent 75%
	);
	transition: background 0.4s ease;
}

.velvet-experiences__card:hover .velvet-experiences__card-overlay {
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.65) 0%,
		rgba(0, 0, 0, 0.2) 50%,
		transparent 80%
	);
}

/* Overlay content - bottom-left */
.velvet-experiences__card-content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 28px 24px;
	z-index: 2;
}

.velvet-experiences__card-subtitle {
	display: block;
	margin-bottom: 6px;
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 0.55rem;
	font-weight: 400;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
}

.velvet-experiences__card-title {
	font-family: 'Cormorant Garamond', 'Libre Baskerville', Georgia, serif;
	font-size: clamp(1.25rem, 2vw, 1.65rem);
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.2;
	color: #ffffff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Large card - taller text */
.velvet-experiences__card--large .velvet-experiences__card-title {
	font-size: clamp(1.5rem, 2.5vw, 2rem);
}

.velvet-experiences__card--large .velvet-experiences__card-content {
	padding: 32px 28px;
}

/* Small cards - compact text */
.velvet-experiences__card--small .velvet-experiences__card-title {
	font-size: clamp(1rem, 1.5vw, 1.2rem);
}

.velvet-experiences__card--small .velvet-experiences__card-content {
	padding: 20px 18px;
}

.velvet-experiences__card--small .velvet-experiences__card-subtitle {
	font-size: 0.5rem;
	margin-bottom: 4px;
}

/* ----------------------------------------------
   Responsive
---------------------------------------------- */
@media screen and (max-width: 1024px) {
	.velvet-experiences {
		padding: 80px 0 80px;
	}

	.velvet-experiences__container {
		padding: 0 32px;
	}

	.velvet-experiences__header {
		margin-bottom: 40px;
	}

	.velvet-experiences__grid {
		height: 380px;
		gap: 16px;
	}
}

@media screen and (max-width: 768px) {
	.velvet-experiences {
		padding: 80px 0 100px;
	}

	.velvet-experiences__container {
		padding: 0 24px;
	}

	.velvet-experiences__header {
		margin-bottom: 48px;
	}

	.velvet-experiences__grid {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		max-height: none;
		gap: 16px;
	}

	.velvet-experiences__card--large {
		grid-column: 1;
		grid-row: auto;
		aspect-ratio: 4 / 3;
	}

	.velvet-experiences__card--wide {
		grid-column: 1;
		grid-row: auto;
		aspect-ratio: 16 / 9;
	}

	.velvet-experiences__card-group {
		grid-column: 1;
		grid-row: auto;
		grid-template-columns: 1fr 1fr;
		gap: 16px;
	}

	.velvet-experiences__card--small .velvet-experiences__card-image {
		min-height: 140px;
		aspect-ratio: 1;
	}
}