/*
 * La Galga Gris · section-ugc-masonry.css
 * Framing decorativo alrededor del grid UGC + ticker de hashtags.
 */

.lgg-ugc-section {
	position: relative;
	padding-block: clamp(1rem, 3vw, 2rem);
}

/* Decoración con hashtags girados arriba/abajo (solo desktop) */
@media (min-width: 1024px) {
	.lgg-ugc-section::before,
	.lgg-ugc-section::after {
		content: "#lagalgagris · #collarpersonalizado · #madetomeasure · #hechoamano · ";
		display: block;
		position: absolute;
		left: 0; right: 0;
		font-family: var(--font-mono);
		font-size: 0.72rem;
		letter-spacing: 0.06em;
		color: color-mix(in srgb, var(--color-ink-primary) 22%, transparent);
		text-transform: lowercase;
		white-space: nowrap;
		overflow: hidden;
		pointer-events: none;
	}
	.lgg-ugc-section::before { top: var(--sp-3); }
	.lgg-ugc-section::after  { bottom: var(--sp-3); }
}

/* Forzar un ratio interno para que el masonry empiece con buena altura en mobile */
.lgg-ugc-section .lgg-ugc { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* Pequeño detalle: el primer y último item de la grid reciben una insignia "destacado" en desktop */
@media (min-width: 1024px) {
	.lgg-ugc-section .lgg-ugc__item:first-child .lgg-ugc__btn::after,
	.lgg-ugc-section .lgg-ugc__item:nth-child(5) .lgg-ugc__btn::after {
		content: "★";
		position: absolute;
		top: var(--sp-3);
		right: var(--sp-3);
		font-family: var(--font-display);
		font-size: 0.9rem;
		color: var(--color-accent);
		background: color-mix(in srgb, var(--color-bg-card) 90%, transparent);
		border-radius: 50%;
		width: 26px; height: 26px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		backdrop-filter: blur(4px);
		z-index: 3;
		pointer-events: none;
	}
}