/* ==========================================================
   Chang Tong Core 2.0
   ==========================================================

   Component : Hero
   File      : assets/css/layout/hero.css
   Version   : 1.0
   Status    : Development

========================================================== */


/* ==========================================================
   Hero Section
========================================================== */

.ct-hero {

    min-height: 75vh;

    display: flex;

    align-items: center;

    padding: 4rem 0;

}


/* ==========================================================
   Hero Layout
========================================================== */

.ct-hero__content {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 5rem;

    width: 100%;

}


/* ==========================================================
   Hero Text
========================================================== */

.ct-hero__text {

    flex: 0.9;

    max-width: 520px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}



/* ==========================================================
   Hero Media
========================================================== */

.ct-hero__media {

    flex: 1.1;

}


/* ==========================================================
   Hero Image
========================================================== */

.ct-hero__picture {

    display: block;

}

.ct-hero__image{

    display:block;

    width:100%;

    height:auto;

    border-radius:20px;

    box-shadow:
        0 24px 48px rgba(0,0,0,.18);

}


/* ==========================================================
   Hero Badge
========================================================== */

.ct-hero__badge{

    display:inline-block;

    margin-bottom:1.2rem;

    font-size:.95rem;

    font-weight:700;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:var(--ct-color-accent);

}


/* ==========================================================
   Hero Title
========================================================== */

.ct-hero__title{

    margin:0;

    font-family:var(--ct-font-heading);

    font-size:3.4rem;

    font-weight:700;

    line-height:1.05;

    color:var(--ct-color-heading);

}


/* ==========================================================
   Hero Subtitle
========================================================== */

.ct-hero__subtitle{

    margin:2rem 0 1.2rem;

    font-size:1.45rem;

    line-height:1.45;

    color:var(--ct-color-text);

}


/* ==========================================================
   Hero Description
========================================================== */

.ct-hero__description{

    max-width:38ch;

    margin:0;

    font-size:1.10rem;

    line-height:1.8;

    color:var(--ct-color-text-light);

}


/* ==========================================================
   Hero Actions
========================================================== */

.ct-hero__actions {

    display: flex;

    gap: var(--ct-space-md);

    margin-top: var(--ct-space-lg);

    flex-wrap: wrap;

}

/* ==========================================================
   Hero Image – Diagonal Soft Edge
   UI-001 Hero
========================================================== */

.ct-hero__image {
    -webkit-mask-image: linear-gradient(
        135deg,
        #000 0%,
        #000 60%,
        rgba(0, 0, 0, 0.95) 70%,
        rgba(0, 0, 0, 0.65) 80%,
        rgba(0, 0, 0, 0.20) 92%,
        transparent 100%
    );

    mask-image: linear-gradient(
        135deg,
        #000 0%,
        #000 60%,
        rgba(0, 0, 0, 0.95) 70%,
        rgba(0, 0, 0, 0.65) 80%,
        rgba(0, 0, 0, 0.20) 92%,
        transparent 100%
    );
}