@import url("./styles.css");

.history-main {
    background-color: #0c090b;
    color: #e4e9eb;
    font-family: 'Montserrat', sans-serif;
}

.history-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 128px 7.8%; /* 7.8% matches ~150px on 1920px width */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* Background Overlay */
.history-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.8) 100%);
    z-index: 1;
}

.history-content {
    position: relative;
    z-index: 2;
    max-width: 625px;
    width: 100%;
    text-align: left; /* Text is always left-aligned inside its box */
}

/* Alignment and positioning of children */
.history-section.align-right .history-content {
    margin-left: auto;
    margin-right: 0;
}

.history-section.align-left .history-content {
    margin-left: 0;
    margin-right: auto;
}

.history-year {
    color: #4db4ff;
    font-family: 'Russo One', sans-serif;
    font-size: 48px;
    font-weight: 400;
    margin-bottom: 32px;
    line-height: 1.25;
    letter-spacing: -0.02em;
    text-align: left; /* Explicitly align to left */
}

.history-subtitle {
    font-size: 18px;
    color: #e4e9eb;
    margin-bottom: 32px;
    font-weight: 700;
    line-height: 1.4;
    text-align: left; /* Explicitly align to left */
}

.history-description {
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 40px;
    color: #e4e9eb;
    opacity: 0.9;
    text-align: left; /* Explicitly align to left */
}

/* Button positioning - usually follows text but can be overridden */
.history-btn {
    display: inline-block;
    background-color: #4db4ff;
    color: #ffffff;
    padding: 15px 35px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: background-color 0.3s ease, transform 0.2s ease;
    border: none;
    cursor: pointer;
    z-index: 2;
    margin-top: 20px;
}

/* Section 9 and 11 specific button placement based on design */
.history-section.align-right .history-btn {
    margin-right: auto; /* Button on the LEFT for right-aligned text sections */
    margin-left: 0;
}

.history-section.align-left .history-btn {
    display: block;
    width: fit-content;
    margin-left: auto; /* Button on the RIGHT for left-aligned text sections */
    margin-right: 0;
}

.history-btn:hover {
    background-color: #3ba3f0;
    transform: translateY(-2px);
}

.history-btn:active {
    transform: translateY(0);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .history-section {
        padding: 80px 5%;
        justify-content: center;
        align-items: center !important; /* Center content on smaller tablets/mobile */
    }
    
    .history-content {
        text-align: center !important;
        max-width: 100%;
    }

    .history-year, .history-subtitle, .history-description {
        text-align: center !important;
    }
}

@media (max-width: 768px) {
    .history-section {
        padding: 60px 20px;
    }
    
    .history-year {
        margin-bottom: 16px;
    }
    
    .history-description {
        margin-bottom: 30px;
    }
}

/* Footer & Header fixes for this page */
.site-header {
    background: rgba(12, 9, 11, 0.9);
    backdrop-filter: blur(10px);
}

/* Split Section Layout for Section 1 (Desktop) */
.history-split-section {
    display: flex;
    flex-direction: column; /* Stack by default on mobile */
    min-height: 100vh;
    width: 100%;
    background-color: #0c090b;
}

.split-half {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 128px 7.8%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    box-sizing: border-box;
    flex: 1;
}

/* Background Overlay for each half */
.split-half::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.85) 100%);
    z-index: 1;
}

.split-half .history-content {
    position: relative;
    z-index: 2;
    max-width: 550px; /* slightly smaller to fit 50% width comfortably */
    width: 100%;
}

.split-half.left-half .history-content {
    margin-left: 0;
    margin-right: auto;
}

.split-half.right-half .history-content {
    margin-left: 0;
    margin-right: auto;
}

/* Desktop styles for split layout */
@media (min-width: 1025px) {
    .history-split-section {
        flex-direction: row; /* Split into two halves side-by-side on desktop */
        height: 100vh;
        min-height: 100vh;
    }
    
    .split-half {
        height: 100%;
        min-height: 100vh;
    }
}

/* Mobile responsive adjustments for split layout */
@media (max-width: 1024px) {
    .split-half {
        padding: 80px 5%;
        justify-content: center;
        align-items: center !important;
    }
    
    .split-half .history-content {
        text-align: center !important;
        max-width: 100%;
    }
    
    .split-half .history-year, 
    .split-half .history-subtitle, 
    .split-half .history-description {
        text-align: center !important;
    }
    
    .split-half .history-btn {
        margin: 20px auto 0 auto !important;
    }
}

