/**
 * SCF Repeater for Elementor — Card Grid blocks.
 *
 * Every visual property is a custom property set on the grid, so the cards
 * inside inherit one shared design and restyling the grid restyles them all.
 * Loaded in both the editor and the front end.
 */

.scfre-card-grid {
	display: grid;
	grid-template-columns: repeat(var(--scfre-cols, 3), minmax(0, 1fr));
	gap: var(--scfre-gap, 16px);

	/*
	 * Stated explicitly rather than left to inherit: some themes put a border on
	 * block wrappers, and the grid should have none unless it is asked for.
	 */
	border: var(--scfre-grid-border-width, 0) solid var(--scfre-grid-border-color, transparent);
	border-radius: var(--scfre-grid-radius, 0);
	padding: var(--scfre-grid-padding, 0);
	background-color: var(--scfre-grid-bg, transparent);
}

.scfre-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	min-height: var(--scfre-card-min-height, auto);
	padding: var(--scfre-card-padding, 20px);
	border: var(--scfre-card-border-width, 1px) solid var(--scfre-card-border-color, #e3e6ef);
	border-radius: var(--scfre-card-radius, 8px);
	background-color: var(--scfre-card-bg, #fff);
}

/* Alignment */
.scfre-card-grid--align-left .scfre-card {
	align-items: flex-start;
	text-align: left;
}

.scfre-card-grid--align-center .scfre-card {
	align-items: center;
	text-align: center;
}

.scfre-card-grid--align-right .scfre-card {
	align-items: flex-end;
	text-align: right;
}

/* Keeps buttons on a shared baseline when titles wrap differently. */
.scfre-card-grid--pin .scfre-card__button {
	margin-top: auto;
}

/* Icon */
.scfre-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--scfre-icon-size, 40px);
	line-height: 1;
	color: var(--scfre-icon-color, #1e2a4a);
}

.scfre-card__icon .dashicons {
	width: 1em;
	height: 1em;
	font-size: 1em;
	line-height: 1;
}

.scfre-card__icon-img {
	width: 1em;
	height: 1em;
	object-fit: contain;
}

/* Title */
.scfre-card__title {
	margin: 0;
	font-size: var(--scfre-title-size, 16px);
	line-height: 1.4;
	color: var(--scfre-title-color, #1e2a4a);
	overflow-wrap: break-word;
}

/* Button */
.scfre-card__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 18px;
	border-radius: var(--scfre-btn-radius, 4px);
	background-color: var(--scfre-btn-bg, #2f5fe0);
	color: var(--scfre-btn-color, #fff);
	line-height: 1.3;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

a.scfre-card__button:hover,
a.scfre-card__button:focus {
	background-color: var(--scfre-btn-bg-hover, #1e46b8);
	color: var(--scfre-btn-color, #fff);
	text-decoration: none;
}

/* Responsive columns */
@media (max-width: 1024px) {
	.scfre-card-grid {
		grid-template-columns: repeat(var(--scfre-cols-tablet, 2), minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.scfre-card-grid {
		grid-template-columns: repeat(var(--scfre-cols-mobile, 1), minmax(0, 1fr));
	}
}

/* Editor niceties */
.scfre-control-label {
	margin-bottom: 8px;
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
}

.scfre-control-help {
	margin-top: 0;
	color: #757575;
	font-size: 12px;
	font-style: normal;
}

/*
 * In the editor the cards sit inside one or two InnerBlocks wrapper divs. Left
 * alone, those wrappers become the grid items — a single item in column one —
 * and the cards get squeezed into a fraction of the width. `display: contents`
 * removes the wrappers from layout so the cards become direct grid items and
 * the editor matches the front end, including the responsive rules above.
 */
.editor-styles-wrapper .scfre-card-grid > .block-editor-inner-blocks,
.editor-styles-wrapper .scfre-card-grid .block-editor-block-list__layout {
	display: contents;
}

/* Themes commonly constrain .wp-block, which would narrow the cards again. */
.editor-styles-wrapper .scfre-card-grid .scfre-card {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.editor-styles-wrapper .scfre-card__title {
	margin: 0;
}

.editor-styles-wrapper .scfre-card .block-editor-rich-text__editable:focus {
	outline: 1px solid rgba(47, 95, 224, 0.4);
}