/*======================================================================
MANSURGE COMPONENT
MC-01

PREMIUM HERO
Version : 3.0
======================================================================*/

.ms-hero{

position:relative;

overflow:hidden;

background:
linear-gradient(
180deg,
var(--ms-bg) 0%,
var(--ms-surface) 100%
);

padding:120px 0;

}

.ms-hero::before{

content:"";

position:absolute;

inset:0;

pointer-events:none;

background:
radial-gradient(
circle at top right,
rgba(197,165,114,.06),
transparent 55%
);

}

.ms-hero-layout{

display:grid;

grid-template-columns:
minmax(0,1.15fr)
minmax(340px,.85fr);

gap:72px;

align-items:center;

}

.ms-hero-inner{

position:relative;

z-index:2;

max-width:760px;

}

.ms-hero-subtitle{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

padding:10px 18px;

margin-bottom:28px;

border-radius:var(--ms-radius-pill);

border:var(--ms-border-thin) solid var(--ms-border);

background:rgba(197,165,114,.08);

}

.ms-hero-divider{

width:120px;

height:2px;

margin:34px 0;

background:var(--ms-gold);

opacity:.35;

}

.ms-hero-title{

margin-bottom:28px;

}

.ms-hero-text{

max-width:640px;

margin-bottom:44px;

}

.ms-hero-actions{

display:flex;

align-items:center;

gap:18px;

flex-wrap:wrap;

}

.ms-hero-actions .ms-btn{

min-width:180px;

}

.ms-hero-media{

position:relative;

display:flex;

align-items:center;

justify-content:center;

width:100%;

min-height:420px;

}

.ms-hero-placeholder{

display:flex;

align-items:center;

justify-content:center;

width:100%;

min-width:100%;

min-height:420px;

aspect-ratio:1/1;

border-radius:var(--ms-radius-xl);

border:var(--ms-border-thin) solid var(--ms-border);

background:

radial-gradient(

circle at top left,

rgba(197,165,114,.12),

transparent 60%

),

linear-gradient(

135deg,

var(--ms-surface),

var(--ms-surface-soft)

);

box-shadow:var(--ms-shadow-lg);

}

@media (max-width:1024px){

.ms-hero{

padding:100px 0;

}

.ms-hero-layout{

grid-template-columns:1fr;

gap:56px;

}

.ms-hero-inner{

max-width:100%;

}

}

@media (max-width:767px){

.ms-hero{

padding:80px 0;

}

.ms-hero-layout{

display:flex;

flex-direction:column;

align-items:stretch;

gap:40px;

}

.ms-hero-actions{

flex-direction:column;

align-items:stretch;

}

.ms-hero-actions .ms-btn{

width:100%;

min-width:unset;

}

.ms-hero-media{

min-height:auto;

}

.ms-hero-placeholder{

min-height:320px;

}

}





/*======================================================================
MC01 — FINAL BRAND HERO
Centered content + stable media column
======================================================================*/

.ms-hero-inner--brand{
    width:100%;
    max-width:760px;

    text-align:center;

    display:flex;
    flex-direction:column;
    align-items:center;
}

.ms-hero-inner--brand .ms-hero-subtitle{
    align-self:center;
}

.ms-hero-title{
    display:flex;
    flex-direction:column;
    align-items:center;

    width:100%;
    max-width:760px;

    margin:0 auto 28px;

    text-align:center;
}

.ms-hero-title-line{
    display:flex;
    align-items:baseline;
    justify-content:center;

    gap:.22em;

    width:100%;

    white-space:nowrap;
}

.ms-hero-title-line + .ms-hero-title-line{
    margin-top:.02em;
}

.ms-hero-title-lead,
.ms-hero-title-your,
.ms-hero-title .ms-text-gold{
    display:inline-block;
}

.ms-hero-title .ms-text-gold{
    color:var(--ms-gold);
}

.ms-hero-inner--brand .ms-body-xl,
.ms-hero-inner--brand .ms-hero-text{
    width:100%;
    max-width:640px;

    margin-left:auto;
    margin-right:auto;

    text-align:center;
}

.ms-hero-inner--brand .ms-hero-divider{
    margin-left:auto;
    margin-right:auto;
}

.ms-hero-inner--brand .ms-hero-actions{
    justify-content:center;
}


/* Media column always exists, even without an image. */

.ms-hero-media{
    position:relative;

    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    min-width:0;
    min-height:520px;

    overflow:hidden;

    border-radius:var(--ms-radius-xl);
}

.ms-hero-placeholder{
    position:absolute;
    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    min-height:100%;

    border-radius:inherit;

    border:var(--ms-border-thin) solid var(--ms-border);

    background:
        radial-gradient(
            circle at 28% 20%,
            rgba(197,165,114,.13),
            transparent 42%
        ),
        linear-gradient(
            135deg,
            var(--ms-surface),
            var(--ms-surface-soft)
        );

    box-shadow:var(--ms-shadow-lg);
}

.ms-hero-placeholder-mark{
    width:82px;
    height:2px;

    background:var(--ms-gold);

    opacity:.25;

    box-shadow:
        0 -10px 0 rgba(197,165,114,.08),
        0 10px 0 rgba(197,165,114,.08);

    transform:rotate(-8deg);
}

.ms-hero-image{
    position:relative;
    z-index:1;

    display:block;

    width:100%;
    height:100%;
    min-height:520px;

    object-fit:cover;
    object-position:center;

    border-radius:inherit;
}

.ms-hero-media.has-image .ms-hero-placeholder{
    opacity:0;
}

.ms-hero-media.is-placeholder .ms-hero-placeholder{
    opacity:1;
}


@media (max-width:1024px){

    .ms-hero-inner--brand{
        max-width:820px;
        margin-inline:auto;
    }

    .ms-hero-media,
    .ms-hero-image{
        min-height:440px;
    }

}


@media (max-width:767px){

    .ms-hero-title-line{
        gap:.14em;
        white-space:normal;
        flex-wrap:wrap;
    }

    .ms-hero-media,
    .ms-hero-image{
        min-height:340px;
    }

}