/* website/static/website/css/home.css */

/* 3. HOME PAGE – GLOBAL WRAPPER */


html, body {
    overflow-x: hidden;
    max-width: 100%;
}

.home-page {
    max-width: 1440px;
    margin: 0 auto;
    background-color: #ffffff;
    font-family: "Outfit", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* 4. HOME PAGE – HERO SECTION */
.home-hero {
    position: relative;
    height: 856px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    background-image: url("../images/Homepage.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}

.home-hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Text block over hero image */
.home-hero-text {
    position: absolute;
    margin-left: 60px;
    top: 271px;      /* 160px from top of hero */
    max-width: 1000px;
    z-index: 2;      /* above image & lines */
    display: flex;
    flex-direction: column;
}

/* Small title */
.home-hero-small {
    margin: 0;
    font-family: "Outfit", sans-serif;
    font-size: 14px;
    font-weight: 900;        /* Black */
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
}

/* Large title */
.home-hero-large {
    margin: 12px 0 0;
    font-family: "Playfair Display", serif;
    font-size: 72px;
    font-weight: 900;        /* Black */
    line-height: 1.1;
    color: #ffffff;
}

/* Content text */
.home-hero-content {
    margin: 16px 0 0;
    font-family: "Outfit", sans-serif;
    font-size: 17px;
    font-weight: 200;        /* ExtraLight */
    line-height: 1.6;
    color: #f0f0f0;
    margin-right: 160px;
}

/* ------------------------------------------
   HERO CTA BUTTON (exact 160,567 position)
------------------------------------------- */

.home-hero-cta {
    position: relative;
    top: 0;             
    left: 0;
    margin-top: 24px; 

    width: 160px;
    height: 41px;

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

    background: #6090B5;    /* your blue color */
    color: #ffffff;
    text-decoration: none;

    font-family: "Outfit", sans-serif;
    font-size: 16px;
    font-weight: 700;       /* Bold */

    border-radius: 999px;   /* pill shape */

    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    transition: transform 0.15s ease,
                box-shadow 0.15s ease;
}

.home-hero-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.22);
}


/* 5. HOME PAGE – WHITE FEATURE BAND */

.home-feature-band {
    position: relative;
    overflow: visible;     /* so it can extend down */
}

.home-feature-inner {
    overflow-x: hidden;    /* Critical */
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr)
                           minmax(0, 1.2fr)
                           minmax(0, 1.1fr);
    gap: 32px;
    align-items: center;
}

.home-feature-media {
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}

.home-feature-media--left {
    position: absolute;
    transform-origin: top left; 
    top: 58px;
    left: 0px;
    border-radius: 0;
    box-shadow: none;
}

/* pic1: scale with screen */
.home-feature-media--left img {
    width: 320px;
    height: auto;
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
}


.home-feature-media--right {
    position: absolute;
    border-top-left-radius: 24px;
    width: 704px;
    height: 308px;
    top: 407px;
    right: 0;
    transform: translateX(0%); 
    box-shadow: none;
    z-index: 1;
}

.home-feature-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.feature-kicker {
    margin: 0;
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #999999;
}

.feature-title {
    margin: 0;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 600;
    color: #111111;
}

.feature-text {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: #444444;
}

.feature-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    padding: 10px 28px;
    border-radius: 999px;
    background: #111111;
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: transform 0.15s ease,
                box-shadow 0.15s ease,
                background 0.15s ease;
}

.feature-cta:hover {
    background: #000000;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
    transform: translateY(-1px);
}

/* ------------------------------------------
   HOME TEXT BLOCK (Figma-aligned spacing)
------------------------------------------- */

/* make white panel behave like hero: centered 1440 frame */
.home-feature-band {
    position: relative;
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    height: 715px
}

.white-panel-logo {
    position: absolute;
    top: 55px;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 80px;
    z-index: 5;
}

.site-footer {
    position: relative;
    margin-top: 0px;
    z-index: 2;
}

/* text block: fixed from left of panel, shrinks with screen */
.white-panel-text {
    position: absolute;
    top: 190px;
    left: 416px;
    max-width: 1000px;
    /* width: calc(100% - 416px); */
}

.home-feature-media--right {
    position: absolute;
    top: 407px;
    left: 736px;
}

