/*NASA NAV YUNG ROOT FONTS AND COLORS*/
/*INDEX MAIN CONTENT PAGE SPECIFIC STYLES*/

/* Typography Specifics */
.hero-headline-trajan { font-family: var(--font-trajan); font-size: clamp(3.5rem, 6vw, 6rem); font-weight: 400; line-height: 1.1; margin-bottom: 20px; color: #ffffff; }
.hero-sub-modern { font-family: var(--font-sans); font-size: 1.25rem; font-weight: 300; color: rgba(255, 255, 255, 0.9); margin-bottom: 40px; max-width: 750px; margin-left: auto; margin-right: auto; letter-spacing: 1px; line-height: 1.6; }
.section-title-serif { font-family: var(--font-serif); font-size: clamp(2.2rem, 4vw, 3.5rem); font-weight: 700; line-height: 1.2; margin-bottom: 20px; }
.eyebrow-text { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 2px; font-size: 0.85rem; font-weight: 700; color: var(--text-body); display: block; margin-bottom: 15px; }
.text-gold-accent { color: var(--theme-accent); }
.elegant-paragraph { font-size: 1.15rem; line-height: 1.8; margin-bottom: 30px; }
.elegant-link { font-family: var(--font-sans); font-weight: 700; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 1px; color: var(--theme-main); border-bottom: 1px solid var(--theme-accent); padding-bottom: 3px; display: inline-flex; align-items: center; gap: 8px; }
.elegant-link:hover { color: var(--theme-accent); }

/* HERO SECTION */
.hero-elite { height: 100vh; position: relative; overflow: hidden; background: var(--theme-main); }
.video-background { position: absolute; top: 50%; left: 50%; width: 100%; height: 56.25vw; min-height: 100vh; min-width: 177.77vh; transform: translate(-50%, -50%); pointer-events: none; }
.elite-overlay { position: absolute; inset: 0; background: rgba(39, 41, 69, 0.75); }
.overlay-content { position: relative; z-index: 5; }
.hero-text-center { text-align: center; max-width: 900px; margin: 0 auto; }

/* OFFSET LAYOUT */
.offset-layout { display: flex; flex-direction: column; }
@media (min-width: 992px) { .offset-layout { flex-direction: row; } .offset-text { flex: 1; padding-right: 50px; } .offset-image-container { flex: 1; position: relative; } }
.elegant-portrait { width: 100%; max-width: 500px; height: auto; border-radius: 4px; box-shadow: -20px 20px 0px 0px rgba(212, 175, 55, 0.1); }

/* PILLARS  */
.pillars-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 768px) { .pillars-grid { grid-template-columns: repeat(3, 1fr); gap: 30px; } }
.pillar-card { text-align: left; }
.pillar-img-wrapper { overflow: hidden; border-radius: 4px; margin-bottom: 25px; aspect-ratio: 4/3; }
.pillar-img-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: 0.6s ease; filter: grayscale(20%); }
.pillar-card:hover .pillar-img-wrapper img { transform: scale(1.05); filter: grayscale(0%); }
.pillar-title { font-family: var(--font-serif); font-size: 1.5rem; margin-bottom: 10px; }
.pillar-desc { color: var(--text-body); font-size: 1rem; }

