/* ============================================================
   Backhand Series – Design · Cardurile mari (widgetul Elementor)
   Model: secțiunea de sus de pe rolex.com (video + trei carduri înalte).
   Măsurătorile sunt cele de pe rolex.com: margini de 8%, grilă de 12 coloane cu 8 px
   (6 coloane cu 6 px pe telefon), un card = 4 coloane pe calculator și 5 sub 1025 px,
   format 3:5, colțuri de 10 px. Diferență: meniul nostru rămâne fix, așa că secțiunea se
   lipește sub el, iar cardurile nu sunt mai înalte decât spațiul rămas.
   ============================================================ */

/* Tema pune 21 px deasupra conținutului paginii; pe pagina cu această secțiune îi scoatem. */
.entry-content:has(.bhsd-rx){ margin-top:0 !important; }

.bhsd-rx{
	--rx-sus:88px;                              /* înălțimea meniului fix (se schimbă din widget) */
	--rx-h:calc(100vh - var(--rx-sus));         /* spațiul de sub meniu */
	--rx-n:3;                                   /* câte carduri sunt */
	position:relative;
	display:grid;
	grid-template-columns:minmax(0, 1fr);
	grid-template-rows:calc(100vh + var(--rx-h));
	box-sizing:border-box;
	width:100%;
	height:calc(100vh + var(--rx-h));
	margin:0;
	padding:0;
	background:#000000;
	color:#FFFFFF;
	isolation:isolate;
	font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}
.bhsd-rx *,
.bhsd-rx *::before,
.bhsd-rx *::after{ box-sizing:border-box; }

/* ---------- Fundalul: stă lipit sub meniu cât derulezi un ecran ---------- */
.bhsd-rx .bhsd-rx__media{
	grid-area:1 / 1;
	align-self:start;
	position:-webkit-sticky;
	position:sticky;
	top:var(--rx-sus);
	height:calc(var(--rx-h) + 2px);
	overflow:hidden;
}
.bhsd-rx .bhsd-rx__fundal{
	position:absolute;
	inset:0;
	display:block;
	width:100% !important;
	height:100% !important;
	max-width:none !important;
	margin:0 !important;
	border:0 !important;
	border-radius:0 !important;
	object-fit:cover;
	object-position:center;
}
.bhsd-rx .bhsd-rx__fundal--miscare{
	transform-origin:72% 18%;
	animation:bhsd-rx-apropiere 14s ease-in-out infinite alternate;
}
@keyframes bhsd-rx-apropiere{
	from{ transform:scale(1) translate3d(0, 0, 0); }
	to{ transform:scale(1.12) translate3d(-1.6%, .6%, 0); }
}
.bhsd-rx.is-vizibil .bhsd-rx__fundal--miscare{ animation-play-state:paused; }

/* Stratul negru estompat, care apare treptat la derulare (opacitatea o pune scriptul) */
.bhsd-rx .bhsd-rx__voal{
	position:absolute;
	inset:0;
	z-index:1;
	background:rgb(0 0 0 / .8);
	-webkit-backdrop-filter:blur(5px);
	backdrop-filter:blur(5px);
	opacity:0;
	pointer-events:none;
}

/* ---------- Cardurile: tot lipite sub meniu, deasupra fundalului ---------- */
.bhsd-rx .bhsd-rx__carduri{
	grid-area:1 / 1;
	align-self:start;
	position:-webkit-sticky;
	position:sticky;
	top:var(--rx-sus);
	z-index:2;
	display:grid;
	align-content:center;
	height:var(--rx-h);
	overflow:hidden;
	pointer-events:none;
}
.bhsd-rx.is-vizibil .bhsd-rx__carduri{ pointer-events:auto; }
.bhsd-rx .bhsd-rx__cadru{
	display:grid;
	width:min(100%, 1920px);
	height:100%;
	margin-inline:auto;
	container-type:inline-size;
}
.bhsd-rx ul.bhsd-rx__lista{
	--rx-cols:12;
	--rx-gap:8px;
	--rx-nb:5;
	--rx-margine:calc(.08 * 100cqw);
	--rx-unit:calc((100cqw - 2 * var(--rx-margine) - var(--rx-gap) * (var(--rx-cols) - 1)) / var(--rx-cols));
	/* lățimea unui card, ca la Rolex; dar cardul nu e mai înalt decât spațiul de sub meniu (format 3:5) */
	--rx-card:min(calc(var(--rx-unit) * var(--rx-nb) + var(--rx-gap) * (var(--rx-nb) - 1)), calc(var(--rx-h) * 3 / 5));
	--rx-start:var(--rx-margine);
	display:grid;
	grid-auto-flow:column;
	grid-auto-columns:var(--rx-card);
	gap:var(--rx-gap);
	align-content:center;
	box-sizing:content-box !important;
	height:var(--rx-h);
	margin:0 !important;
	padding:0 0 0 var(--rx-start) !important;
	overflow-x:auto;
	overflow-y:hidden;
	list-style:none !important;
	scroll-snap-type:x mandatory;
	scrollbar-width:none;
	-webkit-overflow-scrolling:touch;
}
.bhsd-rx ul.bhsd-rx__lista::-webkit-scrollbar{ display:none; }
/* pe calculator, cardurile care încap stau centrate */
@media (min-width:1025px){
	.bhsd-rx ul.bhsd-rx__lista{
		--rx-nb:4;
		--rx-start:max(var(--rx-margine), calc((100cqw - var(--rx-n) * var(--rx-card) - (var(--rx-n) - 1) * var(--rx-gap)) / 2));
	}
}
@media (max-width:767.98px){
	.bhsd-rx ul.bhsd-rx__lista{ --rx-cols:6; --rx-gap:6px; }
}

