/* Sopify_Refactored/css/components/hero.css */

.hero {
    background: var(--gradient-body-bg); /* Match body or specific hero gradient */
    /* Original top padding was 160px.
       Body already has padding-top: var(--header-height-approx) (e.g., 70px).
       So, the hero's top padding should be what's needed *additionally*.
       If we want the hero content to start ~90px below the header,
       and header is 70px, then hero needs ~20px more top padding.
       Let's aim for the content starting roughly 80-100px from the top of the viewport.
       If header is 70px, and we want total space of 100px before hero text,
       then hero section needs 100px - 70px (body padding) = 30px top padding.
       Adjust this value as needed for desired spacing.
    */
    padding: 30px 0 80px; /* REDUCED top padding significantly. Bottom padding remains. */
    min-height: calc(100vh - var(--header-height-approx)); /* Make hero at least viewport height minus header */
    display: flex;
    align-items: center;
    /* overflow: hidden; /* Optional: if any elements might slightly overflow */
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    width: 100%; /* Ensure content takes full width of container */
}

.hero-text h1 {
    font-size: var(--font-size-hero-h1); /* Using specific hero H1 size */
    margin-bottom: 1rem;
    color: var(--text-dark-contrast); /* Changed from --text-color-dark for more contrast */
    line-height: var(--line-height-hero-h1);
}

.hero-text .highlight { /* .highlight is defined in base.css */
    color: var(--color-primary); /* Blue highlight for "Sopify" */
    position: relative;
}

.hero-text .highlight::after { /* Specific red underline for hero highlight */
    content: '';
    position: absolute;
    bottom: -8px; /* Adjusted position for thicker text */
    left: 0;
    width: 100%;
    height: 4px; /* Thicker underline */
    background: var(--color-accent); /* Red underline */
    border-radius: 2px;
}

.hero-text p {
    font-size: var(--font-size-lg);
    margin-bottom: 2rem;
    color: var(--text-color-medium);
    max-width: 500px; /* Constrain width of paragraph for readability */
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 2.5rem; /* Added margin-top for more space */
}

/* .btn-primary and .btn-secondary styles are in buttons.css */

.hero-image {
    position: relative;
    border-radius: var(--border-radius-xl);
    overflow: hidden; /* Keep overflow hidden for rounded corners on image */
    min-height: 450px; /* Keep a minimum height */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15); /* Slightly enhanced shadow */
    display: flex; /* To center the image if it doesn't fill the container */
    align-items: center;
    justify-content: center;
}

.hero-img {
    width: 100%;
    height: 100%; /* Make image fill the container height if possible */
    max-height: 500px; /* Cap max height of image visual */
    object-fit: cover;
    border-radius: var(--border-radius-xl); /* Match parent for consistency */
    /* display: block; /* Already handled by flex on parent */
}

.stats {
    position: absolute;
    background: rgba(255, 255, 255, 0.92); /* Slightly more opaque */
    backdrop-filter: blur(15px); /* Slightly less blur for clarity */
    -webkit-backdrop-filter: blur(15px);
    padding: 1rem 1.2rem; /* Adjusted padding */
    border-radius: var(--border-radius-medium); /* Consistent medium radius */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    min-width: 160px; /* Ensure stats cards have some minimum width */
    text-align: center;
}

.stats.success-rate {
    top: 30px;
    right: -20px; /* Slight overlap effect */
}

.stats.universities {
    bottom: 90px; /* Adjusted positioning */
    left: -25px;  /* Slight overlap effect */
}

.stats.students {
    bottom: 30px;
    right: 20px; /* Adjusted positioning */
}

.stats h3 {
    color: var(--color-secondary); /* Original purple/blue */
    font-size: var(--font-size-stats-value);
    font-weight: 700; /* Bolder */
    margin-bottom: 0.2rem;
}

.stats p {
    font-size: var(--font-size-stats-label);
    color: var(--text-color-medium); /* Softer text for label */
    margin: 0;
    line-height: 1.3;
}
.stats p small {
    font-size: 0.8em; /* Make the sub-text even smaller */
    opacity: 0.8;
}

/* Responsive Hero */
@media (max-width: 992px) { /* Adjust for when grid might break */
    .hero-content {
        gap: 2rem;
    }
    .hero-text p {
        max-width: 100%; /* Allow paragraph to take full width of its column */
    }
    .hero-image {
        min-height: 400px;
    }
    .hero-img {
        max-height: 400px;
    }
    .stats.success-rate { right: 15px; }
    .stats.universities { left: 15px; }
}


@media (max-width: 768px) {
    .hero {
        padding: 40px 0 60px; /* Adjusted top padding for mobile */
        min-height: auto; /* Allow natural height */
        text-align: center; /* Center text content in hero */
    }
    .hero-content {
        grid-template-columns: 1fr;
        text-align: center; /* Ensure text within grid items is centered */
        gap: 2.5rem; /* Increased gap when stacked */
    }
    .hero-text h1 {
        font-size: 2.2rem; 
    }
    .hero-text .highlight::after {
        bottom: -6px;
        height: 3px;
    }
    .hero-text p {
        margin-left: auto; /* Center paragraph block */
        margin-right: auto;
    }
    .hero-buttons {
        justify-content: center;
        margin-top: 2rem;
    }
    .hero-image {
        min-height: 300px; /* Reduced min-height for mobile */
        margin-top: 1rem; /* Reduced top margin */
        max-width: 450px; /* Constrain image width on mobile */
        margin-left: auto;
        margin-right: auto;
    }
    .hero-img {
       max-height: 350px;
    }
    /* Adjust stats for mobile, could stack them or reposition */
    .stats {
        padding: 0.8rem 1rem;
        min-width: 140px;
    }
    .stats h3 { font-size: 1.3rem; }
    .stats.success-rate { top: -15px; right: -15px; }
    .stats.universities { top: auto; bottom: -5px; left: -10px; } /* Reposition */
    .stats.students { top: auto; bottom: 15px; right: -15px; } /* MODIFIED: Reposition to bottom right */
}