/* =============================================================================
   Homepage Trust Layer V1 (front page only)
   - Installation carousel (.fp-inst)
   - Installation lightbox (.fp-lb)
   - Customer-avatar testimonial buttons on installation photos
   - Trustpilot review carousel controls
   Uses the existing front-page tokens from style.css.
   ============================================================================= */

/* ── Installation carousel ── */
.fp-inst { padding: 2rem 0 0; }

.fp-inst__head {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1rem; margin-bottom: 1rem;
}
.fp-inst__head .fp-h2 { margin: 0; }

.fp-inst__controls { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.fp-inst__nav { display: flex; gap: .5rem; flex-shrink: 0; }
.fp-inst__nav[hidden] { display: none; }
.fp-inst__arrow,
.fp-carousel-nav__btn {
	width: 44px; height: 44px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: #fff; color: var(--clr-navy);
	border: 1.5px solid var(--clr-border); cursor: pointer;
	transition: border-color 160ms, background 160ms, opacity 160ms;
}
.fp-inst__arrow svg,
.fp-carousel-nav__btn svg { width: 18px; height: 18px; }
.fp-inst__arrow:hover:not(:disabled),
.fp-carousel-nav__btn:hover:not(:disabled) { border-color: var(--clr-blue); background: rgba(0,98,227,.04); }
.fp-inst__arrow:disabled,
.fp-carousel-nav__btn:disabled { opacity: .35; cursor: default; }
.fp-inst__arrow:focus-visible,
.fp-carousel-nav__btn:focus-visible { outline: 2px solid var(--clr-blue); outline-offset: 2px; }

/* ── Review carousel header + controls ── */
.fp-revs__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.fp-revs__head .fp-revs__row { margin-bottom: 0; }
.fp-carousel-nav { display: flex; gap: .5rem; flex-shrink: 0; }
.fp-carousel-nav[hidden] { display: none; }
@media (max-width: 560px) { .fp-carousel-nav { display: none; } }

.fp-inst__track {
	list-style: none; margin: 0; padding: 0;
	display: flex; gap: 1rem;
	overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory; scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	transition: opacity 350ms ease;
}
.fp-inst__track::-webkit-scrollbar { display: none; }
.fp-inst__track.is-rewinding { opacity: 0; }

.fp-inst__item { flex: 0 0 calc((100% - 3rem) / 4.2); scroll-snap-align: start; min-width: 0; }
.fp-inst__track--single .fp-inst__item { flex-basis: min(100%, 340px); }

.fp-inst__card { margin: 0; }
.fp-inst__media { position: relative; }

.fp-inst__open {
	position: relative; display: block;
	aspect-ratio: 4 / 5; overflow: hidden;
	border-radius: var(--r-md); background: var(--clr-bg);
	border: 1px solid var(--clr-border);
}
.fp-inst__open img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform 400ms ease;
}
.fp-inst__open:hover img { transform: scale(1.03); }
.fp-inst__open:focus-visible { outline: 3px solid var(--clr-blue); outline-offset: 3px; }

.fp-inst__zoom {
	position: absolute; top: .65rem; right: .65rem;
	width: 32px; height: 32px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: rgba(13,31,45,.55); color: #fff;
	opacity: 0; transition: opacity 160ms;
}
.fp-inst__zoom svg { width: 14px; height: 14px; }
.fp-inst__open:hover .fp-inst__zoom,
.fp-inst__open:focus-visible .fp-inst__zoom { opacity: 1; }
@media (hover: none) { .fp-inst__zoom { opacity: 1; } }

/* Customer-avatar testimonial button: a separate control layered over the
   photo's bottom-right corner (never nested inside the image link). */
