/* ==========================================================================
 * The pages of rivers, places and heritage (TD-154), and a person's page
 * (TD-155). Loaded on those pages only, after location.css, whose tabs,
 * search row, panels, quick links and top of the page they share.
 *
 * 1. Shared: a chip, the quotation card
 * 2. Section pages: layout, the entry told large, cards, side column
 * 3. A person's page: top, bar of parts, facts, parts, gallery, side column
 * ========================================================================== */

/* 1. Shared --------------------------------------------------------------- */
.at-chip {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 2px 12px;
	border-radius: var(--at-radius-button);
	background: var(--at-green-deep);
	color: var(--at-white);
	font-size: var(--at-text-xs);
	font-weight: 700;
	text-decoration: none;
}

a.at-chip:hover {
	background: var(--at-green);
	color: var(--at-white);
}

.at-squote {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: var(--at-space-5);
	border: 1px solid #D5E6DA;
	border-radius: var(--at-radius-card);
	background: linear-gradient(160deg, #F3F8F2 0%, #E6F0E6 100%);
	box-shadow: var(--at-shadow-card);
}

.at-squote__text {
	margin: 0;
}

.at-squote__text p {
	margin: var(--at-space-2) 0 0;
	color: var(--at-green-deep);
	font-size: var(--at-text-lg);
	font-weight: 700;
	line-height: 1.75;
}

.at-squote__mark {
	color: var(--at-green-deep);
}

.at-squote__cite {
	margin-top: var(--at-space-3);
	color: var(--at-text-muted);
	font-size: var(--at-text-sm);
	text-align: right;
}

.at-squote__leaf {
	align-self: center;
	margin-top: var(--at-space-3);
	color: var(--at-green);
}

.at-squote--large .at-squote__text p {
	font-size: var(--at-text-xl);
}

/* 2. Section pages -------------------------------------------------------- */
.at-sect {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--at-space-5);
	margin-bottom: var(--at-space-8);
}

.at-sect__layout,
.at-sect__main,
.at-sect__side {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--at-space-5);
	align-content: start;
}

@media (min-width: 1000px) {
	.at-sect__layout {
		grid-template-columns: minmax(0, 1fr) 300px;
	}
}

/* Search with its own button: words, upazila, kind, button. */
@media (min-width: 760px) {
	.at-psearch--button {
		grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)) auto;
	}
}

.at-psearch--button .at-psearch__words {
	position: relative;
}

.at-psearch--button input[type="search"] {
	padding-left: 40px;
	border-right: 1px solid var(--at-border);
	border-radius: var(--at-radius-button);
}

.at-psearch__icon {
	position: absolute;
	top: 50%;
	left: 12px;
	display: flex;
	color: var(--at-muted);
	transform: translateY(-50%);
	pointer-events: none;
}

.at-psearch__submit .at-button {
	width: 100%;
	min-width: 150px;
	min-height: var(--at-control-height);
}

/* The entry told large; on the rivers page with the quotation beside it. */
.at-sect__lead {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--at-space-5);
}

@media (min-width: 1200px) {
	.at-sect__lead--quote {
		grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
	}
}

.at-sfeature {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--at-space-5);
	padding: var(--at-space-4);
}

@media (min-width: 640px) {
	.at-sfeature:has(.at-sfeature__media) {
		grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.2fr);
	}
}

.at-sfeature__media {
	overflow: hidden;
	min-height: 200px;
	border-radius: var(--at-radius-button);
	background: var(--at-bg);
}

.at-sfeature__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.at-sfeature__body {
	display: flex;
	flex-direction: column;
	gap: var(--at-space-2);
	padding-block: var(--at-space-1);
}

.at-sfeature__kind,
.at-sfeature__text {
	margin: 0;
}

.at-sfeature__title {
	margin: 0;
	font-size: var(--at-text-2xl);
}

.at-sfeature__title a {
	color: var(--at-green-deep);
	text-decoration: none;
}

.at-sfeature__title a:hover {
	text-decoration: underline;
}

.at-sfeature__text {
	color: var(--at-text);
	font-size: var(--at-text-sm);
}

.at-sfeature__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--at-space-3);
	margin-top: auto;
	padding-top: var(--at-space-3);
}

.at-sfeature__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--at-space-2) var(--at-space-5);
	margin: 0;
	padding: 0;
	color: var(--at-text-muted);
	font-size: var(--at-text-sm);
	list-style: none;
}

.at-sfeature__meta li,
.at-scard__meta {
	display: flex;
	align-items: center;
	gap: 6px;
}

.at-sfeature__meta .at-icon,
.at-scard__meta .at-icon {
	flex: none;
	color: var(--at-green);
}

/* Titles of the row and the list. */
.at-sect__title {
	margin: 0 0 var(--at-space-4);
	color: var(--at-green-deep);
	font-size: var(--at-text-xl);
}

.at-sect__row {
	padding: var(--at-space-5);
	border: 1px solid var(--at-border);
	border-radius: var(--at-radius-card);
	background: rgba(255, 255, 255, 0.7);
}

.at-sect__count {
	margin: calc(var(--at-space-2) * -1) 0 var(--at-space-4);
	color: var(--at-text-muted);
}

/* Cards: four to a row where there is room. */
.at-sgrid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--at-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 340px) {
	.at-sgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 800px) {
	.at-sgrid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.at-sect__list .at-pagination,
.at-sect__list nav {
	margin-top: var(--at-space-5);
}

.at-scard {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--at-border);
	border-radius: var(--at-radius-card);
	background: var(--at-white);
	box-shadow: var(--at-shadow-card);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.at-scard:hover {
	box-shadow: 0 2px 4px rgba(0, 56, 50, 0.08), 0 12px 28px rgba(0, 56, 50, 0.12);
}

@media (prefers-reduced-motion: no-preference) {
	.at-scard:hover {
		transform: translateY(-2px);
	}
}

.at-scard__media {
	display: grid;
	place-items: center;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--at-bg);
	color: var(--at-muted);
}

