/**
 * Components shared across several pages: process steps, FAQ accordion,
 * testimonial carousel, quote section, service/project cards and the project
 * gallery dialog.
 */

/* ---------------------------------------------------------------------------
 * Accordion basics (process steps + FAQ): native <details>, custom marker
 * ------------------------------------------------------------------------ */
.process-step > summary,
.faq-item > summary {
	list-style: none;
	cursor: pointer;
}

.process-step > summary::-webkit-details-marker,
.faq-item > summary::-webkit-details-marker { display: none; }

.process-step__toggle,
.faq-item__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid currentColor;
	flex: none;
	transition: transform 0.3s var(--yhdr-ease), background-color 0.2s ease;
}

details[open] > summary .process-step__toggle,
details[open] > summary .faq-item__toggle { transform: rotate(45deg); }

/* Process steps */
.process-steps { counter-reset: none; }

.process-step > summary {
	display: grid;
	grid-template-columns: 96px 1fr auto;
	align-items: center;
	gap: 24px;
	padding: 28px 0;
}

.process-step__num {
	font-family: var(--yhdr-font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--yhdr-golden);
}

.process-step__title {
	font-family: var(--yhdr-font-heading);
	font-size: var(--yhdr-fs-h3);
	font-weight: 500;
	letter-spacing: -0.015em;
	color: var(--yhdr-text);
}

.is-dark .process-step__title { color: var(--yhdr-white); }
.is-dark .process-step__toggle { color: var(--yhdr-white); }
.process-step > summary:hover .process-step__toggle { background: var(--yhdr-blue); border-color: var(--yhdr-blue); color: var(--yhdr-white); }

.process-step__body { padding: 0 64px 32px 120px; }
.process-step__body p { margin: 0; max-width: 56ch; }

/* FAQ */
.faq-item { border-bottom: 1px solid var(--yhdr-rule); }
.faq-item:first-child { border-top: 1px solid var(--yhdr-rule); }
.faq-list.rule-list { border-top: 0; }

.faq-item > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 24px 0;
}

.faq-item__q {
	font-family: var(--yhdr-font-heading);
	font-size: 1.1875rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--yhdr-text);
}

.faq-item > summary:hover .faq-item__q { color: var(--yhdr-blue); }
.faq-item__toggle { width: 36px; height: 36px; color: var(--yhdr-black-1); }
.faq-item__a { padding: 0 64px 24px 0; }
.faq-item__a p { margin-bottom: 12px; }
.faq-item__a a { color: var(--yhdr-blue); }

@media (max-width: 700px) {
	.process-step > summary { grid-template-columns: 1fr auto; gap: 8px 16px; }
	.process-step__num { grid-column: 1 / -1; }
	.process-step__body { padding: 0 0 28px; }
	.faq-item__a { padding-right: 0; }
}

/* ---------------------------------------------------------------------------
 * Testimonial carousel
 * ------------------------------------------------------------------------ */
.testimonial-carousel__track { position: relative; display: grid; gap: 48px; }
/* Slides stack in one cell only when JS can switch them; without JS they list. */
html.js .testimonial-carousel__track > .testimonial-card { grid-area: 1 / 1; }
html:not(.js) .testimonial-carousel__controls { display: none; }

html.js .testimonial-carousel[data-count] .testimonial-card {
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.45s ease, transform 0.45s var(--yhdr-ease), visibility 0.45s;
}

html.js .testimonial-carousel[data-count] .testimonial-card.is-active,
html.js .testimonial-carousel[data-count="1"] .testimonial-card {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.testimonial-card { margin: 0; }
.testimonial-card__rating { color: var(--yhdr-gold-text); letter-spacing: 0.15em; font-size: 1rem; margin-bottom: 24px; }

.testimonial-card__quote { margin: 0 0 32px; padding: 0; border: 0; }
.testimonial-card__quote p {
	font-family: var(--yhdr-font-heading);
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.375rem);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--yhdr-text);
	margin: 0;
	text-wrap: pretty;
}

