/* Ollin — Option Cards
   Colors defer to Elementor globals so the field inherits your kit. */

.osf-cards {
	--osf-cols: 2;
	--osf-ring1-w: 0px;
	--osf-ring2-w: 0px;
	--osf-ring3-w: 0px;
	--osf-ratio: 4 / 3;
	--osf-card-radius: 2px;
	--osf-media-radius: 0px;
	--osf-ring1-c: transparent;
	--osf-ring2-c: transparent;
	--osf-ring3-c: transparent;
	--osf-ratio: 4 / 3;
	--osf-accent: var(--e-global-color-primary, #1F3A4D);
	--osf-border: rgba(0, 0, 0, .18);
	--osf-border-hover: rgba(0, 0, 0, .45);
	width: 100%;
}

.osf-cards__grid {
	display: grid;
	/* Fixed-width tracks so a card is the same size on every step,
	   whatever the container or the field's column width. */
	grid-template-columns: repeat(var(--osf-cols, 2), minmax(0, var(--osf-card-w, 260px)));
	gap: 10px;
	justify-content: center;
	justify-items: stretch;
}

/* ---------- Card ---------- */

.osf-cards__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	max-width: 100%;
	height: 150px;
	padding: 16px 14px;
	box-sizing: border-box;
	border: 1px solid var(--osf-border);
	border-radius: var(--osf-card-radius);
	cursor: pointer;
	text-align: center;
	overflow: hidden;
	transition: border-color .15s, background-color .15s, transform .08s;
	margin: 0;
}

.osf-cards__card:hover { border-color: var(--osf-border-hover); }
.osf-cards__card:active { transform: scale(.99); }

/* Keyboard focus only. :focus-within also fired on mouse clicks, leaving an
   outline on the last card the visitor touched. */
.osf-cards__card:has(.osf-cards__input:focus-visible) {
	outline: var(--osf-focus-w, 2px) solid var(--osf-focus-c, currentColor);
	outline-offset: 2px;
}

.osf-cards__input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
	margin: 0;
}

/* Selected */

.osf-cards__card.is-selected {
	background-color: var(--osf-accent);
	border-color: var(--osf-accent);
	color: #fff;
}

.osf-cards__card.is-selected .osf-cards__desc { color: rgba(255, 255, 255, .8); }

/* Image cards default to a contained, centred graphic. Full bleed is opt-in
   via Style > Option Cards > Image layout. */

