/* =====================================================================
   Innobilari.ro — homepage sections

   One block per section partial in templates/section/. All values come
   from the tokens in css/tokens.css.

   Responsive behaviour follows implementation guide §8.4:
     services   3x2 -> 2 -> 1
     portfolio  3x3 -> 2 -> 1
     process    horizontal timeline -> vertical
     "ce putem înnobila"  scroll-snap carousel -> grid on wide screens
   ===================================================================== */


/* ---------------------------------------------------------------------
   0. Shared section furniture
   --------------------------------------------------------------------- */

.inb-section { padding: 96px 0; }

.inb-section--surface { background: var( --inb-surface ); }

.inb-section--cta {
	background: var( --inb-surface-raised );
	border-top: 1px solid var( --inb-hairline-gold );
	border-bottom: 1px solid var( --inb-hairline-gold );
}

.inb-section__head { max-width: 68ch; margin-bottom: 52px; }

.inb-section__title { margin: 10px 0 0; }

.inb-section__intro {
	margin: 18px 0 0;
	font-size: 1.0625rem;
	color: var( --inb-muted );
}

.inb-section__foot { margin-top: 48px; }

/* Screen-reader-only text. Bootstrap ships .visually-hidden, but it is
   defined here too so the sections do not silently depend on it. */
.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.inb-btn--lg { padding: 15px 34px; font-size: 1rem; }


/* ---------------------------------------------------------------------
   1. Hero

   The image is a full-bleed layer with a scrim over it, so white text
   stays legible regardless of how bright the final photograph is. The
   scrim is heavier at the bottom-left, where the copy sits.
   --------------------------------------------------------------------- */

.inb-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp( 520px, 76vh, 820px );
	padding: 120px 0 90px;
	overflow: hidden;
}

.inb-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.inb-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.inb-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient( to right, rgba( 13, 13, 13, 0.92 ) 0%, rgba( 13, 13, 13, 0.72 ) 45%, rgba( 13, 13, 13, 0.45 ) 100% ),
		linear-gradient( to top, rgba( 13, 13, 13, 0.85 ) 0%, rgba( 13, 13, 13, 0.15 ) 60% );
}

.inb-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 46rem;
}

.inb-hero__title { margin: 0; }

.inb-hero__subtitle {
	margin: 22px 0 0;
	max-width: 40ch;
	font-size: clamp( 1.0625rem, 1rem + 0.4vw, 1.375rem );
	color: var( --inb-fg-dim );
}

/* The technique list. The bullet separators come from the copy itself. */
.inb-hero__subtext {
	margin: 26px 0 0;
	font-size: 0.9375rem;
	letter-spacing: 0.04em;
	color: var( --inb-accent );
}

.inb-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 38px;
}

.inb-hero__actions .bd-btn,
.inb-hero__actions .bd-border-btn { display: inline-block; }


/* ---------------------------------------------------------------------
   2. Service cards
   --------------------------------------------------------------------- */

.inb-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin-bottom: 30px;
	padding-bottom: 26px;
	background: var( --inb-surface-raised );
	border: 1px solid var( --inb-hairline );
	border-radius: var( --inb-radius-lg );
	overflow: hidden;
	transition: border-color var( --inb-dur ) var( --inb-ease ),
	            transform var( --inb-dur ) var( --inb-ease );
}

.inb-card:hover {
	border-color: var( --inb-hairline-gold );
	transform: translateY( -3px );   /* §8.3: subtle hover lift */
}

.inb-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var( --inb-bg );
}

.inb-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var( --inb-dur-slow ) var( --inb-ease );
}

.inb-card:hover .inb-card__media img { transform: scale( 1.03 ); }

.inb-card__title { margin: 26px 26px 0; font-size: var( --inb-fz-h4 ); }
.inb-card__title a { color: var( --inb-fg ); }
.inb-card__title a:hover { color: var( --inb-accent ); }

