/* =============================================================================
   Rinnai Product Discovery Widget
   ============================================================================= */

/* Grid — default 4 columns; column count overridden by Elementor selector */
.rinnai-pd-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: 24px; /* default; overridden by Elementor gap sliders */
	row-gap: 24px;
	width: 100%;
}

/* Card — the entire card is the link */
.rinnai-pd-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	text-decoration: none;
	color: inherit;
}

/* Image wrapper — overflow hidden keeps zoom within bounds */
.rinnai-pd__image-wrap {
	overflow: hidden;
	background-color: #f5f5f5;
	width: 100%;
	margin-bottom: 12px; /* default; overridden by Elementor image-body gap slider */
}

/* Placeholder shown in the Elementor editor when no term is selected */
.rinnai-pd__image-wrap--placeholder {
	aspect-ratio: 1 / 1;
	background-color: #e8e8e8;
}

.rinnai-pd__img {
	display: block;
	width: 100%;
	height: auto;
	transform: scale(1);
	transition: transform 300ms ease; /* duration overridden by Elementor slider */
}

/* Image zoom on hover — only when .rinnai-pd--zoom is present on the card */
.rinnai-pd--zoom .rinnai-pd__image-wrap:hover .rinnai-pd__img {
	transform: scale(1.08); /* fallback; overridden by Elementor zoom scale slider */
}

/* Body — title and button stacked below the image */
.rinnai-pd__body {
	display: flex;
	flex-direction: column;
}

/* Title */
.rinnai-pd__title {
	margin: 0 0 8px; /* bottom margin overridden by Elementor title spacing slider */
	font-size: inherit;
	font-weight: inherit;
	line-height: 1.3;
	color: #1a1a1a;
}

/* Button — visual only, card <a> handles the click */
.rinnai-pd__btn {
	display: inline-flex;
	align-items: flex-start;
	line-height: 1.2;
	transition: opacity 0.2s ease;
}

/* Opacity change on card hover, not button hover, so only the button reacts visually */
.rinnai-pd-card:hover .rinnai-pd__btn {
	opacity: 0.7; /* default; overridden by Elementor hover opacity slider */
}

/* Chevron — matches the hyperlink button widget alignment */
.rinnai-pd__btn-chevron {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	margin-right: 6px; /* default; overridden by Elementor chevron gap slider */
	padding-top: 0.4em;
}

.rinnai-pd__btn-chevron-svg {
	width: 12px; /* default; overridden by Elementor chevron size slider */
	height: 12px;
	display: block;
}

.rinnai-pd__btn-text {
	white-space: normal;
	word-break: break-word;
}