.at-scard__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.at-scard__body {
	position: relative;
	display: grid;
	gap: 4px;
	padding: var(--at-space-3) calc(var(--at-space-3) + 22px) var(--at-space-3) var(--at-space-3);
}

.at-scard__title {
	margin: 0;
	font-size: var(--at-text-base);
	line-height: 1.4;
}

/* The whole card is the link. */
.at-scard__link {
	color: var(--at-heading);
	text-decoration: none;
}

.at-scard__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.at-scard:hover .at-scard__link {
	text-decoration: underline;
}

.at-scard__link:focus-visible {
	outline: none;
}

.at-scard:has(.at-scard__link:focus-visible) {
	outline: 3px solid var(--at-focus);
	outline-offset: 2px;
}

.at-scard__meta {
	margin: 0;
	color: var(--at-text-muted);
	font-size: var(--at-text-xs);
}

.at-scard__arrow {
	position: absolute;
	right: var(--at-space-3);
	bottom: var(--at-space-3);
	color: var(--at-green-deep);
}

/* The side column. */
.at-sect__side .at-squote {
	min-height: 220px;
}

/* Places: a tall picture with the quotation over its top. */
.at-squote--tall {
	overflow: hidden;
	padding: 0;
}

.at-squote--tall .at-squote__text {
	padding: var(--at-space-5) var(--at-space-5) var(--at-space-3);
}

.at-squote__media {
	position: relative;
	flex: 1 1 auto;
	min-height: 260px;
}

.at-squote__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
}

.at-squote__credit,
.at-sside__credit,
.at-ppride__credit {
	position: absolute;
	right: 6px;
	bottom: 4px;
	z-index: 1;
	margin: 0;
	font-size: 11px;
}

.at-squote__caption {
	padding: var(--at-space-3) var(--at-space-5);
	background: var(--at-white);
	color: var(--at-text);
	font-size: var(--at-text-sm);
}

/* Rivers and heritage: a picture with a line beside it. */
.at-sside {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--at-space-3);
	align-items: center;
	margin: 0;
	padding: var(--at-space-3);
}

.at-sside:has(.at-sside__media):has(.at-sside__text) {
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}

.at-sside__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	border-radius: var(--at-radius-button);
}

.at-sside__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.at-sside__text {
	color: var(--at-green-deep);
	font-size: var(--at-text-sm);
	font-weight: 600;
}

/* Did you know? A dark label beside the fact. */
.at-sfact {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--at-space-3);
	align-items: center;
	padding: var(--at-space-3);
	border: 1px solid #D5E6DA;
	border-radius: var(--at-radius-card);
	background: linear-gradient(160deg, #F3F8F2 0%, #E6F0E6 100%);
}

.at-sfact__title {
	display: grid;
	place-items: center;
	min-width: 88px;
	min-height: 64px;
	margin: 0;
	padding: var(--at-space-2);
	border-radius: var(--at-radius-button);
	background: var(--at-green-deep);
	color: var(--at-white);
	font-size: var(--at-text-base);
	text-align: center;
}

.at-sfact__text {
	margin: 0;
	color: var(--at-green-deep);
	font-size: var(--at-text-sm);
	font-weight: 600;
}

/* 3. A person's page ------------------------------------------------------- */
/* The top: the words on the left, the portrait on the right. */
.at-lhero__quote {
	display: flex;
	gap: var(--at-space-2);
	margin: var(--at-space-4) 0 0;
}

.at-lhero__quote p {
	margin: 0;
	color: var(--at-white);
	font-size: var(--at-text-lg);
	line-height: 1.7;
}

.at-lhero__quote-mark {
	flex: none;
	color: var(--at-gold);
}

.at-lhero__portrait {
	display: none;
}

.at-lhero__portrait-image {
	display: block;
	width: 100%;
	height: auto;
	border: 3px solid rgba(255, 255, 255, 0.85);
	border-radius: 50%;
}

@media (min-width: 900px) {
	.at-lhero__inner--portrait {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 280px;
		column-gap: var(--at-space-6);
		align-items: end;
	}

	.at-lhero__inner--portrait > * {
		grid-column: 1;
	}

	.at-lhero__inner--portrait > .at-lhero__portrait {
		display: block;
		grid-column: 2;
		grid-row: 1 / span 8;
		align-self: end;
		width: 280px;
		margin: 0 0 calc(var(--at-space-8) * -1);
	}

	.at-lhero__inner--portrait .at-lhero__portrait-image {
		border: 0;
		border-radius: 50% 50% 0 0;
	}
}

.at-person {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--at-space-5);
	margin-bottom: var(--at-space-7);
}

/* The bar of parts: icon beside the word; the first filled, as in the design. */
.at-person__tabs .at-ptabs__list > li:first-child .at-ptabs__tab {
	flex-direction: row;
	gap: 8px;
	background: var(--at-green-deep);
	color: var(--at-white);
}

.at-person__tabs .at-ptabs__list > li:first-child .at-ptabs__tab .at-icon {
	color: var(--at-white);
}

.at-person__tabs .at-ptabs__list > li {
	min-width: 120px;
}

.at-person__tabs .at-ptabs__tab {
	min-height: 56px;
}

.at-person__layout,
.at-person__main,
.at-person__side {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--at-space-5);
	align-content: start;
}

@media (min-width: 1000px) {
	.at-person__layout {
		grid-template-columns: minmax(0, 1fr) 300px;
	}
}

/* Photograph and facts. */
.at-person__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--at-space-5);
}

