/**
 * Sections CSS
 * 
 * Contains all non-card section styles migrated from cards-sections.css
 * This file consolidates section-specific styling including:
 * - Banner styles
 * - Figure background styles  
 * - Quote sections
 * - Marketing sections
 * - Button link styles
 * - Explore section styles
 * - Properties section styles
 * - Get to know section
 * - Footer CTA
 * - Navigation components
 * - Real estate stats
 * - Property tags and overlays
 */

/* ============================
   BANNER STYLES
   ============================ */
.banner {
    position: relative;
    overflow: hidden;
    height: 100vh;
}

.banner .al {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 40%;
}

.banner .scroll-btn {
    z-index: 5;
    padding: 0 24px;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    height: 4rem;
    display: flex;
    position: absolute;
    top: auto;
    bottom: 0;
    left: auto;
    right: 0;
    overflow: hidden;
    color: var(--color-bg-primary);
    text-decoration: none;
}

/* BANNER NEW COMPONENT */
.banner-new {
    background: #ffffff;
    padding: 120px 0px;
    overflow: hidden;
    margin-bottom: var(--space-2xl);
}

/* Simplified heading styles using new heading system variables */
.banner-new h2 {
    font-size: var(--font-size-4xl);
    color: var(--heading-color-primary);
    font-weight: var(--font-weight-bold);
    line-height: var(--heading-line-height-tight);
    margin-bottom: 20px;
    position: relative;
    right: 0%; /* Keep existing positioning */
}

.banner-new p {
    color: var(--color-text-muted);
    font-size: 18px;
    opacity: 1;
    font-weight: 500;
    max-width: 75%;
}

/* Banner section button - using systematic button approach */
.banner-new .btn {
    background-color: var(--btn-primary-bg, #000a4a);
    color: var(--btn-primary-text, #ffffff) !important;
    border-color: var(--btn-primary-bg, #000a4a);
    display: inline-block;
    padding: var(--btn-padding, 12px 24px);
    font-size: var(--btn-font-size, 16px);
    font-weight: var(--btn-font-weight, 500);
    line-height: var(--btn-line-height, 1.5);
    text-align: center;
    text-decoration: none !important;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: var(--btn-border-width, 2px) solid transparent;
    border-radius: var(--btn-border-radius, 8px);
}

.banner-new .btn:hover {
    background-color: var(--btn-primary-bg-hover, #001570);
    color: var(--btn-primary-text, #ffffff) !important;
    border-color: var(--btn-primary-bg-hover, #001570);
    box-shadow: var(--btn-shadow-hover, 0 4px 8px rgba(0, 0, 0, 0.15));
}

.banner-new .banner-imgs {
    padding-left: 60px;
    margin-right: -84px;
}

.banner-new .banner-imgs img {
    margin-bottom: 26px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    min-height: 400px;
    object-fit: cover;
    object-position: center;
    width: 100%;
}

.banner-new .banner-imgs>div:first-child {
    margin-top: 40px;
}

/* Single image banner styling */
.banner-new .single-banner-image {
    min-height: 500px;
    max-height: 600px;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    object-fit: cover;
    object-position: center;
    width: 100%;
}

/* ============================
   FIGURE BACKGROUND STYLES
   ============================ */
figure.fig-background {
    width: 100%;
    height: 30rem;
    position: relative;
}

figure.fig-background img {
    z-index: 2;
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}

figure.fig-background::after {
    content: '';
    z-index: 1;
    border-radius: var(--radius-lg);
    background-color: var(--color-bg-tertiary);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 2rem;
    bottom: 0%;
    left: 2rem;
    right: 0%;
}

/* ============================
   QUOTE SECTIONS
   ============================ */
.home-quote h2 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-normal);
    color: var(--color-primary); /* Keep existing brand color */
    margin-top: 5px;
    text-align: center;
    padding: 120px 0px; /* Keep existing padding */
}

.home-quote p {
    font-size: 24px;
}

/* ============================
   MARKETING SECTIONS
   ============================ */
.marketing-sells {
    background: var(--color-bg-secondary);
    padding: 120px 0px;
    margin-bottom: var(--space-2xl);
}

.marketing-sells h2 {
    font-size: var(--font-size-4xl);
    color: var(--color-primary); /* Keep existing brand color */
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-normal);
    margin-bottom: 24px;
    padding: 80px 0px; /* Keep existing padding */
    text-align: center;
}

.marketing-sells p {
    font-size: 18px;
    opacity: 0.8;
}

/* Marketing section button - using systematic button approach */
.marketing-sells .btn {
    margin-top: 20px;
}

/* INFORMED CONSUMER SECTION */
.informed-consumers {
    background: rgb(249, 249, 249);
    padding: 80px 0px;
    margin-bottom: var(--space-2xl);
}


.informed-consumers p {
    font-size: 18px;
}

.informed-consumers.ask-pete {
    padding-top: 200px;
    background: none;
}

.informed-consumers.ask-pete .ins h2 {
    color: var(--heading-color-primary);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-2xl, 1rem);
}

.informed-consumers.ask-pete .ins p {
    color: var(--color-text-secondary);
    line-height: 1.5em;
    font-weight: 500;
    font-size: 16px;
}

/* ============================
   BTN-LINK STYLES
   ============================ */
.btn-link {
    --bs-btn-font-weight: 400;
    --bs-btn-color: var(--bs-link-color);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--bs-link-hover-color);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--bs-link-hover-color);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: #6c757d;
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-box-shadow: 0 0 0 #000;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    text-decoration: underline;
}

