/* ============================================================
   Instroi — single posts/cases, contacts, search results, 404.
   Component-scoped classes only; tokens/buttons/cards come from
   main.css, cards.css and archive.css. Mobile-first.
   ============================================================
   1. Single article / case shell
   2. Case gallery (lightbox grid)
   3. CTA band on singles
   4. Related row
   5. Prev/next post nav
   6. Contacts: two columns + details list
   7. Map embed (responsive iframe)
   8. Search results
   9. 404
   10. Standalone search form (.page-search-form)
   ============================================================ */

/* 1. Single article / case shell
   ------------------------------------------------------------ */
.single-article,
.single-case {
	padding-block: clamp(24px, 3.5vw, 48px) var(--pad-section);
}

/* content.css gives .entry-content its own big paddings for plain
   pages; inside a single the shell owns the vertical rhythm. */
.single-article .entry-content,
.single-case .entry-content {
	padding-block: 0;
}

.entry-meta {
	margin-bottom: clamp(16px, 2.5vw, 24px);
	font-size: var(--fs-small);
	color: var(--c-dark-muted);
}

.single-cover {
	margin: 0 0 clamp(24px, 3.5vw, 40px);
}
.single-cover a {
	display: block;
	border-radius: var(--radius-card);
	overflow: hidden;
}
.single-cover__img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 560px;
	object-fit: cover;
	border-radius: var(--radius-card);
}

/* 2. Case gallery — every photo opens the lightbox
   ------------------------------------------------------------ */
.case-gallery {
	margin-block: clamp(32px, 5vw, 56px) 0;
}

.case-gallery__title {
	margin-bottom: clamp(20px, 3vw, 32px);
	font-size: var(--fs-h3);
	color: var(--c-black);
}

.case-gallery__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gap);
}
@media (min-width: 640px) {
	.case-gallery__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
	.case-gallery__grid { grid-template-columns: repeat(3, 1fr); }
}

.case-gallery__item {
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-card);
	overflow: hidden;
	background: var(--c-gray-50);
}
.case-gallery__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.case-gallery__item:hover .case-gallery__img { transform: scale(1.04); }
.case-gallery__item:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

/* 3. CTA band on singles
   ------------------------------------------------------------ */
.single-cta {
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	align-items: flex-start;
	margin-top: clamp(32px, 5vw, 56px);
	padding: clamp(24px, 4vw, 40px);
	background: var(--c-gray-50);
	border-radius: var(--radius-card);
}
.single-cta__text {
	margin: 0;
	max-width: 46ch;
	font-size: var(--fs-p2);
	font-weight: 700;
	color: var(--c-dark);
}
@media (min-width: 768px) {
	.single-cta {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

/* 4. Related row (Схожі кейси / статті / акції)
   ------------------------------------------------------------ */
.related {
	padding-block: clamp(48px, 7vw, 88px);
}

.related__head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap);
	align-items: center;
	justify-content: space-between;
	margin-bottom: clamp(24px, 4vw, 48px);
}
.related__title {
	margin: 0;
	color: var(--c-black);
}

/* 5. Prev/next post nav
   ------------------------------------------------------------ */
.post-nav {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gap);
	margin-top: clamp(32px, 5vw, 56px);
}
@media (min-width: 640px) {
	.post-nav { grid-template-columns: repeat(2, 1fr); }
	.post-nav__link--next { text-align: right; }
}

.post-nav__link {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: clamp(16px, 2.5vw, 24px);
	background: var(--c-gray-50);
	border-radius: var(--radius-card);
	text-decoration: none;
	transition: background var(--transition);
}
.post-nav__link:hover { background: var(--c-gray-100); }
.post-nav__label {
	font-size: var(--fs-small);
	color: var(--c-dark-muted);
}
.post-nav__title {
	font-weight: 700;
	color: var(--c-dark);
	line-height: 1.3;
}
.post-nav__link:hover .post-nav__title { color: var(--c-primary); }

/* 6. Contacts — two columns + details list
   ------------------------------------------------------------ */
.contacts {
	padding-block: clamp(28px, 4vw, 56px);
}

.contacts__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(32px, 5vw, 64px);
}
@media (min-width: 960px) {
	.contacts__grid { grid-template-columns: 1fr 1fr; align-items: start; }
}

.contacts__heading {
	margin-bottom: clamp(16px, 2.5vw, 28px);
	font-size: var(--fs-h3);
	color: var(--c-black);
}

.contacts__list {
	margin: 0;
	display: grid;
	gap: clamp(16px, 2.5vw, 24px);
}
.contacts__row { margin: 0; }
.contacts__label {
	margin-bottom: 4px;
	font-size: var(--fs-small);
	color: var(--c-dark-muted);
}
.contacts__value {
	margin: 0;
	font-size: var(--fs-p2);
	color: var(--c-dark);
}
.contacts__value a {
	color: var(--c-primary);
	text-decoration: none;
}
.contacts__value a:hover { color: var(--c-primary-light); }
.contacts__value--phone .phone {
	font-weight: 700;
	font-size: var(--fs-h4);
}

