/* ==========================================================================
   Archive / single templates shared by news & project (お知らせ / 施工実績)
   ========================================================================== */

.container-flush {
	width: 100%;
}

/* ---------------------------------------------------------------------- */
/* Page banner + breadcrumb tabs                                          */
/* ---------------------------------------------------------------------- */
.page-banner {
	display: flex;
	align-items: stretch;
	border-bottom: 2px solid var(--color-navy);
	background-color: var(--color-bg-gray);
}

.page-banner__intro-group {
	flex: 1 1 685px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border-right: 2px solid var(--color-navy);
}

.page-banner__intro {
	flex: 1;
	padding: 52px 32px 32px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* When a meta block (e.g. the project single's category tag + spec line)
   follows the title, the intro no longer stretches/centers to fill the
   whole column — it sits at its natural height, with the meta block below. */
.page-banner__intro-group--has-meta .page-banner__intro {
	flex: 0 0 auto;
	justify-content: flex-start;
}

.page-banner__eyebrow {
	font-family: var(--font-en);
	font-size: 14px;
	font-weight: 500;
	color: var(--color-navy);
	margin-bottom: 0;
}

.page-banner__title {
	font-size: 77px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--color-navy);
}

.page-banner__desc {
	flex: 1 1 573px;
	padding: 32px;
	display: flex;
	align-items: flex-end;
}

.page-banner__desc p {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.9;
	color: var(--color-navy);
}

.page-banner__media {
	flex: 1 1 400px;
}

.page-banner__media-img {
	width: 100%;
	height: 100%;
	min-height: 220px;
	object-fit: cover;
}

.breadcrumb-tabs {
	flex: 0 0 98px;
	display: flex;
	flex-direction: column;
	text-align: center;
	border-left: 2px solid var(--color-navy);
}

.breadcrumb-tabs__item {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60px;
	font-family: var(--font-en);
	font-size: 13px;
	font-weight: 500;
	color: var(--color-navy);
	border-bottom: 2px solid var(--color-navy);
}

.breadcrumb-tabs__item:last-child {
	border-bottom: none;
}

.breadcrumb-tabs__item.is-current {
	background: var(--color-navy);
	color: var(--color-white);
	text-align: center;
}

.breadcrumb-tabs__item--title {
	font-family: var(--font-jp);
	justify-content: flex-start;
	text-align: left;
	padding: 12px 16px;
	line-height: 1.6;
	white-space: normal;
}

/* ---------------------------------------------------------------------- */
/* Category filter                                                         */
/* ---------------------------------------------------------------------- */
.category-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	padding: 20px 32px;
	background-image: radial-gradient(var(--color-border) 1px, transparent 1px);
	background-size: 18px 18px;
	background-color: var(--color-bg-gray);
}

.category-filter__label {
	font-family: var(--font-en);
	font-size: 14px;
	font-weight: 500;
	color: var(--color-navy);
	flex-shrink: 0;
}

.category-filter__list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.category-filter__item {
	display: inline-flex;
	align-items: center;
	padding: 4px 8px;
	font-size: 14px;
	font-weight: 500;
	color: var(--color-navy);
	border: 2px solid var(--color-navy);
	background: var(--color-white);
}

.category-filter__item.is-active {
	background: var(--color-navy);
	color: var(--color-white);
}

.category-filter__item:hover:not(.is-active) {
	background: var(--color-bg-gray-dark);
}

/* ---------------------------------------------------------------------- */
/* News archive grid (reuses .news-card from front-page.css)              */
/* ---------------------------------------------------------------------- */
.news-archive__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	border-top: 2px solid var(--color-navy);
}

/* 4件以下(1行に収まる)の場合のみ、右端カードの右側も枠で閉じる */
.news-archive__grid:not(:has(.news-card:nth-child(5))) .news-card:last-child {
	border-right: 2px solid var(--color-navy);
}

.news-archive__empty,
.project-archive__empty {
	padding: 48px 32px;
	font-size: 14px;
	color: var(--color-text-light);
}

/* ---------------------------------------------------------------------- */
/* Project archive grid (reuses .project-card from front-page.css)        */
/* ---------------------------------------------------------------------- */
.project-archive__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border-top: 2px solid var(--color-navy);
}

