/*
 * Oceans Holiday Getaways — v5.2 layout balance
 * Public Blade/HTML frontend only.
 *
 * v5.1 used one large outer gutter for both the floating navbar and page body.
 * The navbar benefited from that inset, but the body became too narrow. This
 * layer deliberately separates those two layout systems while preserving the
 * v5 motion/animation engine and navy + yellow-orange brand treatment.
 */

:root {
    --ohg-nav-gutter: clamp(2.25rem, 5.8vw, 6.5rem);
    --ohg-page-gutter: clamp(1.25rem, 2.35vw, 2.5rem);
    --ohg-page-gutter-wide: clamp(1.15rem, 2vw, 2.15rem);
    --ohg-content-gutter: clamp(1.3rem, 2.8vw, 3rem);
    --ohg-balanced-radius: clamp(20px, 1.8vw, 28px);
    --ohg-balanced-gap: clamp(1rem, 1.45vw, 1.45rem);
}

/* Keep the floating navbar where it already looks right. */
.ohg-site .ohg-navbar-shell {
    width: min(1600px, calc(100% - (var(--ohg-nav-gutter) * 2)));
}

.ohg-topbar .container-xxl {
    width: min(1600px, calc(100% - (var(--ohg-nav-gutter) * 2)));
}

/*
 * Body sections should feel spacious, not detached from the viewport.
 * A 1366px display now lands around 30–32px from each side rather than ~82px.
 */
.ohg-site #main-content,
.ohg-site .subscribe,
.ohg-site .footer,
.ohg-site .copyright {
    width: min(1720px, calc(100% - (var(--ohg-page-gutter) * 2)));
}

.ohg-site #main-content {
    padding-top: var(--ohg-balanced-gap);
}

.ohg-site #main-content > .ohg-hero,
.ohg-site #main-content > .ohg-section,
.ohg-site #main-content > .gallery,
.ohg-site #main-content > .blog,
.ohg-site #main-content > .testimonial,
.ohg-site #main-content > .contact,
.ohg-site #main-content > .ohg-workspace-page,
.ohg-site #main-content > .ohg-booking-wrap,
.ohg-site #main-content > .bg-breadcrumb,
.ohg-site #main-content > .container-fluid:not(.subscribe):not(.footer):not(.copyright) {
    margin-bottom: var(--ohg-balanced-gap) !important;
    border-radius: var(--ohg-balanced-radius) !important;
    border-color: rgba(7, 31, 58, .11) !important;
    box-shadow: 0 14px 42px rgba(7, 31, 58, .075);
}

/* Let the content breathe inside each section without double-padding it. */
.ohg-site #main-content .container-xxl,
.ohg-site #main-content .container {
    width: 100%;
    max-width: 1480px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--ohg-content-gutter) !important;
    padding-right: var(--ohg-content-gutter) !important;
}

/* Legacy full-width components should obey the same interior rhythm. */
.ohg-site #main-content > .gallery > .container,
.ohg-site #main-content > .blog > .container,
.ohg-site #main-content > .testimonial > .container,
.ohg-site #main-content > .contact > .container,
.ohg-site .subscribe > .container,
.ohg-site .footer > .container,
.ohg-site .copyright > .container {
    max-width: 1480px;
    margin-inline: auto;
    padding-left: var(--ohg-content-gutter) !important;
    padding-right: var(--ohg-content-gutter) !important;
}

/* More natural vertical rhythm: premium, but not oversized. */
.ohg-site .ohg-section {
    padding-top: clamp(3.5rem, 5vw, 5.4rem);
    padding-bottom: clamp(3.5rem, 5vw, 5.4rem);
}

.ohg-site .gallery,
.ohg-site .blog,
.ohg-site .testimonial,
.ohg-site .contact {
    padding-top: clamp(1rem, 1.4vw, 1.5rem) !important;
    padding-bottom: clamp(1rem, 1.4vw, 1.5rem) !important;
}

.ohg-site .gallery > .container,
.ohg-site .blog > .container,
.ohg-site .testimonial > .container,
.ohg-site .contact > .container {
    padding-top: clamp(3rem, 4.7vw, 5rem) !important;
    padding-bottom: clamp(3rem, 4.7vw, 5rem) !important;
}

/* Hero is intentionally wider than the floating navbar. */
.ohg-site .ohg-hero {
    min-height: min(760px, calc(100svh - 128px));
    border-radius: clamp(22px, 2vw, 30px) !important;
}

.ohg-site .ohg-hero .container-xxl {
    max-width: 1480px;
}

/* Page headers should not dominate secondary pages. */
.ohg-site .bg-breadcrumb {
    min-height: 235px;
}

