/**
 * Thallo — social / "find us" section.
 *
 * Ground and text come from thallo-brand.css (:root --th-*). The trim does
 * not: the site-wide aged gold goes muddy brown at low opacity on this dark
 * ground, so this section uses a cool stone edge and venom as the only
 * accent. Local --ths-* tokens keep that decision in one place and out of
 * the rest of the site.
 */

.thallo-social {
	--ths-radius: 14px;
	--ths-edge: rgba(146, 186, 168, 0.16);        /* stone hairline, no brown */
	--ths-edge-lit: rgba(33, 214, 163, 0.55);     /* same hairline, hovered */
	--ths-rim: inset 0 1px 0 rgba(223, 239, 232, 0.06); /* top rim light */
	--ths-accent: var(--th-venom, #21d6a3);
	--ths-accent-soft: #9fe8cf;

	margin: 3rem auto;
	padding: 0;
	max-width: 1180px;
	color: var(--th-bone, #eef5f0);
}

/* ---------------------------------------------------------------- banner */

.thallo-social__banner {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1600 / 520;
	border: 1px solid var(--ths-edge);
	border-radius: var(--ths-radius);
	background-color: var(--th-void, #070b09);
	background-image: url("../img/social-banner-1600.jpg");
	background-size: cover;
	background-position: center;
	box-shadow: 0 18px 46px rgba(0, 0, 0, 0.6);
	overflow: hidden;
}

/* Fade the banner into the page ground so it doesn't end on a hard edge. */
.thallo-social__banner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(7, 11, 9, 0) 45%,
		rgba(7, 11, 9, 0.55) 80%,
		rgba(7, 11, 9, 0.94) 100%
	);
	pointer-events: none;
}

/* ------------------------------------------------------------------ head */

.thallo-social__head {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 2rem 0 0.35rem;
}

.thallo-social__crest {
	flex: 0 0 auto;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	border: 1px solid var(--ths-edge);
	background: url("../img/social-crest-512.png") center / cover no-repeat;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 26px rgba(33, 214, 163, 0.18);
}

.thallo-social__title {
	margin: 0;
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
	line-height: 1.15;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--th-bone, #eef5f0);
}

/* Venom rule under the title — the old gold one read as a brown smear. */
.thallo-social__title::after {
	content: "";
	display: block;
	width: 120px;
	height: 2px;
	margin-top: 0.55rem;
	background: linear-gradient(90deg, var(--ths-accent), transparent);
}

.thallo-social__lede {
	margin: 0 0 1.75rem;
	max-width: 62ch;
	color: var(--th-lichen, #a8bfb2);
	font-size: 1.02rem;
	line-height: 1.6;
}

/* ----------------------------------------------------------------- cards */

.thallo-social__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.thallo-social__grid > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.thallo-social__card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.9rem;
	height: 100%;
	padding: 1.05rem 1.15rem;
	border: 1px solid var(--ths-edge);
	border-radius: var(--ths-radius);
	background:
		linear-gradient(180deg, var(--th-stone-2, #142219), var(--th-stone, #0f1a15));
	box-shadow: var(--ths-rim);
	color: var(--th-bone, #eef5f0);
	text-decoration: none;
	overflow: hidden;
	transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

/* Venom edge that lights up on hover — replaces the gold corner bracket. */
.thallo-social__card::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(180deg, var(--ths-accent), rgba(33, 214, 163, 0));
	opacity: 0.35;
	transition: opacity 0.18s ease;
}

/* Serpent mark, bled off the right edge of every card. */
.thallo-social__card::before {
	content: "";
	position: absolute;
	right: -34px;
	top: 50%;
	width: 132px;
	height: 132px;
	transform: translateY(-50%);
	background: url("../img/social-mark-t-256.png") center / contain no-repeat;
	opacity: 0.1;
	pointer-events: none;
	transition: opacity 0.18s ease;
}

.thallo-social__card:hover,
.thallo-social__card:focus-visible {
	border-color: var(--ths-edge-lit);
	transform: translateY(-2px);
	box-shadow: var(--ths-rim), 0 12px 34px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(33, 214, 163, 0.18);
}

.thallo-social__card:hover::after,
.thallo-social__card:focus-visible::after {
	opacity: 1;
}

.thallo-social__card:hover::before,
.thallo-social__card:focus-visible::before {
	opacity: 0.18;
}

.thallo-social__card:focus-visible {
	outline: 2px solid var(--ths-accent);
	outline-offset: 3px;
}

/* ------------------------------------------------------------------ icon */

.thallo-social__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 1px solid var(--ths-edge);
	border-radius: 50%;
	background: var(--th-void, #070b09);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.thallo-social__icon svg {
	width: 22px;
	height: 22px;
	fill: var(--ths-accent-soft);
	transition: fill 0.18s ease;
}

.thallo-social__card:hover .thallo-social__icon,
.thallo-social__card:focus-visible .thallo-social__icon {
	border-color: var(--ths-edge-lit);
	box-shadow: 0 0 18px rgba(33, 214, 163, 0.22);
}

.thallo-social__card:hover .thallo-social__icon svg,
.thallo-social__card:focus-visible .thallo-social__icon svg {
	fill: var(--ths-accent);
}

/* ------------------------------------------------------------------ text */

.thallo-social__text {
	position: relative; /* sits above the watermark */
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.thallo-social__name {
	font-size: 1.02rem;
	font-weight: 600;
	letter-spacing: 0.045em;
	text-transform: uppercase;
	color: var(--th-bone, #eef5f0);
}

/*
 * One line, always. A long profile URL (bsky.app/profile/name.bsky.social)
 * wraps to two lines otherwise and knocks that card's text out of line with
 * its neighbours.
 */
.thallo-social__handle {
	font-size: 0.86rem;
	color: var(--th-lichen, #a8bfb2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.thallo-social__cta {
	margin-top: 0.3rem;
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ths-accent-soft);
	transition: color 0.18s ease;
}

.thallo-social__card:hover .thallo-social__cta,
.thallo-social__card:focus-visible .thallo-social__cta {
	color: var(--ths-accent);
}

/* --------------------------------------------------------------- narrow */

@media (max-width: 600px) {
	.thallo-social__head {
		gap: 0.75rem;
	}

	.thallo-social__crest {
		width: 48px;
		height: 48px;
	}

	.thallo-social__card {
		padding: 0.95rem 1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.thallo-social__card,
	.thallo-social__card::before,
	.thallo-social__card::after,
	.thallo-social__icon,
	.thallo-social__icon svg,
	.thallo-social__cta {
		transition: none;
	}

	.thallo-social__card:hover,
	.thallo-social__card:focus-visible {
		transform: none;
	}
}