/* Tandems section side-by-side flex layout (Desktop) */
.history-tandem-container {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

.history-tandem-left {
    max-width: 625px;
    width: 100%;
    margin: 0;
}

.history-tandem-right {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.history-tandem-right .history-btn {
    display: inline-block !important;
    margin: 0 0 20px 0 !important;
    width: auto !important;
}

/* Tablet & Mobile styles */
@media (max-width: 1024px) {
    .history-tandem-container {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 30px;
    }
    
    .history-tandem-left {
        max-width: 100% !important;
        text-align: center !important;
    }
    
    .history-tandem-right {
        width: 100% !important;
        justify-content: center !important;
    }
    
    .history-tandem-right .history-btn {
        margin: 0 auto !important;
    }
}

/* Aviation Section Side-by-Side Asymmetrical Layout */
.history-aviation-section {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 !important; /* Let container handle the layout and full height */
    min-height: 100vh;
}

.history-aviation-split-container {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: row;
    width: 100%;
    min-height: 100vh;
}

/* Left column with vertically stacked cards */
.history-aviation-left-cards {
    display: flex;
    flex-direction: column;
    width: 45%; /* Left 45% of screen */
    height: 100vh;
    min-height: 100vh;
}

.aviation-vertical-card {
    position: relative;
    flex: 1; /* evenly shares vertical space */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Aligns content vertically to top */
    align-items: flex-start; /* Aligns content horizontally to left */
    padding: 30px; /* Elegant inset padding */
    box-sizing: border-box;
    cursor: pointer;
    overflow: hidden;
    transition: flex-grow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Expand slightly on hover to give a dynamic, alive effect */
.aviation-vertical-card:hover {
    flex-grow: 1.25;
}

.aviation-vertical-card .aviation-card-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
    transition: background-color 0.3s ease;
}

.aviation-vertical-card:hover .aviation-card-overlay {
    background: rgba(77, 180, 255, 0.2); /* Subtle glow overlay */
}

.aviation-vertical-card .aviation-card-content {
    position: relative;
    z-index: 2;
    text-align: left;
}

.aviation-vertical-card .aviation-card-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 36px;
    font-weight: 700; /* Montserrat Bold */
    margin: 0;
    color: #ffffff;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);
    transition: color 0.3s ease, transform 0.3s ease;
}

.aviation-vertical-card:hover .aviation-card-title {
    color: #4db4ff;
    transform: scale(1.1);
}

/* Right column with general text block */
.history-aviation-right-text {
    width: 55%; /* Right 55% of screen */
    height: 100vh;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 7.8%;
    box-sizing: border-box;
    max-width: none !important;
    margin: 0 !important;
    overflow-y: auto; /* Handles very long text safely */
    background: transparent; /* Fully reveals the section's background aviation.webp image */
    backdrop-filter: none;
}

/* Tablet & Mobile responsive fallback */
@media (max-width: 1024px) {
    .history-aviation-split-container {
        flex-direction: column-reverse; /* Text on top, cards stacked below */
        min-height: auto;
    }
    
    .history-aviation-left-cards {
        width: 100%;
        height: auto;
        min-height: auto;
    }
    
    .aviation-vertical-card {
        height: 250px;
        flex: none;
    }
    
    .aviation-vertical-card:hover {
        flex-grow: 1;
    }
    
    .history-aviation-right-text {
        width: 100%;
        height: auto;
        min-height: auto;
        padding: 80px 5%;
        background: rgba(12, 9, 11, 0.95);
        backdrop-filter: none;
        align-items: center;
        text-align: center;
    }
    
    .history-aviation-right-text .history-year,
    .history-aviation-right-text .history-subtitle,
    .history-aviation-right-text .history-description {
        text-align: center !important;
    }
}

/* People Section Side-by-Side Flex Layout (Desktop) */
.history-people-container {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

.history-people-left {
    max-width: 625px;
    width: 100%;
    margin: 0;
}

.history-people-right {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.history-people-right .history-btn {
    display: inline-block !important;
    margin: 0 0 20px 0 !important;
    width: auto !important;
}

/* Tablet & Mobile styles for People */
@media (max-width: 1024px) {
    .history-people-container {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 30px;
    }
    
    .history-people-left {
        max-width: 100% !important;
        text-align: center !important;
    }
    
    .history-people-right {
        width: 100% !important;
        justify-content: center !important;
    }
    
    .history-people-right .history-btn {
        margin: 0 auto !important;
    }
}