/**
 * Large Card Horizontal (inc/blocks-layout/large-card-horizontal.php) —
 * photo + text panel + a gold CTA bar pinned to the panel's bottom edge.
 * Sized directly off the "Room Gallery" mockups: card maxes out at
 * 1170×550, text panel ~31.6% wide / photo ~68.4% wide side by side from
 * 768px up, stacked below that (photo on top, panel below). The panel and
 * photo columns are percentage + aspect-ratio based rather than fixed
 * pixels, so the whole card scales down proportionately as the viewport
 * narrows from 1170px toward the 768px breakpoint, rather than just
 * clipping.
 *
 * Colors reuse the theme's existing tokens: #f0f0f0 panel background is
 * the same gray as .room-header-bar (single-room.css) — duplicated here on
 * purpose, not shared, same reasoning as hero-block.css. var(--goldHex)
 * for the CTA bar matches exactly (sampled from the mockup — same gold as
 * everywhere else in the theme).
 */

.large-card-horizontal {
	padding: 0 2rem;
  max-width: 75rem; 
	margin: 0 auto 30px;
  flex-flow: row-reverse;
  
}
.large-card-horizontal:last-of-type {
  margin-bottom: 130px;
}

/* ---- Photo ---- */

.lch-media {
	width: 100%;
	aspect-ratio: 18 / 11; /* ≈ the mockup's mobile crop (360×220) */
}

.lch-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---- Text panel ---- */

.lch-panel {
	background: #f0f0f0;
	padding: 2.5rem 1.5rem 0;
}

.lch-panel-text {
	margin-bottom: 2rem;
}

.lch-heading {
	margin: 0 0 1rem;
	font-family: var(--font-primary);
	font-weight: var(--font-weight-regular);
	font-style: normal;
	font-size: 1.625rem;
	letter-spacing: 0.1625em;
	text-transform: uppercase;
	color: var(--room-ink);
}

.lch-body {
	margin: 0;
	max-width: 42ch;
	font-size: 1rem;
	line-height: 1.6;
  font-weight: var(--font-weight-thin);
}

/* ---- CTA bar ---- */

.lch-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 2rem -1.5rem 0;
	padding: 1.25rem 1.5rem;
	background: var(--goldHex);
	color: #000000;
	text-decoration: none;
  transition: 0.4s all ease;
  
  &:hover {
    background: black;
    color: white;
  }
}

.lch-cta-label {
	font-family: var(--font-primary);
	font-weight: var(--font-weight-light);
	font-style: normal;
	font-size: 1.375rem;
}

.lch-cta-arrow {
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	color: #000000;
	transition: transform 0.2s;
}

.lch-cta:hover .lch-cta-arrow {
	transform: translateX(5px);
  color: white;
}

/* ---- Side-by-side from tablet landscape up ---- */

@media (min-width: 1024px) {
	.large-card-horizontal {
		display: flex;
		align-items: stretch;
	}

	.lch-media {
		flex: 0 0 68.4%; /* 800 / 1170 + 2rem = 1202px */
		aspect-ratio: 800 / 550;
	}

	.lch-panel {
		flex: 0 0 23.4%; /* 370 - 4rem / 1170 */
		display: flex;
		flex-direction: column;
		padding: 2rem 2rem 0;
	}

	.lch-panel-text {
		margin-bottom: 0;
	}

	.lch-cta {
		margin: 0 -2rem 0;
		margin-top: auto; /* pin to the bottom of the panel, however tall it is */
		padding: 1.75rem 2rem;
	}
}