/*!
 * DFX Instagram Gallery — front-end styles.
 * Reuses the theme's own design tokens (--dfx-moss, --dfx-oxblood, --dfx-font,
 * --dfx-font-heading, --dfx-radius, --dfx-shadow-*, .dfx-eyebrow, .button,
 * .dfx-container, .dfx-reveal) so this section is visually indistinguishable
 * from a native part of the homepage. Falls back to literal brand-bible hex
 * values if those custom properties are ever missing, so the section still
 * looks correct even if loaded outside the theme.
 */

.dfx-ig-section {
	padding: 4.5rem 1.5rem 5rem;
}

.dfx-ig-header {
	text-align: center;
	max-width: 56ch;
	margin: 0 auto 2.2rem;
}
.dfx-ig-header .dfx-eyebrow { justify-content: center; width: 100%; }
.dfx-ig-header h2 {
	font-family: var(--dfx-font-heading, 'Cormorant Garamond', Georgia, serif);
	font-size: clamp(1.7rem, 2.6vw, 2.2rem);
	font-weight: 600;
	color: var(--dfx-ink, #66715a);
	margin: 0 0 .5rem;
}
.dfx-ig-header__sub {
	font-family: var(--dfx-font, 'Montserrat', sans-serif);
	font-size: .92rem;
	color: var(--dfx-text-muted, #6b6b6b);
	margin: 0 0 1.4rem;
}
.dfx-ig-follow {
	/* Inherits the theme's real .button styling (oxblood fill, radius,
	   hover state) — only spacing is added here. */
	margin-top: .2rem;
}

.dfx-ig-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	max-width: var(--dfx-container, 1240px);
	margin: 0 auto;
}

.dfx-ig-tile {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--dfx-radius, 6px);
	background: var(--dfx-line, #e3e8e5);
	box-shadow: var(--dfx-shadow-sm, 0 1px 3px rgba(46,46,46,.06));
	transition: box-shadow .25s var(--dfx-ease, ease), transform .25s var(--dfx-ease, ease);
}
.dfx-ig-tile:hover,
.dfx-ig-tile:focus-visible {
	box-shadow: var(--dfx-shadow-md, 0 8px 24px rgba(46,46,46,.10));
	transform: translateY(-3px);
	text-decoration: none;
}

.dfx-ig-tile__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.dfx-ig-tile__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .88);
	pointer-events: none;
}
.dfx-ig-tile__play::after {
	content: '';
	position: absolute;
	top: 50%;
	left: calc(50% + 2px);
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 8px 0 8px 14px;
	border-color: transparent transparent transparent var(--dfx-moss-dark, #4d5544);
}

.dfx-ig-tile__vbadge {
	position: absolute;
	top: 10px;
	right: 10px;
	font-family: var(--dfx-font, 'Montserrat', sans-serif);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #fff;
	background: rgba(0, 0, 0, .45);
	padding: 3px 8px;
	border-radius: 100px;
	pointer-events: none;
}

.dfx-ig-tile__tag {
	position: absolute;
	left: 10px;
	bottom: 10px;
	right: 10px;
	font-family: var(--dfx-font, 'Montserrat', sans-serif);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .02em;
	color: #fff;
	background: rgba(0, 0, 0, .4);
	padding: 5px 9px;
	border-radius: 3px;
	pointer-events: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dfx-ig-caption {
	text-align: center;
	font-family: var(--dfx-font, 'Montserrat', sans-serif);
	font-size: .82rem;
	color: var(--dfx-text-muted, #6b6b6b);
	opacity: .85;
	margin: 1.6rem 0 0;
}

@media (max-width: 780px) {
	.dfx-ig-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.dfx-ig-section { padding: 3.5rem 1.25rem 4rem; }
}