/*
 * Final responsive layer for the custom village templates.
 * This file is intentionally loaded last so page-level visuals stay intact
 * while fixed desktop widths are relaxed on smaller screens.
 */

.village-home,
.village-profile,
.village-government,
.village-news,
.village-gallery,
.village-information,
.village-infographics-page {
	max-width: 100%;
	overflow-x: clip;
	width: 100%;
}

.village-home *,
.village-profile *,
.village-government *,
.village-news *,
.village-gallery *,
.village-information *,
.village-infographics-page *,
.village-home *::before,
.village-profile *::before,
.village-government *::before,
.village-news *::before,
.village-gallery *::before,
.village-information *::before,
.village-infographics-page *::before,
.village-home *::after,
.village-profile *::after,
.village-government *::after,
.village-news *::after,
.village-gallery *::after,
.village-information *::after,
.village-infographics-page *::after {
	box-sizing: border-box;
}

body.home,
body.village-profile-page,
body.village-government-header-scrolled,
body.village-news-header-scrolled,
body.village-gallery-header-scrolled,
body.village-information-header-hidden,
body.village-infographics-page-body,
body.page-template-page-data-infografis,
body.page-template-page-profil_desa,
body.page-template-page-pemerintahan_desa,
body.page-template-page-berita,
body.page-template-page-galeri,
body.page-template-page-data,
body.page-id-6,
body.page-id-7 {
	max-width: 100%;
	overflow-x: clip;
}

.village-home img,
.village-profile img,
.village-government img,
.village-news img,
.village-gallery img,
.village-information img,
.village-infographics-page img,
.village-home svg,
.village-profile svg,
.village-government svg,
.village-news svg,
.village-gallery svg,
.village-information svg,
.village-infographics-page svg,
.village-home video,
.village-profile video,
.village-government video,
.village-news video,
.village-gallery video,
.village-information video,
.village-infographics-page video {
	height: auto;
	max-width: 100%;
}

.village-home__hero-inner,
.section-pad,
.village-profile__inner,
.village-profile__hero-content,
.village-government__inner,
.village-government__hero-content,
.village-news__inner,
.village-gallery__inner,
.village-information__inner,
.village-infographics-page__intro,
.village-infographics-page__sections {
	max-width: min(100%, 1280px);
	min-width: 0;
	width: 100%;
}

.village-header__inner,
.village-header__brand,
.village-header__brand-copy,
.village-header__nav,
.village-header__nav-list,
.village-footer,
.village-footer *,
.village-home__section-copy,
.village-home__section-head,
.village-home__stats,
.village-home__stat-card,
.village-home__chart-area,
.village-infographics-page__section,
.village-infographics-page__visual,
.village-information__tabs-shell,
.village-information__tabs,
.village-information__toolbar,
.village-information__table-wrap,
.village-profile__map-tool,
.village-profile__map-panel,
.village-profile__map,
.village-news article,
.village-gallery article {
	min-width: 0;
}

.village-home h1,
.village-home h2,
.village-home h3,
.village-profile h1,
.village-profile h2,
.village-profile h3,
.village-government h1,
.village-government h2,
.village-government h3,
.village-news h1,
.village-news h2,
.village-news h3,
.village-gallery h1,
.village-gallery h2,
.village-gallery h3,
.village-information h1,
.village-information h2,
.village-information h3,
.village-infographics-page h1,
.village-infographics-page h2,
.village-infographics-page h3,
.village-home p,
.village-profile p,
.village-government p,
.village-news p,
.village-gallery p,
.village-information p,
.village-infographics-page p {
	overflow-wrap: break-word;
}

@media (max-width: 1024px) {
	.village-home__hero-inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.village-home__stats {
		justify-self: stretch;
		max-width: 620px;
		width: 100%;
	}

	.village-profile__map-layout,
	.village-information__hero-layout,
	.village-information__posbankum-layout,
	.village-information__assistance-layout,
	.village-government [class*="__layout"],
	.village-news [class*="__layout"],
	.village-gallery [class*="__layout"] {
		grid-template-columns: minmax(0, 1fr);
	}

	.village-government [class*="__grid"],
	.village-news [class*="__grid"],
	.village-gallery [class*="__grid"] {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	}
}

@media (min-width: 481px) and (max-width: 768px) {
	.village-home__hero,
	.section-pad,
	.village-profile__inner,
	.village-profile__hero-content,
	.village-government__inner,
	.village-government__hero-content,
	.village-news__inner,
	.village-gallery__inner,
	.village-information__inner,
	.village-infographics-page__intro,
	.village-infographics-page__sections {
		padding-left: 24px;
		padding-right: 24px;
	}
}

