/*
File: whySketchWaveJSStyles.css
Date: 2026-02-13
Author: klp
Workspace: SketchWaveTNT2026-02-12-Stg1
Purpose: Page-specific styles for whySketchWaveJS.html
         Provides visual styling for the origin story page including:
         - Hero section with background image
         - Story cards and content containers
         - Evolution timeline cards
         - Philosophy section styling
         - Responsive design adjustments

Color Palette:
- Primary Gold: #C18335
- Dark Gold: #a16d2a
- Light Gold: #e6c974
- Dark Brown: #704d1f
- Light Gray Background: #f8f9fa
*/

/* ========================================
   HERO SECTION
   Full-height hero with background image and gradient overlay
   ======================================== */

div#heroDiv {
    /* Background: Gradient overlay on top of ghost image */
    /* background: 
        linear-gradient(135deg, rgba(193, 131, 53, 0.85) 0%, rgba(161, 109, 42, 0.85) 100%),
        url("../images/ghostsOnly.png"); */
    background: url("../images/ghostsOnly.png");
    background-color: #666;
    background: radial-gradient(circle at center, rgba(193, 131, 53, 0) 0%, rgba(72, 45, 9, 0.85) 100%), url("../images/ghostsOnly.png");
    background-size: 20% auto; /* Smaller size for ghost image to create pattern effect */
    background-position: center;
    background-repeat: repeat-x;
    
    /* Make hero section take significant vertical space */
    min-height: 300px;
    padding: 4rem 0;
    
    /* Color scheme for text on dark background */
    color: white;
}

div#heroText h1 {
    color: #e6c974; /* Light gold for high contrast */
    text-shadow: #704d1f 3px 3px 6px; /* Deep shadow for readability */
    font-weight: 700;
}

div#heroText .lead {
    color: #ffffff;
    text-shadow: #704d1f 2px 2px 4px;
    font-size: 1.5rem;
}

/* ========================================
   PRIMARY CONTENT AREA
   ======================================== */

div#primaryContent {
    background-color: #ffffff;
}

/* ========================================
   STORY CARDS
   Styled containers for narrative content blocks
   ======================================== */

.story-card {
    background-color: #f8f9fa; /* Subtle gray background */
    border-left: 5px solid #C18335; /* Gold accent border */
    padding: 2.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* Subtle shadow for depth */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.story-card:hover {
    transform: translateY(-3px); /* Slight lift on hover */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); /* Enhanced shadow on hover */
}

.story-card h2 {
    color: #C18335; /* Primary gold for headings */
    font-family: 'Oswald', sans-serif;
}

/* Floated accent figure: Decorative image within story card */
.story-accent-figure {
    float: right; /* Float to the right of text content */
    margin: 0 0 1.5rem 2rem; /* Space: bottom and left margins */
    max-width: 300px; /* Limit width to prevent overwhelming text */
    background-color: #ffffff;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.story-accent-figure img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
}

.story-accent-figure figcaption {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    font-style: italic;
    color: #666;
    text-align: center;
    line-height: 1.4;
}

/* Lead text: Key paragraphs with increased emphasis */
.lead-text {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #333;
    margin-bottom: 1.5rem;
}

/* Component list: Styled list for ghost components */
.component-list {
    font-size: 1.1rem;
    line-height: 2;
    color: #555;
    list-style-type: none;
    padding-left: 0;
}

.component-list li {
    padding-left: 2rem;
    position: relative;
    margin-bottom: 0.75rem;
}

/* Custom bullet point using pseudo-element */
.component-list li::before {
    content: "👻"; /* Ghost emoji as bullet */
    position: absolute;
    left: 0;
    font-size: 1.3rem;
}

/* ========================================
   FEATURED IMAGE SECTION
   Side-by-side ghost comparison using semantic figure/figcaption
   ======================================== */

/* Figure element: Semantic HTML5 container for images with captions */
.feature-image-container {
    padding: 2rem;
    background-color: #f8f9fa;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    margin: 0; /* Reset default figure margin */
    height: 100%; /* Equal height containers */
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover effect for comparison images */
.feature-image-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(193, 131, 53, 0.2);
}

.ghost-hero-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    /* Contain entire image without cropping */
    object-fit: contain;
    max-height: 400px;
    flex-grow: 1; /* Allow image to fill available space */
}

/* Figcaption: Styled caption beneath images */
.image-caption {
    margin-top: 1.5rem;
    font-style: italic;
    color: #666;
    font-size: 1.05rem;
    text-align: center;
    line-height: 1.6;
}

/* ========================================
   EVOLUTION TIMELINE CARDS
   Four-step progression from basic to complex
   ======================================== */

