/* -- index Styles -- */

.hero {
    box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px;
    height: 85vh;
    /* Use Flexbox to align items */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Aligns content to the top */

    /* Adjusted padding: removed 320px sides to let title wrap naturally */
    padding: 80px 10%;

    background-color: #000000;
    color: white;
    /* Initial state: Only Gradient */
    background-image: linear-gradient(rgba(0, 0, 0, 0.299) 0%, rgba(255, 255, 255, 0) 40%);
    background-size: cover;
    transition: background-image 0.5s ease-in-out;
    /* Optional: smooth fade-in if browser supports it for gradients/images */
}

/* Loaded state: Gradient + Image */
.hero.bg-loaded {
    background-image: linear-gradient(rgba(0, 0, 0, 0.299) 0%, rgba(255, 255, 255, 0) 40%), url('Resources/interlacedtiry.png');
}

.hero-title {

    /* Removed position: absolute so it stays in the flow */
    position: relative;
    z-index: 10;

    /* Existing Styles */
    color: #006ba0;
    background: -webkit-linear-gradient(#ffffff, #006aa0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    mix-blend-mode: screen;

    /* Typography */
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 600;
    font-style: italic;
    /* Responsive font size */
    margin: 0 0 20px 0;
    /* 20px bottom margin pushes the container down */
    line-height: 1.3;
    /* Tightens line height for multi-line titles */
    width: 100%;
    /* Allows it to take up full width and wrap */
}

.hero-container {
    text-shadow: rgba(0, 0, 0, 0.3) 0px 2px 0px;
    position: relative;
    padding: 0 3%;
    z-index: 5;
    /* No need for top: 10% anymore; the title's margin handles the gap */
}

.hero-container p {
    font-size: 1.5rem;
    margin-bottom: 30px;
}

@media (max-width: 768px) {
    .hero {
        padding: 60px 5%;
        height: 70vh;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-container p {
        font-size: 1.2rem;
    }
}