.testimonial-card__client { display: flex; flex-direction: column; gap: 4px; padding-top: 20px; border-top: 1px solid var(--yhdr-rule); }
.testimonial-card__client strong { font-family: var(--yhdr-font-heading); font-weight: 500; color: var(--yhdr-text); font-size: 1.0625rem; }
.testimonial-card__project { color: var(--yhdr-text-muted); font-size: 0.9375rem; }

.testimonial-carousel__controls { display: flex; align-items: center; gap: 16px; margin-top: 32px; }
.testimonial-carousel__counter { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.08em; color: var(--yhdr-text-muted); font-variant-numeric: tabular-nums; }

.testimonial-carousel__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1px solid var(--yhdr-black-1);
	border-radius: 0;
	background: transparent;
	color: var(--yhdr-black-1);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.testimonial-carousel__btn:hover { background: var(--yhdr-black-1); color: var(--yhdr-white); }

/* ---------------------------------------------------------------------------
 * Quote section (#quote) -- Home + Contact
 * ------------------------------------------------------------------------ */
.quote-section { scroll-margin-top: var(--yhdr-header-height); }

.quote-section__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(40px, 6vw, 96px);
	align-items: start;
}

.quote-section__contacts { margin-top: var(--yhdr-space-lg); }
.quote-section__contacts li { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; }
.quote-section__contacts .yhdr-ui-icon { width: 22px; height: 22px; color: var(--yhdr-blue); margin-top: 2px; }
.quote-section__contacts a { color: var(--yhdr-text); font-weight: 500; text-decoration: none; }
.quote-section__contacts a:hover { color: var(--yhdr-blue); }
.quote-section__label { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--yhdr-text-muted); margin-bottom: 4px; }
.quote-section__hours { display: grid; gap: 4px; }
.quote-section__hours > span { display: flex; justify-content: space-between; gap: 24px; min-width: 260px; }
.quote-section__hours strong { font-weight: 500; color: var(--yhdr-text); }

.quote-section__form {
	background: var(--yhdr-white);
	border: 1px solid var(--yhdr-rule);
	border-top: 4px solid var(--yhdr-blue);
	padding: clamp(24px, 4vw, 48px);
}

@media (max-width: 900px) {
	.quote-section__grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
 * Service card (home grid)
 * ------------------------------------------------------------------------ */
.services__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-top: 1px solid var(--yhdr-rule);
	border-left: 1px solid var(--yhdr-rule);
}

.service-card { border-right: 1px solid var(--yhdr-rule); border-bottom: 1px solid var(--yhdr-rule); background: var(--yhdr-white); }

.service-card__link {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: clamp(28px, 3vw, 40px);
	color: inherit;
	text-decoration: none !important;
	transition: background-color 0.3s ease;
}

.service-card__link::before {
	content: "";
	position: absolute;
	left: -1px;
	right: -1px;
	top: -1px;
	height: 3px;
	background: var(--yhdr-blue);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s var(--yhdr-ease);
}

.service-card__link:hover::before,
.service-card__link:focus-visible::before { transform: scaleX(1); }

.service-card__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 40px; }
.service-card__icon { width: 64px; height: 64px; }
.service-card__num { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; color: var(--yhdr-text-muted); }
.service-card__title { font-size: 1.5rem; margin-bottom: 12px; }
.service-card__excerpt { color: var(--yhdr-text-body); font-size: 0.9375rem; margin-bottom: 28px; }

.service-card__more {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--yhdr-font-heading);
	font-weight: 500;
	color: var(--yhdr-black-1);
}

.service-card__more .yhdr-ui-icon { width: 16px; height: 16px; transition: transform 0.3s var(--yhdr-ease); }
.service-card__link:hover .service-card__more { color: var(--yhdr-blue); }
.service-card__link:hover .service-card__more .yhdr-ui-icon { transform: translateX(4px); }

@media (max-width: 960px) { .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .services__grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
 * Project card (home + projects archive)
 * ------------------------------------------------------------------------ */
.project-card { position: relative; }

.project-card__open {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.project-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--yhdr-surface-2);
}