@media (min-width: 700px) {
	.at-person__top:has(.at-person__photo):has(.at-person__facts) {
		grid-template-columns: 220px minmax(0, 1fr);
	}
}

.at-person__photo {
	align-self: start;
	justify-self: center;
	width: 100%;
	max-width: 280px;
	margin: 0;
	padding: var(--at-space-2);
	border: 1px solid var(--at-border);
	border-radius: var(--at-radius-card);
	background: var(--at-white);
	box-shadow: var(--at-shadow-card);
	text-align: center;
}

.at-person__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--at-radius-button);
}

.at-person__photo figcaption {
	display: grid;
	padding: var(--at-space-3) var(--at-space-2) var(--at-space-2);
}

.at-person__photo-name {
	color: var(--at-green-deep);
	font-weight: 700;
}

.at-person__years {
	color: var(--at-text-muted);
	font-size: var(--at-text-sm);
}

.at-person__facts {
	padding: var(--at-space-4) var(--at-space-5);
}

.at-pfacts,
.at-pshort__list {
	margin: 0;
}

.at-pfacts__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2px var(--at-space-4);
	padding-block: 8px;
	border-bottom: 1px solid var(--at-border);
}

@media (min-width: 480px) {
	.at-pfacts__row {
		grid-template-columns: 150px minmax(0, 1fr);
	}
}

.at-pfacts dt,
.at-pshort__row dt {
	display: flex;
	align-items: center;
	gap: var(--at-space-2);
	color: var(--at-text-muted);
	font-weight: 600;
}

.at-pfacts dt .at-icon,
.at-pshort__row dt .at-icon {
	flex: none;
	color: var(--at-green);
}

.at-pfacts dd,
.at-pshort__row dd {
	margin: 0;
	color: var(--at-text);
}

.at-person__roles {
	display: flex;
	flex-wrap: wrap;
	gap: var(--at-space-2);
	margin: var(--at-space-4) 0 0;
	padding: 0;
	list-style: none;
}

.at-person__note {
	display: flex;
	align-items: center;
	gap: var(--at-space-2);
	margin: calc(var(--at-space-3) * -1) 0 0;
	color: var(--at-text-muted);
	font-size: var(--at-text-sm);
}

/* The parts, one under another, with a fine rule between. */
.at-person__part {
	min-width: 0;
}

.at-person__main > .at-person__part + .at-person__part,
.at-person__main > .at-person__gives,
.at-person__main > .at-person__related {
	padding-top: var(--at-space-5);
	border-top: 1px solid var(--at-border);
}

.at-person__part[id],
.at-person__related[id],
.at-person__side [id] {
	scroll-margin-top: 96px;
}

.at-person__heading {
	display: flex;
	align-items: center;
	gap: var(--at-space-2);
	margin: 0 0 var(--at-space-3);
	color: var(--at-green-deep);
	font-size: var(--at-text-2xl);
}

.at-person__heading--small {
	font-size: var(--at-text-lg);
}

.at-person__heading .at-icon {
	flex: none;
	color: var(--at-green);
}

.at-person__subheading {
	margin: var(--at-space-4) 0 var(--at-space-2);
	color: var(--at-green-deep);
	font-size: var(--at-text-lg);
}

/* Events of the life: the year in a pill, on a line. */
.at-pevents {
	position: relative;
	display: grid;
	gap: var(--at-space-3);
	margin: 0;
	padding: 0 0 0 var(--at-space-4);
	border-left: 2px solid #CFE2D6;
	list-style: none;
}

.at-pevents__item {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--at-space-2) var(--at-space-3);
}

.at-pevents__item::before {
	content: "";
	position: absolute;
	top: 0.6em;
	left: calc(var(--at-space-4) * -1 - 7px);
	width: 12px;
	height: 12px;
	border: 2px solid var(--at-white);
	border-radius: 50%;
	background: var(--at-green);
}

.at-pevents__year {
	padding: 2px 10px;
	border-radius: var(--at-radius-pill);
	background: var(--at-green-deep);
	color: var(--at-white);
	font-size: var(--at-text-sm);
	font-weight: 700;
}

/* Contributions beside further quotations. */
.at-person__gives {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--at-space-5);
}

@media (min-width: 760px) {
	.at-person__gives--two {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		align-items: start;
	}
}

.at-person__quotes {
	display: grid;
	gap: var(--at-space-4);
}

/* A list with a green tick before each line. */
.at-checklist ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.at-checklist li {
	position: relative;
	margin: 0 0 var(--at-space-2);
	padding-left: 32px;
}

.at-checklist li::before {
	content: "✓";
	position: absolute;
	top: 0.2em;
	left: 0;
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--at-green);
	color: var(--at-white);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

/* Photographs in a row with arrows. */
.at-pgallery__wrap {
	position: relative;
}

.at-pgallery__row {
	position: relative;
	display: flex;
	gap: var(--at-space-3);
	margin: 0;
	padding: 0 0 var(--at-space-2);
	overflow-x: auto;
	list-style: none;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}

@media (prefers-reduced-motion: reduce) {
	.at-pgallery__row {
		scroll-behavior: auto;
	}
}

.at-pgallery__item {
	flex: 0 0 min(200px, 70%);
	scroll-snap-align: start;
}

.at-pgallery__item figure {
	margin: 0;
}

.at-pgallery__link {
	display: block;
	overflow: hidden;
	border-radius: var(--at-radius-button);
}

.at-pgallery__link img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
}

.at-pgallery__caption {
	margin-top: 4px;
	color: var(--at-text-muted);
	font-size: var(--at-text-xs);
}

