/* Responsive Title Styling for PIONEERS Demo Pages */

/* Main title responsive styling */
.demo-title {
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    hyphens: auto;
    word-break: break-word;
    max-width: 100%;
}

/* Mobile responsiveness */
@media (max-width: 640px) {
    .demo-title {
        font-size: clamp(1.75rem, 6vw, 2.5rem);
        line-height: 1.15;
        padding: 0 1rem;
    }
}

/* Tablet responsiveness */
@media (min-width: 641px) and (max-width: 1024px) {
    .demo-title {
        font-size: clamp(2.25rem, 5vw, 3rem);
        line-height: 1.1;
    }
}

/* Desktop fine-tuning */
@media (min-width: 1025px) {
    .demo-title {
        font-size: clamp(2.5rem, 4vw, 3.5rem);
        max-width: 90%;
        margin: 0 auto;
    }
}

/* Extra long titles (over 50 characters) */
.demo-title.extra-long {
    font-size: clamp(1.5rem, 3.5vw, 2.75rem);
    line-height: 1.2;
}

/* Very long titles (over 70 characters) */
.demo-title.very-long {
    font-size: clamp(1.25rem, 3vw, 2.25rem);
    line-height: 1.25;
    word-spacing: -0.1em;
}

/* Hero section container adjustments */
.hero-title-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    padding: 2rem 1rem;
}

@media (max-width: 640px) {
    .hero-title-container {
        min-height: 180px;
        padding: 1.5rem 0.75rem;
    }
}

/* Page title in header adjustments */
.page-title {
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    line-height: 1.3;
    overflow-wrap: break-word;
    hyphens: auto;
}

@media (max-width: 640px) {
    .page-title {
        display: none; /* Hide in mobile header if too long */
    }
}

/* Navigation title handling */
.nav-title-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

@media (max-width: 640px) {
    .nav-title-truncate {
        max-width: 150px;
    }
}

/* Card title responsiveness */
.card-title {
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.3;
    overflow-wrap: break-word;
    hyphens: auto;
}