/**
 * Social Gallery — internal layout only (section bg + padding live on the
 * outer group block attribute, not here).
 *
 * Grid: 6 columns → 3 (tablet) → 2 (mobile), square photos, subtle hover.
 * Tokens read: font family/size, space (gap/margins), radius, colors.
 */

.wpdl-social-gallery__title {
	font-family: var(--wp--custom--font--family--display);
	font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2rem);
	font-weight: var(--wp--custom--font--weight--medium);
	line-height: 1.1;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: 0 var(--wp--custom--space--3);
}

.wpdl-social-gallery__handle {
	margin-block: 0 var(--wp--custom--space--7);
}

.wpdl-social-gallery__handle a {
	font-family: var(--wp--custom--font--family--body);
	font-size: 0.875rem;
	font-weight: var(--wp--custom--font--weight--medium);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--custom--semantic--color--accent--primary);
	text-decoration: none;
	transition: text-decoration var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

.wpdl-social-gallery__handle a:hover {
	text-decoration: underline;
}

/* Grid — display:grid (not flex-wrap) so cards reflow without WP flow margins */
.wpdl-social-gallery__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--wp--custom--space--5);
	align-items: start;
}

/* Reset WP is-layout-flow margin-block-start on grid children */
.wpdl-social-gallery__img {
	margin-block: 0;
}

/* stylelint-disable-next-line no-descending-specificity -- different element from __handle a:hover above */
.wpdl-social-gallery__img a {
	display: block;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--sm);
}

.wpdl-social-gallery__img img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--sm);
	transition:
		transform var(--wp--custom--duration--base) var(--wp--custom--easing--default),
		opacity var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

.wpdl-social-gallery__img a:hover img {
	transform: scale(1.05);
	opacity: 0.9;
}

/* ── Tablet: 3 columns ─────────────────────────────────────── */
@media (width <= 48rem) {
	.wpdl-social-gallery__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ── Mobile: 2 columns ─────────────────────────────────────── */
@media (width <= 30rem) {
	.wpdl-social-gallery__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wpdl-social-gallery__img img {
		transition: none;
	}
}