/**
 * Saint Page Fallback Styles - SAFE FALLBACK VERSION
 * 
 * This file provides SAFE fallback styles when the main components fail to load
 * NO @import statements to prevent render blocking
 * Contains only essential styles to prevent page crashes
 * 
 * CRITICAL FIXES INTEGRATED:
 * - Visual hierarchy improvements
 * - Typography enhancements
 * - Mobile optimizations
 * - Readability improvements
 */

/* CRITICAL: Improve readability immediately with light theme */
.saint-page {
    background: #ffffff;
    color: #2d3748;
    line-height: 1.7;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Typography hierarchy fixes */
.saint-page h2 {
    font-size: 2rem;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 1rem;
    margin-top: 2rem;
}

.saint-page h3 {
    font-size: 1.5rem;
    font-weight: 500;
    color: #2d3748;
    margin-bottom: 0.75rem;
}

.saint-page p {
    margin-bottom: 1rem;
    max-width: 65ch; /* Optimal reading width */
    line-height: 1.7;
}

/* Add proper spacing and visual breaks */
.saint-page .saint-section {
    padding: 4rem 0;
    border-bottom: 1px solid #e2e8f0;
}

.saint-page .saint-section:last-child {
    border-bottom: none;
}

/* SAFE HERO SECTION - Correct dimensions */
.hero-section {
    position: relative;
    min-height: 100vh; /* FIXED: Back to full height */
    background-color: #2A3F3F;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    margin-bottom: 2rem;
}

.hero-portrait {
    max-width: 100%;
    width: 600px; /* UPDATED: Increased from 320px to match hero component */
    height: 800px; /* UPDATED: Added explicit height to match hero component */
    aspect-ratio: 3/4;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.saint-portrait {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.saint-name {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 700;
    text-align: center;
    margin: 1rem 0;
    line-height: 1.2;
}

.saint-tagline {
    font-size: 1.1rem;
    text-align: center;
    margin-bottom: 1.5rem;
    opacity: 0.9;
}

/* SAFE TIMELINE SECTION */
#timeline {
    background-color: #FFFFF0;
    padding: 3rem 0;
    position: relative;
}

#timeline .section-header h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    color: #333F48;
    text-align: center;
    margin-bottom: 2rem;
}

.timeline-events {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 1rem;
}

.timeline-event {
    margin-bottom: 2rem;
    padding: 1rem;
    background: rgba(42, 63, 63, 0.05);
    border-radius: 8px;
    border-left: 4px solid #C9A053;
}

.timeline-content {
    background: rgba(42, 63, 63, 0.95);
    color: white;
    padding: 1.5rem;
    border-radius: 8px;
    margin: 1rem 0;
}

/* SAFE BUTTON STYLES */
.btn-primary, .favorite-page {
    background: #C9A053;
    color: #1F2E2E;
    border: 2px solid #C9A053;
    padding: 12px 20px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
    min-height: 44px;
    min-width: 44px;
}

.btn-primary:hover, .favorite-page:hover {
    background: #A88743;
    transform: translateY(-1px);
}

.favorite-page.is-favorite {
    background: #dc2626;
    border-color: #dc2626;
    color: white;
}

/* SAFE MOBILE STYLES */
@media (max-width: 768px) {
    .hero-section {
        min-height: 50vh;
        padding: 1rem;
    }
    
    .hero-portrait {
        width: 400px; /* UPDATED: Increased from 280px to match hero component mobile size */
        height: 540px; /* UPDATED: Added explicit height for mobile */
        margin: 0 auto 1rem;
    }
    
    .saint-name {
        font-size: clamp(1.5rem, 6vw, 2.5rem);
    }
    
    .timeline-events {
        padding: 0.5rem;
    }
    
    .timeline-event {
        margin-bottom: 1rem;
        padding: 0.75rem;
    }
    
    .timeline-content {
        padding: 1rem;
    }
    
    /* MOBILE TOUCH IMPROVEMENTS */
    .btn-primary, .favorite-page {
        min-height: 48px;
        padding: 14px 24px;
        font-size: 1rem;
        margin: 0.25rem;
    }
    
    /* Better spacing for mobile */
    .hero-actions {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        align-items: center;
    }
}

/* HIDE PROBLEMATIC ELEMENTS - Safety measure */
.view-in-planner, 
.view-in-planner-full, 
.journey-planner-link, 
.view-journey-btn {
    display: none !important;
}

/* ENSURE TEXT IS READABLE */
.saint-page * {
    max-width: 100%;
    word-wrap: break-word;
}

/* PREVENT LAYOUT BREAKS */
.saint-page img {
    max-width: 100%;
    height: auto;
}

.saint-page video {
    max-width: 100%;
    height: auto;
}