/* [kompas_social]: profiles, and the Instagram feed when there is a token. */
.ks {
	--ks-navy: #031435;
	--ks-gold: #ebc273;
	--ks-gold-dark: #c99a3c;
	--ks-light: #eae8e5;
	display: grid; gap: 28px;
	font-family: "Geograph Test", system-ui, sans-serif; color: #454240;
}
.ks__intro { margin: 0; max-width: 52ch; font-size: 16px; line-height: 1.6; }

.ks__profiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.ks__profile {
	position: relative; display: flex; align-items: center; gap: 16px; padding: 20px 22px;
	border: 1px solid var(--ks-light); border-radius: 3px; background: #fff; color: var(--ks-navy); text-decoration: none; overflow: hidden;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
/* The gold rule, as on the listing cards. */
.ks__profile::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ks-gold); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.ks__profile:hover, .ks__profile:focus-visible { border-color: transparent; box-shadow: 0 14px 30px -16px rgba(3, 20, 53, .35); transform: translateY(-2px); }
.ks__profile:hover::after, .ks__profile:focus-visible::after { transform: scaleX(1); }
.ks__profile:focus-visible { outline: 2px solid var(--ks-navy); outline-offset: 3px; }
.ks__icon { display: grid; place-items: center; flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; background: var(--ks-navy); color: var(--ks-gold); }
.ks__icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ks__who { display: grid; gap: 2px; min-width: 0; }
.ks__network { font-size: 17px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.ks__handle { overflow: hidden; color: #8a837c; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.ks__follow { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.ks__follow svg { width: 18px; height: 18px; fill: none; stroke: var(--ks-gold-dark); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.ks__profile:hover .ks__follow svg { transform: translateX(3px); }

.ks__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 1000px) { .ks__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ks__post { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 3px; background: var(--ks-light); }
.ks__post img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ks__caption {
	position: absolute; inset: auto 0 0 0; padding: 28px 12px 12px; color: #fff; font-size: 13px; line-height: 1.4;
	background: linear-gradient(transparent, rgba(3, 20, 53, .85)); opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease;
}
.ks__post:hover img { transform: scale(1.05); }
.ks__post:hover .ks__caption, .ks__post:focus-visible .ks__caption { opacity: 1; transform: none; }
.ks__video { position: absolute; top: 10px; right: 10px; width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
@media (prefers-reduced-motion: reduce) { .ks * { transition: none !important; } }