/* =========================================================
   desktop-style.css — DESKTOP LAYOUT (loaded only on desktop)
   Grids, spacings, hero sizing tuned for 992px+ viewports.
   ========================================================= */

/* --- Hero section (desktop) --- */
.hero-section {
    min-height: 88vh;
    padding: 100px 20px;
}
.hero-title {
    font-size: 3.6rem;
}
.hero-subtitle {
    font-size: 1.05em;
    letter-spacing: 5px;
}
.hero-tagline {
    font-size: 1.2em;
}
.hero-buttons .btn-ph-primary,
.hero-buttons .btn-ph-secondary {
    min-height: 50px;
    font-size: 1.05em;
    padding: 0.9rem 2rem;
}

/* --- About section (desktop 2-col layout via Bootstrap, fine-tune image height) --- */
.about-section {
    padding-top: 4rem;
    padding-bottom: 2rem;
}
.about-image img {
    height: 430px;
}

/* --- Video (desktop) --- */
.video-section {
    padding: 4rem 0;
}
.video-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

/* --- Features: 3 columns on desktop via Bootstrap --- */
.feature-card {
    min-height: 220px;
    padding: 28px 22px;
}
.feature-icon {
    font-size: 2.6rem;
}

/* --- Rooms: custom 2-col centred max-width to prevent rooms from being too wide --- */
.rooms-section {
    padding: 4rem 0;
}
.room-image img {
    height: 270px;
}
.room-info h4 {
    font-size: 1.35em;
}

/* --- Amenities grid — 3-column via Bootstrap row-cols --- */
.amenities-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    max-width: 1040px;
    margin: 0 auto;
}

/* --- Gallery: 4 column via Bootstrap row-cols-xxl-4, fine tune --- */
.gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* --- Attractions: 4 column via Bootstrap row-cols-xxl-4 --- */
.attractions-grid {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

/* --- Quick Links / Explore More: 3-column via Bootstrap row-cols --- */
.quick-links-section {
    padding: 4rem 0;
}
.quick-link-img img {
    height: 220px;
}

/* --- CTA / Contact (desktop) --- */
.cta-section {
    padding: 4.5rem 0;
}
.contact-details {
    grid-template-columns: 1fr 2fr 1fr;
    max-width: 1040px;
    margin: 2.5rem auto 0;
}

/* --- Nav spacing --- */
.site-nav .nav-link {
    font-size: 1.06em;
    padding-inline: 1.1rem !important;
}

/* --- Food Menu page (desktop) — 3-col grid via Bootstrap row-cols --- */
.menu-grid {
    grid-template-columns: repeat(3, 1fr);
}
.food-image {
    width: 140px;
    min-width: 140px;
    height: 120px;
    min-height: 120px;
}
.food-details h4 {
    font-size: 1.18em;
}

/* Minor desktop polish */
.info-section {
    padding: 3rem 0;
}
.info-section .container {
    max-width: 1000px;
}
.notice {
    margin: 0 auto 2.5rem;
}