.fp-inst__avatar {
	position: absolute; right: .5rem; bottom: .5rem; z-index: 2;
	display: inline-flex; align-items: center; gap: .4rem;
	min-height: 44px; padding: 2px 2px 2px .7rem;
	border: 0; border-radius: 100px; cursor: pointer;
	background: rgba(255,255,255,.94); color: var(--clr-navy);
	box-shadow: 0 2px 10px rgba(13,31,45,.22);
	font: 700 .72rem/1 var(--font-head);
	transition: box-shadow 160ms, transform 160ms;
}
.fp-inst__avatar:hover { box-shadow: 0 4px 16px rgba(13,31,45,.3); transform: translateY(-1px); }
.fp-inst__avatar:focus-visible { outline: 3px solid var(--clr-blue); outline-offset: 2px; }
.fp-inst__avatar-face {
	width: 40px; height: 40px; flex-shrink: 0; overflow: hidden;
	border-radius: 50%; border: 2px solid #fff;
	display: flex; align-items: center; justify-content: center;
	background: var(--clr-blue); color: #fff;
	font: 700 .8rem/1 var(--font-head); letter-spacing: .02em;
}
.fp-inst__avatar-face img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Demo content is always visibly labelled. */
.fp-demo-tag {
	display: inline-block; padding: .15rem .4rem; border-radius: 4px;
	background: #FFF4CC; color: #7A5B00; border: 1px solid #F5C518;
	font: 700 .6rem/1.2 var(--font-head); letter-spacing: .04em; text-transform: uppercase;
}
.fp-inst__avatar .fp-demo-tag { position: absolute; top: -.55rem; right: .25rem; }

.fp-inst__caption {
	font-size: .8rem; color: var(--clr-muted); line-height: 1.45;
	margin-top: .55rem; padding: 0 .1rem;
}

@media (max-width: 1024px) {
	.fp-inst__item { flex-basis: calc((100% - 2rem) / 3.2); }
}
@media (max-width: 640px) {
	.fp-inst { padding-top: 1.5rem; }
	.fp-inst__head { margin-bottom: .75rem; }
	.fp-inst__head .fp-h2 { font-size: 1.3rem; }
	.fp-inst__nav { display: none; }
	.fp-inst__track {
		gap: .65rem; margin: 0 -1rem; padding: 0 1rem;
		scroll-padding-inline: 1rem;
	}
	/* ~66% width: large enough to read the photo, the next one peeks in. */
	.fp-inst__item { flex-basis: 66%; }
	.fp-inst__track--single .fp-inst__item { flex-basis: 82%; }
	.fp-inst__caption { font-size: .76rem; margin-top: .4rem; }
}
@media (prefers-reduced-motion: reduce) {
	.fp-inst__track { scroll-behavior: auto; transition: none; }
	.fp-inst__open img { transition: none; }
	.fp-inst__avatar { transition: none; }
}

/* ── Lightbox ── */
html.sbk-lb-open { overflow: hidden; }

.fp-lb {
	width: min(1100px, calc(100vw - 2rem));
	max-width: none; max-height: calc(100dvh - 2rem);
	margin: auto; padding: 0; border: 0;
	border-radius: var(--r-lg);
	background: #fff; color: var(--clr-text);
	box-shadow: 0 24px 64px rgba(0,0,0,.35);
	overflow: hidden;
}
.fp-lb:not([open]) { display: none; }
.fp-lb::backdrop { background: rgba(8,18,28,.82); }

.fp-lb__inner {
	position: relative;
	display: grid; grid-template-columns: minmax(0, 1fr);
	max-height: calc(100dvh - 2rem);
}
.fp-lb--has-review .fp-lb__inner { grid-template-columns: minmax(0, 1fr) 340px; }