/* MOTTO CARDS "TRUTH, HONOR, EXCELLENCE" */
.motto-cards-section { background-color: transparent; padding-bottom: 80px; margin-top: -30px; position: relative; z-index: 10; }
.motto-grid { display: grid; grid-template-columns: 1fr; gap: 30px; }
@media (min-width: 992px) { .motto-grid { grid-template-columns: repeat(3, 1fr); } }
.motto-card { position: relative; border-radius: 16px; overflow: hidden; height: 480px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); transition: transform 0.4s ease, box-shadow 0.4s ease; }
.motto-card:hover { transform: translateY(-10px); box-shadow: 0 25px 45px rgba(0, 0, 0, 0.3); }
.motto-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: transform 0.6s ease; }
.motto-card:hover .motto-bg { transform: scale(1.08); }
.motto-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(26, 27, 46, 0.95) 0%, rgba(26, 27, 46, 0.4) 50%, rgba(0,0,0,0) 100%); z-index: 2; }
.motto-content { position: relative; z-index: 3; padding: 35px; justify-content: flex-end; }
.motto-badge { display: inline-block; padding: 6px 14px; font-size: 0.75rem; font-weight: 800; font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 1.5px; border-radius: 4px; margin-bottom: 12px; width: max-content; }
.badge-navy { background-color: #d32f2f; color: white; } 
.badge-white { background-color: #ffffff; color: var(--theme-main); }
.badge-gold { background-color: var(--theme-accent); color: var(--theme-main); }
.motto-subtitle { color: #ffffff; font-size: 1.25rem; font-weight: 600; margin-bottom: 5px; font-family: var(--font-sans); }
.motto-title { color: var(--theme-accent); font-size: clamp(2.2rem, 3vw, 2.8rem); font-weight: 900; font-family: var(--font-sans); text-transform: uppercase; line-height: 1.1; letter-spacing: 1px; }

/* MINIMALIST STATS */
.stats-minimal { background-color: var(--theme-main); color: white; border-top: 2px solid var(--theme-accent); border-bottom: 2px solid var(--theme-accent); }
.stats-grid-4 { display: grid; grid-template-columns: 1fr; gap: 40px; text-align: center; }
@media (min-width: 576px) { .stats-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .stats-grid-4 { grid-template-columns: repeat(4, 1fr); } }
.stat-number-serif { font-family: var(--font-serif); font-size: 4rem; color: var(--theme-accent); line-height: 1; margin-bottom: 10px; }
.stat-label { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 2px; font-size: 0.85rem; color: #cbd5e1; }

/* EDITORIAL NEWS */
.editorial-grid { display: grid; grid-template-columns: 1fr; gap: 50px; }
@media (min-width: 992px) { .editorial-grid { grid-template-columns: 1.5fr 1fr; } }
.editorial-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; margin-bottom: 20px; border-radius: 4px; }
.editorial-date { font-family: var(--font-sans); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 1px; color: var(--theme-accent); font-weight: 700; display: block; margin-bottom: 10px; }
.editorial-title { font-family: var(--font-serif); font-size: 2rem; margin-bottom: 15px; line-height: 1.2; }
.editorial-title a:hover { color: var(--theme-main); text-decoration: underline; text-decoration-color: var(--theme-accent); }
.editorial-excerpt { font-size: 1.1rem; color: var(--text-body); }
.compact-img { width: 120px; height: 120px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.compact-title { font-family: var(--font-serif); font-size: 1.2rem; line-height: 1.3; margin-bottom: 8px; }
.compact-title a:hover { color: var(--theme-accent); }
.advisory-elegant { padding: 25px; border: 1px solid #e2e8f0; border-radius: 4px; background: white; transition: 0.3s; }
.advisory-elegant:hover { border-color: var(--theme-accent); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }

/* SCROLL ANIMATIONS */
.scroll-reveal { opacity: 0; transform: translateY(30px); transition: all 1s cubic-bezier(0.25, 1, 0.5, 1); }
.scroll-reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay { transition-delay: 0.2s; }

/* RESPONSIVE FIXES FOR MOBILE */
@media (max-width: 768px) {
    /* padding para hindi dumikit ang text sa gilid ng screen */
    .hero-text-center {padding: 0 25px; }
    /* Paliitin ang minimum size ng title para magkasya ang 'EXCELLENCE' */
    .hero-headline-trajan { font-size: clamp(2rem, 10vw, 3.5rem); }
    /* subtitle para mas madaling basahin sa cellphone */
    .hero-sub-modern {font-size: 1.05rem; margin-bottom: 30px;line-height: 1.5;}
    /* Pagpatungin ang mga buttons pababa imbes na magkatabi */
    .hero-actions {flex-direction: column; gap: 15px; width: 100%;}
    
    /* para pantay ang haba ng mga buttons kapag nakapatong */
    .hero-actions .action-btn {
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
        text-align: center;
        box-sizing: border-box;
    }
}

@media (max-width: 480px) {
    /* para lumiit yung sa mobile */
    .hero-headline-trajan {
        font-size: clamp(1.8rem, 12vw, 2.5rem); 
    }
}