.evolution-card {
    background-color: #ffffff;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
    height: 100%; /* Equal height cards */
    position: relative;
}

.evolution-card:hover {
    border-color: #C18335; /* Gold border on hover */
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(193, 131, 53, 0.2); /* Gold-tinted shadow */
}

/* Step number badge */
.evolution-number {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #C18335 0%, #a16d2a 100%);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.evolution-image {
    margin-top: 1rem;
    margin-bottom: 1rem;
    min-height: 150px; /* Consistent image area */
    display: flex;
    align-items: center;
    justify-content: center;
}

.evolution-image img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    max-height: 150px;
}

.evolution-card h3 {
    color: #C18335;
    font-family: 'Oswald', sans-serif;
    margin-bottom: 0.75rem;
}

.evolution-card p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ========================================
   PHILOSOPHY SECTION
   Three-column design principles
   ======================================== */

.philosophy-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.philosophy-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.philosophy-card h3 {
    color: #C18335;
    font-family: 'Oswald', sans-serif;
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.philosophy-card p {
    color: #555;
    font-size: 1rem;
}

/* Decorative blockquote for philosophy section */
.philosophy-quote {
    background-color: rgba(193, 131, 53, 0.1); /* Light gold background */
    border-left: 4px solid #C18335; /* Gold accent border */
    padding: 1rem 1.25rem;
    margin: 1rem 0;
    font-style: italic;
    color: #555;
    font-size: 0.95rem;
    line-height: 1.6;
    border-radius: 4px;
    position: relative;
}

/* Quotation mark decoration */
.philosophy-quote::before {
    content: '"';
    font-size: 3rem;
    color: rgba(193, 131, 53, 0.3);
    position: absolute;
    top: -10px;
    left: 10px;
    font-family: Georgia, serif;
    line-height: 1;
}

.philosophy-quote cite {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: #C18335;
    font-style: normal;
    font-weight: 600;
}

/* ========================================
   BUTTONS
   Custom styled buttons matching site theme
   ======================================== */

.btn-custom {
    background-color: #C18335;
    border-color: #C18335;
    color: white;
    font-weight: 600;
    padding: 0.75rem 2rem;
    transition: all 0.3s ease;
}

.btn-custom:hover {
    background-color: #a16d2a;
    border-color: #a16d2a;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(193, 131, 53, 0.3);
}

/* Outline variant for secondary actions */
.btn-outline-custom {
    background-color: transparent;
    border: 2px solid #C18335;
    color: #C18335;
    font-weight: 600;
    padding: 0.75rem 2rem;
    transition: all 0.3s ease;
}

.btn-outline-custom:hover {
    background-color: #C18335;
    border-color: #C18335;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(193, 131, 53, 0.3);
}

/* ========================================
   RESPONSIVE DESIGN
   Mobile and tablet optimizations
   ======================================== */

/* Tablet and smaller: 768px and below */
@media (max-width: 768px) {
    div#heroDiv {
        min-height: 300px;
        padding: 3rem 1rem;
    }
    
    div#heroText h1 {
        font-size: 2.5rem; /* Smaller heading on mobile */
    }
    
    div#heroText .lead {
        font-size: 1.2rem;
    }
    
    .story-card {
        padding: 1.5rem; /* Reduced padding on smaller screens */
    }
    
    /* Remove float on smaller screens for better readability */
    .story-accent-figure {
        float: none; /* Stack instead of floating */
        max-width: 100%; /* Full width on mobile */
        margin: 1.5rem auto; /* Center with vertical spacing */
        display: block;
    }
    
    .lead-text {
        font-size: 1.05rem;
    }
    
    /* Stack evolution cards vertically with spacing */
    .evolution-card {
        margin-bottom: 2rem;
    }
    
    /* Comparison images: Ensure proper spacing when stacked on tablets */
    .feature-image-container {
        margin-bottom: 1.5rem;
    }
    
    .ghost-hero-image {
        max-height: 300px; /* Smaller hero image on mobile */
    }
}

/* Mobile: 576px and below */
@media (max-width: 576px) {
    div#heroText h1 {
        font-size: 2rem;
        letter-spacing: 1px;
    }
    
    div#heroText .lead {
        font-size: 1rem;
    }
    
    .btn-custom,
    .btn-outline-custom {
        padding: 0.6rem 1.5rem;
        font-size: 0.95rem;
        display: block; /* Full width buttons on small screens */
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .philosophy-icon {
        font-size: 2.5rem; /* Smaller icons on mobile */
    }
    
    .component-list li::before {
        font-size: 1.1rem;
    }
}