/* Page: Index (Home) - Split Editorial Redesign */

/* Reset for this specific page layout */
body {
    overflow-x: hidden;
}

/* Split Layout Container */
.hero-split {
    display: flex;
    flex-direction: column; /* Mobile First */
    min-height: calc(100vh - var(--header-height)); /* Visual height minus header */
    width: 100vw;
    background-color: transparent; /* Allow body gradient to show */
    position: relative;
    overflow: hidden; /* Contain the blur shapes */
}

/* Background Shapes */
.hero-bg-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.shape-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(140px); /* 120-160px requested */
    background: var(--color-shape-blob);
    opacity: 1; /* Color is already rgba with 0.6 opacity, effectively 60% */
}

.shape-1 {
    width: 400px;
    height: 400px;
    top: 15%;
    left: -10%;
    z-index: 1;
}

.shape-2 {
    width: 300px;
    height: 300px;
    bottom: 20%;
    left: 10%;
    z-index: 1;
}

/* Moved Desktop Media Query to Bottom for Cascade */
/* (See bottom of file) */

/* --- Left Column: Typography & Content --- */
.hero-text-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4rem 2rem; /* Base vertical padding, normal horizontal */
    background-color: transparent;
    z-index: 2;
    position: relative;
    order: 2; /* Image first on mobile? Or text first? Let's stick to text then image. Order 2 means second. */
    /* Usually on mobile, Image top looks bad if text is long. Let's do Text First (default HTML order) which is Image second because of column-reverse? or just row-reverse? 
       Wait, HTML order is Text Div then Visual Div.
       Flex direction is column.
       So Text is top, Visual is bottom.
       User complained layout is "not suitable". Maybe the image is too small or too big?
       
       Let's stick to Text Top.
       reset padding to standard.
    */
    order: 2; /* Mobile: Text comes second (below image) */
}

.hero-wrapper {
    max-width: 500px;
    margin: 0 auto; /* Center in the column */
    width: 100%;
}

.eyebrow {
    font-family: var(--font-primary);
    font-size: 0.75rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--color-text-light);
    display: block;
    margin-bottom: 2rem;
    opacity: 0;
    animation: fadeIn 0.8s ease-out forwards;
}

.hero-text-col h1 {
    font-family: 'Playfair Display', serif;
    font-size: 4rem; /* Big but contained */
    line-height: 1.1;
    color: #1a1a1a; /* Solid Charcoal */
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
    opacity: 0;
    animation: slideUp 0.8s ease-out 0.2s forwards;
}

/* Elegant Italic integration */
.hero-text-col h1 i {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-style: italic;
    color: var(--color-accent); /* Gold/Bronze accent */
}

.hero-desc {
    font-family: var(--font-primary);
    color: #555;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 3rem;
    font-weight: 300;
    opacity: 0;
    animation: slideUp 0.8s ease-out 0.4s forwards;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    margin-bottom: 4rem;
    opacity: 0;
    animation: slideUp 0.8s ease-out 0.5s forwards;
}

.btn {
    padding: 1rem 2.5rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: var(--color-accent);
    color: #fff;
    border: 1px solid var(--color-accent);
}
.btn-primary:hover {
    background-color: var(--color-accent-dark);
    color: #fff;
    border-color: var(--color-accent-dark);
}

.btn-outline {
    background-color: transparent;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
}
.btn-outline:hover {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.hero-stats {
    display: flex;
    gap: 3rem;
    border-top: 1px solid #eee;
    padding-top: 2rem;
    opacity: 0;
    animation: fadeIn 1s ease-out 0.8s forwards;
}
.hero-stats div {
    display: flex;
    flex-direction: column;
}
.hero-stats strong {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    color: #1a1a1a;
}
.hero-stats span {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #999;
}


/* --- Right Column: Visual --- */
.hero-visual-col {
    flex: 1.2; 
    position: relative;
    overflow: hidden;
    height: 38vh; /* Reduced Mobile height */
    min-height: 250px; /* Ensure not too small */
}

@media (min-width: 992px) {
    .hero-visual-col {
        height: 100%;
        min-height: 100%;
        width: 50%; /* Ensure it takes width if flex fails */
        flex: 1.2;
    }
}

.img-wrapper {
    width: 100%;
    height: 100%;
}

.img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.1);
    animation: scaleDown 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Animations */
@keyframes fadeIn {
    to { opacity: 1; }
}

@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes scaleDown {
    to { transform: scale(1); }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .hero-text-col { 
        padding: 2rem 1.5rem 4rem 1.5rem; /* Mobile: Standard padding, close to image above */
        order: 2; /* Explicitly ensure text is below image on mobile */
        text-align: center; /* Center align usually looks best below image, or keep left? User said "close to image above". Indexing usually fine. Let's go Left but normal padding. */
        text-align: left; 
    }
    .hero-split {
        flex-direction: column;
    }
    /* Ensure visual col is first on mobile */
    .hero-visual-col {
        order: 1;
        height: 45vh; /* Give it good presence */
    }
    .hero-text-col h1 { font-size: 3rem; }
    .hero-actions { justify-content: center; }
    .hero-stats { justify-content: center; }
    .btn { padding: 0.8rem 2rem; }
}

/* Sections Spacer */
.featured {
    padding-top: 5rem;
}

/* --- Desktop Layout Overrides (Moved to Bottom) --- */
@media (min-width: 992px) {
    .hero-split {
        flex-direction: row;
        height: calc(100vh - 90px); /* Explicit fallback height */
        min-height: 600px; /* Prevent collapse on short screens */
    }
    
    .hero-text-col {
        padding: 4rem 8rem 4rem 4rem; /* Increased gap to 8rem (moved left more) */
        order: 1;
        justify-content: center;
        align-items: flex-end; /* Push content to the right edge */
    }
    
    .hero-wrapper {
        margin-left: auto !important; /* Force Push to right */
        margin-right: 0 !important;
        text-align: left; 
    }
    
    .hero-visual-col {
        order: 2;
        height: 100%;
        min-height: 100%;
        width: 50%; /* Ensure it takes width if flex fails */
        flex: 1.2;
    }
}