﻿/* ============================================================
   BIODRY HERO — Biodry Core plugin
   Namespace: .biodry-hero (pôvodne .ws-hero)
   ============================================================ */

.biodry-hero{
	--biodry-red:#FF2D2D;
	--biodry-red-hover:#e51d1d;
	--biodry-ink:#101820;
	--biodry-muted:#667085;
	--biodry-card:#ffffff;
	--biodry-bg:#f7f7f7;
	--biodry-shadow:0 30px 60px -25px rgba(16,24,32,.25);
	--biodry-ease:cubic-bezier(.55,.05,.2,1);

	/* Container alignment vars (override-able cez Elementor controls) */
	--biodry-container-width:1200px;
	--biodry-container-gutter:20px;

	position:relative;
	width:100%;
	height:clamp(520px, 68vh, 690px);
	min-height:640px;
	background:var(--biodry-bg);
	overflow:hidden;
	font-family:inherit;
	isolation:isolate;

	display:grid;
	grid-template-columns:35% 65%;
}

.biodry-hero *,
.biodry-hero *::before,
.biodry-hero *::after{
	box-sizing:border-box;
}

/* LĽavá dekoratívne pozadie */
.biodry-hero__sketch{
	background-color:#e8e8e8;
}

/* Jemné prekrytie skicovej časti */
.biodry-hero::before{
	content:"";
	position:absolute;
	left:0;
	top:0;
	width:35%;
	height:100%;
	background:linear-gradient(
		90deg,
		rgba(255,255,255,.96) 0%,
		rgba(255,255,255,.82) 58%,
		rgba(255,255,255,.35) 100%
	);
	z-index:1;
	pointer-events:none;
}

/* Pravá fotka */
.biodry-hero__photo{
	position:relative;
	overflow:hidden;
	background:#ddd;
}

.biodry-hero__photo::after{
	content:"";
	position:absolute;
	inset:0;
	background:
		linear-gradient(90deg,rgba(0,0,0,.16) 0%,transparent 36%),
		linear-gradient(180deg,rgba(0,0,0,.04) 0%,transparent 36%);
	pointer-events:none;
}

.biodry-hero__photo img{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center center;
	display:block;
	animation:biodry-zoom 2.5s var(--biodry-ease) both;
}


@keyframes biodry-zoom{
	from{transform:scale(1.08)}
	to{transform:scale(1)}
}

/* Textová karta */
.biodry-hero__card{
	position:relative;
	background:var(--biodry-card);
	padding:56px 60px;
	box-shadow:var(--biodry-shadow);
	z-index:5;
}

@media (min-width:992px){
	.biodry-hero__card{
		position:absolute;
		top:50%;
		left:clamp(24px, 12%, 240px);
		transform:translateY(-50%);
		width:min(610px, 39%);
		animation:biodry-fade .9s var(--biodry-ease) .15s both;
	}
}

@keyframes biodry-fade{
	from{
		opacity:0;
		transform:translate(-22px,-50%);
	}
	to{
		opacity:1;
		transform:translate(0,-50%);
	}
}

/* Eyebrow */
.biodry-hero__eyebrow{
	display:inline-flex;
	align-items:center;
	gap:14px;
	color:var(--biodry-muted);
	font-size:13px;
	font-weight:800;
	letter-spacing:.14em;
	text-transform:uppercase;
	margin-bottom:22px;
}

.biodry-hero__eyebrow i{
	display:block;
	width:32px;
	height:2px;
	background:var(--biodry-red);
	border-radius:999px;
}

/* Nadpis */
.biodry-hero__title{
	font-size:clamp(25px, 3.05vw, 30px);
	line-height:1.08;
	font-weight:900;
	margin:0 0 22px;
	color:var(--biodry-ink);
	letter-spacing:-.025em;
	max-width:520px;
}

/* Text */
.biodry-hero__text{
	font-size:16px;
	line-height:1.72;
	color:var(--biodry-muted);
	margin:0 0 22px;
}

/* Benefit badges */
.biodry-hero__badges{
	display:flex;
	flex-wrap:wrap;
	gap:9px;
	margin:0 0 34px;
}

.biodry-hero__badges span{
	display:inline-flex;
	align-items:center;
	padding:8px 12px;
	border-radius:999px;
	background:rgba(255,45,45,.075);
	color:#c90000;
	font-size:13px;
	font-weight:800;
	line-height:1;
}

/* CTA */
.biodry-hero__cta{
	display:flex;
	align-items:center;
	gap:28px;
	flex-wrap:wrap;
}

/* ============================================================
   HERO BUTTON - SKEWED ROOFIX STYLE
============================================================ */

.biodry-hero__btn{
	position:relative;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:12px;

	min-height:60px;
	padding:0 36px;

	background:var(--biodry-red);
	color:#fff !important;
	text-decoration:none !important;

	font-weight:900;
	font-size:13px;
	letter-spacing:.08em;
	text-transform:uppercase;
	line-height:1;

	overflow:hidden;
	isolation:isolate;

	clip-path:polygon(8% 0, 100% 0, 92% 100%, 0% 100%);

	transition:
		transform .32s ease,
		box-shadow .32s ease,
		background .32s ease;
}

.biodry-hero__btn::before{
	content:"";
	position:absolute;
	top:0;
	left:-85%;
	width:55%;
	height:100%;
	background:linear-gradient(
		120deg,
		transparent 0%,
		rgba(255,255,255,.12) 25%,
		rgba(255,255,255,.42) 50%,
		rgba(255,255,255,.12) 75%,
		transparent 100%
	);
	transform:skewX(-18deg);
	z-index:-1;
	transition:left .7s cubic-bezier(.22,1,.36,1);
}