.at-pgallery__arrow {
	position: absolute;
	top: calc(50% - 22px);
	z-index: 1;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--at-border);
	border-radius: 50%;
	background: var(--at-white);
	box-shadow: var(--at-shadow-card);
	color: var(--at-green-deep);
	cursor: pointer;
}

.at-pgallery__arrow--prev {
	left: -10px;
}

.at-pgallery__arrow--next {
	right: -10px;
}

.at-pgallery__arrow[hidden] {
	display: none;
}

.at-pgallery__arrow:disabled {
	opacity: 0.4;
	cursor: default;
}

.at-pgallery__arrow:focus-visible {
	outline: 3px solid var(--at-gold);
	outline-offset: 2px;
}

/* Connection with Tangail: the words beside a picture. */
.at-person__related {
	display: grid;
	gap: var(--at-space-5);
}

.at-ptangail {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--at-space-4);
	align-items: center;
	background: linear-gradient(160deg, #F3F8F2 0%, #EEF5EF 100%);
}

@media (min-width: 640px) {
	.at-ptangail--image {
		grid-template-columns: minmax(0, 1fr) 200px;
	}
}

.at-ptangail__title {
	display: flex;
	align-items: center;
	gap: var(--at-space-2);
	margin: 0 0 var(--at-space-2);
	color: var(--at-green-deep);
	font-size: var(--at-text-lg);
}

.at-ptangail__title .at-icon {
	color: var(--at-green);
}

.at-ptangail__body p {
	margin: 0 0 var(--at-space-2);
	color: var(--at-text);
	font-size: var(--at-text-sm);
}

.at-ptangail__media {
	overflow: hidden;
	border-radius: var(--at-radius-button);
}

.at-ptangail__image {
	display: block;
	width: 100%;
	height: auto;
}

/* The side column. */
.at-pshort__row {
	display: grid;
	grid-template-columns: minmax(0, auto) minmax(0, 1fr);
	gap: var(--at-space-3);
	align-items: center;
	padding-block: 10px;
	border-bottom: 1px solid var(--at-border);
}

.at-pshort__row:last-child {
	border-bottom: 0;
}

.at-ppride {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	margin: 0;
	border: 1px solid #D5E6DA;
	border-radius: var(--at-radius-card);
	background: linear-gradient(160deg, #F3F8F2 0%, #E6F0E6 100%);
	box-shadow: var(--at-shadow-card);
}

.at-ppride__text {
	display: grid;
	gap: 2px;
	padding: var(--at-space-5) var(--at-space-5) var(--at-space-3);
	color: var(--at-green-deep);
	font-size: var(--at-text-lg);
	font-weight: 700;
	line-height: 1.5;
}

.at-ppride__line {
	font-size: var(--at-text-base);
}

.at-ppride__media {
	position: relative;
	min-height: 200px;
}

.at-ppride__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 25%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 25%);
}

/* On narrow phones two cards share a row: smaller words. */
@media (max-width: 479px) {
	.at-scard__title {
		font-size: var(--at-text-sm);
	}

	.at-scard__body {
		padding: var(--at-space-2) calc(var(--at-space-2) + 20px) var(--at-space-2) var(--at-space-2);
	}
}

/* 4. A river's, place's or heritage entry's page (TD-156) ----------------- */
.at-lhero__pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--at-space-2);
	margin: var(--at-space-3) 0 0;
	padding: 0;
	list-style: none;
}

.at-lhero__pill {
	display: inline-flex;
	align-items: center;
	min-height: 30px;
	padding: 2px 14px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: var(--at-radius-button);
	background: rgba(0, 56, 50, 0.85);
	color: var(--at-white);
	font-size: var(--at-text-sm);
	font-weight: 600;
	text-decoration: none;
}

a.at-lhero__pill:hover {
	background: var(--at-green);
	color: var(--at-white);
}

/* Rivers and places: photographs, facts and map in one row. */
.at-sdetail__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--at-space-5);
	align-items: start;
}

