/* =========================================================
HERO CORE SYSTEM
wspólna baza dla wszystkich hero landing
========================================================= */

.section-hero{
width:100%;
position:relative;
margin:0;
padding:0 !important;
overflow:hidden;
}

.section-hero > .layout-container-hero,
.section-hero > .layout-container{
width:100%;
max-width:none;
margin:0;
padding:0 !important;
}

.section-hero .profile-banner{
position:relative;
width:100%;
margin:0;
}

.hero-wrapper{
position:relative;
width:100%;
overflow:hidden;
}

.hero-wrapper .profile-banner{
position:relative;
}

.hero-overlay{
position:absolute;
inset:0;
background:linear-gradient(
180deg,
rgba(0,0,0,.20) 0%,
rgba(0,0,0,.45) 100%
);
z-index:1;
}

.hero-content{
position:relative;
z-index:2;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
padding:40px 20px;
}

.hero-title{
font-size:clamp(2rem,3.5vw,3rem);
font-weight:800;
line-height:1.05;
margin:0;
}

.hero-subtitle{
margin-top:18px;
font-size:clamp(1rem,1.3vw,1.25rem);
line-height:1.6;
max-width:720px;
opacity:.9;
}

.hero-actions{
margin-top:28px;
display:flex;
gap:14px;
flex-wrap:wrap;
justify-content:center;
}

/* Runtime Hero appearance options */
.section-hero.landing-hero--image-top .portfolio-hero,
.section-hero.landing-hero--image-top .profile-banner{
background-position:center top;
}

.section-hero.landing-hero--image-center .portfolio-hero,
.section-hero.landing-hero--image-center .profile-banner{
background-position:center center;
}

.section-hero.landing-hero--image-bottom .portfolio-hero,
.section-hero.landing-hero--image-bottom .profile-banner{
background-position:center bottom;
}

.section-hero.landing-hero--height-compact.hero-large .portfolio-hero,
.section-hero.landing-hero--height-compact.hero-full .portfolio-hero,
.section-hero.landing-hero--height-compact.hero-classic .profile-banner{
min-height:400px;
}

.section-hero.landing-hero--height-standard.hero-large .portfolio-hero,
.section-hero.landing-hero--height-standard.hero-full .portfolio-hero,
.section-hero.landing-hero--height-standard.hero-classic .profile-banner{
min-height:520px;
}

.section-hero.landing-hero--height-tall.hero-large .portfolio-hero,
.section-hero.landing-hero--height-tall.hero-full .portfolio-hero,
.section-hero.landing-hero--height-tall.hero-classic .profile-banner{
min-height:650px;
}

.section-hero.landing-hero--overlay-none .portfolio-hero::before{
backdrop-filter:none;
}

.section-hero.landing-hero--overlay-none .portfolio-hero::after{
background:transparent;
}

.section-hero.landing-hero--overlay-light .portfolio-hero::after{
background:linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.28) 100%);
}

.section-hero.landing-hero--overlay-medium .portfolio-hero::after{
background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.55) 100%);
}

.section-hero.landing-hero--overlay-strong .portfolio-hero::after{
background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.78) 100%);
}

.section-hero.landing-hero--overlay-none .profile-banner::after,
.section-hero.landing-hero--overlay-light .profile-banner::after,
.section-hero.landing-hero--overlay-medium .profile-banner::after,
.section-hero.landing-hero--overlay-strong .profile-banner::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
}

.section-hero.landing-hero--overlay-none .profile-banner::after{
background:transparent;
}

.section-hero.landing-hero--overlay-light .profile-banner::after{
background:rgba(0,0,0,.14);
}

.section-hero.landing-hero--overlay-medium .profile-banner::after{
background:rgba(0,0,0,.28);
}

.section-hero.landing-hero--overlay-strong .profile-banner::after{
background:rgba(0,0,0,.46);
}

/* =========================================================
GLOBAL HERO BUTTONS
========================================================= */

.hero-btn{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:48px;
padding:12px 22px;
border-radius:999px;
border:1px solid rgba(255,255,255,.9);
background:transparent;
color:#fff !important;
text-decoration:none !important;
font-weight:600;
font-size:14px;
line-height:1;
cursor:pointer;
transition:
background .22s ease,
color .22s ease,
border-color .22s ease,
transform .22s ease,
box-shadow .22s ease,
opacity .22s ease;
}

.hero-btn:visited,
.hero-btn:focus,
.hero-btn:active{
color:#fff !important;
text-decoration:none !important;
}

.hero-btn:hover{
transform:translateY(-2px);
color:#fff !important;
text-decoration:none !important;
}

.hero-btn-primary{
background:#fff;
color:#111 !important;
border-color:#fff;
box-shadow:0 12px 28px rgba(0,0,0,.18);
}

.hero-btn-primary:visited,
.hero-btn-primary:focus,
.hero-btn-primary:active{
color:#111 !important;
}

.hero-btn-primary:hover{
background:#111;
color:#fff !important;
border-color:#111;
box-shadow:0 16px 34px rgba(0,0,0,.24);
}

.hero-btn-secondary{
background:rgba(255,255,255,.08);
color:#fff !important;
border-color:rgba(255,255,255,.7);
backdrop-filter:blur(4px);
}

.hero-btn-secondary:hover{
background:#fff;
color:#111 !important;
border-color:#fff;
box-shadow:0 16px 34px rgba(0,0,0,.20);
}

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

@media (max-width:1024px){
.hero-content{
padding:30px 16px;
}

.section-hero.landing-hero--height-compact.hero-large .portfolio-hero,
.section-hero.landing-hero--height-compact.hero-full .portfolio-hero,
.section-hero.landing-hero--height-compact.hero-classic .profile-banner{
min-height:320px;
}

.section-hero.landing-hero--height-standard.hero-large .portfolio-hero,
.section-hero.landing-hero--height-standard.hero-full .portfolio-hero,
.section-hero.landing-hero--height-standard.hero-classic .profile-banner{
min-height:420px;
}

.section-hero.landing-hero--height-tall.hero-large .portfolio-hero,
.section-hero.landing-hero--height-tall.hero-full .portfolio-hero,
.section-hero.landing-hero--height-tall.hero-classic .profile-banner{
min-height:540px;
}
}

@media (max-width:768px){
.hero-content{
padding:24px 12px;
}

.hero-actions{
flex-direction:column;
width:100%;
}

.hero-actions .hero-btn{
width:100%;
}

.section-hero.landing-hero--height-compact.hero-large .portfolio-hero,
.section-hero.landing-hero--height-compact.hero-full .portfolio-hero,
.section-hero.landing-hero--height-compact.hero-classic .profile-banner{
min-height:260px;
}

.section-hero.landing-hero--height-standard.hero-large .portfolio-hero,
.section-hero.landing-hero--height-standard.hero-full .portfolio-hero,
.section-hero.landing-hero--height-standard.hero-classic .profile-banner{
min-height:340px;
}

.section-hero.landing-hero--height-tall.hero-large .portfolio-hero,
.section-hero.landing-hero--height-tall.hero-full .portfolio-hero,
.section-hero.landing-hero--height-tall.hero-classic .profile-banner{
min-height:440px;
}
}