.fp-lb__figure { margin: 0; display: flex; flex-direction: column; min-height: 0; background: #0D1F2D; }
.fp-lb__media {
	position: relative; flex: 1; min-height: 0;
	display: flex; align-items: center; justify-content: center;
}
.fp-lb__img {
	display: block; width: auto; height: auto;
	max-width: 100%; max-height: calc(100dvh - 2rem - 3.25rem);
	object-fit: contain;
}

.fp-lb__bar {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	min-height: 3.25rem; padding: .7rem 1.1rem;
	background: #0D1F2D; color: rgba(255,255,255,.85);
	font-size: .82rem; line-height: 1.4;
}
.fp-lb__count { font-family: var(--font-head); font-size: .75rem; color: rgba(255,255,255,.6); white-space: nowrap; }

.fp-lb__close,
.fp-lb__arrow {
	position: absolute; z-index: 2;
	width: 42px; height: 42px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,.92); color: var(--clr-navy);
	border: 0; cursor: pointer;
	box-shadow: 0 2px 10px rgba(0,0,0,.2);
	transition: background 160ms;
}
.fp-lb__close:hover,
.fp-lb__arrow:hover { background: #fff; }
.fp-lb__close:focus-visible,
.fp-lb__arrow:focus-visible { outline: 3px solid var(--clr-yellow); outline-offset: 2px; }
.fp-lb__close svg { width: 18px; height: 18px; }
.fp-lb__arrow svg { width: 20px; height: 20px; }
.fp-lb__close { top: .75rem; right: .75rem; }
.fp-lb__arrow { top: 50%; transform: translateY(-50%); }
.fp-lb__arrow--prev { left: .75rem; }
.fp-lb__arrow--next { right: .75rem; }

.fp-lb__panel {
	overflow-y: auto; padding: 3.75rem 1.5rem 1.5rem;
	border-left: 1px solid var(--clr-border);
}
.fp-lb__panel[hidden] { display: none; }

.fp-lb__review { display: flex; flex-direction: column; gap: .7rem; }
.fp-lb__review-label {
	align-self: flex-start;
	font-family: var(--font-head); font-size: .68rem; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase;
	color: var(--clr-blue); background: rgba(0,98,227,.08);
	border: 1px solid rgba(0,98,227,.18);
	padding: .2rem .6rem; border-radius: 100px;
}
.fp-lb__stars { display: flex; gap: 2px; }
.fp-lb__stars svg { width: 16px; height: 16px; }
.fp-lb__review-title { font-family: var(--font-head); font-size: .95rem; font-weight: 700; color: var(--clr-navy); line-height: 1.35; }
.fp-lb__quote { margin: 0; font-size: .9rem; line-height: 1.7; color: #3A4A5C; }
.fp-lb__who { display: flex; align-items: center; gap: .65rem; padding-top: .75rem; border-top: 1px solid #EDF0F5; }
.fp-lb__who-text { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; min-width: 0; }
.fp-lb__face {
	width: 40px; height: 40px; flex-shrink: 0; overflow: hidden; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--clr-blue); color: #fff; font: 700 .8rem/1 var(--font-head);
}
.fp-lb__face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fp-lb__name { font-size: .85rem; font-weight: 600; color: var(--clr-navy); }
.fp-lb__meta { font-size: .76rem; color: var(--clr-muted); }
.fp-lb__tp-link { font-family: var(--font-head); font-size: .8rem; font-weight: 700; color: var(--clr-blue); text-decoration: none; }
.fp-lb__tp-link:hover { text-decoration: underline; }

/* Phones + small tablets: one scrollable column, image first. */
@media (max-width: 860px) {
	.fp-lb { width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); border-radius: var(--r-md); }
	.fp-lb__inner,
	.fp-lb--has-review .fp-lb__inner {
		grid-template-columns: minmax(0, 1fr);
		max-height: calc(100dvh - 1rem); overflow-y: auto;
		overscroll-behavior: contain;
	}
	.fp-lb__img { max-height: 70dvh; }
	.fp-lb--has-review .fp-lb__img { max-height: 46dvh; }
	.fp-lb__panel { overflow: visible; padding: 1.25rem 1.1rem 1.5rem; border-left: 0; }
	.fp-lb__close { position: fixed; top: 1rem; right: 1rem; }
	.fp-lb__arrow { width: 38px; height: 38px; }
	.fp-lb__arrow--prev { left: .5rem; }
	.fp-lb__arrow--next { right: .5rem; }
}

/* ── Trustpilot review section (compact) ── */
.fp-revs { margin-top: 2rem; padding: 1.75rem 0 2rem; }
.fp-revs__head { margin-bottom: 1rem; }
.fp-revs__foot { margin-top: 1.1rem; }
@media (max-width: 640px) {
	.fp-revs { margin-top: 1.5rem; padding: 1.35rem 0 1.5rem; }
	.fp-revs__row .fp-h2 { font-size: 1.3rem; }
}

.fp-rev__text { overflow-wrap: anywhere; }
.fp-revs .fp-rev__name,
.fp-revs .fp-rev__date { display: block; }

/* Continuous drift: snapping and smooth-scroll would fight the per-frame movement. */
.fp-inst__track.is-drifting { scroll-snap-type: none; scroll-behavior: auto; }