.bhsd-rx li.bhsd-rx__item{
	position:relative;
	display:block;
	width:100%;
	margin:0 !important;
	padding:0 !important;
	list-style:none !important;
	scroll-snap-align:center;
	opacity:0;
	transform:translate3d(0, calc(1px + 90vh), 0);
}
.bhsd-rx li.bhsd-rx__item::before,
.bhsd-rx li.bhsd-rx__item::marker{ content:none; }
.bhsd-rx li.bhsd-rx__item:first-child{ scroll-snap-align:start; scroll-margin-inline-start:var(--rx-margine); }
.bhsd-rx li.bhsd-rx__item:last-child{
	scroll-snap-align:end;
	scroll-margin-inline-end:var(--rx-start);
	box-sizing:content-box !important;
	padding-inline-end:var(--rx-start) !important;
}
/* cardurile urcă, unul după altul (0,9 s; 0,16 s între ele) */
.bhsd-rx.is-vizibil li.bhsd-rx__item{
	opacity:1;
	transform:translate3d(0, 0, 0);
	transition:transform 900ms calc(160ms * var(--i)) ease, opacity 700ms calc(160ms * var(--i)) ease;
}
/* la derularea înapoi, dispar */
.bhsd-rx.is-ascuns li.bhsd-rx__item{
	opacity:0;
	transform:translate3d(0, 0, 0);
	transition:opacity 700ms;
}

/* ---------- Cardul ---------- */
.bhsd-rx .bhsd-rx__card,
.bhsd-rx a.bhsd-rx__card:hover,
.bhsd-rx a.bhsd-rx__card:focus,
.bhsd-rx a.bhsd-rx__card:visited{
	display:block;
	width:100%;
	overflow:hidden;
	border-radius:10px;
	color:#FFFFFF;
	text-decoration:none;
	box-shadow:none;
}
.bhsd-rx a.bhsd-rx__card:focus-visible{ outline:2px solid #FFFFFF; outline-offset:3px; }
.bhsd-rx .bhsd-rx__fig{
	position:relative;
	display:grid;
	align-items:end;
	margin:0 !important;
	padding:0 !important;
	container-type:inline-size;
}
.bhsd-rx .bhsd-rx__fig > *{ grid-area:1 / 1; }
.bhsd-rx .bhsd-rx__fig::before{
	content:"";
	position:absolute;
	inset:0;
	z-index:1;
	display:block;
	pointer-events:none;
	background:linear-gradient(45deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,0) 55%);
}
.bhsd-rx .bhsd-rx__img{
	display:block;
	width:100% !important;
	height:auto !important;
	max-width:none !important;
	margin:0 !important;
	border:0 !important;
	border-radius:0 !important;
	aspect-ratio:3 / 5;
	object-fit:cover;
	will-change:transform;
}
.bhsd-rx .bhsd-rx__img--gol{ background:linear-gradient(160deg, #2A3A33, #121619); }
@media (hover:hover){
	.bhsd-rx .bhsd-rx__img{ transition:transform .7s; }
	.bhsd-rx a.bhsd-rx__card:hover .bhsd-rx__img{ transform:scale(1.05); }
}

/* Textul de jos, centrat; mărimile cresc odată cu cardul, ca la Rolex */
.bhsd-rx .bhsd-rx__text{
	position:relative;
	z-index:2;
	display:flex;
	flex-direction:column;
	align-items:center;
	margin:0 20px 60px !important;
	padding:0 !important;
	color:#FFFFFF;
	text-align:center;
	text-wrap:balance;
}
.bhsd-rx .bhsd-rx__card--inchis .bhsd-rx__text{ color:#212121; }
.bhsd-rx .bhsd-rx__sup{
	display:block;
	margin:0;
	color:inherit;
	font-family:"Source Serif 4",Georgia,"Times New Roman",serif;
	font-size:clamp(9px, 4px + 1.8519cqw, 14px);   /* în px: tema schimbă mărimea „rem” */
	font-weight:400;
	line-height:1.43;
	letter-spacing:.125em;
	text-transform:uppercase;
}
.bhsd-rx h3.bhsd-rx__titlu{
	margin:0 !important;
	padding:0 !important;
	color:inherit !important;
	font-family:"Montserrat",system-ui,sans-serif !important;
	font-size:clamp(22px, 10.3704cqw - 6px, 50px) !important;
	font-weight:700 !important;
	font-style:normal !important;
	line-height:1 !important;
	letter-spacing:-.02em !important;
	text-transform:none !important;
}

/* ---------- În editorul Elementor: starea finală, fără mișcare ---------- */
.bhsd-rx.is-editor{
	grid-template-rows:var(--rx-h);
	height:var(--rx-h);
}
.bhsd-rx.is-editor .bhsd-rx__media,
.bhsd-rx.is-editor .bhsd-rx__carduri{ position:relative; top:auto; }
.bhsd-rx.is-editor .bhsd-rx__voal{ opacity:1 !important; }
.bhsd-rx.is-editor .bhsd-rx__carduri{ pointer-events:auto; }
.bhsd-rx.is-editor li.bhsd-rx__item{ opacity:1; transform:none; transition:none; }

@media (prefers-reduced-motion:reduce){
	.bhsd-rx .bhsd-rx__fundal--miscare{ animation:none; }
	.bhsd-rx.is-vizibil li.bhsd-rx__item,
	.bhsd-rx.is-ascuns li.bhsd-rx__item,
	.bhsd-rx .bhsd-rx__img{ transition:none; }
}