.project-archive__grid .project-card {
	border-bottom: 2px solid var(--color-navy);
}

.project-archive__grid--related {
	border-top: none;
	border: 2px solid var(--color-navy);
	margin-bottom: 0;
}

/* The wrapper above already draws its own right/bottom edge, so the cards'
   own right/bottom borders (meant for the divider lines between cards) would
   otherwise double up along that outer edge. */
.project-archive__grid--related .project-card {
	border-bottom: none;
}

.project-archive__grid--related .project-card:last-child {
	border-right: none;
}

/* ---------------------------------------------------------------------- */
/* Column archive grid                                                     */
/* ---------------------------------------------------------------------- */
.column-archive__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
	border-top: 2px solid var(--color-navy);
	border-left: 2px solid var(--color-navy);
}

/* Styled to match the TOP page's お役立ち情報 .column-card design, using this
   archive's own class names (the card here is one big link, with the
   corner-plus accent over the photo rather than a separate small link). */
.column-archive-card {
	display: flex;
	background: none;
	color: inherit;
	text-decoration: none;
}

.column-archive-card__body {
	flex: 1 1 43%;
	display: flex;
	flex-direction: column;
	padding: 13px 20px;
	border-right: 2px solid var(--color-navy);
	border-bottom: 2px solid var(--color-navy);
}

.column-archive-card__media {
	position: relative;
	flex: 1 1 50%;
	border-right: 2px solid var(--color-navy);
	border-bottom: 2px solid var(--color-navy);
}