.biodry-hero__btn::after{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(135deg, #ff3333 0%, #df1010 100%);
	opacity:0;
	z-index:-2;
	transition:opacity .32s ease;
}

.biodry-hero__btn:hover{
	color:#fff !important;
	transform:translateY(-3px);
	background:var(--biodry-red-hover);
	box-shadow:
		0 16px 32px -10px rgba(255,45,45,.65),
		0 0 28px rgba(255,45,45,.35);
}

.biodry-hero__btn:hover::before{
	left:130%;
}

.biodry-hero__btn:hover::after{
	opacity:1;
}

/* Šípka */
.biodry-hero__btn-arrow{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	position:relative;
	z-index:2;
	font-size:17px;
	line-height:1;
	transition:transform .32s cubic-bezier(.22,1,.36,1);
}

.biodry-hero__btn:hover .biodry-hero__btn-arrow{
	transform:translateX(7px);
}

.biodry-hero__phone{
	color:var(--biodry-muted);
	font-weight:700;
	font-size:15px;
	line-height:1.5;
}

.biodry-hero__phone a{
	color:var(--biodry-red) !important;
	text-decoration:none !important;
	font-weight:900;
	white-space:nowrap;
	transition:color .2s ease;
}

.biodry-hero__phone a:hover{
	color:var(--biodry-red-hover) !important;
	text-decoration:underline !important;
}

/* ======================== RESPONSIVE ======================== */

@media (max-width:1399px){
	.biodry-hero__card{
		width:min(570px, 42%);
		left:clamp(24px, 8%, 150px);
		padding:50px 52px;
	}
}

@media (max-width:1199px){
	.biodry-hero{
		grid-template-columns:38% 62%;
	}

	.biodry-hero::before{
		width:38%;
	}

	.biodry-hero__card{
		width:min(520px, 48%);
		padding:44px 44px;
		left:clamp(20px, 5%, 90px);
	}

	.biodry-hero__title{
		font-size:clamp(32px, 4vw, 46px);
	}
}

/* Tablet/mobile */
@media (max-width:991px){
	.biodry-hero{
		display:flex;
		flex-direction:column;
		height:auto;
		min-height:auto;
		background:#f7f7f7;
		overflow:visible;
	}

	.biodry-hero::before,
	.biodry-hero__sketch{
		display:none;
	}

	.biodry-hero__photo{
		height:560px !important;
		min-height:560px !important;
		width:100%;
		flex-shrink:0;
	}

	.biodry-hero__card{
		width:min(680px, 92%);
		margin:0 auto;
		padding:42px 38px;
	}

	.biodry-hero__title{
		font-size:clamp(34px, 7vw, 48px);
	}
}

@media (max-width:575px){
	.biodry-hero__photo{
		height:600px !important;
		min-height:600px !important;
	}

	.biodry-hero__card{
		width:92%;
		padding:32px 24px;
		margin:0 auto;
	}

	.biodry-hero__eyebrow{
		gap:10px;
		font-size:11px;
		letter-spacing:.1em;
		margin-bottom:18px;
	}

	.biodry-hero__eyebrow i{
		width:24px;
	}

	.biodry-hero__title{
		font-size:31px;
		line-height:1.08;
		margin-bottom:18px;
	}

	.biodry-hero__text{
		font-size:15px;
		line-height:1.62;
	}

	.biodry-hero__badges{
		gap:8px;
		margin-bottom:28px;
	}

	.biodry-hero__badges span{
		font-size:12px;
		padding:8px 10px;
	}

	.biodry-hero__cta{
		flex-direction:column;
		align-items:flex-start;
		gap:18px;
		width:100%;
	}

	.biodry-hero__btn{
		width:100%;
		padding:17px 22px;
	}

	.biodry-hero__phone{
		font-size:15px;
	}
}

@media (max-width:380px){
	.biodry-hero__title{
		font-size:28px;
	}

	.biodry-hero__card{
		padding:28px 20px;
	}
}

/* ============================================================
   FIX HERO CARD ALIGNMENT TO HEADER / CONTENT CONTAINER
   Zarovnanie hero boxu podľa šírky obsahu (cez CSS premenné)
============================================================ */

@media (min-width: 1200px) {
	.biodry-hero__card {
		left: max(
			var(--biodry-container-gutter),
			calc((100vw - var(--biodry-container-width)) / 2)
		);
	}
}

@media (min-width: 992px) and (max-width: 1199px) {
	.biodry-hero__card {
		left: 32px;
		width: min(520px, 48%);
	}
}

@media (max-width: 991px) {
	.biodry-hero__card {
		left: auto;
	}
}

/* ============================================================
   Reduced motion + manuálne vypnutie animácií cez control
============================================================ */

.biodry-hero--no-anim *,
.biodry-hero--no-anim *::before,
.biodry-hero--no-anim *::after{
	animation:none !important;
	transition-duration:.01ms !important;
}

.biodry-hero--no-anim .biodry-hero__card{
	transform:translateY(-50%) !important;
	opacity:1 !important;
}

@media (max-width:991px){
	.biodry-hero--no-anim .biodry-hero__card{
		transform:none !important;
	}
}

@media (max-width:575px){
	.biodry-hero--no-anim .biodry-hero__card{
		transform:none !important;
	}
}

@media (prefers-reduced-motion:reduce){
	.biodry-hero *,
	.biodry-hero *::before,
	.biodry-hero *::after{
		animation:none !important;
		transition-duration:.01ms !important;
	}

	.biodry-hero__card{
		transform:translateY(-50%) !important;
		opacity:1 !important;
	}

	@media (max-width:991px){
		.biodry-hero__card{
			transform:none !important;
		}
	}

	@media (max-width:575px){
		.biodry-hero__card{
			transform:none !important;
		}
	}
}
