/**
 * Super Elementor Pack — Advanced Image Gallery.
 *
 * Grid of promo cards: image on top, footer row (title + subtitle / button)
 * below, optional corner badge. Colors/spacing/typography come almost
 * entirely from Elementor's own per-control CSS (see widget.php 'selectors'),
 * this file only holds structural layout that has no direct Elementor
 * control equivalent (flex/grid wiring, badge ribbon geometry, etc).
 *
 * NOTE: the card's background + gradient border (Style > Title & Footer)
 * are applied as an inline style on .sep-gallery-card itself (see
 * widget.php render()), so they wrap the whole card, not just the footer.
 * .sep-gallery-card__footer is left transparent below so that fill shows
 * through in the footer area; the <img> in .sep-gallery-card__media
 * visually covers it in the image area.
 */

.sep-gallery-grid {
	display: grid;
	grid-template-columns: repeat( 5, 1fr );
	gap: 16px;
}

.sep-gallery-card {
	position: relative;
	display: block;
	text-decoration: none;
	background: #000; /* fallback before inline style loads / if render fails */
}

.sep-gallery-card__media {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #1a1a1a;
}

.sep-gallery-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.sep-gallery-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background: transparent; /* card's own background/gradient shows through from .sep-gallery-card */
}

.sep-gallery-card__text {
	display: flex;
	flex-direction: column;
	min-width: 0; /* allow text truncation inside flex */
}

.sep-gallery-card__title {
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sep-gallery-card__subtitle {
	font-size: 0.85em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sep-gallery-card__button {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.sep-gallery-card__button img {
	width: 60%;
	height: 60%;
	object-fit: contain;
}

.sep-gallery-card__button i,
.sep-gallery-card__button svg {
	font-size: 1em;
	width: 1em;
	height: 1em;
}

/* ---------------------------------------------------------------- */
/* Badge — pill variant: simple rounded tag pinned to a corner       */
/* ---------------------------------------------------------------- */
.sep-gallery-card__badge--pill {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	padding: 3px 10px;
	border-radius: 999px;
	line-height: 1.4;
	font-weight: 600;
	white-space: nowrap;
}

/* ---------------------------------------------------------------- */
/* Badge — ribbon variant: diagonal banner across the top-left corner */
/* Requires the parent .sep-gallery-card__media to have overflow:    */
/* hidden, which it already does above.                              */
/* ---------------------------------------------------------------- */
.sep-gallery-card__badge--ribbon {
	position: absolute;
	top: 14px;
	left: -38px;
	z-index: 2;
	width: 150px;
	padding: 4px 0;
	text-align: center;
	font-weight: 700;
	font-size: 0.75em;
	line-height: 1.4;
	transform: rotate(-45deg);
	transform-origin: center;
}

/* ---------------------------------------------------------------- */
/* Responsive fallback: never let the grid go below 2 columns worth  */
/* of usable width on very small screens, regardless of the Columns  */
/* control's own responsive breakpoints (belt-and-braces).           */
/* ---------------------------------------------------------------- */
@media ( max-width: 480px ) {
	.sep-gallery-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}