@media (min-width: 760px) {
	.at-sdetail__top {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

@media (min-width: 1100px) {
	.at-sdetail__top {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 0.9fr);
	}
}

/* The photographs: one at a time, with arrows and thumbnails. */
.at-sphotos {
	min-width: 0;
}

.at-sphotos__stage {
	position: relative;
}

.at-sphotos__row {
	position: relative;
	display: flex;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	border-radius: var(--at-radius-card);
	list-style: none;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.at-sphotos__row::-webkit-scrollbar {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.at-sphotos__row {
		scroll-behavior: auto;
	}
}

.at-sphotos__slide {
	position: relative;
	flex: 0 0 100%;
	scroll-snap-align: start;
}

.at-sphotos__slide figure {
	margin: 0;
}

.at-sphotos__open {
	display: block;
}

.at-sphotos__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.at-sphotos__credit {
	position: absolute;
	right: 8px;
	bottom: 6px;
	margin: 0;
	font-size: 11px;
}

.at-sphotos .at-pgallery__arrow {
	top: calc(50% - 18px);
}

.at-sphotos .at-pgallery__arrow--prev {
	left: 10px;
}

.at-sphotos .at-pgallery__arrow--next {
	right: 10px;
}

.at-sphotos__thumbs {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--at-space-2);
	margin: var(--at-space-2) 0 0;
	padding: 0;
	list-style: none;
}

.at-sphotos__thumb {
	display: block;
	width: 100%;
	padding: 0;
	overflow: hidden;
	border: 2px solid transparent;
	border-radius: var(--at-radius-button);
	background: none;
	cursor: pointer;
}

.at-sphotos__thumb:hover,
.at-sphotos__thumb:focus-visible {
	border-color: var(--at-green);
	outline: none;
}

.at-sphotos__thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.at-sfacts__more {
	margin: var(--at-space-3) 0 0;
	text-align: right;
}

/* The map: the district drawn small, the upazila marked, a pin. */
.at-smap__drawing .at-map {
	margin: 0;
}

.at-smap__drawing .at-map__svg {
	display: block;
	width: 100%;
	max-height: 230px;
}

.at-map__pin path {
	fill: #C53030;
	stroke: var(--at-white);
	stroke-width: 3;
}

.at-map__pin circle {
	fill: var(--at-white);
}

.at-smap__links {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: var(--at-space-2);
	margin: var(--at-space-3) 0 0;
}

.at-smap__links .at-button {
	justify-content: center;
	padding-inline: 10px;
}

/* Nearby places: a small picture, the name, how far. */
.at-snear__list {
	display: grid;
	gap: var(--at-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.at-snear__link {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	gap: var(--at-space-3);
	align-items: center;
	padding: 6px;
	border: 1px solid var(--at-border);
	border-radius: var(--at-radius-button);
	background: var(--at-white);
	color: var(--at-heading);
	text-decoration: none;
}

.at-snear__link:hover {
	border-color: var(--at-green);
	background: #F3F8F2;
}

.at-snear__media {
	display: grid;
	place-items: center;
	overflow: hidden;
	width: 64px;
	height: 48px;
	border-radius: 6px;
	background: var(--at-bg);
	color: var(--at-muted);
}

.at-snear__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.at-snear__words {
	display: grid;
}

.at-snear__name {
	font-size: var(--at-text-sm);
	font-weight: 700;
	line-height: 1.4;
}

.at-snear__far {
	color: var(--at-text-muted);
	font-size: var(--at-text-xs);
}

/* About, with the quotation beside it on rivers and places. */
.at-sabout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--at-space-5);
	align-items: start;
}

@media (min-width: 760px) {
	.at-sabout--beside {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	}
}

.at-person__heading--mid {
	font-size: var(--at-text-xl);
}

.at-person__main > .at-sabout + .at-person__part,
.at-person__main > .at-person__part + .at-sources {
	padding-top: var(--at-space-5);
	border-top: 1px solid var(--at-border);
}

/* The gallery across the page. */
.at-sgallery__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--at-space-3);
	margin-bottom: var(--at-space-4);
}

.at-sgallery__head .at-panel__title {
	margin: 0;
}

.at-sgallery__all {
	gap: 6px;
	border: 0;
	cursor: pointer;
}

.at-sgallery__all[hidden],
.at-sgallery__grid > [hidden] {
	display: none;
}

.at-sgallery__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--at-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 760px) {
	.at-sgallery__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.at-sgallery__grid figure {
	margin: 0;
}

/* The invitation to send information. */
.at-sinvite {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--at-space-4);
	align-items: center;
	padding: var(--at-space-5);
	border: 1px solid #D5E6DA;
	border-radius: var(--at-radius-card);
	background: linear-gradient(160deg, #F3F8F2 0%, #E6F0E6 100%);
}

@media (min-width: 760px) {
	.at-sinvite {
		grid-template-columns: auto minmax(0, 1fr) auto;
	}
}

.at-sinvite > .at-button {
	grid-column: 1 / -1;
	justify-self: start;
}

@media (min-width: 760px) {
	.at-sinvite > .at-button {
		grid-column: auto;
	}
}

.at-sinvite__icon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--at-white);
	color: var(--at-green-deep);
}

.at-sinvite__title {
	margin: 0 0 4px;
	color: var(--at-green-deep);
	font-size: var(--at-text-lg);
}

.at-sinvite__words p {
	margin: 0;
	font-size: var(--at-text-sm);
}

/* 5. News and events (TD-157) --------------------------------------------- */
.at-scard__state {
	position: absolute;
	top: var(--at-space-2);
	left: var(--at-space-2);
	z-index: 2;
	margin: 0;
}

.at-chip--state {
	background: var(--at-gold-ink);
}

.at-sfeature__kind {
	display: flex;
	flex-wrap: wrap;
	gap: var(--at-space-2);
}

.at-snear__more {
	margin: var(--at-space-3) 0 0;
	text-align: right;
	font-size: var(--at-text-sm);
	font-weight: 600;
}

/* 6. The pages to send information and to contact the team (TD-158) ------- */
.at-form--panels {
	display: grid;
	gap: var(--at-space-5);
}

.at-form--panels .at-form__group {
	margin: 0;
	padding: var(--at-space-5);
}

/* A legend sits in the panel like a panel's title. */
.at-form--panels .at-form__group > legend {
	float: left;
	width: 100%;
	margin: 0 0 var(--at-space-4);
	padding: 0;
}

.at-form--panels .at-form__group > legend + * {
	clear: both;
}

.at-form--panels > .at-form__hint {
	margin: 0;
}

.at-form__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 var(--at-space-4);
}