.osf-cards__card.has-image {
	padding: 16px 14px;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.osf-cards__card.has-image.is-selected {
	background-color: transparent;
	box-shadow: inset 0 0 0 2px var(--osf-accent);
	border-color: var(--osf-accent);
	color: inherit;
}

.osf-cards__card.has-image.is-selected .osf-cards__desc { color: inherit; }

.osf-cards__media {
	display: block;
	box-sizing: border-box;
	border: 0 solid transparent;
	border-radius: var(--osf-media-radius);
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	overflow: hidden;
	background: transparent;
}

.osf-cards__media img {
	width: 100%;
	height: 100%;
	border-radius: inherit;
	object-fit: contain;
	display: block;
	transition: transform .4s ease;
}

/* Full-bleed variant — image fills the card top at the chosen ratio and the
   card height follows it. Specificity here deliberately beats the fixed
   height coming from the Card shape control, which cannot apply when the
   image dictates the size. */
.osf-cards.osf-cards--bleed .osf-cards__card.has-image {
	padding: 0;
	align-items: stretch;
	justify-content: flex-start;
	gap: 0;
	height: auto;
	min-height: 0;
	aspect-ratio: auto;
	/* visible, not hidden — clipping was swallowing the label */
	overflow: visible;
}

/* The image is the only thing that gets clipped, so a radius still works. */
.osf-cards--bleed .osf-cards__media { overflow: hidden; }

/* Text block sits below the image and is never squeezed out. */
.osf-cards--bleed .osf-cards__card.has-image .osf-cards__label,
.osf-cards--bleed .osf-cards__card.has-image .osf-cards__desc {
	flex: 0 0 auto;
}
.osf-cards--bleed .osf-cards__media {
	width: 100%;
	height: auto;
	aspect-ratio: var(--osf-ratio, 4 / 3);
	background: rgba(0, 0, 0, .05);
	flex: 0 0 auto;
}
.osf-cards--bleed .osf-cards__media img { object-fit: cover; }
/* Text padding is a Style tab control now — see .osf-cards__text. */

/* ---------- Label alignment (per card set) ---------- */

.osf-cards--align-left .osf-cards__card   { align-items: flex-start; text-align: left; }
.osf-cards--align-center .osf-cards__card { align-items: center;     text-align: center; }
.osf-cards--align-right .osf-cards__card  { align-items: flex-end;   text-align: right; }

.osf-cards--align-left .osf-cards__text   { text-align: left; }
.osf-cards--align-right .osf-cards__text  { text-align: right; }
.osf-cards--align-center .osf-cards__text { text-align: center; }

.osf-cards__label,
.osf-cards__desc { text-align: inherit; width: 100%; }

.osf-cards__card:hover .osf-cards__media img { transform: scale(1.03); }

/* Icon */

.osf-cards__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.osf-cards__icon i { font-size: 26px; }
.osf-cards__icon svg { width: 26px; height: 26px; fill: currentColor; }

/* Text */

.osf-cards__text {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 12px 0 0;
}

.osf-cards--contain .osf-cards__text { padding: 0; }

.osf-cards__label {
	font-size: 15px;
	line-height: 1.3;
	display: block;
	max-width: 100%;
}

.osf-cards__desc {
	font-size: 12.5px;
	line-height: 1.4;
	opacity: .75;
	display: block;
}

/* Check badge */

.osf-cards__check {
	position: absolute;
	top: 9px;
	right: 9px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--osf-accent);
	opacity: 0;
	transform: scale(.7);
	transition: opacity .15s, transform .15s;
}

.osf-cards__card.is-selected .osf-cards__check {
	opacity: 1;
	transform: scale(1);
}

.osf-cards__card.is-selected:not(.has-image) .osf-cards__check {
	background: rgba(255, 255, 255, .22);
}

.osf-cards__check::after {
	content: "";
	position: absolute;
	left: 7px;
	top: 4px;
	width: 5px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Locked at max selections */

.osf-cards__card.is-locked {
	opacity: .4;
	cursor: not-allowed;
}

.osf-cards__hint {
	margin: 10px 0 0;
	font-size: 13px;
	opacity: .8;
}

/* Error state from Elementor validation */

.elementor-field-group.elementor-error .osf-cards__grid {
	outline: 1px solid #c0392b;
	outline-offset: 4px;
}

/* ---------- Responsive ---------- */

@media (max-width: 480px) {
	/* Columns are set per breakpoint on the Style tab. */
	.osf-cards__card { height: 120px; }
}

@media (prefers-reduced-motion: reduce) {
	.osf-cards__card,
	.osf-cards__media img,
	.osf-cards__check { transition: none; }
}


/* ---------- Selected image rings ----------
   Stacked box-shadows rather than a border: they compose, they take the
   element's border-radius, and they never change the layout. Ring 1 is
   nearest the image; each subsequent ring sits outside it. */

.osf-cards__card.is-selected .osf-cards__media {
	box-shadow:
		var(--osf-ring-inset, ) 0 0 0 var(--osf-ring1-w) var(--osf-ring1-c),
		var(--osf-ring-inset, ) 0 0 0 calc(var(--osf-ring1-w) + var(--osf-ring2-w)) var(--osf-ring2-c),
		var(--osf-ring-inset, ) 0 0 0 calc(var(--osf-ring1-w) + var(--osf-ring2-w) + var(--osf-ring3-w)) var(--osf-ring3-c);
}

/* Outward rings need room to draw, so the card must not clip them. */
.osf-cards__card { overflow: visible; }
.osf-cards--bleed .osf-cards__media { overflow: hidden; }


/* ---------- Required error ---------- */

.osf-cards__error {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.4;
	color: #c0392b;
}