/* --- LUXURY RESET & VARIABLES --- */
:root {
    --cream: #F9F8F6;
    --charcoal: #2C2C2C;
    --taupe: #A39B8F;
    --white: #FFFFFF;
}

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

body {
    background-color: var(--cream);
    color: var(--charcoal);
    font-family: 'Lato', sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3, .brand, .eyebrow {
    font-family: 'Cinzel', serif;
    font-weight: 400;
}

/* --- NAVIGATION --- */
.navbar {
    position: absolute; /* Floats over the hero image */
    top: 0;
    width: 100%;
    z-index: 100;
    padding: 30px 0;
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brand {
    font-size: 2rem;
    letter-spacing: 6px;
    color: var(--white);
    text-decoration: none;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 40px;
    align-items: center;
}

.nav-links a {
    color: var(--white);
    text-decoration: none;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: opacity 0.3s;
}

.nav-links a:hover {
    opacity: 0.7;
}

.nav-book-btn {
    border: 1px solid var(--white);
    padding: 10px 24px;
    border-radius: 2px;
}

/* --- HERO SECTION --- */
.hero {
    height: 85vh; /* Leaves room for the booking bar at the bottom */
    background: linear-gradient(rgba(44, 44, 44, 0.3), rgba(44, 44, 44, 0.3)), 
                url('https://images.unsplash.com/photo-1582719508461-905c673771fd?auto=format&fit=crop&q=80') center/cover;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.eyebrow {
    color: var(--white);
    letter-spacing: 4px;
    font-size: 0.9rem;
    text-transform: uppercase;
    display: block;
    margin-bottom: 20px;
}

.hero h1 {
    color: var(--white);
    font-size: 5rem;
    line-height: 1.1;
}

/* --- THE BOOKING BAR (UX SHOWCASE) --- */
.booking-section {
    display: flex;
    justify-content: center;
    margin-top: -50px; /* Pulls it up over the hero image */
    position: relative;
    z-index: 10;
    padding: 0 5%;
}

.booking-bar {
    background-color: var(--white);
    display: flex;
    align-items: center;
    padding: 15px 15px 15px 40px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    border-radius: 2px;
    width: 100%;
    max-width: 1000px;
}

.booking-field {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.booking-field label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--taupe);
    margin-bottom: 5px;
    font-weight: 700;
}

.booking-field input, .booking-field select {
    border: none;
    outline: none;
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
    color: var(--charcoal);
    background: transparent;
    cursor: pointer;
}

.booking-divider {
    width: 1px;
    height: 40px;
    background-color: #E5E5E5;
    margin: 0 30px;
}

.btn-check {
    background-color: var(--charcoal);
    color: var(--white);
    border: none;
    padding: 20px 40px;
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-check:hover {
    background-color: var(--taupe);
}

/* --- INTRO SECTION --- */
.intro-section {
    max-width: 1200px;
    margin: 120px auto;
    padding: 0 5%;
    display: flex;
    align-items: center;
    gap: 80px;
}

.intro-text {
    flex: 1;
}

.intro-text h2 {
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 30px;
}

.intro-text p {
    color: #666;
    font-size: 1.1rem;
    margin-bottom: 30px;
}

.text-link {
    color: var(--charcoal);
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--charcoal);
    padding-bottom: 5px;
}

.intro-image {
    flex: 1;
    height: 600px;
    background: url('https://images.unsplash.com/photo-1590490360182-c33d57733427?auto=format&fit=crop&q=80') center/cover;
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 900px) {
    .nav-links { display: none; }
    .hero h1 { font-size: 3.5rem; }
    .booking-bar { flex-direction: column; padding: 30px; gap: 20px; text-align: center; }
    .booking-divider { display: none; }
    .intro-section { flex-direction: column; text-align: center; }
    .intro-image { width: 100%; height: 400px; }
}

/* ==========================================
   FEATURED RESIDENCES SECTION STYLES
   ========================================== */

/* Main wrapper for the section, giving it breathing room */
.residences-section {
    max-width: 1200px; /* Keeps content from stretching too wide on huge screens */
    margin: 100px auto; /* 100px space on top/bottom, auto centers it left/right */
    padding: 0 5%; /* Prevents text from touching the edge on mobile screens */
}

/* Centers the title and eyebrow text */
.residence-header {
    text-align: center;
    margin-bottom: 60px; /* Pushes the grid of cards down away from the title */
}

/* Eyebrow styling specific to the dark text sections (overriding the white hero one) */
.residence-header .eyebrow {
    color: var(--taupe); /* Uses our custom brownish-grey variable */
}

.residence-header h2 {
    font-size: 2.5rem;
    color: var(--charcoal); /* Deep grey, softer than pure black */
}

/* THE CSS GRID: This makes the cards sit side-by-side automatically */
.residence-grid {
    display: grid;
    /* This complex rule means: "Create columns that are at least 400px wide, 
       but if the screen shrinks, let them take up 1fr (1 fraction of the available space) 
       and wrap to the next line automatically." */
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 40px; /* The space between the cards */
}

/* Individual Card Container */
.room-card {
    background-color: var(--white);
    /* A very soft, luxurious shadow so the cards gently float off the cream background */
    box-shadow: 0 10px 30px rgba(0,0,0,0.04); 
    transition: transform 0.4s ease; /* Smooth speed for the hover effect */
}

/* Lifts the entire card up slightly when the mouse hovers over it */
.room-card:hover {
    transform: translateY(-10px); 
}

/* THE IMAGE CONTAINER: Crucial for the zoom effect */
.room-img-container {
    height: 350px; /* Fixed height for uniformity */
    overflow: hidden; /* HIDDEN is the secret! If the image zooms in, it won't break out of the box */
}

/* The actual image div inside the container */
.room-img {
    width: 100%;
    height: 100%;
    background-size: cover; /* Ensures the image fills the space without stretching */
    background-position: center; /* Centers the focal point of the photo */
    transition: transform 0.8s ease; /* A very slow, expensive-feeling transition */
}

/* When the user hovers over the CARD, zoom the IMAGE inside it by 5% */
.room-card:hover .room-img {
    transform: scale(1.05); 
}

/* The text box below the image */
.room-details {
    padding: 30px; /* Breathing room inside the white card */
    text-align: center; /* Centers all the text */
}

.room-details h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
}

/* The small luxury separator line under the title */
.room-divider {
    width: 40px;
    height: 1px;
    background-color: var(--taupe);
    margin: 0 auto 20px; /* Top:0, Sides:Auto(centers it), Bottom:20px */
}

/* Flexbox layout to put the Bed and Size icons on the same line */
.room-stats {
    display: flex;
    justify-content: center;
    gap: 20px;
    color: #666; /* Medium grey for less important text */
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.room-stats i {
    color: var(--taupe); /* Colors the FontAwesome icons our brand color */
    margin-right: 5px; /* Tiny space between the icon and the word */
}

/* Emphasizing the price */
.room-price {
    font-family: 'Cinzel', serif; /* Matching the headings for a premium feel */
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 20px;
}

/* --- MOBILE ADJUSTMENTS FOR RESIDENCES --- */
/* When the screen gets smaller than a tablet... */
@media (max-width: 768px) {
    .residence-grid {
        /* Forces the grid to ignore the 400px minimum and just take up the whole screen width */
        grid-template-columns: 1fr; 
    }
    
    .room-img-container {
        height: 250px; /* Makes the images shorter on small phone screens */
    }
}

/* ==========================================
   FOOTER STYLES
   ========================================== */

/* The main dark background block for the footer */
.footer {
    background-color: var(--charcoal); /* Heavy dark grey */
    color: var(--white);
    padding: 80px 5% 30px; /* Big space on top, smaller on the bottom */
    font-family: 'Lato', sans-serif;
}

/* THE CSS GRID: Creates 3 columns */
.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    /* '2fr 1fr 1fr' means the first column (Brand) gets twice as much space as the others */
    grid-template-columns: 2fr 1fr 1fr; 
    gap: 60px;
    padding-bottom: 60px;
    /* A subtle, slightly transparent line to separate the main footer from the copyright bar */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
}

/* Typography for the Brand Name */
.footer-col .footer-brand {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    letter-spacing: 6px;
    color: var(--white);
    text-decoration: none;
    display: block;
    margin-bottom: 20px;
}

/* Paragraph text styling */
.footer-col p {
    color: #A0A0A0; /* Soft grey so it isn't too bright against the dark background */
    font-size: 0.95rem;
    line-height: 1.8;
    margin-bottom: 15px;
    max-width: 300px; /* Keeps the text from stretching too wide */
}

/* Flexbox layout for the circular social icons */
.social-links {
    display: flex;
    gap: 15px;
    margin-top: 25px;
}

/* Styling the individual social buttons */
.social-links a {
    color: var(--white);
    background: rgba(255, 255, 255, 0.05); /* Very faint white background */
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%; /* Makes them perfect circles */
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Hover effect for social buttons: Turns them taupe and lifts them up */
.social-links a:hover {
    background: var(--taupe);
    transform: translateY(-3px);
}

/* Styling the column headings (Explore, Contact Us) */
.footer-col h3 {
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    letter-spacing: 2px;
    margin-bottom: 25px;
    text-transform: uppercase;
}

/* Removing bullet points from the list */
.footer-col ul {
    list-style: none;
}

.footer-col ul li {
    margin-bottom: 15px;
}

/* Link hover effects */
.footer-col ul a {
    color: #A0A0A0;
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.3s;
}

.footer-col ul a:hover {
    color: var(--white); /* Lights up white when hovered */
}

/* Makes the phone number pop out a bit more */
.contact-highlight {
    color: var(--white) !important;
    font-weight: 700;
    letter-spacing: 1px;
}

/* The very bottom bar (Copyright & Legal) */
.footer-bottom {
    max-width: 1200px;
    margin: 30px auto 0;
    display: flex;
    justify-content: space-between; /* Pushes copyright left, links right */
    align-items: center;
    color: #888; /* Even darker grey so it fades into the background */
    font-size: 0.85rem;
}

.footer-legal a {
    color: #888;
    text-decoration: none;
    margin-left: 20px;
    transition: color 0.3s;
}

.footer-legal a:hover {
    color: var(--white);
}

/* --- MOBILE RESPONSIVENESS FOR FOOTER --- */
@media (max-width: 768px) {
    .footer-container {
        grid-template-columns: 1fr; /* Stacks all 3 columns vertically on phones */
        gap: 40px;
        text-align: center; /* Centers everything for a clean mobile look */
    }

    .footer-col p {
        margin: 0 auto 15px; /* Keeps paragraphs centered */
    }

    .social-links {
        justify-content: center; /* Centers the row of social icons */
    }

    .footer-bottom {
        flex-direction: column; /* Stacks copyright above legal links */
        gap: 15px;
        text-align: center;
    }

    .footer-legal a {
        margin: 0 10px; /* Adjusts spacing between privacy policy/terms on mobile */
    }
}

/* --- ENHANCED MOBILE RESPONSIVENESS (Phones) --- */
@media (max-width: 600px) {
    /* Shrinks the massive text so "EXTRAORDINARY" fits perfectly */
    .hero h1 { 
        font-size: 2.2rem; 
        line-height: 1.2;
    }
    
    /* Shrinks the eyebrow text slightly */
    .eyebrow {
        font-size: 0.75rem;
        letter-spacing: 2px;
    }

    /* Adjusts the brand name at the very top */
    .brand {
        font-size: 1.5rem;
    }

    /* Fits the booking box neatly inside the phone edges */
    .booking-section {
        padding: 0 15px;
        margin-top: -30px;
    }

    /* Gives the inputs breathing room but stacks them tightly */
    .booking-bar {
        padding: 25px 15px;
        gap: 15px;
    }

    /* Centers the input text for a cleaner look on mobile */
    .booking-field input, .booking-field select {
        text-align: center; 
    }

    /* Makes the dark submit button span the full width of the box */
    .btn-check {
        width: 100%;
        padding: 15px;
    }
}