.inb-card__text {
	flex: 1 1 auto;
	margin: 14px 26px 0;
	font-size: 0.9375rem;
	color: var( --inb-muted );
}

.inb-card__link {
	margin: 20px 26px 0;
	font-size: 0.875rem;
	font-weight: 500;
	color: var( --inb-accent );
}

.inb-card__link::after {
	content: "";
	display: inline-block;
	width: 6px; height: 6px;
	margin-left: 9px;
	border-right: 1.5px solid currentColor;
	border-top: 1.5px solid currentColor;
	transform: rotate( 45deg );
	vertical-align: 1px;
	transition: transform var( --inb-dur ) var( --inb-ease );
}

.inb-card__link:hover::after { transform: rotate( 45deg ) translate( 2px, -2px ); }


/* ---------------------------------------------------------------------
   3. "Ce putem înnobila" — CSS scroll-snap carousel

   No carousel library. The browser supplies momentum scrolling, keyboard
   scrolling and a focus ring; a JS carousel would have to reimplement
   all three. On wide screens the same markup becomes a plain grid.
   --------------------------------------------------------------------- */

.inb-scroller {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 24px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var( --inb-accent-dim ) transparent;
}

.inb-scroller:focus-visible {
	outline: var( --inb-focus-ring );
	outline-offset: -2px;
}

.inb-scroller__track {
	display: flex;
	gap: 22px;
	margin: 0;
	padding: 6px 24px 26px;
	list-style: none;
}

.inb-scroller__item {
	flex: 0 0 auto;
	width: min( 78vw, 320px );
	scroll-snap-align: start;
}

/* Visible affordance: a slim gold scrollbar rather than a hidden one, so it
   is obvious there is more content to the right. */
.inb-scroller::-webkit-scrollbar { height: 4px; }
.inb-scroller::-webkit-scrollbar-track { background: var( --inb-hairline ); }
.inb-scroller::-webkit-scrollbar-thumb { background: var( --inb-accent-dim ); border-radius: 2px; }

.inb-tile {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var( --inb-bg );
	border: 1px solid var( --inb-hairline );
	border-radius: var( --inb-radius-lg );
	overflow: hidden;
	transition: border-color var( --inb-dur ) var( --inb-ease );
}

.inb-tile:hover { border-color: var( --inb-hairline-gold ); }

.inb-tile__media {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var( --inb-surface-raised );
}

.inb-tile__media img { width: 100%; height: 100%; object-fit: cover; }

.inb-tile__body { display: block; padding: 22px; }

.inb-tile__title {
	display: block;
	font-family: var( --inb-ff-heading );
	font-size: 1.0625rem;
	font-weight: 600;
	color: var( --inb-fg );
}

.inb-tile__text {
	display: block;
	margin-top: 10px;
	font-size: 0.875rem;
	color: var( --inb-muted );
}

.inb-tile__link {
	display: block;
	margin-top: 16px;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var( --inb-accent );
}

/* Wide screens: drop the carousel, lay the same markup out as a grid. */
@media ( min-width: 1200px ) {

	.inb-scroller {
		overflow-x: visible;
		scroll-snap-type: none;
	}

	.inb-scroller__track {
		display: grid;
		grid-template-columns: repeat( 5, 1fr );
		max-width: var( --inb-maxw );
		margin: 0 auto;
		padding: 6px 12px 0;
	}

	.inb-scroller__item { width: auto; }

}


/* ---------------------------------------------------------------------
   4. Process timeline

   An <ol>, so the order is announced rather than merely drawn. The gold
   numerals and the connecting hairline are generated from the list.
   --------------------------------------------------------------------- */