@media (min-width: 640px) {
	.at-form__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.at-form__row--three {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.at-form__row > .at-form__field:last-child {
	margin-bottom: var(--at-space-5);
}

.at-form--panels input[type="text"],
.at-form--panels input[type="email"],
.at-form--panels input[type="tel"],
.at-form--panels input[type="url"],
.at-form--panels select,
.at-form--panels textarea {
	width: 100%;
}

.at-form__send {
	margin: 0;
}

.at-form__send .at-button {
	gap: var(--at-space-2);
	min-width: 200px;
	justify-content: center;
}

/* What is sent: tiles, one to choose. The radio stays, for keyboard and readers. */
.at-kinds {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--at-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 700px) {
	.at-kinds {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.at-kinds__item {
	position: relative;
}

.at-kinds__input {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--at-green-deep);
}

.at-kinds__tile {
	display: grid;
	gap: 4px;
	justify-items: center;
	height: 100%;
	padding: var(--at-space-4) var(--at-space-3) var(--at-space-3);
	border: 1px solid var(--at-border);
	border-radius: var(--at-radius-button);
	background: var(--at-white);
	color: var(--at-heading);
	text-align: center;
	cursor: pointer;
}

.at-kinds__tile .at-icon {
	color: var(--at-green);
}

.at-kinds__name {
	font-size: var(--at-text-sm);
	font-weight: 700;
	line-height: 1.4;
}

.at-kinds__hint {
	color: var(--at-text-muted);
	font-size: var(--at-text-xs);
	line-height: 1.45;
}

.at-kinds__tile:hover {
	border-color: var(--at-green);
	background: #F3F8F2;
}

.at-kinds__input:checked + .at-kinds__tile {
	border: 2px solid var(--at-green-deep);
	background: #EAF2EE;
}

.at-kinds__input:focus-visible + .at-kinds__tile {
	outline: 3px solid var(--at-gold);
	outline-offset: 2px;
}

.at-kinds__input[aria-invalid="true"] + .at-kinds__tile {
	border-color: var(--at-error);
}

/* Sent. */
.at-formdone {
	display: grid;
	justify-items: center;
	gap: var(--at-space-2);
	padding: var(--at-space-7) var(--at-space-5);
	text-align: center;
}

.at-formdone__icon {
	color: var(--at-green);
}

.at-formdone__title {
	margin: 0;
	color: var(--at-green-deep);
	font-size: var(--at-text-xl);
}

.at-formdone p {
	max-width: 520px;
	margin: 0;
}

/* How it works: three numbered steps. */
.at-steps__list {
	display: grid;
	gap: var(--at-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: at-step;
}

.at-steps__list li {
	position: relative;
	display: grid;
	gap: 2px;
	padding-left: 44px;
	counter-increment: at-step;
}

.at-steps__list li::before {
	content: counter(at-step);
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--at-green-deep);
	color: var(--at-white);
	font-weight: 700;
}

.at-steps__name {
	color: var(--at-green-deep);
	font-weight: 700;
}

.at-steps__text,
.at-formprivacy p {
	margin: 0;
	color: var(--at-text);
	font-size: var(--at-text-sm);
}

.at-form__tips {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--at-text-sm);
}

.at-formpage__contact {
	margin: 0;
}

.at-formpage__contact .at-button {
	gap: var(--at-space-2);
	width: 100%;
	justify-content: center;
}

.at-formways .at-onward__tiles {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 700px) {
	.at-formways .at-onward__tiles {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.at-contact__list a {
	overflow-wrap: anywhere;
}

/* Contact details: the label above its value, so long addresses read well. */
.at-contact__list .at-pshort__row {
	grid-template-columns: minmax(0, 1fr);
	gap: 2px;
}

.at-contact__list dd {
	padding-left: 26px;
}

.at-contact__about-text {
	margin: 0 0 var(--at-space-3);
	font-size: var(--at-text-sm);
}

/* A page's text (page.php, TD-164) and the "About us" page's (TD-163): in a
   panel, read at an easy line length; the invitation under both columns. */
.at-pagetext .at-prose {
	max-width: 68ch;
}

.at-pagetext .at-prose > :first-child {
	margin-top: 0;
}

.at-pagetext .at-prose > :last-child {
	margin-bottom: 0;
}

.at-pagetext .at-prose h2,
.at-pagetext .at-prose h3 {
	color: var(--at-green-deep);
}

.at-pagetext__parts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--at-space-2);
	align-items: center;
	margin-top: var(--at-space-5);
	font-weight: 600;
}

.at-pagetext__parts a,
.at-pagetext__parts > .post-page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 36px;
	height: 36px;
	padding-inline: var(--at-space-2);
	border: 1px solid var(--at-border);
	border-radius: 999px;
}

.at-pagetext__parts .current {
	border-color: var(--at-green-deep);
	background: var(--at-green-deep);
	color: var(--at-white);
}

.at-pagetext__updated {
	display: flex;
	gap: var(--at-space-2);
	align-items: center;
	margin: var(--at-space-5) 0 0;
	padding-top: var(--at-space-4);
	border-top: 1px solid var(--at-border);
	color: var(--at-text-muted);
	font-size: var(--at-text-sm);
}

/* The side of a page: the pages of its part and the site's own pages. */
.at-pagelinks__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.at-pagelinks__list li + li {
	border-top: 1px solid var(--at-border);
}

.at-pagelinks__link {
	display: flex;
	gap: var(--at-space-2);
	align-items: center;
	justify-content: space-between;
	min-height: 44px;
	padding-block: var(--at-space-2);
	color: var(--at-text);
	text-decoration: none;
}

.at-pagelinks__link:hover {
	color: var(--at-green);
}

.at-pagelinks__link .at-icon {
	flex: none;
	color: var(--at-green);
}

.at-pagelinks__link[aria-current="page"] {
	color: var(--at-green-deep);
	font-weight: 700;
}

.at-aboutpage__invite {
	margin-top: var(--at-space-6);
}

@media (min-width: 700px) {
	.at-aboutpage .at-formways .at-onward__tiles {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.at-aboutpage .at-formways .at-onward__tiles {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* 7. The news and events page (TD-159) ----------------------------------- */
.at-hub__part {
	min-width: 0;
}

.at-hub__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--at-space-2) var(--at-space-4);
	margin-bottom: var(--at-space-4);
}

/* A heading with a green bar before it, as in the design. */
.at-hub__title {
	margin: 0;
	padding-left: var(--at-space-3);
	border-left: 4px solid var(--at-green-deep);
	color: var(--at-green-deep);
	font-size: var(--at-text-2xl);
	line-height: 1.2;
}

.at-hub__all,
.at-hubevents__all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--at-green-deep);
	font-size: var(--at-text-sm);
	font-weight: 700;
	text-decoration: none;
}

