/* assets/css/home.css - Home page: split hero with photo, shimmer name, typing subhead
   Loaded after style.css and overrides its compact page hero. */

:root { --hero-text-bg: rgba(255, 255, 255, 0.3); }
body.dark-mode { --hero-text-bg: rgba(0, 0, 0, 0.4); }

/* ----- HERO ----- */
.hero {
    display: flex; align-items: stretch; border-radius: 3.2rem;
    background: var(--card-bg); backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); border: 1px solid var(--border-color);
    box-shadow: 0 12px 30px -12px var(--shadow-color); transition: 0.2s;
    flex: 1; min-height: 420px; overflow: hidden; gap: 0; padding: 0; position: relative;
    flex-wrap: nowrap; justify-content: flex-start; margin: 0;
}
.hero:hover {
    background: var(--card-bg-hover);
    box-shadow: 0 20px 40px -16px var(--shadow-color);
}

.hero-text {
    flex: 0 0 45%; padding: 2.5rem 2.5rem 2.5rem 3rem;
    display: flex; flex-direction: column; justify-content: center;
    position: relative; z-index: 2; background: var(--hero-text-bg);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.hero-text .greeting {
    font-size: 1rem; font-weight: 600; color: #1f6390;
    letter-spacing: 0.3px; margin-bottom: 0.2rem;
}

/* ANIMATION: Color Shimmer passing through H1 */
.hero-text h1 {
    font-size: 3.8rem; font-weight: 800; line-height: 1.05;
    margin: 0.2rem 0 0.4rem;
    color: #0b2a44;
    position: relative;
    display: inline-block;
    background: linear-gradient(90deg, #0b2a44 0%, #1e5b85 25%, #4a90c9 50%, #1e5b85 75%, #0b2a44 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmerPass 5s ease-in-out infinite;
}

@keyframes shimmerPass {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Subhead Typing Area
   The hidden full-text copy (.typing-ghost) and the typed text (.typing-live) sit in
   the same grid cell. The copy stays on one line, so the text column takes its final
   (typed) width from the first frame and the photo keeps that narrower width while
   typing, instead of shrinking letter by letter. */
.hero-text .subhead {
    font-size: 1.2rem; font-weight: 600; color: var(--text-secondary);
    margin-bottom: 0.3rem; white-space: nowrap;
    min-height: 1.8rem;
    display: grid;
}
.hero-text .subhead > span { grid-area: 1 / 1; }
.hero-text .typing-ghost { visibility: hidden; }

/* The blinking cursor follows the last typed letter
   (the hidden copy gets the same invisible cursor so both have the same width) */
.hero-text .typing-ghost::after,
.hero-text .typing-live::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 1.1em;
    margin-left: 2px;
    vertical-align: -0.15em;
    border-right: 2px solid var(--text-secondary);
    animation: blinkCursor 0.8s step-end infinite;
}

@keyframes blinkCursor {
    50% { border-color: transparent; }
}

.hero-text .desc {
    color: var(--text-secondary); max-width: 500px; font-weight: 400;
    line-height: 1.6; font-size: 1rem;
}
.hero-text .hero-badge {
    margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem 0.8rem;
}
.hero-text .hero-badge span {
    background: var(--badge-bg); padding: 0.25rem 1rem; border-radius: 40px;
    font-weight: 500; font-size: 0.8rem; border: 1px solid var(--badge-border);
    display: inline-flex; align-items: center; gap: 0.4rem; color: var(--text-main);
}
.hero-text .hero-badge span i { color: #1f6390; font-size: 0.75rem; }

/* ----- IMAGE SIDE - FIXED WIDTH ----- */
/* Takes the space left by the text column: narrower when the subhead line is long */
.hero-image {
    flex: 1 1 55%;
    position: relative;
    min-height: 100%;
    overflow: hidden;
    border-radius: 0 3.2rem 3.2rem 0;
    background-color: #D7D8DD;
    width: 55%;
    min-width: 0;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;   /* a double tap is not taken as zoom */
}
.hero-image img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.4s ease;
}
.hero:hover .hero-image img { transform: scale(1.02); }
.hero-image::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.10) 0%, transparent 25%);
    pointer-events: none;
}

.footer { margin-top: 1.8rem; }

/* ----- RESPONSIVE ----- */
@media (max-width: 900px) {
    .hero-text h1 { font-size: 3rem; }
    .hero-text .subhead { font-size: 1rem; white-space: normal; }
    .hero-text { padding: 2rem 1.8rem; }
}
@media (max-width: 768px) {
    /* Stacked: text, then a tall photo. Neither stretches, so no empty gap appears. */
    .hero { flex-direction: column; min-height: auto; border-radius: 2.4rem; flex: none; }
    .hero-text {
        flex: none; padding: 2rem 1.8rem;
        text-align: left;
        background: var(--card-bg); order: 1;
        border-radius: 2.4rem 2.4rem 0 0;
        align-items: flex-start;
    }
    .hero-text .subhead { white-space: normal; font-size: 1.1rem; }
    .hero-text .desc { max-width: 100%; }
    .hero-text .hero-badge { justify-content: flex-start; }

    /* Tall portrait photo: grows with the screen width, framed from the top (face) */
    .hero-image {
        flex: none;
        width: 100%;
        height: clamp(420px, 100vw, 640px);
        min-height: 0;
        border-radius: 0 0 2.4rem 2.4rem;
        order: 2;
    }
    .hero-image img { object-position: center top; }
    .hero-image::after { background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.05) 100%); }
    .hero-text h1 { font-size: 2.6rem; }

    /* Footer Left-Aligned for Small Screens */
    .footer {
        justify-content: flex-start;
        gap: 0.5rem 1.5rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}
@media (max-width: 680px) {
    .navbar { padding: 0.5rem 0.8rem 0.8rem 0.8rem; }
    .hero-text { padding: 1.5rem 1.2rem; }
    .hero-text h1 { font-size: 2.2rem; }
    .hero-text .subhead { font-size: 0.95rem; white-space: normal; }
    .hero-text .desc { font-size: 0.9rem; }
    .hero-text .hero-badge span { font-size: 0.7rem; padding: 0.15rem 0.8rem; }

    /* Phones: still a long portrait photo (about 1.2 x the screen width) */
    .hero-image { height: clamp(380px, 120vw, 520px); }

    .modal-content h2 { font-size: 1.25rem; }
    .modal-content p { font-size: 0.8rem; margin-bottom: 1.2rem; }
    .phone-option .info { gap: 0.5rem; }
    .phone-option .info i { font-size: 1rem; width: 20px; }
    .phone-actions { gap: 12px; }
    .phone-actions button, .phone-actions a { width: 40px; height: 40px; }
}

/* ----- DARK MODE ----- */
/* Lighter shimmer so the name stays readable on the dark hero */
body.dark-mode .hero-text h1 {
    background: linear-gradient(90deg, #7aa9d0 0%, #e4edf5 25%, #4a90c9 50%, #e4edf5 75%, #7aa9d0 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
}