.inb-process {
	display: grid;
	grid-template-columns: repeat( 5, 1fr );
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.inb-process__step {
	position: relative;
	padding-top: 58px;
}

/* The hairline that runs along the timeline. */
.inb-process__step::before {
	content: "";
	position: absolute;
	top: 21px;
	left: 0;
	right: -30px;
	height: 1px;
	background: var( --inb-hairline-gold );
}

.inb-process__step:last-child::before { right: 0; }

.inb-process__num {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid var( --inb-accent );
	border-radius: 50%;
	background: var( --inb-bg );
	font-family: var( --inb-ff-heading );
	font-size: 0.9375rem;
	font-weight: 700;
	color: var( --inb-accent );
}

.inb-process__title { margin: 0; font-size: 1.0625rem; }

.inb-process__text {
	margin: 12px 0 0;
	font-size: 0.9375rem;
	color: var( --inb-muted );
}

.inb-process__link {
	display: inline-block;
	margin-top: 14px;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var( --inb-accent );
}

/* §8.4: the timeline becomes vertical on narrow screens. */
@media ( max-width: 991.98px ) {

	.inb-process { grid-template-columns: 1fr; gap: 0; }

	.inb-process__step {
		padding: 0 0 34px 62px;
	}

	.inb-process__step::before {
		top: 0;
		bottom: 0;
		left: 21px;
		right: auto;
		width: 1px;
		height: auto;
	}

	.inb-process__step:last-child::before { bottom: auto; height: 21px; }

}


/* ---------------------------------------------------------------------
   5. Portfolio grid
   --------------------------------------------------------------------- */

.inb-portfolio__tile {
	position: relative;
	margin: 0 0 30px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border: 1px solid var( --inb-hairline );
	border-radius: var( --inb-radius-lg );
	background: var( --inb-surface-raised );
}

.inb-portfolio__tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var( --inb-dur-slow ) var( --inb-ease );
}

/* §8.3: gentle zoom on portfolio tiles. */
.inb-portfolio__tile:hover img { transform: scale( 1.04 ); }


/* ---------------------------------------------------------------------
   6. Value propositions
   --------------------------------------------------------------------- */

.inb-valueprops {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 22px 44px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.inb-valueprops__item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding-bottom: 22px;
	border-bottom: 1px solid var( --inb-hairline );
}

/* A gold check, drawn in CSS. Decorative — the markup marks it aria-hidden. */
.inb-valueprops__mark {
	flex: 0 0 auto;
	width: 16px;
	height: 9px;
	margin-top: 7px;
	border-left: 1.5px solid var( --inb-accent );
	border-bottom: 1.5px solid var( --inb-accent );
	transform: rotate( -45deg );
}

.inb-valueprops__text {
	font-size: 1.0625rem;
	color: var( --inb-fg-dim );
}

@media ( max-width: 767.98px ) {
	.inb-valueprops { grid-template-columns: 1fr; gap: 18px; }
}


/* ---------------------------------------------------------------------
   7. Closing CTA
   --------------------------------------------------------------------- */

.inb-cta { max-width: 62ch; margin: 0 auto; text-align: center; }

.inb-cta__title { margin: 0; font-size: var( --inb-fz-h2 ); }

.inb-cta__intro {
	margin: 20px 0 0;
	font-size: 1.0625rem;
	color: var( --inb-fg-dim );
}

.inb-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 34px;
}

.inb-cta__actions .bd-btn,
.inb-cta__actions .bd-border-btn { display: inline-block; }

.inb-cta__channels {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 28px;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
}

.inb-cta__channels a { font-size: 1rem; color: var( --inb-fg ); }
.inb-cta__channels a:hover { color: var( --inb-accent ); }

.inb-cta__note {
	margin: 18px 0 0;
	font-size: 0.8125rem;
	color: var( --inb-muted );
}


/* ---------------------------------------------------------------------
   8. Narrow screens
   --------------------------------------------------------------------- */

@media ( max-width: 767.98px ) {

	.inb-section { padding: 64px 0; }
	.inb-section__head { margin-bottom: 36px; }

	.inb-hero { padding: 90px 0 70px; }
	.inb-hero__actions .bd-btn,
	.inb-hero__actions .bd-border-btn { width: 100%; text-align: center; }

}