/* =========================
   GLOBAL
========================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #f3f4f6; /* base light background */
    color: #0b0f14;
    scroll-behavior: smooth;
}

a { text-decoration: none; }

h1,h2,h3,h4,h5,h6 { font-family: 'Poppins', sans-serif; margin: 0; }

/* =========================
   HEADER
========================= */
header {
    padding: 10px 2rem; /* smaller padding on mobile */
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    background: #0b0f14;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* allows wrapping on small screens */
    border-bottom: 1px solid #1f2937;
}

header .logo img {
    height: 3rem; /* default for mobile */
}

@media (min-width: 768px) {
    header .logo img {
        height: 4rem; /* bigger logo on tablet+ */
    }
}

nav a { color: #e5e7eb; margin: 0 15px; font-weight: 600; }

nav a:hover { color: #D9D100; }

/* =========================
   SCROLL NOTIFICATION BAR
========================= */
.scroll-notice {
    background: #047857; /* green-ish */
    color: #fff;
    padding: 6px 20px;
    overflow: hidden;
    font-size: 0.875rem;
}

.animate-marquee {
    display: inline-block;
    white-space: nowrap;
    animation: marquee 20s linear infinite;
}

@keyframes marquee { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }

/* =========================
   HERO
========================= */
.hero {
    position: relative;
    height: 40vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: linear-gradient(270deg, #000 0%, #1a6a35 65%);
    overflow: hidden;
    padding: 2rem 1rem;
}

.hero-watermark {
    position: absolute;
    inset: 0;
    background: url('/images/logo.png') no-repeat center;
    background-size: 50%;
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 10;
    color: #e5e7eb;
}

.hero h1 {
    font-size: 2.25rem; /* mobile-friendly */
    font-weight: 800;
    line-height: 1.2;
}

.hero h1 span {
    color: #FACC15; /* yellow */
}

.hero p {
    margin-top: 1rem;
    font-size: 1rem;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.9;
}

.hero .cta {
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.hero .cta a {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: transform 0.3s ease;
    width: 100%; /* full width on mobile */
    max-width: 180px;
}
@media (max-width: 768px) {
    section.hero {
        height: 70vh;
    }
}

@media (min-width: 768px) {
    .hero h1 { font-size: 3rem; }
    .hero p { font-size: 1.125rem; }
    .hero .cta a { width: auto; }
}

@media (min-width: 1024px) {
    .hero h1 { font-size: 4rem; }
    .hero p { font-size: 1.25rem; }
}

/* =========================
   SECTIONS - WITH SEPARATE BACKGROUNDS
========================= */
section {
    padding: 4rem 1.5rem;
    max-width: 1200px;
    margin: auto;
    border-radius: 1rem;
}

section#about      { background: #ffffff; } /* lighter white */
section#videos     { background: #f9fafb; } /* very light gray */
section#albums     { background: #f3f4f6; } /* base gray */
section#news       { background: #e5e7eb; } /* slightly darker gray */
section#team       { background: #f9fafb; } /* alternate light gray */

/* Headings & paragraph alignment */
section h2 { font-size: 2.25rem; font-weight: 800; color: #D9D100; text-align: center; margin-bottom: 1.5rem; }
section p  { text-align: center; max-width: 700px; margin: 0 auto 2rem; color: #374151; }

/* =========================
   GRID PLACEHOLDERS - SIMPLE OPEN BOX
========================= */
.floating-grid {
    display: flex;
    gap: 1rem;           /* spacing between items */
    overflow-x: auto;    /* horizontal scroll */
    padding-bottom: 1rem;
    scroll-behavior: smooth;  /* smooth scrolling */
}

.floating-grid::-webkit-scrollbar {
    height: 8px;
}
.floating-grid::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}

.card,
.video-placeholder,
.photo-placeholder,
.news-placeholder {
    flex: 0 0 auto;      /* do not shrink, fixed width */
    width: 220px;
    height: 180px;
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    background: #ffffff;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #9ca3af;
    font-weight: 600;
    font-size: 1rem;
    overflow: hidden;
}

.card img,
.card video,
.video-placeholder img,
.photo-placeholder img,
.news-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;}

.card .placeholder-text,
.video-placeholder .placeholder-text,
.photo-placeholder .placeholder-text,
.news-placeholder .placeholder-text {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    text-align: center;
    padding: 0 0.5rem;
}


/* =========================
   FOOTER
========================= */
footer {
    padding: 3rem 1.5rem;
    text-align: center;
    background: #020617;
    color: #6b7280;
    font-size: 0.875rem;
}

/* =========================
   TEAM / AVATARS
========================= */
.team-member img {
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    object-fit: cover;
    margin: auto;
}

.team-member h3 { margin-top: 0.5rem; font-weight: 600; }
.team-member p { color: #374151; font-size: 0.875rem; margin-top: 0.25rem; }

/* =========================
   RESPONSIVE
========================= */
@media (min-width: 768px) { .hero h1 { font-size: 4rem; } .hero p { font-size: 1.25rem; } }
@media (min-width: 1024px){ .hero h1 { font-size: 5rem; } .hero p { font-size: 1.5rem; } }