/* =========================================================
   Section: ugc_community (masonry)
   Tiles con silueta + handle + breed.
   ========================================================= */

.ugc-community__header { margin-bottom: var(--space-7); }

.ugc-community__stats {
	display: inline-flex;
	gap: var(--space-6);
	margin-top: var(--space-5);
	padding: var(--space-3) var(--space-5);
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-pill);
	list-style: none;
}
.ugc-community__stats li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	margin: 0;
}
.ugc-community__stats strong {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--color-ink-primary);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.ugc-community__stats span {
	font-size: 11px;
	color: var(--color-ink-muted);
	letter-spacing: 0.02em;
}
@media (max-width: 540px) {
	.ugc-community__stats { gap: var(--space-4); padding: var(--space-2) var(--space-3); }
	.ugc-community__stats strong { font-size: 1.125rem; }
}

/* ---------- Masonry ---------- */
.ugc-community__masonry {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-auto-rows: 120px;
	gap: var(--space-3);
	margin-bottom: var(--space-6);
}
@media (max-width: 900px) {
	.ugc-community__masonry { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 110px; }
}
@media (max-width: 540px) {
	.ugc-community__masonry { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
}

.ugc-tile {
	position: relative;
	margin: 0;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-bg-subtle);
	transition: transform var(--duration-base) var(--easing-default);
	isolation: isolate;
}
.ugc-tile:hover { transform: translateY(-2px); }

.ugc-tile--tall   { grid-column: span 2; grid-row: span 3; }
.ugc-tile--wide   { grid-column: span 3; grid-row: span 2; }
.ugc-tile--square { grid-column: span 2; grid-row: span 2; }

@media (max-width: 540px) {
	.ugc-tile--tall,
	.ugc-tile--wide,
	.ugc-tile--square { grid-column: span 1; grid-row: span 2; }
}

/* Cromatic backgrounds (no foto) */
.ugc-tile__image {
	position: absolute; inset: 0;
	background: linear-gradient(135deg, var(--color-secondary-soft) 0%, var(--color-brand-primary-soft) 100%);
	z-index: 1;
}
.ugc-tile[data-species="perros"]   .ugc-tile__image { background: linear-gradient(135deg, #DDBE94 0%, #B58F5B 100%); }
.ugc-tile[data-species="gatos"]    .ugc-tile__image { background: linear-gradient(135deg, #C4D1C0 0%, #6B8E6A 100%); }
.ugc-tile[data-species="roedores"] .ugc-tile__image { background: linear-gradient(135deg, #E2CDA8 0%, #C58A2C 100%); }
.ugc-tile[data-species="caballos"] .ugc-tile__image { background: linear-gradient(135deg, #C7B89A 0%, #8A6F3F 100%); }
.ugc-tile[data-species="pajaros"]  .ugc-tile__image { background: linear-gradient(135deg, #F2A589 0%, #C95838 100%); }

/* Vignette bottom para legibilidad de captions */
.ugc-tile::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 55%;
	background: linear-gradient(180deg, rgba(28, 38, 32, 0) 0%, rgba(28, 38, 32, 0.65) 100%);
	z-index: 2;
	pointer-events: none;
}

/* Silhouette overlay */
.ugc-tile__silhouette {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(250, 244, 232, 0.65);
	z-index: 2;
	transition: color var(--duration-base) var(--easing-default),
	            transform var(--duration-base) var(--easing-default);
}
.ugc-tile__silhouette svg {
	width: 38%;
	height: auto;
	filter: drop-shadow(0 2px 8px rgba(28, 38, 32, 0.2));
}
.ugc-tile:hover .ugc-tile__silhouette {
	color: rgba(250, 244, 232, 0.85);
	transform: scale(1.06);
}

/* Captions */
.ugc-tile__caption {
	position: absolute;
	left: 12px; bottom: 12px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.ugc-tile__name {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 1rem;
	color: var(--color-bg-base);
	line-height: 1.1;
	letter-spacing: -0.005em;
}
.ugc-tile__breed {
	font-size: 10px;
	color: rgba(250, 244, 232, 0.78);
	letter-spacing: 0.02em;
}

.ugc-tile__handle {
	position: absolute;
	top: 10px; left: 12px;
	z-index: 3;
	font-size: 10px;
	color: rgba(250, 244, 232, 0.85);
	background: rgba(28, 38, 32, 0.4);
	padding: 3px 8px;
	border-radius: var(--radius-pill);
	backdrop-filter: blur(4px);
	letter-spacing: 0.02em;
}

@media (max-width: 540px) {
	.ugc-tile__silhouette svg { width: 30%; }
	.ugc-tile__name { font-size: 0.9375rem; }
}

.ugc-community__ctas {
	display: flex;
	gap: var(--space-3);
	justify-content: center;
	flex-wrap: wrap;
}
.ugc-community__ctas .btn--ghost { display: inline-flex; align-items: center; gap: 8px; }

@media (prefers-reduced-motion: reduce) {
	.ugc-tile,
	.ugc-tile__silhouette { transition: none; }
	.ugc-tile:hover,
	.ugc-tile:hover .ugc-tile__silhouette { transform: none; }
}