.project-card__media img { width: 100%; height: 100%; object-fit: cover; }
.project-card__count { position: absolute; top: 16px; left: 16px; }

.project-card__body { display: flex; flex-direction: column; gap: 8px; padding: 20px 0 0; }

.project-card__meta {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--yhdr-text-muted);
}

.project-card__title {
	font-family: var(--yhdr-font-heading);
	font-size: 1.375rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--yhdr-text);
	text-wrap: balance;
}

.project-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	font-family: var(--yhdr-font-heading);
	font-weight: 500;
	font-size: 0.9375rem;
	color: var(--yhdr-blue-dark);
}

.project-card__cta .yhdr-ui-icon { width: 16px; height: 16px; transition: transform 0.3s var(--yhdr-ease); }
.project-card__open:hover .project-card__title { color: var(--yhdr-blue); }
.project-card__open:hover .project-card__cta .yhdr-ui-icon { transform: translate(2px, -2px); }

.project-card.is-hidden { display: none; }

/* ---------------------------------------------------------------------------
 * Project gallery dialog (lightbox.js)
 * ------------------------------------------------------------------------ */
.yhdr-lightbox {
	width: min(1240px, calc(100vw - 32px));
	max-width: none;
	max-height: calc(100dvh - 32px);
	padding: 0;
	border: 0;
	background: var(--yhdr-white);
	color: var(--yhdr-text-body);
	overflow: hidden;
}

.yhdr-lightbox::backdrop { background: rgba(20, 18, 19, 0.88); backdrop-filter: blur(4px); }

.yhdr-lightbox[open] {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
	height: min(820px, calc(100dvh - 32px));
}

.yhdr-lightbox__close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	background: var(--yhdr-black-1);
	color: var(--yhdr-white);
	cursor: pointer;
}

.yhdr-lightbox__close:hover { background: var(--yhdr-blue); }

.lightbox__gallery { position: relative; background: var(--yhdr-black-1); min-height: 320px; display: flex; flex-direction: column; }
.lightbox__slides { list-style: none; margin: 0; padding: 0; flex: 1; position: relative; min-height: 0; }
.lightbox__slide { position: absolute; inset: 0; display: none; }
.lightbox__slide.is-active { display: block; }
.lightbox__slide img { width: 100%; height: 100%; object-fit: contain; }

.lightbox__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 16px;
	background: var(--yhdr-black-1);
	color: var(--yhdr-white);
}

.lightbox__nav button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--yhdr-rule-dark);
	background: transparent;
	color: var(--yhdr-white);
	cursor: pointer;
}

.lightbox__nav button:hover { background: var(--yhdr-blue); border-color: var(--yhdr-blue); }
.lightbox__counter { font-size: 0.875rem; font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }

.lightbox__info { padding: clamp(28px, 3vw, 48px); overflow-y: auto; max-height: calc(100dvh - 32px); }
.lightbox__title { font-size: clamp(1.625rem, 1.3rem + 1vw, 2.25rem); }
.lightbox__summary { color: var(--yhdr-text-body); }
.lightbox__facts { display: grid; grid-template-columns: 1fr 1fr; margin: 24px 0; border-top: 1px solid var(--yhdr-rule); }
.lightbox__facts > div { padding: 14px 0; border-bottom: 1px solid var(--yhdr-rule); }
.lightbox__facts dt { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--yhdr-text-muted); }
.lightbox__facts dd { margin: 4px 0 0; color: var(--yhdr-text); font-weight: 500; }
.lightbox__scope h3 { font-size: 1.0625rem; margin-bottom: 8px; }
.lightbox__services { display: flex; flex-wrap: wrap; gap: 8px; }
.lightbox__services a { text-decoration: none; }
.lightbox__services a:hover { background: var(--yhdr-blue); color: var(--yhdr-white); }
.lightbox__quote { margin: 24px 0; padding: 0 0 0 20px; border-left: 3px solid var(--yhdr-golden); }
.lightbox__quote p { font-family: var(--yhdr-font-heading); font-size: 1.125rem; color: var(--yhdr-text); margin-bottom: 8px; }
.lightbox__quote cite { font-style: normal; font-size: 0.875rem; color: var(--yhdr-text-muted); }
.lightbox__info .btn { margin-top: 16px; }