.at-hub__all:hover,
.at-hubevents__all:hover {
	text-decoration: underline;
}

.at-hubdate {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--at-text-muted);
	font-size: var(--at-text-xs);
	font-weight: 600;
}

/* Latest news: one told large beside three. */
.at-hub__latest {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--at-space-4);
}

@media (min-width: 900px) {
	.at-hub__latest {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.at-hub__latest--one {
		grid-template-columns: minmax(0, 1fr);
	}
}

.at-hublead {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 0;
}

.at-hublead__media {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 10;
	background: var(--at-bg);
	color: var(--at-muted);
}

.at-hublead__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.at-hublead__date {
	position: absolute;
	top: var(--at-space-3);
	left: var(--at-space-3);
	background: var(--at-green-deep);
}

.at-hublead__date .at-hubdate {
	color: var(--at-white);
}

.at-hublead__kind {
	position: absolute;
	bottom: var(--at-space-3);
	left: var(--at-space-3);
}

.at-hublead__body {
	display: grid;
	gap: var(--at-space-2);
	padding: var(--at-space-4) var(--at-space-5) var(--at-space-5);
}

.at-hublead__title {
	margin: 0;
	font-size: var(--at-text-xl);
	line-height: 1.4;
}

.at-hublead__title a,
.at-hubitem__title,
.at-hubevent__title a {
	color: var(--at-heading);
	text-decoration: none;
}

.at-hublead__title a:hover,
.at-hubitem__title:hover,
.at-hubevent__title a:hover {
	text-decoration: underline;
}

.at-hublead__text,
.at-hublead__more {
	margin: 0;
}

.at-hublead__text {
	font-size: var(--at-text-sm);
}

.at-hublist {
	display: grid;
	gap: var(--at-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.at-hubitem {
	display: grid;
	grid-template-columns: 132px minmax(0, 1fr);
	gap: var(--at-space-3);
	align-items: center;
	padding: var(--at-space-2);
}

.at-hubitem__media {
	display: grid;
	place-items: center;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: var(--at-radius-button);
	background: var(--at-bg);
	color: var(--at-muted);
}

.at-hubitem__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.at-hubitem__words {
	display: grid;
	gap: 4px;
	justify-items: start;
}

.at-hubitem__title {
	font-size: var(--at-text-base);
	font-weight: 700;
	line-height: 1.45;
}

.at-hubitem__kind {
	padding: 1px 10px;
	border: 1px solid #CFE2D6;
	border-radius: var(--at-radius-button);
	background: #EEF5EF;
	color: var(--at-green-deep);
	font-size: var(--at-text-xs);
	font-weight: 600;
}

/* Upcoming events: a dark heading band, the date on each picture. */
.at-hubevents {
	overflow: hidden;
	padding: 0;
}

.at-hubevents__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--at-space-2);
	padding: var(--at-space-3) var(--at-space-4);
	background: var(--at-green-deep);
}

.at-hubevents__title {
	display: flex;
	align-items: center;
	gap: var(--at-space-2);
	margin: 0;
	color: var(--at-white);
	font-size: var(--at-text-lg);
}

.at-hubevents__all {
	color: var(--at-white);
}

.at-hubevents__all:hover {
	color: var(--at-white);
}

.at-hubevents__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.at-hubevent {
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr);
	gap: var(--at-space-3);
	padding: var(--at-space-4);
}

.at-hubevent + .at-hubevent {
	border-top: 1px solid var(--at-border);
}

.at-hubevent__media {
	position: relative;
	align-self: start;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: var(--at-radius-button);
	background: var(--at-bg);
}

.at-hubevent__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.at-hubevent__day {
	position: absolute;
	bottom: 0;
	left: 0;
	display: grid;
	min-width: 46px;
	padding: 4px 6px;
	border-radius: 0 var(--at-radius-button) 0 0;
	background: var(--at-white);
	color: var(--at-green-deep);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
}

.at-hubevent__d {
	font-size: var(--at-text-lg);
}

.at-hubevent__words {
	display: grid;
	gap: 4px;
	align-content: start;
	justify-items: start;
}

.at-hubevent__title {
	margin: 0;
	font-size: var(--at-text-base);
	line-height: 1.4;
}

.at-hubevent__meta {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	color: var(--at-text-muted);
	font-size: var(--at-text-xs);
}

.at-hubevent__meta .at-icon {
	flex: none;
	color: var(--at-green);
}

.at-hubevent__more {
	margin: 4px 0 0;
}

.at-hubevent__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: var(--at-radius-pill);
	background: #E6F0E6;
	color: var(--at-green-deep);
	font-size: var(--at-text-xs);
	font-weight: 700;
	text-decoration: none;
}

.at-hubevent__link:hover {
	background: var(--at-green-deep);
	color: var(--at-white);
}

.at-hubevents__none {
	margin: 0;
	padding: var(--at-space-4);
	color: var(--at-text-muted);
}

/* Following the news. */
.at-hubfollow {
	padding: var(--at-space-4) var(--at-space-5);
	border: 1px solid #D5E6DA;
	border-radius: var(--at-radius-card);
	background: linear-gradient(160deg, #F3F8F2 0%, #E6F0E6 100%);
}

.at-hubfollow__title {
	display: flex;
	align-items: center;
	gap: var(--at-space-2);
	margin: 0 0 var(--at-space-2);
	color: var(--at-green-deep);
	font-size: var(--at-text-lg);
}

.at-hubfollow__text {
	margin: 0 0 var(--at-space-3);
	font-size: var(--at-text-sm);
}

/* 8. Interviews, stories, institutions, businesses (TD-161) --------------- */
/* Below the first screen, drawing waits until it is near (faster first paint). */
.at-sect__list {
	content-visibility: auto;
	contain-intrinsic-size: auto 600px;
}

.at-voices__lead {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--at-space-5);
}