.column-archive-card__img {
	display: block;
	min-height: 140px;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.column-archive-card__date {
	font-family: var(--font-en);
	font-size: 12px;
	font-weight: 500;
	color: var(--color-navy);
	margin-bottom: 25px;
}

.column-archive-card__title {
	font-size: 20px;
	font-weight: 500;
	color: var(--color-navy);
	margin-bottom: 19px;
}

.column-archive-card__excerpt {
	font-size: 13px;
	line-height: 1.8;
	color: var(--color-navy);
	margin-top: 8px;
}

.column-archive-card__corner {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 73px;
	height: 73px;
	display: block;
	pointer-events: none;
}

.column-archive-card__corner::before {
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	width: 73px;
	height: 73px;
	background: var(--color-navy);
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.column-archive-card__corner::after {
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	width: 69px;
	height: 69px;
	background:
		url("../img/icon_plus_navy.svg") calc(100% - 14px) calc(100% - 14px) / 14px 14px no-repeat,
		var(--color-green);
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

/* ---------------------------------------------------------------------- */
/* Pagination                                                               */
/* ---------------------------------------------------------------------- */
.pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 24px 32px;
	background: #f2f2f2;
}

.pagination__pages {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pagination__pages .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	font-size: 14px;
	font-weight: 500;
	color: var(--color-navy);
	border: 1px solid var(--color-navy);
}

.pagination__pages .page-numbers.current {
	background: var(--color-navy);
	color: var(--color-white);
}

.pagination__pages .page-numbers.dots {
	border: none;
}

/* ---------------------------------------------------------------------- */
/* News single: sticky Index sidebar                                       */
/* ---------------------------------------------------------------------- */
body.single-news .page-banner__media,
body.single-column .page-banner__media {
	flex: 1 1 513px;
}

body.single-news .breadcrumb-tabs,
body.single-column .breadcrumb-tabs {
	flex: 0 0 112px;
}

body.single-news .page-banner__title,
body.single-column .page-banner__title {
	font-size: 50px;
}

/* ---------------------------------------------------------------------- */
/* Project single: banner overrides (scoped so news/column/archives keep   */
/* their own look)                                                         */
/* ---------------------------------------------------------------------- */
body.single-project .page-banner {
	border-bottom: none;
}

body.single-project .page-banner__title {
	font-size: 50px;
}

body.single-project .page-banner__intro {
	padding: 52px 32px;
}

.project-single__meta {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 22px;
	border-top: 2px solid var(--color-navy);
}

.news-single__meta {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 30px 23px;
	border-bottom: 2px solid var(--color-navy);
}

.project-single__meta-line {
	font-size: 13px;
	color: var(--color-text-light);
}

.article-layout {
	display: flex;
	align-items: flex-start;
	gap: 0;
	padding-bottom: 0;
}

.article-layout__body {
	flex: 1 1 685px;
	min-width: 0;
}

.article-layout__main {
	font-size: 15px;
	line-height: 1.9;
	color: var(--color-navy);
	background: #f2f2f2;
	padding: 30px 23px;
	border-right: 2px solid var(--color-navy);
}

.article-layout__main a {
	text-decoration: underline;
}

.article-layout__main > * + * {
	margin-top: 1.4em;
}

.article-layout__main h2 {
	font-size: 28px;
	font-weight: 700;
	color: var(--color-navy);
	margin-bottom: 18px;
	scroll-margin-top: 40px;
}

.article-layout__main p,
.article-layout__main .wp-block-paragraph,
.article-layout__main ul,
.article-layout__main ol {
	font-size: 14px;
	line-height: 2.2;
	color: var(--color-navy);
}

.article-layout__main ul {
	list-style: none;
	padding: 0;
}

.article-layout__main ul li {
	position: relative;
	padding-left: 20px;
}

.article-layout__main ul li + li {
	margin-top: 10px;
}

.article-layout__main ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 10px;
	width: 8px;
	height: 8px;
	background: var(--color-green);
}

.article-layout__main .wp-block-image img {
	width: 100%;
}

/* A class is the deliberate opt-in trigger for the bordered callout-box/
   button look (matching the site's card/button language) — since a Custom
   HTML block's markup isn't always a direct child of .article-layout__main,
   giving the <a> any class at all works regardless of where WordPress ends
   up nesting it. Plain, class-less links get a much simpler bold+highlight
   treatment instead — see .article-layout__main a:not([class]) below. */
.article-layout__main a[class] {
	position: relative;
	display: block;
	padding: 20px 64px 20px 24px;
	margin-top: 1.4em;
	border: 2px solid var(--color-navy);
	background-image:
		linear-gradient(#f2f2f2 1px, transparent 1px),
		linear-gradient(90deg, #f2f2f2 1px, transparent 1px);
	background-size: 11px 11px;
	background-color: var(--color-white);
	font-size: 14px;
	font-weight: 500;
	color: var(--color-navy);
	text-decoration: none;
}

.article-layout__main a[class]::after {
	content: "";
	position: absolute;
	right: -2px;
	bottom: -2px;
	z-index: 0;
	width: 68px;
	height: 68px;
	border: 2px solid var(--color-navy);
	background: var(--color-white);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.article-layout__main a[class]::before {
	content: "";
	position: absolute;
	right: -2px;
	bottom: -2px;
	z-index: 1;
	width: 68px;
	height: 68px;
	background:
		url("../img/icon_plus_navy.svg") 50% 50% / 16px 16px no-repeat,
		linear-gradient(135deg, var(--color-green) 50%, transparent 50%);
}

/* Plain links (no class) — a simple bold highlight instead of the button
   treatment above. */
.article-layout__main a:not([class]) {
	font-weight: 700;
	background-color: var(--color-green);
}

.article-layout__index {
	flex: 0 0 627px;
	position: sticky;
	top: 40px;
	align-self: flex-start;
	border: 2px solid var(--color-navy);
	border-top: 0;
	/* .article-layout__main already draws this shared edge with its own
	   border-right — an own left border here would double that line. */
	border-left: 0;
}

.toc-box__label {
	padding: 30px 23px;
	font-family: var(--font-en);
	font-size: 14px;
	font-weight: 500;
	color: var(--color-navy);
	border-bottom: 2px solid var(--color-navy);
	border-left: 2px solid var(--color-navy);
}

.toc-box__list {
	border-left: 0;
}

.toc-box__list a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 20px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--color-navy);
}

.toc-box__list a:hover {
	background: var(--color-bg-gray);
}

.tag-icon-plus--sm {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	background:
		linear-gradient(var(--color-green) 0 0) 0 0 / 45% 45% no-repeat,
		linear-gradient(var(--color-green) 0 0) 100% 0 / 45% 45% no-repeat,
		linear-gradient(var(--color-green) 0 0) 0 100% / 45% 45% no-repeat,
		linear-gradient(var(--color-green) 0 0) 100% 100% / 45% 45% no-repeat;
}

.share-box {
	position: relative;
	display: flex;
	align-items: stretch;
	gap: 0;
}

.share-box__label {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 20px;
	background: #f2f2f2;
	font-size: 18px;
	font-weight: 700;
	color: var(--color-navy);
	border-top: 2px solid var(--color-navy);
}

.share-box__list {
	flex: 3 1 0;
	display: flex;
	gap: 0;
	border-top: 2px solid var(--color-green);
	border-bottom: 2px solid var(--color-green);
}

.share-box__item {
	flex: 1 1 0;
	width: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 68px;
	background: var(--color-navy);
	color: var(--color-white);
	font-size: 16px;
	font-weight: 700;
	border-left: 2px solid var(--color-green);
}

.share-box__item:hover {
	background: var(--color-navy-dark);
}

.share-box__item-icon {
	width: 22px;
	height: auto;
}

.share-box__item--line .share-box__item-icon {
	width: 28px;
}

/* ---------------------------------------------------------------------- */
/* Project single: overview table                                          */
/* ---------------------------------------------------------------------- */
.detail-panel {
	display: flex;
	flex-wrap: wrap;
	border: 2px solid var(--color-navy);
	margin: 0;
}

.detail-panel__col {
	flex: 1 1 400px;
	padding: 0;
	background-color: #f2f2f2;
}

.detail-panel__col + .detail-panel__col {
	border-left: 2px solid var(--color-navy);
}

.detail-panel__heading {
	font-size: 28px;
	font-weight: 500;
	color: var(--color-navy);
	border-bottom: 2px solid var(--color-navy);
	padding: 24px 22px;
}

.detail-table {
	width: 100%;
	border-collapse: collapse;
}

.detail-table th,
.detail-table td {
	text-align: left;
	padding: 16px 23px;
	font-size: 14px;
	border-bottom: 1px solid var(--color-border);
}

.detail-table th {
	width: 35%;
	font-weight: 500;
	color: var(--color-white);
	background-color: var(--color-navy);
}

.detail-table td {
	color: var(--color-text);
}

.detail-panel__text {
	padding: 24px 22px;
}

.detail-panel__text p {
	font-size: 14px;
	line-height: 1.9;
	color: var(--color-text);
}

.project-single__section-title {
	font-size: 28px;
	padding: 24px 23px;
}

/* ---------------------------------------------------------------------- */
/* Project single: requests & proposals                                    */
/* ---------------------------------------------------------------------- */
.request-list {
	margin-bottom: 0;
	background-color: var(--color-white);
	background-image:
		linear-gradient(90deg, rgba(173, 173, 173, 0.1) 1px, transparent 1px),
		linear-gradient(rgba(173, 173, 173, 0.1) 1px, transparent 1px);
	background-size: 11px 11px;
}

.request-row {
	display: flex;
	flex-wrap: wrap;
	border: 2px solid var(--color-navy);
}

.request-row + .request-row {
	border-top: none;
}

.request-row__no {
	flex: 0 0 90px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	text-align: center;
	font-family: var(--font-en);
	font-size: 13px;
	font-weight: 500;
	color: var(--color-navy);
	border-right: 2px solid var(--color-navy);
	padding: 12px;
}

.request-row__col {
	flex: 1 1 320px;
	padding: 14px;
}

.request-row__col + .request-row__col {
	border-left: 2px solid var(--color-navy);
	background-color: #f2f2f2;
	background-image:
		linear-gradient(90deg, rgba(173, 173, 173, 0.1) 1px, transparent 1px),
		linear-gradient(rgba(173, 173, 173, 0.1) 1px, transparent 1px);
	background-size: 11px 11px;
}

.request-row__title {
	font-size: 16px;
	font-weight: 500;
	color: var(--color-navy);
	margin-bottom: 8px;
}

.request-row__text {
	font-size: 13px;
	line-height: 1.8;
	color: var(--color-text);
}

/* ---------------------------------------------------------------------- */
/* Project single: gallery                                                  */
/* ---------------------------------------------------------------------- */
/* min-height (not a fixed height) so that with many photos, the thumbs
   column — which can end up taller than the usual 720px — grows the whole
   section to fit instead of spilling out past it; align-items:stretch then
   stretches the main image to match whatever height that ends up being. */
.project-gallery {
	display: flex;
	align-items: stretch;
	gap: 8px;
	min-height: 720px;
	margin-bottom: 0;
}

/* align-self overrides the row's own align-items:stretch, so the main
   image stays capped at 720px instead of growing to match a taller
   thumbs column — the section itself still grows to fit that column
   (see .project-gallery's min-height), just without stretching this. */
.project-gallery__main {
	position: relative;
	flex: 3 1 0;
	align-self: flex-start;
	height: 720px;
}

.project-gallery__main-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.project-gallery__counter {
	position: absolute;
	right: 16px;
	bottom: 12px;
	font-family: var(--font-en);
	font-size: 12px;
	font-weight: 500;
	color: var(--color-navy);
	text-shadow: none;
}

#project-gallery-current {
	color: var(--color-navy);
	font-size: 22px;
	font-weight: 700;
}

.project-gallery__thumbs {
	flex: 1 1 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: min-content;
	align-content: start;
	gap: 8px;
}

/* grid-auto-rows:1fr would divide the full 720px main-image height evenly
   across however many rows exist — fine with enough photos to fill every
   row, but with just one or two thumbnails that single row stretches to
   the full height, badly distorting the crop. Sizing each cell by its own
   aspect-ratio instead keeps thumbnails a sane shape regardless of count;
   any leftover height below them (align-content:start) is just left blank. */
.project-gallery__thumb {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	padding: 0;
	border: 2px solid transparent;
	background: none;
	overflow: hidden;
}

.project-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.project-gallery__thumb.is-active {
	border-color: var(--color-navy);
}

/* ---------------------------------------------------------------------- */
/* Project single: testimonial + video                                     */
/* ---------------------------------------------------------------------- */
.testimonial-panel {
	display: flex;
	flex-wrap: wrap;
	border: 2px solid var(--color-navy);
	margin-bottom: 0;
}

.testimonial-panel__col {
	flex: 1 1 400px;
	padding: 24px 32px;
}

.testimonial-panel__col--label {
	flex: 0 0 220px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 0;
	background: var(--color-bg-gray);
	border-right: 2px solid var(--color-navy);
}

.testimonial-panel__heading {
	font-size: 28px;
	font-weight: 500;
	color: var(--color-navy);
	border-bottom: 2px solid var(--color-navy);
	padding: 24px 23px;
}

.testimonial-panel__col--text {
	flex: 1 1 420px;
}

.testimonial-panel__col--video {
	flex: 1 1 360px;
	display: flex;
	align-items: center;
	gap: 20px;
	background: var(--color-navy);
	color: var(--color-white);
	border-left: 2px solid var(--color-navy);
}

.testimonial-panel__text {
	font-size: 14px;
	line-height: 1.9;
	color: var(--color-navy);
}

.testimonial-panel__attr {
	display: inline-block;
	font-size: 17px;
	font-weight: 500;
	color: var(--color-navy);
	padding: 24px 23px;
	align-self: flex-start;
}

.testimonial-panel__video-label {
	flex: 0 0 auto;
	font-size: 18px;
	font-weight: 500;
	padding-right: 20px;
	border-right: 2px solid #ffffff;
}

.testimonial-panel__video {
	position: relative;
	flex: 1;
	aspect-ratio: 16 / 9;
	background: rgba(255, 255, 255, 0.08);
}

.testimonial-panel__video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
}