@media (max-width: 900px) {
	.yhdr-lightbox[open] { grid-template-columns: 1fr; grid-template-rows: auto auto; height: auto; overflow-y: auto; }
	.lightbox__gallery { height: 56vh; min-height: 260px; }
	.lightbox__info { max-height: none; overflow: visible; }
}

body.yhdr-dialog-open { overflow: hidden; }

/* Shared section layouts (Home + About) */
/* ---------------------------------------------------------------------------
 * Process (dark)
 * ------------------------------------------------------------------------ */
.process { position: relative; overflow: hidden; }
.process .yhdr-stripes { opacity: 0.25; width: 32%; }

.process__grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(40px, 7vw, 112px);
	align-items: start;
}

.process__header { position: sticky; top: calc(var(--yhdr-header-height) + 32px); }
.process__header h2 { max-width: 14ch; }
.process__header .lead { color: var(--yhdr-text-on-dark-muted); margin-bottom: var(--yhdr-space-lg); }

@media (max-width: 900px) {
	.process__grid { grid-template-columns: 1fr; }
	.process__header { position: static; }
}

/* ---------------------------------------------------------------------------
 * Testimonials
 * ------------------------------------------------------------------------ */
.testimonials__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
	gap: clamp(40px, 7vw, 112px);
	align-items: start;
}

.testimonials__header h2 { max-width: 12ch; }
.testimonials__icon { width: 96px; height: 96px; margin-top: 24px; display: block; }

@media (max-width: 900px) {
	.testimonials__grid { grid-template-columns: 1fr; }
	.testimonials__icon { display: none; }
}


/* Project grid (projects archive, related projects on service pages) */
.projects__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 48px clamp(20px, 2.5vw, 32px);
}

@media (max-width: 960px) { .projects__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .projects__grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
 * FAQ
 * ------------------------------------------------------------------------ */
.home-faq__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(40px, 7vw, 112px);
	align-items: start;
}

.home-faq__header { position: sticky; top: calc(var(--yhdr-header-height) + 32px); }
.home-faq__header .lead { margin-bottom: var(--yhdr-space-md); }

@media (max-width: 900px) {
	.home-faq__grid { grid-template-columns: 1fr; }
	.home-faq__header { position: static; }
}


/* Two-column CTA block (Services "Not sure where to start?", Blog "Got a question?") */
/* "Not sure where to start?" */

.services-cta__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
	gap: clamp(32px, 6vw, 96px);
	align-items: end;
}

.services-cta__grid h2 { max-width: 16ch; }
.services-cta__actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }

.services-cta__phone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 8px;
	font-family: var(--yhdr-font-heading);
	font-size: 1.25rem;
	color: var(--yhdr-text);
	text-decoration: none;
}

.services-cta__phone .yhdr-ui-icon { color: var(--yhdr-blue); }

@media (max-width: 800px) { .services-cta__grid { grid-template-columns: 1fr; } }


/* Tabs (blog categories, shop plan types) */
.blog__tabs {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: var(--yhdr-space-lg);
	border-bottom: 1px solid var(--yhdr-rule);
}

.blog__tabs a {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 16px 20px;
	font-family: var(--yhdr-font-heading);
	font-weight: 500;
	color: var(--yhdr-text-muted);
	text-decoration: none;
}

.blog__tabs a span { font-family: var(--yhdr-font-body); font-size: 0.75rem; font-weight: 600; }
.blog__tabs a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--yhdr-blue); transform: scaleX(0); transition: transform 0.3s var(--yhdr-ease); }
.blog__tabs a:hover, .blog__tabs a[aria-current] { color: var(--yhdr-text); }
.blog__tabs a[aria-current]::after { transform: scaleX(1); }