/* =========================================================
 * Polygun Image Card Overlay — widget styles
 * Enqueue this alongside the widget (see snippet at bottom of PHP notes).
 * Structural only — all colors/typography/radius come from Elementor controls.
 * ======================================================= */

.pg-ic {
	width: 100%;
}

.pg-ic__inner {
	position: relative;
	overflow: hidden;      /* clips image to wrapper radius */
	width: 100%;
	line-height: 0;        /* kill inline-img gap */
}

.pg-ic__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	line-height: normal;
}

/* ---- Card ---- */
.pg-ic__card {
	--pg-ic-offset-x: 24px;
	--pg-ic-offset-y: 24px;
	position: absolute;
	z-index: 2;
	line-height: normal;
	box-sizing: border-box;
	/* width via max-width control; shrink to content on narrow screens */
	width: max-content;
}

/* Corner anchoring */
.pg-ic__card--top-left {
	top: var(--pg-ic-offset-y);
	left: var(--pg-ic-offset-x);
}
.pg-ic__card--top-right {
	top: var(--pg-ic-offset-y);
	right: var(--pg-ic-offset-x);
}
.pg-ic__card--bottom-left {
	bottom: var(--pg-ic-offset-y);
	left: var(--pg-ic-offset-x);
}
.pg-ic__card--bottom-right {
	bottom: var(--pg-ic-offset-y);
	right: var(--pg-ic-offset-x);
}

/* ---- Text ---- */
.pg-ic__title {
	margin: 0 0 8px;
}
.pg-ic__desc {
	margin: 0 0 16px;
}

/* ---- Button ---- */
.pg-ic__btn {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	border: 0;
	transition: all 200ms ease;
}
.pg-ic__btn:hover,
.pg-ic__btn:focus {
	text-decoration: none;
}

/* ---------------------------------------------------------
 * Responsive fallback: on very small screens, let the card
 * span the image width so it never overflows the frame.
 * Elementor's responsive offset controls handle most cases,
 * but this is a safety net below 480px.
 * ------------------------------------------------------- */
@media (max-width: 479px) {
	.pg-ic__card {
		left: var(--pg-ic-offset-x);
		right: var(--pg-ic-offset-x);
		width: auto;
		max-width: none;
	}
	.pg-ic__card--top-left,
	.pg-ic__card--top-right {
		top: var(--pg-ic-offset-y);
		bottom: auto;
	}
	.pg-ic__card--bottom-left,
	.pg-ic__card--bottom-right {
		bottom: var(--pg-ic-offset-y);
		top: auto;
	}
}