.contacts__social {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.contacts__form {
	padding: clamp(24px, 4vw, 40px);
	background: var(--c-gray-50);
	border-radius: var(--radius-card);
}
.contacts__form-intro {
	margin-bottom: clamp(20px, 3vw, 28px);
	font-size: var(--fs-p3);
	line-height: 1.5;
}
.contacts__form .c-field {
	background: var(--c-white);
}
.contacts__form .c-field:hover { background: var(--c-white); }
.contacts__form .c-form__row { margin-bottom: 12px; }
.contacts__form .c-btn { width: 100%; margin-top: 8px; }
@media (min-width: 640px) {
	.contacts__form .c-btn { width: auto; }
}

/* Editors may add extra text below the columns. */
.entry-content--contacts { padding-block: 0 clamp(28px, 4vw, 56px); }

/* 7. Map embed — responsive, page never scrolls horizontally
   ------------------------------------------------------------ */
.contacts-map {
	padding-block: 0 var(--pad-section);
}

.map-embed {
	position: relative;
	/* Fixed fluid height: aspect-ratio + min-height would transfer the
	   min through the ratio into a min-WIDTH and overflow small screens. */
	height: clamp(320px, 42vw, 480px);
	border-radius: var(--radius-card);
	overflow: hidden;
	background: var(--c-gray-50);
}
.map-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* 8. Search results
   ------------------------------------------------------------ */
.search-count {
	margin-bottom: clamp(20px, 3vw, 32px);
}

.search-result {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: clamp(16px, 2.5vw, 24px);
	background: var(--c-white);
	border: 1px solid var(--c-gray-100);
	border-radius: var(--radius-card);
	transition: box-shadow var(--transition), transform var(--transition);
}
.search-result:hover {
	box-shadow: 0 16px 40px rgba(31, 51, 70, 0.12);
	transform: translateY(-2px);
}

.search-result__type {
	align-self: flex-start;
	padding: 4px 10px;
	background: var(--c-gray-50);
	font-size: var(--fs-small);
	color: var(--c-dark-muted);
	border-radius: var(--radius-btn);
}
.search-result__title {
	margin: 0;
	font-size: var(--fs-h4);
	line-height: 1.25;
}
.search-result__title a {
	color: var(--c-black);
	text-decoration: none;
	transition: color var(--transition);
}
.search-result__title a:hover { color: var(--c-primary); }
.search-result__excerpt {
	margin: 0;
	font-size: var(--fs-small);
	line-height: 1.5;
}
.search-result .card-post__more { margin-top: auto; }

/* 9. 404
   ------------------------------------------------------------ */
.error-404__inner {
	max-width: 640px;
	text-align: center;
}

.error-404__code {
	margin: 0 0 8px;
	font-size: clamp(5rem, 12vw, 9rem);
	font-weight: 700;
	line-height: 1;
	color: var(--c-gray-100);
}
.error-404__title {
	color: var(--c-black);
}
.error-404__text {
	margin-bottom: clamp(24px, 4vw, 40px);
	font-size: var(--fs-p2);
	color: var(--c-dark-muted);
}

.error-404__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap);
	justify-content: center;
	margin-top: clamp(24px, 4vw, 40px);
}

/* 10. Standalone search form (404 / empty search results)
   ------------------------------------------------------------ */
.page-search-form {
	max-width: 480px;
	margin-inline: auto;
}
.page-search-form__hint {
	margin: clamp(20px, 3vw, 32px) 0 12px;
	text-align: center;
	color: var(--c-dark-muted);
}
.page-search-form .search-form {
	display: flex;
	gap: 8px;
}
.page-search-form .search-form label { flex: 1 1 auto; }
.page-search-form .search-field {
	display: block;
	width: 100%;
	height: 52px;
	padding: 0 16px;
	background: var(--c-gray-50);
	color: var(--c-text);
	font: inherit;
	border: 1px solid transparent;
	border-radius: var(--radius-field);
	transition: border-color var(--transition), background var(--transition);
	appearance: none;
}
.page-search-form .search-field:focus {
	outline: none;
	background: var(--c-white);
	border-color: var(--c-primary);
	box-shadow: var(--focus-ring);
}
.page-search-form .search-submit {
	flex: 0 0 auto;
	min-height: 52px;
	padding: 0 22px;
	background: var(--c-primary);
	color: var(--c-white);
	font-weight: 700;
	border: 0;
	border-radius: var(--radius-btn);
	cursor: pointer;
	transition: background var(--transition);
}
.page-search-form .search-submit:hover { background: var(--c-primary-light); }