.testimonial-panel__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--color-white);
	color: var(--color-navy);
	font-size: 18px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media screen and (max-width: 1024px) {
	.page-banner {
		flex-wrap: wrap;
	}

	.breadcrumb-tabs {
		display: none;
	}

	.news-archive__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.project-archive__grid,
	.column-archive__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.article-layout {
		flex-direction: column;
	}

	.article-layout__index {
		order: -1;
		flex: none;
		position: static;
		width: 100%;
		border: none;
	}

	.toc-box__label {
		border-left: none;
	}
}

@media screen and (max-width: 767px) {
	.page-banner__intro {
		padding: 24px 20px;
	}

	.page-banner__intro-group,
	.page-banner__desc {
		border-right: none;
	}

	.page-banner__desc {
		padding: 24px 20px;
	}

	.page-banner__title {
		font-size: 42px;
	}

	body.single-project .page-banner__intro {
		padding: 32px 16px;
	}

	body.single-project .page-banner__title {
		font-size: 42px;
	}

	body.single-news .page-banner__intro,
	body.single-column .page-banner__intro {
		padding: 24px 16px;
	}

	body.single-news .page-banner__title,
	body.single-column .page-banner__title {
		font-size: 42px;
	}

	.toc-box__label {
		padding: 20px 16px;
	}

	.detail-panel__heading {
		padding: 20px 16px;
	}

	.request-row__col {
		flex: 1;
	}

	.testimonial-panel__col--label {
		gap: 0;
	}

	.testimonial-panel__col {
		padding: 16px;
	}

	.testimonial-panel__heading {
		padding: 0 0 14px;
	}

	.testimonial-panel__attr {
		padding: 14px 0 0;
	}

	.news-single__meta {
		padding: 16px;
		border-top: 2px solid var(--color-navy);
	}

	.category-filter {
		padding: 16px 20px;
	}

	.news-archive__grid,
	.project-archive__grid,
	.column-archive__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.pagination {
		padding: 20px;
		justify-content: center;
	}

	.detail-panel__col,
	.testimonial-panel__col {
		flex: 1 1 100%;
	}

	.detail-panel__col + .detail-panel__col,
	.testimonial-panel__col--label,
	.testimonial-panel__col--video {
		border-left: none;
		border-right: none;
		border-top: 2px solid var(--color-navy);
	}

	.project-gallery {
		flex-direction: column;
		min-height: 0;
		height: auto;
	}

	.project-gallery__main {
		align-self: stretch;
		height: 320px;
	}

	.project-gallery__thumbs {
		grid-template-columns: repeat(4, 1fr);
	}

	.request-row {
		flex-direction: column;
	}

	.request-row__no {
		flex-direction: row;
		border-right: none;
		border-bottom: 2px solid var(--color-navy);
	}

	.request-row__col + .request-row__col {
		border-left: none;
		border-top: 2px solid var(--color-navy);
	}
}

