/* ===================================
   HERO TITLE STANDARDIZATION
   Unified styling for all page hero titles
   =================================== */

/* Ensure glitch wrapper can expand for wrapped text */
.glitch-wrapper {
    display: block;
    width: 100%;
    text-align: center;
}

/* Override and standardize the glitch/hero name typography */
.about-hero-name.glitch {
    /* Base size with fluid scaling */
    font-size: clamp(2.2rem, 7vw, 5.5rem);
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1.15;
    color: var(--text-primary);
    text-shadow: 0 0 80px rgba(var(--text-primary-rgb), 0.1), 0 0 40px rgba(var(--text-primary-rgb), 0.05);

    /* Allow text to wrap naturally on small screens */
    display: block;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
    hyphens: manual;
    max-width: 100%;
    width: 100%;
    text-align: center;

    /* Animation */
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    animation: heroNameReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.5s,
        heroBreathingGlow 4s ease-in-out infinite 1.8s;
}

/* Horizontal line removed per user request */

/* Ensure hero content containers can expand for wrapped text */
.about-hero-content,
.pro-hero-content,
.home-hero-content {
    min-height: fit-content !important;
    height: auto !important;
}

/* Standardized label and role styling */
.about-hero-label {
    font-family: var(--font-display);
    font-size: clamp(0.6rem, 1.5vw, 0.7rem);
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    opacity: 0;
    transform: translateY(20px);
    animation: aboutFadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.3s;
}

.about-hero-role {
    font-family: var(--font-body);
    font-size: clamp(0.6rem, 1.5vw, 0.8rem);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-top: 1.5rem;
    opacity: 0;
    transform: translateY(20px);
    animation: aboutFadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.8s;
}

/* ===================================
   RESPONSIVE BREAKPOINTS
   =================================== */

/* Large tablets & small laptops (1024px) */
@media (max-width: 1024px) {
    .about-hero-name.glitch {
        font-size: clamp(2rem, 6.5vw, 4.5rem);
        letter-spacing: 0.1em;
    }

}

/* Tablets (820px) */
@media (max-width: 820px) {
    .about-hero-name.glitch {
        font-size: clamp(1.8rem, 6vw, 3.5rem);
        letter-spacing: 0.08em;
        line-height: 1.2;
    }

    .about-hero-label {
        font-size: clamp(0.55rem, 1.3vw, 0.65rem);
        letter-spacing: 0.3em;
        margin-bottom: 1.2rem;
    }

    .about-hero-role {
        font-size: clamp(0.55rem, 1.3vw, 0.75rem);
        letter-spacing: 0.15em;
        margin-top: 1.2rem;
    }

}

/* Large phones (600px) */
@media (max-width: 600px) {
    .about-hero-name.glitch {
        font-size: clamp(1.5rem, 7vw, 2.5rem);
        letter-spacing: 0.06em;
        line-height: 1.25;
        /* Text wraps to 2 lines if needed */
        padding: 0.5rem 1rem;
    }

    .about-hero-label {
        font-size: 0.55rem;
        letter-spacing: 0.2em;
        margin-bottom: 1rem;
    }

    .about-hero-role {
        font-size: 0.55rem;
        letter-spacing: 0.12em;
        margin-top: 1rem;
    }

    /* Give more room for wrapped text */
    .about-hero-content,
    .pro-hero-content,
    .home-hero-content {
        padding: 2rem var(--spacing-md);
    }

}

/* Standard phones (430px) */
@media (max-width: 430px) {
    .about-hero-name.glitch {
        font-size: clamp(1.4rem, 8vw, 2.2rem);
        letter-spacing: 0.04em;
        line-height: 1.3;
        padding: 0.5rem 0.8rem;
    }

    .about-hero-label {
        font-size: 0.5rem;
        letter-spacing: 0.15em;
        margin-bottom: 0.8rem;
    }

    .about-hero-role {
        font-size: 0.5rem;
        letter-spacing: 0.1em;
        margin-top: 0.8rem;
    }

}

/* Small phones (375px) */
@media (max-width: 375px) {
    .about-hero-name.glitch {
        font-size: clamp(1.3rem, 9vw, 2rem);
        letter-spacing: 0.03em;
        line-height: 1.35;
        padding: 0.5rem 0.5rem;
    }

    .about-hero-label {
        font-size: 0.48rem;
        letter-spacing: 0.1em;
        margin-bottom: 0.7rem;
    }

    .about-hero-role {
        font-size: 0.48rem;
        letter-spacing: 0.08em;
        margin-top: 0.7rem;
    }

}

/* Extra small phones (344px) */
@media (max-width: 344px) {
    .about-hero-name.glitch {
        font-size: clamp(1.2rem, 10vw, 1.8rem);
        letter-spacing: 0.02em;
        line-height: 1.4;
        padding: 0.4rem 0.3rem;
    }

    .about-hero-label {
        font-size: 0.45rem;
        letter-spacing: 0.08em;
        margin-bottom: 0.6rem;
    }

    .about-hero-role {
        font-size: 0.45rem;
        letter-spacing: 0.06em;
        margin-top: 0.6rem;
    }

}

/* ===================================
   HOME PAGE SPECIFIC OVERRIDES
   Handle the profile image spacing
   =================================== */
.home-page .about-hero-name.glitch {
    /* Home page might need slightly smaller sizing */
    font-size: clamp(1.8rem, 6vw, 4.5rem);
}

@media (max-width: 600px) {
    .home-page .about-hero-name.glitch {
        font-size: clamp(1.4rem, 7vw, 2.3rem);
    }
}

@media (max-width: 430px) {
    .home-page .about-hero-name.glitch {
        font-size: clamp(1.3rem, 8vw, 2rem);
    }
}

/* ===================================
   PROFESSIONAL PAGE SPECIFIC
   Handle the gallery background
   =================================== */
.pro-page .about-hero-name.glitch {
    /* Ensure text is readable over gallery */
    text-shadow:
        0 0 80px rgba(var(--text-primary-rgb), 0.15),
        0 0 40px rgba(var(--text-primary-rgb), 0.1),
        0 2px 20px rgba(var(--bg-primary-rgb), 0.8);
}