@media (max-width: 768px) {
	.village-header {
		max-width: 100%;
		overflow: visible;
	}

	.village-header__inner {
		align-items: center;
		gap: 10px;
		width: 100%;
	}

	.village-header__brand {
		flex: 1 1 auto;
		max-width: calc(100% - 58px);
	}

	.village-header__brand-copy {
		max-width: 100%;
	}

	.village-header__brand strong,
	.village-header__brand small {
		display: block;
		max-width: 100%;
		white-space: normal;
	}

	.village-header__menu-toggle {
		flex: 0 0 auto;
	}

	.village-header__nav {
		max-width: calc(100vw - 32px);
		right: 16px;
		width: calc(100vw - 32px);
	}

	.village-home__hero,
	.section-pad,
	.village-profile__inner,
	.village-profile__hero-content,
	.village-government__inner,
	.village-government__hero-content,
	.village-news__inner,
	.village-gallery__inner,
	.village-information__inner,
	.village-infographics-page__intro,
	.village-infographics-page__sections {
		padding-left: 16px;
		padding-right: 16px;
	}

	.village-home__hero {
		align-items: flex-start;
		min-height: auto;
		padding-bottom: 48px;
		padding-top: 112px;
	}

	.village-home__hero-inner {
		gap: 28px;
		max-width: 100%;
		width: 100%;
	}

	.village-home__hero-copy {
		max-width: 100%;
		width: 100%;
	}

	.village-home__hero-copy .village-home__eyebrow {
		font-size: clamp(17px, 5vw, 22px);
		line-height: 1.25;
	}

	.village-home__hero h1 {
		font-size: clamp(36px, 10.8vw, 52px);
		line-height: 1.05;
		margin-bottom: 18px;
		max-width: 100%;
		white-space: normal;
	}

	.village-home__hero h1 span {
		display: block;
	}

	.village-home__hero h1 span:last-child {
		white-space: normal;
	}

	.village-home__hero-copy p:not(.village-home__eyebrow) {
		font-size: clamp(15px, 4.2vw, 17px);
		line-height: 1.62;
		max-width: 36ch;
		width: 100%;
	}

	.village-home__hero-actions {
		width: 100%;
	}

	.village-home__hero-actions a,
	.village-home__notice a,
	.village-information__intro > a,
	.village-gallery__hero-content > a {
		width: 100%;
	}

	.village-home__stats {
		border-radius: 16px;
		max-width: 100%;
		padding: 16px;
		width: 100%;
	}

	.village-home__stats-grid,
	.village-home__pill-grid,
	.village-home__news-grid,
	.village-home__gallery-row,
	.village-home__about,
	.village-home__infographic-header,
	.village-home__infographic-content,
	.village-home__data-summary,
	.village-home__proportion-grid,
	.village-home__creative-chart,
	.village-home__capacity-grid,
	.village-home__housing-grid,
	.village-home__asset-grid,
	.village-home__asset-summary,
	.village-home__product-cards,
	.village-infographics-page__product-cards,
	.village-infographics-page__product-strip,
	.village-infographics-page__product-metrics,
	.village-information__cards,
	.village-information__latest-grid,
	.village-information__function-grid,
	.village-information__schedule-grid,
	.village-profile__history-layout,
	.village-profile__logo-story,
	.village-profile__direction,
	.village-profile__geography-head,
	.village-profile__boundaries-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.village-home__stat-card {
		min-height: 0;
		padding: 16px;
	}

	.village-home__section-head {
		gap: 14px;
	}

	.village-home__section-head h2,
	.village-profile__section-intro h2,
	.village-profile__section-heading h2,
	.village-government__section-heading h2,
	.village-news h2,
	.village-gallery h2,
	.village-information__section-heading h2,
	.village-infographics-page__section-head h2 {
		font-size: clamp(26px, 8vw, 38px);
		line-height: 1.12;
	}

	.village-infographics-page__toolbar,
	.village-information__tabs-shell,
	.village-profile__section-nav,
	.village-government__jump-nav {
		margin-left: 16px;
		margin-right: 16px;
		max-width: calc(100vw - 32px);
		width: calc(100vw - 32px);
	}

	.village-infographics-page__toolbar {
		align-items: stretch;
		display: grid;
		gap: 8px;
		grid-template-columns: minmax(0, 1fr);
		margin-bottom: 14px;
		margin-top: 0;
		padding: 6px;
		top: 0;
	}

	.village-infographics-page__controls,
	.village-infographics-page__view-tabs {
		max-width: 100%;
		min-width: 0;
		width: 100%;
	}

	.village-infographics-page__actions {
		display: grid;
		gap: 8px;
		grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
		width: 100%;
	}

	.village-infographics-page__period,
	.village-infographics-page__select,
	.village-infographics-page__select > button[data-region-toggle] {
		max-width: 100%;
		min-width: 0;
		width: 100%;
	}

	.village-infographics-page__select > button[data-region-toggle] {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.village-infographics-page__view-tabs {
		overflow: hidden;
	}

	.village-infographics-page__view-tabs button {
		flex: 1 1 0;
		min-width: 0;
		padding-left: 8px;
		padding-right: 8px;
		white-space: nowrap;
	}

	.village-infographics-page__section {
		border-radius: 18px;
		overflow: hidden;
		padding: 18px 14px;
		width: 100%;
	}

	.village-infographics-page__section-head {
		grid-template-columns: 34px minmax(0, 1fr);
	}

	.village-infographics-page__section-head > strong {
		grid-column: 1 / -1;
		justify-self: start;
		max-width: 100%;
		white-space: normal;
	}

	.village-infographics-page__visual,
	.village-infographics-page__section[data-section="sebaranPenduduk"] .village-infographics-page__visual,
	.village-infographics-page__section[data-section="fasilitas"] .village-infographics-page__visual {
		gap: 16px;
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.village-infographics-page__chart-wrap,
	.village-infographics-page__section[data-section="sebaranPenduduk"] .village-infographics-page__chart-wrap,
	.village-infographics-page__section[data-section="fasilitas"] .village-infographics-page__chart-wrap {
		min-width: 0;
		padding: 0;
		width: 100%;
	}

	.village-home__chart,
	.village-home__chart--columns,
	.village-home__pyramid-chart {
		max-width: 100%;
		min-width: 0;
		overflow: visible;
		width: 100%;
	}

	.village-home__pie-layout,
	.village-home__donut-layout,
	.village-infographics-page__section[data-section="sebaranPenduduk"] .village-home__pie-layout,
	.village-infographics-page__section[data-section="sebaranPenduduk"] .village-home__donut-layout {
		align-items: center;
		gap: 16px;
		grid-template-columns: minmax(0, 1fr);
	}

	.village-home__pie,
	.village-home__donut,
	.village-infographics-page__section[data-section="sebaranPenduduk"] .village-home__pie {
		max-width: min(70vw, 240px);
		width: min(70vw, 240px);
	}

	.village-home__pie-details,
	.village-home__donut-details,
	.village-home__donut-detail {
		max-width: 100%;
		min-width: 0;
		width: 100%;
	}

	.village-home__pie-detail,
	.village-home__donut-detail,
	.village-infographics-page__section[data-section="sebaranPenduduk"] .village-home__pie-detail {
		grid-template-columns: 10px minmax(0, 1fr) auto;
	}

	.village-home__pie-detail span,
	.village-home__donut-detail span {
		min-width: 0;
	}

	.village-home__bar-row,
	.village-home__lollipop-row,
	.village-infographics-page__section[data-section="fasilitas"] .village-home__bar-row {
		gap: 8px 10px;
		grid-template-columns: minmax(0, 1fr) auto;
		min-width: 0;
	}

	.village-home__bar-track,
	.village-home__lollipop-track,
	.village-infographics-page__section[data-section="fasilitas"] .village-home__bar-track {
		grid-column: 1 / -1;
		grid-row: 2;
		width: 100%;
	}

	.village-home__column-chart {
		gap: 4px;
		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
		min-width: 0;
		width: 100%;
	}

	.village-infographics-page__section[data-section="desil"] .village-home__column-chart {
		grid-template-columns: repeat(11, minmax(0, 1fr));
	}

	.village-home__column {
		min-width: 0;
	}

	.village-home__column span,
	.village-home__column strong {
		font-size: 9px;
		line-height: 1.15;
		overflow-wrap: anywhere;
	}

	.village-home__pyramid-head,
	.village-home__pyramid-row {
		gap: 6px;
		grid-template-columns: minmax(62px, 1fr) 46px minmax(62px, 1fr);
		min-width: 0;
		width: 100%;
	}

	.village-home__pyramid-head span,
	.village-home__pyramid-row strong {
		font-size: 9px;
		line-height: 1.2;
	}

	.village-home__pyramid-bar {
		height: 16px;
		min-width: 16px;
	}

	.village-home__pyramid-bar b {
		font-size: 8px;
		padding-left: 4px;
		padding-right: 4px;
	}

	.village-home__data-insight,
	.village-infographics-page__visual .village-home__data-insight {
		border-radius: 16px;
		min-height: 0;
		padding: 22px 18px;
		width: 100%;
	}

	.village-home__data-insight > strong,
	.village-infographics-page__visual .village-home__data-insight > strong {
		font-size: clamp(40px, 14vw, 56px);
		line-height: 1;
		margin-top: 10px;
	}

	.village-infographics-page__section-source {
		max-width: 100%;
		white-space: normal;
		width: 100%;
	}

	.village-infographics-page__section-source span {
		white-space: normal;
	}

	.village-information__hero-layout {
		gap: 28px;
	}

	.village-information__intro h1,
	.village-profile__hero h1,
	.village-government__hero h1,
	.village-news h1,
	.village-gallery__hero h1,
	.village-infographics-page__intro h1 {
		font-size: clamp(34px, 9.5vw, 52px);
		line-height: 1.08;
	}

	.village-information__tabs,
	.village-profile__section-nav > div,
	.village-government__jump-nav .village-government__inner {
		max-width: 100%;
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scrollbar-width: none;
	}

	.village-information__tabs::-webkit-scrollbar,
	.village-profile__section-nav > div::-webkit-scrollbar,
	.village-government__jump-nav .village-government__inner::-webkit-scrollbar {
		display: none;
	}

	.village-information__tabs a,
	.village-profile__section-nav a,
	.village-government__jump-nav a {
		flex: 0 0 auto;
		white-space: nowrap;
	}

	.village-information__toolbar {
		grid-template-columns: minmax(0, 1fr);
		padding: 18px;
		width: 100%;
	}

	.village-information__toolbar label,
	.village-information__toolbar input,
	.village-information__toolbar select,
	.village-information__select,
	.village-information__select > button[data-information-select-toggle],
	.village-information__table-meta,
	.village-information__table-meta label,
	.village-information__table-meta select {
		max-width: 100%;
		min-width: 0;
		width: 100%;
	}

	.village-information__table-wrap {
		overflow: visible;
		width: 100%;
	}

	.village-information__table-wrap table,
	.village-information__table-wrap tbody,
	.village-information__table-wrap tr,
	.village-information__table-wrap th,
	.village-information__table-wrap td {
		display: block;
		min-width: 0;
		width: 100%;
	}

	.village-information__table-wrap thead {
		display: none;
	}

	.village-information__table-wrap tr {
		border-radius: 16px;
		margin-bottom: 14px;
		overflow: hidden;
	}

	.village-information__table-wrap td {
		align-items: flex-start;
		display: grid;
		gap: 8px;
		grid-template-columns: minmax(95px, 0.72fr) minmax(0, 1.28fr);
		padding: 12px;
	}

	.village-information__table-wrap td::before {
		content: attr(data-label);
		font-size: 12px;
		font-weight: 800;
		letter-spacing: 0;
		line-height: 1.2;
		text-transform: uppercase;
	}

	.village-profile__map-toolbar,
	.village-profile__map-type,
	.village-profile__map-tabs {
		max-width: 100%;
		min-width: 0;
		width: 100%;
	}

	.village-profile__map {
		overflow: hidden;
	}

	.leaflet-popup-content {
		margin: 0;
		max-width: calc(100vw - 64px);
		min-width: 0;
		width: auto !important;
	}

	.village-map-popup {
		max-width: calc(100vw - 78px);
		min-width: 0;
		width: 100%;
	}

	.village-map-popup dl {
		gap: 8px;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.village-map-popup dd {
		font-size: clamp(21px, 7.2vw, 30px);
		line-height: 1.05;
	}

	.village-profile__map-popup-unit {
		display: block;
		font-size: 0.66em;
		margin-top: 2px;
	}
}

@media (max-width: 480px) {
	.village-header {
		padding-left: 8px;
		padding-right: 8px;
	}

	.village-header__inner {
		min-height: 66px;
		padding: 0 10px;
	}

	.village-header__logo {
		flex: 0 0 44px;
		height: 44px;
		width: 44px;
	}

	.village-header__brand strong {
		font-size: clamp(15px, 4.4vw, 18px);
		line-height: 1.15;
	}

	.village-header__brand small {
		font-size: clamp(10px, 3.1vw, 12px);
		line-height: 1.25;
	}

	.village-header__menu-toggle {
		height: 42px;
		width: 42px;
	}

	.village-home__hero {
		padding-left: 16px;
		padding-right: 16px;
	}

	.village-home__hero h1 {
		font-size: clamp(34px, 10.4vw, 46px);
		line-height: 1.07;
		max-width: 100%;
	}

	.village-home__hero-copy p:not(.village-home__eyebrow) {
		max-width: 100%;
	}

	.village-home__stats-head p {
		font-size: 18px;
	}

	.village-home__stat-number {
		font-size: clamp(32px, 10vw, 42px);
	}

	.village-home__section-head h2,
	.village-profile__section-intro h2,
	.village-profile__section-heading h2,
	.village-government__section-heading h2,
	.village-news h2,
	.village-gallery h2,
	.village-information__section-heading h2,
	.village-infographics-page__section-head h2 {
		font-size: clamp(25px, 8.2vw, 34px);
	}

	.village-infographics-page__intro,
	.village-information__hero {
		padding-top: 112px;
	}

	.village-infographics-page__toolbar {
		border-radius: 999px;
		grid-template-columns: minmax(0, 1fr);
	}

	.village-infographics-page__actions {
		grid-template-columns: minmax(0, 1fr);
	}

	.village-infographics-page__period {
		justify-content: center;
	}

	.village-infographics-page__view-tabs button {
		font-size: clamp(11px, 3.4vw, 13px);
		min-height: 38px;
		padding-left: 6px;
		padding-right: 6px;
	}

	.village-infographics-page__section {
		padding-left: 12px;
		padding-right: 12px;
	}

	.village-home__pie,
	.village-home__donut,
	.village-infographics-page__section[data-section="sebaranPenduduk"] .village-home__pie {
		max-width: min(66vw, 220px);
		width: min(66vw, 220px);
	}

	.village-home__pie-detail,
	.village-home__donut-detail {
		align-items: center;
		grid-template-columns: 10px minmax(0, 1fr);
	}

	.village-home__pie-detail strong,
	.village-home__pie-detail small,
	.village-home__donut-detail strong,
	.village-home__donut-detail small {
		grid-column: 2;
		justify-self: start;
	}

	.village-home__column-chart {
		gap: 3px;
	}

	.village-home__column span,
	.village-home__column strong {
		font-size: 8px;
	}

	.village-home__pyramid-head,
	.village-home__pyramid-row {
		grid-template-columns: minmax(50px, 1fr) 40px minmax(50px, 1fr);
	}

	.village-information__table-wrap td {
		grid-template-columns: minmax(0, 1fr);
	}

	.village-map-popup {
		padding: 16px 14px;
	}

	.village-map-popup dl {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.village-map-popup dt {
		font-size: 11px;
	}

	.village-map-popup dd {
		font-size: clamp(20px, 7vw, 26px);
	}
}

@media (max-width: 374px) {
	.village-home__hero,
	.section-pad,
	.village-profile__inner,
	.village-profile__hero-content,
	.village-government__inner,
	.village-government__hero-content,
	.village-news__inner,
	.village-gallery__inner,
	.village-information__inner,
	.village-infographics-page__intro,
	.village-infographics-page__sections {
		padding-left: 14px;
		padding-right: 14px;
	}

	.village-header__brand {
		max-width: calc(100% - 52px);
	}

	.village-home__hero h1 {
		font-size: clamp(32px, 10vw, 39px);
	}

	.village-home__hero-copy p:not(.village-home__eyebrow) {
		font-size: 15px;
		line-height: 1.58;
	}

	.village-home__stats {
		padding: 14px;
	}

	.village-infographics-page__toolbar,
	.village-information__tabs-shell,
	.village-profile__section-nav,
	.village-government__jump-nav {
		margin-left: 14px;
		margin-right: 14px;
		max-width: calc(100vw - 28px);
		width: calc(100vw - 28px);
	}

	.village-infographics-page__section-head {
		grid-template-columns: 30px minmax(0, 1fr);
	}

	.village-infographics-page__section-head > span {
		height: 30px;
		width: 30px;
	}

	.village-home__pie,
	.village-home__donut,
	.village-infographics-page__section[data-section="sebaranPenduduk"] .village-home__pie {
		max-width: min(62vw, 198px);
		width: min(62vw, 198px);
	}

	.village-home__pyramid-head,
	.village-home__pyramid-row {
		gap: 4px;
		grid-template-columns: minmax(46px, 1fr) 36px minmax(46px, 1fr);
	}

	.village-home__pyramid-bar b,
	.village-home__pyramid-head span,
	.village-home__pyramid-row strong {
		font-size: 7px;
	}

	.village-map-popup {
		max-width: calc(100vw - 68px);
		padding: 14px 12px;
	}

	.village-map-popup dl {
		gap: 6px;
	}
}