.btn-link:focus-visible {
    color: var(--bs-btn-color);
}

.btn-link:hover {
    color: var(--bs-btn-hover-color);
    text-decoration: none;
}

.btn-link img {
    transition: 0.3s;
}

.btn-link:hover img {
    margin-left: 0.5rem;
}

/* ============================
   IMAGE STYLING
   ============================ */
/* Ensure images with border-24 class are responsive */
.border-24 {
    max-width: 100%;
    height: auto;
    border-radius: 24px;
    object-fit: cover;
}

/* Additional overflow prevention for banner-imgs section */
.banner-imgs {
    overflow: hidden;
    max-width: 100%;
}

.banner-imgs img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Prevent horizontal scrolling in carousel/slider components */
.carousel,
.slider,
.swiper-container {
    overflow: hidden !important;
}

/* Fix potential overflow issues with flexbox containers */
.d-flex {
    flex-wrap: wrap;
    max-width: 100%;
}

/* Ensure Bootstrap columns don't overflow */
[class*="col-"] {
    max-width: 100%;
}

/* NEW PAGE CARD STYLING */
.newpage .card {
    margin-bottom: 40px;
}

.newpage .card-title {
    color: #000;
    margin-bottom: 16px;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 700;
    min-height: inherit;
}

/* ============================
   PROPERTIES SECTION
   ============================ */

/* PROPERTY FEATURES */
.prop-feat {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    margin-top: auto;
}

/* Override Bootstrap's .d-flex justify-content behavior for prop-feat */
.d-flex.prop-feat {
    justify-content: flex-start !important;
}

.prop-feat > div {
    color: var(--color-text-secondary);
    text-align: center;
    background-color: var(--color-bg-primary);
    border-radius: 40px;
    align-items: center;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.143em;
    display: flex;
    box-shadow: 0 1px 6px rgba(20, 20, 43, .09);
    margin: 0px 12px 12px 0px;
}

.prop-feat > div img {
    margin-right: 6px;
}

/* ============================
   GET TO KNOW SECTION
   ============================ */
.get-to-know {
    padding: 120px 0px;
    margin-bottom: var(--space-2xl);
}

/* Remove fig-background::after for get-to-know and informed-consumers sections */
.get-to-know figure.fig-background::after,
.informed-consumers figure.fig-background::after {
    display: none;
}

/* Get to know section button - using systematic button approach */
.get-to-know .btn {
    margin-top: 20px;
}

/* Mobile get-to-know button styles moved to mobile-consolidated.css */

/* ============================
   SECTION LAYOUT OPTIMIZATION
   ============================ */
/* HOME PAGE HEADING AND BUTTON LAYOUT OPTIMIZATION */
.home .properties-section h2 {
    max-width: 70%;
    margin: 0;
    text-align: left;
    line-height: 1.2;
}