.panel-big-title {
    margin: 0;
    font-family: "Playfair Display", serif;
    font-size: 72px;
    font-weight: 900;
    color: #000000;
}

.panel-content {
    margin: 18px 0 0;
    font-family: "Outfit", sans-serif;
    font-size: 16px;
    font-weight: 200;
    width: 600px;
    color: #111;
}

.panel-cta {
    position: absolute;
    margin: 78px 0 0;
    left: 0;
    width: 160px;
    height: 41px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #6090B5;
    color: #fff;
    border-radius: 999px;
    text-decoration: none;
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 16px;
}


@media (max-width: 1345px) {
    .home-feature-media--right {
        transform: scale(0.95);
        top: 507px;
        left: 636px;
    }
}

/* When screen gets smaller, push it down */
@media (max-width: 1164px) {
    .white-panel-text {
        top: 240px;
        left: 300px;
    }
    .home-feature-media--left {
        transform: scale(0.90);
    }
    .home-feature-media--right {
        transform: scale(0.90);
        top: 557px;
        left: 536px;
    }
    .home-feature-band {
        height: 765px
    }
}

@media (max-width: 1040px) {
    .home-feature-media--left {
        transform: scale(0.65);
    }
    .home-feature-media--right {
        transform: scale(0.90);
        top: 625px;
        left: 350px;
    }
    .white-panel-text {
        margin-top: 40px;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
    }
    .panel-big-title {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    .panel-content {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    .panel-cta{
        display: none;
    }
    .home-feature-band {
        height: 905px
    }
}

@media (max-width: 910px){
    .home-feature-media--right {
        transform: scale(0.90);
        top: 625px;
        left: 245px;
    }
    .home-hero-content {
        margin-right: 5px;
    }
    .home-hero-text{
        top: 195px;
        margin-left: 30px;
        justify-content: center;
    }
    .home-hero-large {
        font-size: 60px;
    }
    .white-panel-text {
        margin-top: 40px;
    }
}

@media (max-width: 768px) {
    .home-feature-media--left {
        transform: scale(0.55);
    }
    .white-panel-text {
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
    }
    .panel-content,
    .panel-big-title{
        max-width: 550px;
    }
    .home-feature-media--right {
        transform: scale(0.82);
        left: 115px;
        top: 625px;
    }
}

@media (max-width: 576px) {
    .home-hero-large {
        font-size: 13px;
    }
    .home-hero-large {
        font-size: 56px;
    }
    .panel-content{
        max-width: 400px;
    }
    .panel-big-title{
        max-width: 400px;
        font-size: 48px;
    }
    .home-feature-band {
        height: 755px
    }
    .home-feature-media--right {
        transform: scale(0.60);
        left: 20px;
        top: 525px;
    }
}

@media (max-width: 480px) { /* small phones */ 
    .home-hero-large {
        font-size: 45px;
    }
    .home-feature-band {
        height: 755px
    }
    .white-panel-text {
        margin-top: -20px;
    }
    .panel-content, .panel-big-title{
        max-width: 340px;
    }
    .home-feature-media--left {
        transform: scale(0.40);
    }
    .home-feature-media--right {
        transform: scale(0.50);
        left: -20px;
        top: 525px;
    }
}

@media (max-width: 375px) { /* iPhone sizes */ 
    .white-panel-text {
        margin-top: -40px;
    }
    .panel-content, .panel-big-title{
        max-width: 288px;
    }
    .home-feature-media--left {
        transform: scale(0.32);
    }
    .home-feature-media--right {
        left: -40px;
    }
}


@media (max-width: 1200px) {
    .home-feature-band {
        padding-inline: 24px;
    }
    .home-feature-inner {
        /* max-width: 100%; */
        gap: 24px;
    }
    .home-footer-inner,
    .home-footer-bottom {
        max-width: 100%;
    }
}

@media (max-width: 992px) {
    .home-feature-inner {
        grid-template-columns: 1fr;
    }
    .home-footer-inner {
        flex-direction: column;
        gap: 32px;
    }
    
    .home-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}


html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden !important;
    position: relative;
}

.overflow-fix {
    width: 100%;
    position: relative;
    overflow-x: hidden !important;
}