@media screen and (max-width: 480px) {
	.column-archive__grid {
		grid-template-columns: 1fr;
	}

	.category-filter {
		padding: 16px;
	}

	.page-banner__intro {
		padding: 16px;
	}

	.page-banner__desc {
		padding: 0 16px 16px;
	}

	body.single-project .page-banner__intro {
		padding: 16px;
	}

	.project-single__meta {
		padding: 16px;
	}

	.detail-table th {
		width: 33%;
	}

	.detail-panel__text {
		padding: 16px;
	}

	.project-single__section-title {
		padding: 16px;
	}

	/* Switching this row to a column stack shrinks it down to its content's
	   row-mode height, which is too cramped once the label + divider + play
	   button are stacked instead of side by side — so give it explicit room. */
	.testimonial-panel__col--video {
		flex-direction: column;
		min-height: 320px;
	}

	.project-archive__grid {
		grid-template-columns: 1fr;
	}

	.news-archive__grid {
		grid-template-columns: 1fr;
	}

	body.single-news .page-banner__intro,
	body.single-column .page-banner__intro {
		padding: 16px;
	}

	.article-layout__main {
		padding: 16px;
	}

	.share-box__label {
		font-size: 14px;
	}

	.column-archive-card__body {
		padding: 16px;
	}
}

@media screen and (min-width: 1024px) {
	/* Move the main/sidebar divider from the inner .article-layout__main
	   (and its mirrored .toc-box__label border-left) onto the outer
	   .article-layout__body, so the line covers the full column instead of
	   just the __main block within it. */
	.toc-box__label {
		border-left: none;
	}

	.article-layout__main {
		border-right: none;
	}

	.article-layout__body {
		border-right: 2px solid var(--color-navy);
	}
}