/* Home page section buttons - using systematic button approach */
.home .properties-section .btn {
    white-space: nowrap;
}

@media (min-width: 768px) {
    .home .properties-section .d-flex {
        align-items: center;
        justify-content: space-between;
    }
}

/* ============================
   CUSTOM NAVIGATION
   ============================ */
/* Custom navigation for carousels */
.custom-nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 20px;
}

.custom-nav .owl-nav {
    display: flex;
    gap: 10px;
}

.custom-nav .owl-nav button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--color-border-primary);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.custom-nav .owl-nav button:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-bg-primary);
}

.custom-nav .owl-nav button.owl-prev::before {
    content: "←";
    font-size: 18px;
    font-weight: bold;
}

.custom-nav .owl-nav button.owl-next::before {
    content: "→";
    font-size: 18px;
    font-weight: bold;
}

/* ============================
   FOOTER CTA
   ============================ */
.foot-cta .cta-wrapper {
    padding: 6rem 4rem;
    border-radius: var(--radius-lg);
    background-color: var(--color-primary);
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 100%;
    margin-bottom: 5em;
    margin-left: auto;
    margin-right: auto;
    display: flex;
}

.foot-cta .cta-wrapper h2 {
    color: var(--color-bg-primary);
}

/* Footer CTA button - using systematic button approach */
.foot-cta .btn {
    padding: 20px 42px;
}

/* Mobile footer CTA styles moved to mobile-consolidated.css */

/* ============================
   SCROLL AND ANIMATION
   ============================ */
/* SCROLL SVG */
.scroll-svg {
    width: 100%;
    max-width: .75rem;
    display: flex;
    margin-top: 10px;
    top: -30px;
    position: relative;
}

.scroll-svg:before, 
.scroll-svg:after {
    content: " ";
    grid-area: 1 / 1 / 2 / 2;
    display: table;
}

/* ANIMATION USAGE */
.div-block-2 {
    overflow: hidden;
    height: 28px;
    padding-right: 7px;
}

/* ============================
   PROPERTY TAGS AND OVERLAYS
   ============================ */
/* PROPERTY TAGS */
.property-tag {
    min-width: 120px;
    font-size: 19px;
    padding: 10px;
    border-radius: var(--radius-lg);
    margin: 0;
}

.open-house {
    background: var(--color-primary);
    color: var(--color-bg-primary);
    font-size: 19px;
    border-radius: var(--radius-lg);
    padding: 10px;
}

/* Property address styles - Primary definition (was duplicated in variables-overrides.css) */
.sp-address {
    font-size: 40px;
}

/* Member listings - Primary definition (was duplicated in team-blog.css) */
.member--listings {
    background: var(--color-bg-secondary);
}

/* ============================
   CAROUSEL STYLING
   ============================ */
/* Article carousel specific styling */
.article-carousel .owl-nav {
    display: none; /* Hide default nav, use custom-nav instead */
}

.article-carousel .owl-dots {
    display: none; /* Hide dots for cleaner look */
}

.article-carousel .item {
    padding: 0 10px;
}

/* Ensure article cards have consistent spacing */
.article-carousel .card {
    height: 100%;
    margin-bottom: 0;
}

/* Resources section styling improvements */
.article {
    background: var(--color-bg-secondary, #f9f9f9);
}

.article .section-title h2 {
    margin-bottom: 40px;
}

/* ============================
   REAL ESTATE STATS SECTION
   ============================ */
.latest-real {
    padding: 20px 0;
}

.latest-real .section-title {
    margin-bottom: 30px;
}

.latest-real .stats {
    color: #000A40;
    display: inline-block;
    font-weight: 500;
    font-size: 48px;
    line-height: 1.25em;
    margin-bottom: 10px;
}

.latest-real h3 {
    color: #222223;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.364em;
    margin-bottom: 40px;
}

/* ============================
   MOBILE RESPONSIVE ADJUSTMENTS MOVED
   ============================ */
/* All mobile section styles and responsive adjustments */
/* have been moved to mobile-consolidated.css for better organization */