/* --- GOOGLE FONTS --- */
@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Roboto+Condensed:wght@300;400;700&family=Roboto:wght@300;400&family=Tilt+Neon&display=swap');

/* --- CSS VARIABLES --- */
:root {
    --bg-body: #e6e6e5;       
    --bg-header: #cccccc;     
    --bg-section: #d9d9d9;    
    --surface-color: #ffffff; 

    --font-header: 'Audiowide', sans-serif; 
    --font-title: 'Roboto Condensed', sans-serif;  
    --font-paragraph: 'Roboto', sans-serif; 

    --color-title: #222222;       
    --color-paragraph: #444444;   
    --color-accent: #8c9398;      
}

/* --- GLOBAL RESET --- */
* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-body);
    font-family: var(--font-paragraph);
    color: var(--color-paragraph);
    line-height: 1.6;
}

/* --- HEADER & NAVIGATION --- */
header {
    background-color: var(--bg-header);
    padding: 1rem 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.logo {
    font-family: var(--font-header); 
    font-size: 1.4rem;
    text-decoration: none;
    color: var(--color-title);
    letter-spacing: 2px;
}

nav {
    display: flex;
    align-items: center;
}

nav a {
    font-family: var(--font-title);
    margin-left: 1.5rem;
    text-decoration: none;
    color: var(--color-title);
    text-transform: uppercase;
    font-size: 0.9rem;
}

.member-link {
    opacity: 0.6;
    border: 1px solid var(--color-title);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
}

/* --- BENTO GRID SYSTEM --- */
main {
    padding: 2rem 5%;
}

.bento-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile Default */
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
}

.bento-box {
    padding: 2rem;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-box {
    background-color: var(--surface-color);
    text-align: left;
}

.gym-box { background-color: var(--bg-header); border: 1px solid #bbb; }
.facility-box { background-color: var(--bg-section); }

/* TEXT STYLES */
h1 { font-family: var(--font-title); font-size: 2.5rem; margin: 0; color: var(--color-title); }
.thin { font-weight: 300; }
.subtitle { font-size: 1.1rem; margin: 1rem 0 2rem 0; }

h3 { font-family: var(--font-header); text-transform: uppercase; font-size: 1.1rem; margin-top: 0; }

.button {
    display: inline-block;
    padding: 10px 25px;
    background-color: var(--color-title);
    color: white;
    text-decoration: none;
    border-radius: 4px;
    width: fit-content;
}

.hero-image-placeholder {
    background-color: #bbb;
    width: 100%;
    height: 200px;
    margin-top: 20px;
    border-radius: 8px;
}

/* --- DESKTOP OPTIMIZATION --- */
@media (min-width: 768px) {
    .bento-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .hero-box {
        grid-column: span 4;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        min-height: 400px;
    }
    .gym-box, .facility-box { grid-column: span 2; }
    .hero-image-placeholder { margin-top: 0; height: 100%; }
}