.ohg-site .bg-breadcrumb .container {
    padding-top: clamp(3.2rem, 4.8vw, 4.5rem) !important;
    padding-bottom: clamp(3.2rem, 4.8vw, 4.5rem) !important;
}

.ohg-site .bg-breadcrumb h3 {
    font-size: clamp(2rem, 3.6vw, 3.7rem);
}

/* Keep cards clearly defined, but avoid the "boxes inside boxes" look. */
.ohg-service-card,
.ohg-package-card,
.ohg-site .blog-item,
.ohg-site .testimonial-comment,
.ohg-detail-public-card,
.ohg-empty-state {
    border-color: rgba(7, 31, 58, .12) !important;
    box-shadow: 0 9px 28px rgba(7, 31, 58, .065);
}

.ohg-service-grid,
.ohg-package-grid {
    gap: clamp(1rem, 1.7vw, 1.45rem);
}

.ohg-section-heading,
.ohg-listing-intro {
    margin-bottom: clamp(1.6rem, 2.5vw, 2.25rem);
}

/* Newsletter/footer can sit closer to the edges than the navbar too. */
.ohg-site .subscribe {
    margin-top: var(--ohg-balanced-gap) !important;
    margin-bottom: var(--ohg-balanced-gap) !important;
    border-radius: var(--ohg-balanced-radius);
}

.ohg-site .footer {
    border-radius: var(--ohg-balanced-radius) var(--ohg-balanced-radius) 0 0;
}

/* Contact and booking surfaces benefit from a little more usable width. */
.ohg-site .contact .row,
.ohg-site .ohg-booking-wrap .row {
    --bs-gutter-x: clamp(1rem, 2.4vw, 2rem);
}

/* Tablet: body moves closer to edges; navbar remains deliberately inset. */
@media (max-width: 1199.98px) {
    :root {
        --ohg-nav-gutter: clamp(1.8rem, 4.25vw, 3.5rem);
        --ohg-page-gutter: clamp(1rem, 2.4vw, 1.8rem);
        --ohg-content-gutter: clamp(1.25rem, 3vw, 2.4rem);
    }

    .ohg-site .ohg-hero {
        min-height: 680px;
    }
}

@media (max-width: 991.98px) {
    :root {
        --ohg-nav-gutter: clamp(1.2rem, 3.2vw, 2rem);
        --ohg-page-gutter: clamp(.9rem, 2.2vw, 1.35rem);
        --ohg-content-gutter: clamp(1.1rem, 3.4vw, 1.9rem);
        --ohg-balanced-gap: .95rem;
    }

    .ohg-site .ohg-section {
        padding-top: 3.6rem;
        padding-bottom: 3.6rem;
    }

    .ohg-site .ohg-hero {
        min-height: 640px;
    }
}

/* Phones: keep a clean frame, but never waste precious horizontal space. */
@media (max-width: 767.98px) {
    :root {
        --ohg-nav-gutter: clamp(.85rem, 3.8vw, 1.15rem);
        --ohg-page-gutter: clamp(.7rem, 3vw, .95rem);
        --ohg-content-gutter: clamp(1rem, 4.8vw, 1.35rem);
        --ohg-balanced-radius: 19px;
        --ohg-balanced-gap: .75rem;
    }

    .ohg-site #main-content {
        padding-top: .7rem;
    }

    .ohg-site .ohg-section {
        padding-top: 3.1rem;
        padding-bottom: 3.1rem;
    }

    .ohg-site .gallery > .container,
    .ohg-site .blog > .container,
    .ohg-site .testimonial > .container,
    .ohg-site .contact > .container {
        padding-top: 2.8rem !important;
        padding-bottom: 2.8rem !important;
    }

    .ohg-site .ohg-hero {
        min-height: 600px;
    }

    .ohg-site .bg-breadcrumb {
        min-height: 195px;
    }

    .ohg-site .bg-breadcrumb .container {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
}

@media (max-width: 420px) {
    :root {
        --ohg-nav-gutter: .72rem;
        --ohg-page-gutter: .62rem;
        --ohg-content-gutter: 1rem;
    }

    .ohg-site .ohg-navbar-shell {
        border-radius: 17px !important;
    }

    .ohg-site .ohg-hero,
    .ohg-site #main-content > .ohg-section,
    .ohg-site #main-content > .gallery,
    .ohg-site #main-content > .blog,
    .ohg-site #main-content > .testimonial,
    .ohg-site #main-content > .contact,
    .ohg-site #main-content > .bg-breadcrumb {
        border-radius: 17px !important;
    }
}