/* AKIPLA v0.8 — compact mobile UI and contrast corrections. */

/* Keep the ABOUT content inside the mobile viewport. */
.about__content,
.about__content > *,
.about-values,
.about-values li,
.about-values li > div { min-width: 0; max-width: 100%; }

/* The light link sits on a white card in the trust section. */
.trust__content .text-link--light {
	color: var(--forest);
	font-weight: 800;
}
.trust__content .text-link--light:hover { color: #0b3e2e; }
.site-footer__company .site-footer__company-link { color: #d8f2e7; }

/* Uses: a tighter tile system instead of tall generic cards. */
.use-card {
	min-height: 250px;
	padding: 22px;
	border-radius: 16px;
	box-shadow: none;
}
.use-card__top { margin-bottom: 24px; }
.use-card__icon { width: 50px; height: 50px; }
.use-card__icon .icon { width: 24px; height: 24px; }
.use-card h3 { font-size: 20px; }
.use-card .use-card__description { line-height: 1.75; }

/* Concern routes: category chips, not large article cards. */
.concern-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	border: 0;
}
.concern-route,
.concern-route:nth-child(n) {
	position: relative;
	display: block;
	min-height: 0;
	padding: 18px 44px 18px 18px;
	border: 1px solid rgba(31,90,69,.14);
	border-radius: 14px;
	background: var(--white);
	color: var(--ink);
	text-decoration: none;
	cursor: pointer;
	transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.concern-route:hover {
	transform: translateY(-2px);
	border-color: rgba(31,90,69,.38);
	background: #f4faf7;
}
.concern-route__top,
.concern-route > p:not(.concern-route__category) { display: none; }
.concern-route__category {
	display: inline-flex;
	align-items: center;
	min-height: 25px;
	margin: 0 0 10px;
	padding: 0 9px;
	border-radius: 999px;
	background: #e8f6ee;
	color: var(--forest) !important;
	font-size: 9px;
	font-weight: 800;
}
.concern-route__category::before { margin-right: 3px; content: "#"; color: var(--terracotta); }
.concern-route h3 { margin: 0; font-size: 15px; line-height: 1.6; }
.concern-route::after {
	position: absolute;
	top: 50%;
	right: 17px;
	width: 8px;
	height: 8px;
	border-top: 1.5px solid var(--forest);
	border-right: 1.5px solid var(--forest);
	content: "";
	transform: translateY(-50%) rotate(45deg);
}
.concern-route__more,
.concern-route__latest { display: none; }

.concern-archive__discovery { display: grid; gap: clamp(48px, 7vw, 80px); margin-top: clamp(72px, 9vw, 120px); padding-top: clamp(48px, 6vw, 72px); border-top: 1px solid var(--line); }
.concern-archive__discovery > div > h2 { margin-bottom: 24px; font-size: clamp(22px, 3vw, 32px); }

@media (max-width: 960px) {
	.about__inner {
		grid-template-areas: "visual" "content" !important;
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 34px;
	}
	.about__visual { grid-area: visual !important; grid-column: 1 !important; grid-row: 1 !important; }
	.about__content { grid-area: content !important; grid-column: 1 !important; grid-row: 2 !important; }
}

@media (max-width: 680px) {
	.about__inner { width: min(calc(100% - 36px), var(--ui-wide)); overflow: hidden; }
	.about__content { width: 100%; }
	.about__content > p:not(.eyebrow) { width: 100%; font-size: 13px; line-height: 1.95; overflow-wrap: anywhere; }
	.about-values { width: 100%; margin-block: 26px; }

	.uses__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 9px !important;
	}
	.use-card {
		min-height: 156px !important;
		padding: 15px !important;
		border-radius: 13px;
	}
	.use-card__top { margin-bottom: 15px !important; }
	.use-card__icon { width: 38px !important; height: 38px !important; }
	.use-card__icon .icon { width: 20px; height: 20px; }
	.use-card__top small { font-size: 8px; }
	.use-card h3 { margin-bottom: 2px; font-size: 17px !important; line-height: 1.45; }
	.use-card .use-card__en { margin: 0; font-size: 7px; }
	.use-card .use-card__description { display: none; }
	.uses__note { margin-top: 18px; }

	.concern-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 8px;
	}
	.concern-route,
	.concern-route:nth-child(n) {
		min-height: 104px !important;
		padding: 13px 30px 13px 13px !important;
		border-radius: 12px;
	}
	.concern-route__category {
		min-height: 22px;
		margin-bottom: 7px;
		padding-inline: 7px;
		font-size: 8px;
	}
	.concern-route h3 { font-size: 13px !important; line-height: 1.55; }
	.concern-route::after { right: 12px; width: 7px; height: 7px; }
}