@media (min-width: 1000px) {
	.at-voices__lead {
		grid-template-columns: minmax(0, 1fr) 300px;
	}

	.at-voices__lead--one {
		grid-template-columns: minmax(0, 1fr);
	}
}

.at-voice__media {
	position: relative;
	display: grid;
	place-items: center;
	color: var(--at-muted);
}

.at-voice__media .at-sfeature__image {
	position: absolute;
	inset: 0;
}

.at-voice__kind {
	position: absolute;
	top: var(--at-space-3);
	left: var(--at-space-3);
}

.at-voice__title {
	font-size: var(--at-text-3xl);
	line-height: 1.3;
}

.at-voice__who {
	margin: 0;
	color: var(--at-green-deep);
	font-size: var(--at-text-lg);
	font-weight: 600;
}

.at-voices__side {
	background: linear-gradient(160deg, #F3F8F2 0%, #E6F0E6 100%);
}

.at-voices__side-link {
	color: inherit;
	text-decoration: none;
}

.at-voices__side-link:hover {
	text-decoration: underline;
}

.at-snear__media--round {
	width: 48px;
	height: 48px;
	border-radius: 50%;
}

.at-snear__link:has(.at-snear__media--round) {
	grid-template-columns: 48px minmax(0, 1fr) auto;
}

/* The row: interviews three beside a quotation; stories four. */
.at-voices__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--at-space-5);
}

@media (min-width: 1000px) {
	.at-voices__row--quote .at-voices__body {
		grid-template-columns: minmax(0, 1fr) 300px;
	}

	.at-voices__row--quote .at-sgrid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.at-voices__row .at-squote {
	min-height: 260px;
}

.at-voices__body > .at-sgrid {
	align-items: start;
}

.at-scard__details {
	justify-self: start;
	gap: 6px;
	margin-top: var(--at-space-1);
}

.at-scard:has(.at-scard__details) .at-scard__body {
	padding-right: var(--at-space-3);
}

/* Directories: the invitation beside a picture. */
.at-dirjoin {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--at-space-5);
}

@media (min-width: 900px) {
	.at-dirjoin--image {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	}
}

.at-dirjoin__box {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--at-space-4);
	align-items: center;
	padding: var(--at-space-5);
	border: 1px solid #D5E6DA;
	border-radius: var(--at-radius-card);
	background: linear-gradient(160deg, #EAF4EC 0%, #DDEDE1 100%);
}

.at-dirjoin__icon {
	color: var(--at-green-deep);
}

.at-dirjoin__title {
	margin: 0 0 var(--at-space-1);
	color: var(--at-green-deep);
	font-size: var(--at-text-xl);
}

.at-dirjoin__text {
	margin: 0 0 var(--at-space-3);
	font-size: var(--at-text-sm);
}

.at-dirjoin__media {
	position: relative;
	overflow: hidden;
	min-height: 180px;
	margin: 0;
	border-radius: var(--at-radius-card);
}

.at-dirjoin__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Businesses: kinds as tiles with a picture. */
.at-dirkinds__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--at-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 760px) {
	.at-dirkinds__list {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

.at-dirkinds__tile {
	display: grid;
	overflow: hidden;
	height: 100%;
	border: 1px solid var(--at-border);
	border-radius: var(--at-radius-card);
	background: var(--at-white);
	box-shadow: var(--at-shadow-card);
	color: var(--at-heading);
	text-decoration: none;
}

.at-dirkinds__tile:hover {
	border-color: var(--at-green);
}

.at-dirkinds__media {
	position: relative;
	display: grid;
	place-items: center;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--at-bg);
	color: var(--at-green-deep);
}

.at-dirkinds__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.at-dirkinds__name {
	padding: var(--at-space-2);
	font-size: var(--at-text-sm);
	font-weight: 700;
	text-align: center;
}

/* Interviews and stories: the band inviting the reader. */
.at-voiceband {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--at-space-4);
	align-items: center;
	padding: var(--at-space-5) var(--at-space-6);
	border-radius: var(--at-radius-card);
	background: linear-gradient(100deg, #003832 0%, #0F4F40 100%);
	color: var(--at-white);
}

@media (min-width: 760px) {
	.at-voiceband {
		grid-template-columns: auto minmax(0, 1fr) auto;
	}
}

.at-voiceband > .at-button {
	grid-column: 1 / -1;
	justify-self: start;
}

@media (min-width: 760px) {
	.at-voiceband > .at-button {
		grid-column: auto;
	}
}

.at-voiceband__icon {
	color: var(--at-gold);
}

.at-voiceband__title {
	margin: 0 0 4px;
	color: var(--at-white);
	font-size: var(--at-text-xl);
}

.at-voiceband__text {
	margin: 0;
	color: var(--at-on-deep-muted);
	font-size: var(--at-text-sm);
}

.at-voiceband__button {
	background: var(--at-white);
	color: var(--at-green-deep);
}

.at-voiceband__button:hover {
	background: var(--at-gold);
	color: var(--at-green-deep);
}

.at-voiceband--story {
	border: 1px solid #D5E6DA;
	background: linear-gradient(100deg, #EAF4EC 0%, #DDEDE1 100%);
	color: var(--at-text);
}

.at-voiceband--story .at-voiceband__title {
	color: var(--at-green-deep);
}

.at-voiceband--story .at-voiceband__text {
	color: var(--at-text);
}

.at-voiceband--story .at-voiceband__icon {
	color: var(--at-green-deep);
}

.at-voiceband--story .at-voiceband__button {
	background: var(--at-green-deep);
	color: var(--at-white);
}