/**
 * community-property.css
 * INDEPENDENT CSS for Community Property Template
 * Version: 5.5
 * 
 * PREFIX: .spc- (Single Property Community)
 * 
 * v5.5 UPDATES:
 * - FIXED: Button hover states per Figma
 *   - Primary (Request a Tour): hover = #5A4F42 bg, white text
 *   - Tertiary (Download E-Brochure): hover = white bg, #5A4F42 text
 *   - Secondary (Get in touch): hover = #5A4F42 bg, white text
 * - ADDED: Hero badge styles (above title)
 * - FIXED: Hero visible on MacBook (max-height: 70vh)
 * - ADDED: Coming Soon badge (no border)
 * - All badge colors per Figma specs
 * 
 * Paul Y. 20260206
 */

@import url('https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@300;400;500;600&display=swap');

/* ========================================
   CSS CUSTOM PROPERTIES
======================================== */
.spc-page {
    --spc-primary: #5A4F42;
    --spc-light-text: #766C61;
    --spc-100: #F5F3F0;
    --spc-200: #EFEDEB;
    --spc-300: #E8E5DF;
    --spc-400: #CCC8C0;
    --spc-white: #FFFFFF;
    --spc-complimentary-1: #6A8375;
    --spc-complimentary-2: #6B6D80;
    --spc-marker-green: #778869;
    --spc-font-heading: 'Sofia Pro', 'Roboto', sans-serif;
    --spc-font-body: 'Afacad Flux', sans-serif;
    --spc-content-width: 1200px;
    --spc-gap-map-cta: 54px;
}

.spc-page {
    width: 100%;
    background: var(--spc-white);
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ========================================
   BREADCRUMB
======================================== */
.spc-breadcrumb {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    background: var(--spc-200);
    display: flex;
    justify-content: center;
}

.spc-breadcrumb-inner {
    width: 100%;
    max-width: var(--spc-content-width);
    padding: 14px 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.spc-breadcrumb-link {
    color: var(--spc-primary);
    font-family: var(--spc-font-body);
    font-size: 14px;
    font-weight: 300;
    text-decoration: none;
}

.spc-breadcrumb-link:hover { opacity: 0.7;
color:  #928572!important;

}

.spc-breadcrumb-separator,
.spc-breadcrumb-current {
    color: var(--spc-primary);
    font-family: var(--spc-font-body);
    font-size: 14px;
    font-weight: 300;
}

.spc-breadcrumb-current { font-weight: 400; }

/* ========================================
   HERO SECTION - MacBook Visible Fix
======================================== */
.spc-hero {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    height: auto;
    min-height: 500px;
    max-height: 70vh;
    overflow: hidden;
}

.spc-hero-image {
    width: 100%;
    height: 100%;
    min-height: 500px;
    max-height: 70vh;
    position: absolute;
    top: 0;
    left: 0;
}

.spc-hero-image img {
    width: 100%;
    height: 100%;
    min-height: 500px;
    max-height: 70vh;
    object-fit: cover;
    object-position: center;
}

.spc-hero-overlay {
    width: 100%;
    height: auto;
    min-height: 180px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(63, 63, 70, 0.70);
    backdrop-filter: blur(2px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    padding: 28px 0;
}

.spc-hero-overlay-content {
    width: 100%;
    max-width: var(--spc-content-width);
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Hero Info - ALWAYS LEFT-ALIGNED */
.spc-hero-info-group {
    display: flex;
    align-items: center;
    gap: 112px;
    justify-content: flex-start;
}

.spc-hero-info,
.spc-hero-details {
    display: flex;
    flex-direction: column;
    gap: 28px;
    align-items: flex-start;
}

.spc-hero-info-inner,
.spc-hero-details-inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    text-align: left;
}

/* ========================================
   HERO BADGES - Parent Community
======================================== */
.spc-hero-badge {
    padding: 5px 20px;
    border-radius: 50px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-family: var(--spc-font-body);
    font-size: 16px;
    font-weight: 400;
    white-space: nowrap;
    margin-bottom: 0;
}

/* Move-in Ready / For Sale - Green #6A8375 */
.spc-hero-badge-move-in-ready {
    background: #6A8375 !important;
    color: #FFFFFF !important;
}

/* Plan Ready Lot - Blue-gray #6B6D80 */
.spc-hero-badge-plan-ready {
    background: #6B6D80 !important;
    color: #FFFFFF !important;
}

/* Under Construction - White + border */
.spc-hero-badge-in-construction {
    background: #FFFFFF !important;
    color: #5A4F42 !important;
    outline: 1px solid #5A4F42 !important;
    outline-offset: -1px !important;
}

/* In Contract / Reserved - Gray #666666 */
.spc-hero-badge-in-contract {
    background: #666666 !important;
    color: #FFFFFF !important;
}

/* Sold - Light gray #EEEEEE */
.spc-hero-badge-sold {
    background: #EEEEEE !important;
    color: #5A4F42 !important;
}

/* Coming Soon - Light gray #EEEEEE, NO border */
.spc-hero-badge-coming-soon {
    background: #EEEEEE !important;
    border-radius: 50px !important;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    color: #5A4F42 !important;
}

/* Default fallback */
.spc-hero-badge-default {
    background: #EEEEEE !important;
    color: #5A4F42 !important;
}

.spc-hero-title {
    color: var(--spc-white);
    font-family: var(--spc-font-body);
    font-size: 36px;
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
    text-align: left;
}

.spc-hero-address {
    color: var(--spc-white);
    font-family: var(--spc-font-body);
    font-size: 18px;
    font-weight: 300;
    margin: 0;
    text-align: left;
}

.spc-hero-category {
    color: var(--spc-white);
    font-family: var(--spc-font-body);
    font-size: 24px;
    font-weight: 300;
    margin: 0;
    text-align: left;
}

.spc-hero-price {
    color: var(--spc-white);
    font-family: var(--spc-font-body);
    font-size: 18px;
    font-weight: 300;
    margin: 0;
    text-align: left;
}

.spc-hero-cta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 14px;
}

/* ========================================
   BUTTONS - FIXED HOVER STATES v5.5
======================================== */
.spc-btn {
    height: 45px;
    padding: 0 24px;
    border-radius: 50px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-family: var(--spc-font-body);
    font-size: 18px;
    font-weight: 400;
    text-transform: capitalize;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    box-sizing: border-box;
    white-space: nowrap;
}

/* ===== PRIMARY - Request a Tour =====
   Default: White bg, dark text (#5A4F42)
   Hover: Primary bg (#5A4F42), white text
*/
.spc-btn-primary {
    background: #FFFFFF!important;
    color: #2A2A2A!important;
    border-color:1px solid #2A2A2A!important;
}
    

.spc-btn-primary:hover {
    background: #5A4F42!important;
    color:  #FFFFFF!important;
    transform: translateY(-1px);
}

/* ===== TERTIARY - Download E-Brochure =====
   Default: Transparent bg, white outline, white text
   Hover: White bg, primary text (#5A4F42)
*/
.spc-btn-tertiary {
    background: transparent;
    color: var(--spc-white);
    outline: 1px solid var(--spc-white);
    outline-offset: -1px;
}

.spc-btn-tertiary:hover {
    background: #FFFFFF!important;;
    color:  #5A4F42!important;
    outline: 1px solid  #5A4F42!important;
}

/* ===== SECONDARY - CTA Section Button (Get in touch) =====
   Default: White bg, dark outline (#5A4F42), dark text
   Hover: Primary bg (#5A4F42), white text
*/
.spc-btn-secondary {
    background: var(--spc-white);
    color: var(--spc-primary);
    outline: 1px solid var(--spc-primary);
    outline-offset: -1px;
}

.spc-btn-secondary:hover {
    background: var(--spc-primary);
    color: var(--spc-white);
    outline: 1px solid var(--spc-primary);
    transform: translateY(-1px);
}

.spc-btn-icon {
    width: 14px;
    height: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.spc-btn-icon svg {
    width: 100%;
    height: auto;
    transition: all 0.3s ease;
}

.spc-btn .material-symbols-outlined {
    font-size: 20px;
    line-height: 1;
}

/* ========================================
   ABOUT + FEATURES SECTION
======================================== */
.spc-about-features {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    background: var(--spc-100);
    display: flex;
    justify-content: center;
    padding: 80px 0;
}

.spc-about-features-inner {
    width: 100%;
    max-width: var(--spc-content-width);
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 96px;
}

.spc-about-column,
.spc-features-column {
    width: 550px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.spc-section-title {
    color: var(--spc-primary);
    font-family: var(--spc-font-heading);
    font-size: 30px;
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
}

.spc-about-text {
    color: var(--spc-primary);
    font-family: var(--spc-font-body);
    font-size: 18px;
    font-weight: 300;
    line-height: 1.6;
    margin: 0;
}

.spc-about-text p { margin: 0 0 16px 0; }
.spc-about-text p:last-child { margin-bottom: 0; }

.spc-features-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.spc-features-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.spc-feature-item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.spc-feature-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--spc-primary);
}

.spc-feature-icon .material-symbols-outlined {
    font-size: 24px;
    color: var(--spc-primary);
}

.spc-feature-text {
    color: var(--spc-primary);
    font-family: var(--spc-font-body);
    font-size: 18px;
    font-weight: 300;
    line-height: 1.4;
}

/* ========================================
   CONTENT CONTAINER
======================================== */
.spc-content {
    width: 100%;
    max-width: var(--spc-content-width);
    margin: 0 auto;
}

.spc-divider {
    width: 100%;
    height: 1px;
    background: var(--spc-300);
}

/* ========================================
   PHOTO GALLERY
======================================== */
.spc-gallery-section {
    padding: 80px 0;
}

.spc-gallery-section .spc-section-title {
    margin-bottom: 28px;
}

.spc-gallery {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.spc-gallery-row {
    display: flex;
    justify-content: flex-start;
    gap: 28px;
}

.spc-gallery-row img {
    width: calc(50% - 14px);
    height: 319px;
    object-fit: cover;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.spc-gallery-row img:hover { opacity: 0.9; }

.spc-gallery-full img {
    width: 100%;
    height: 654px;
    object-fit: cover;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.spc-gallery-full img:hover { opacity: 0.9; }

.spc-gallery-last-wrapper {
    position: relative;
    width: calc(50% - 14px);
    height: 319px;
    overflow: hidden;
}

.spc-gallery-last-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.spc-gallery-btn-overlay {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 5;
}

.spc-gallery-btn {
    padding: 10px 24px;
    background: var(--spc-white);
    color: var(--spc-primary);
    border: none;
    border-radius: 50px;
    outline: 0.5px solid var(--spc-primary);
    font-family: var(--spc-font-body);
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s ease;
}

.spc-gallery-btn:hover {
    background: var(--spc-primary);
    color: var(--spc-white);
}

/* ========================================
   LIGHTBOX
======================================== */
.spc-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--spc-white);
    z-index: 99999;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 40px;
    padding: 40px;
}

.spc-lightbox.active { display: flex; }

.spc-lightbox-close {
    position: absolute;
    top: 40px;
    right: 40px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spc-lightbox-close:hover { transform: scale(1.1); }

.spc-lightbox-close .material-symbols-outlined {
    font-size: 40px;
    color: var(--spc-primary);
}

.spc-lightbox-image {
    max-width: 1200px;
    max-height: 800px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spc-lightbox-image img {
    max-width: 100%;
    max-height: 800px;
    object-fit: contain;
}

.spc-lightbox-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
}

.spc-lightbox-nav {
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spc-lightbox-nav:hover:not(:disabled) { transform: scale(1.1); }
.spc-lightbox-nav:disabled { opacity: 0.3; cursor: not-allowed; }

.spc-lightbox-nav .material-symbols-outlined {
    font-size: 40px;
    color: var(--spc-primary);
}

.spc-lightbox-counter {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.spc-lightbox-counter span {
    color: var(--spc-primary);
    font-family: var(--spc-font-body);
    font-size: 18px;
    font-weight: 400;
}

/* ========================================
   UNITS SECTION
======================================== */
.spc-units-section { padding: 80px 0; }
.spc-units-section .spc-section-title { margin-bottom: 28px; }

.spc-units-grid {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.spc-units-row {
    display: flex;
    justify-content: flex-start;
    gap: 28px;
}

.spc-unit-card {
    width: calc(50% - 14px);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.spc-unit-card:hover { transform: translateY(-4px); }

.spc-unit-card-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.spc-unit-image {
    width: 100%;
    height: 329px;
    overflow: hidden;
}

.spc-unit-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.spc-unit-card:hover .spc-unit-image img { transform: scale(1.05); }

.spc-unit-content {
    padding: 20px;
    background: var(--spc-white);
    border-left: 1px solid var(--spc-300);
    border-right: 1px solid var(--spc-300);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.spc-unit-badges {
    display: flex;
    justify-content: flex-start;
    gap: 5px;
    flex-wrap: wrap;
}

/* ========================================
   UNIT CARD BADGES - All Colors Per Figma
======================================== */
.spc-badge {
    padding: 5px 14px;
    border-radius: 50px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-family: var(--spc-font-body);
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
}

/* Move-in Ready / For Sale - Green #6A8375 */
.spc-badge-move-in-ready {
    background: #6A8375 !important;
    color: #FFFFFF !important;
}

/* Plan Ready Lot - Blue-gray #6B6D80 */
.spc-badge-plan-ready-lot {
    background: #6B6D80 !important;
    color: #FFFFFF !important;
}

/* Under Construction - White + border */
.spc-badge-in-construction {
    background: transparent !important;
    outline: 1px solid var(--spc-primary) !important;
    color: var(--spc-primary) !important;
}

/* Estimated Completion */
.spc-badge-estimated {
    background: var(--spc-100) !important;
    color: var(--spc-primary) !important;
}

/* In Contract / Reserved - Gray #666666 */
.spc-badge-in-contract {
    background: #666666 !important;
    color: #FFFFFF !important;
}

/* Sold - Light gray #EEEEEE */
.spc-badge-sold {
    background: #EEEEEE !important;
    color: #5A4F42 !important;
}

/* Coming Soon - Light gray #EEEEEE, NO border */
.spc-badge-coming-soon {
    background: #EEEEEE !important;
    border-radius: 50px !important;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    color: #5A4F42 !important;
}

/* Default fallback */
.spc-badge-default {
    background: #EEEEEE !important;
    color: #5A4F42 !important;
}

/* Promo badge */
.spc-badge-promo {
    background: var(--spc-white) !important;
    outline: 1px solid var(--spc-300) !important;
    color: var(--spc-primary) !important;
}

.spc-unit-title {
    color: var(--spc-primary);
    font-family: var(--spc-font-body);
    font-size: 20px;
    font-weight: 400;
    margin: 0;
}

.spc-unit-specs {
    display: flex;
    align-items: stretch;
    height: 80px;
}

.spc-unit-spec {
    flex: 1;
    padding: 12px 24px;
    background: var(--spc-white);
    border-left: 1px solid var(--spc-300);
    border-top: 1px solid var(--spc-300);
    border-bottom: 1px solid var(--spc-300);
    display: flex;
    justify-content: center;
    align-items: center;
}

.spc-unit-spec:last-child { border-right: 1px solid var(--spc-300); }

.spc-unit-spec-beds,
.spc-unit-spec-baths {
    flex: 0 0 112px;
    width: 112px;
}

.spc-unit-spec-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.spc-unit-spec-label {
    color: var(--spc-light-text);
    font-family: var(--spc-font-body);
    font-size: 12px;
    font-weight: 300;
    text-transform: uppercase;
}

.spc-unit-spec-value {
    color: var(--spc-primary);
    font-family: var(--spc-font-body);
    font-size: 20px;
    font-weight: 400;
}

.spc-no-units {
    text-align: center;
    padding: 60px 20px;
    color: var(--spc-light-text);
    font-family: var(--spc-font-body);
    font-size: 18px;
}

/* ========================================
   SITEMAP
======================================== */
.spc-sitemap-section { padding: 80px 0; }
.spc-sitemap-section .spc-section-title { margin-bottom: 28px; }

.spc-sitemap-wrapper {
    width: 100%;
    padding: 14px 240px;
    background: var(--spc-white);
    outline: 1px solid var(--spc-400);
}

.spc-sitemap-inner {
    width: 766px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.spc-sitemap-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* ========================================
   MAP SECTION
======================================== */
.spc-map-section {
    padding: 80px 0;
    padding-bottom: var(--spc-gap-map-cta);
}

.spc-map-section .spc-section-title { margin-bottom: 28px; }

.spc-map-container {
    width: 100%;
    height: 500px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.spc-map-leaflet {
    width: 100%;
    height: 100%;
    z-index: 1;
}

.spc-map-zoom {
    width: 40px;
    height: 80px;
    position: absolute;
    right: 20px;
    bottom: 20px;
    background: var(--spc-white);
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
    display: flex;
    flex-direction: column;
    z-index: 10;
}

.spc-map-zoom-btn {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
}

.spc-map-zoom-btn:hover { background: var(--spc-100); }
.spc-map-zoom-btn:first-child { border-radius: 4px 4px 0 0; }
.spc-map-zoom-btn:last-child { border-radius: 0 0 4px 4px; }

.spc-map-zoom-divider {
    width: 28px;
    height: 1px;
    background: #E5E5E5;
    margin: 0 6px;
}

.spc-map-zoom-btn .material-symbols-outlined {
    font-size: 24px;
    color: var(--spc-primary);
}

/* ========================================
   CTA BANNER
======================================== */
.spc-cta-section {
    padding-top: 0;
    padding-bottom: 80px;
    position: relative;
    z-index: 2;
}

.spc-cta-banner {
    width: 100%;
    height: 320px;
    background: var(--spc-200);
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.spc-cta-accent {
    width: 10px;
    height: 100%;
    background: var(--spc-primary);
    flex-shrink: 0;
}

.spc-cta-content {
    flex: 1;
    padding: 0 56px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 80px;
}

.spc-cta-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 56px;
}

.spc-cta-text-inner {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.spc-cta-title {
    color: var(--spc-primary);
    font-family: var(--spc-font-heading);
    font-size: 30px;
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
}

.spc-cta-description {
    color: var(--spc-primary);
    font-family: var(--spc-font-body);
    font-size: 18px;
    font-weight: 300;
    line-height: 1.6;
    margin: 0;
}

.spc-cta-image {
    flex: 1;
    height: 270px;
}

.spc-cta-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.spc-footer-spacer {
    height: 80px;
    background: var(--spc-white);
}

/* ========================================
   LEAFLET MAP STYLES
======================================== */
.spc-map-leaflet .leaflet-control-zoom { display: none !important; }
.spc-map-leaflet .leaflet-control-attribution { display: none !important; }

.spc-leaflet-marker {
    width: 28px !important;
    height: 28px !important;
    background: #778869 !important;
    border-radius: 50% !important;
    border: 3px solid #FFFFFF !important;
    box-shadow: 3px 5px 6px 2px rgba(0, 0, 0, 0.40) !important;
}

/* ========================================
   RESPONSIVE - 1200px - 1439px
======================================== */
@media (max-width: 1439px) {
    .spc-breadcrumb-inner { padding: 14px 80px; }
    .spc-hero-overlay-content { padding: 0 80px; }
    .spc-hero-info-group { gap: 80px; }
    .spc-about-features-inner { padding: 0 80px; gap: 60px; }
    .spc-about-column, .spc-features-column { width: 480px; }
    .spc-content { padding: 0 80px; }
    .spc-sitemap-wrapper { padding: 14px 120px; }
    
    .spc-hero-badge {
        font-size: 14px;
        padding: 4px 16px;
    }
}

/* ========================================
   RESPONSIVE - 1024px - 1199px (MacBook)
======================================== */
@media (max-width: 1199px) {
    .spc-breadcrumb-inner { padding: 14px 60px; }
    
    .spc-hero {
        min-height: 400px;
        max-height: 65vh;
    }
    
    .spc-hero-image,
    .spc-hero-image img {
        min-height: 400px;
        max-height: 65vh;
    }
    
    .spc-hero-overlay {
        min-height: 160px;
        padding: 24px 0;
    }
    
    .spc-hero-overlay-content {
        padding: 0 60px;
        flex-wrap: wrap;
        gap: 24px;
    }
    
    /* Hero LEFT-ALIGNED */
    .spc-hero-info-group { width: 100%; gap: 60px; justify-content: flex-start; align-items: flex-start; }
    .spc-hero-cta { width: 100%; flex-direction: row; justify-content: flex-start; gap: 16px; }
    
    .spc-hero-title { font-size: 30px; }
    .spc-hero-address { font-size: 16px; }
    .spc-hero-category { font-size: 20px; }
    .spc-hero-price { font-size: 16px; }
    
    .spc-hero-badge {
        font-size: 13px;
        padding: 4px 14px;
    }
    
    .spc-about-features { padding: 60px 0; }
    .spc-about-features-inner { padding: 0 60px; flex-direction: column; gap: 50px; }
    .spc-about-column, .spc-features-column { width: 100%; }
    .spc-content { padding: 0 60px; }
    .spc-gallery-section, .spc-units-section, .spc-sitemap-section { padding: 60px 0; }
    .spc-map-section { padding: 60px 0; padding-bottom: 48px; }
    .spc-cta-section { padding-bottom: 60px; }
    .spc-gallery-row img, .spc-gallery-last-wrapper { height: 280px; }
    .spc-gallery-full img { height: 500px; }
    .spc-unit-image { height: 280px; }
    .spc-sitemap-wrapper { padding: 14px 60px; }
    .spc-sitemap-inner { width: 100%; }
    .spc-map-container { height: 400px; }
    .spc-cta-banner { height: auto; flex-direction: column; }
    .spc-cta-accent { width: 100%; height: 10px; }
    .spc-cta-content { flex-direction: column; padding: 40px; gap: 40px; }
    .spc-cta-text { gap: 40px; }
    .spc-cta-image { width: 100%; height: 250px; }
}

/* ========================================
   RESPONSIVE - 768px - 1023px
======================================== */
@media (max-width: 1023px) {
    .spc-breadcrumb-inner { padding: 12px 40px; }
    
    .spc-hero {
        min-height: 350px;
        max-height: 60vh;
    }
    
    .spc-hero-image,
    .spc-hero-image img {
        min-height: 350px;
        max-height: 60vh;
    }
    
    .spc-hero-overlay {
        min-height: auto;
        padding: 20px 0;
    }
    
    .spc-hero-overlay-content { padding: 0 40px; flex-direction: column; align-items: flex-start; }
    
    /* Hero stacks but LEFT-ALIGNED */
    .spc-hero-info-group { flex-direction: column; gap: 20px; width: 100%; align-items: flex-start; }
    .spc-hero-info, .spc-hero-info-inner, .spc-hero-details, .spc-hero-details-inner { align-items: flex-start; text-align: left; width: 100%; }
    .spc-hero-title { font-size: 26px; text-align: left; }
    .spc-hero-address, .spc-hero-price { font-size: 16px; text-align: left; }
    .spc-hero-category { font-size: 18px; text-align: left; }
    .spc-hero-cta { flex-direction: column; align-items: stretch; width: 100%; }
    .spc-btn { width: 100%; justify-content: center; }
    
    .spc-hero-badge {
        font-size: 12px;
        padding: 4px 12px;
    }
    
    .spc-about-features { padding: 50px 0; }
    .spc-about-features-inner { padding: 0 40px; }
    .spc-section-title { font-size: 26px; }
    .spc-about-text, .spc-feature-text { font-size: 16px; }
    .spc-features-grid { flex-direction: column; gap: 20px; }
    .spc-content { padding: 0 40px; }
    .spc-gallery-section, .spc-units-section, .spc-sitemap-section { padding: 60px 0; }
    .spc-map-section { padding: 60px 0; padding-bottom: 40px; }
    .spc-cta-section { padding-bottom: 60px; }
    .spc-gallery-row { flex-direction: column; }
    .spc-gallery-row img, .spc-gallery-last-wrapper { width: 100%; height: 250px; }
    .spc-gallery-full img { height: 350px; }
    .spc-units-row { flex-direction: column; }
    .spc-unit-card { width: 100%; }
    .spc-unit-image { height: 250px; }
    .spc-unit-specs { height: auto; flex-wrap: wrap; }
    .spc-unit-spec { flex: 1 1 50%; min-width: 50%; }
    .spc-unit-spec-beds, .spc-unit-spec-baths { flex: 1 1 50%; width: auto; }
    .spc-sitemap-wrapper { padding: 14px 20px; }
    .spc-map-container { height: 350px; }
    .spc-cta-content { padding: 30px; gap: 30px; }
    .spc-cta-text { gap: 32px; }
    .spc-cta-title { font-size: 26px; }
    .spc-cta-image { height: 200px; }
}

/* ========================================
   RESPONSIVE - 481px - 767px
======================================== */
@media (max-width: 767px) {
    .spc-breadcrumb-inner { padding: 10px 20px; }
    .spc-breadcrumb-link, .spc-breadcrumb-separator, .spc-breadcrumb-current { font-size: 12px; }
    
    .spc-hero {
        min-height: 300px;
        max-height: 55vh;
    }
    
    .spc-hero-image,
    .spc-hero-image img {
        min-height: 300px;
        max-height: 55vh;
    }
    
    .spc-hero-overlay-content { padding: 0 20px; align-items: flex-start; }
    
    /* ALL TEXT LEFT-ALIGNED */
    .spc-hero-info-group { align-items: flex-start; }
    .spc-hero-title { font-size: 22px; text-align: left; }
    .spc-hero-address, .spc-hero-price { font-size: 14px; text-align: left; }
    .spc-hero-category { font-size: 16px; text-align: left; }
    
    .spc-hero-badge {
        font-size: 11px;
        padding: 3px 10px;
    }
    
    .spc-btn { font-size: 16px; padding: 10px 20px; }
    .spc-about-features { padding: 40px 0; }
    .spc-about-features-inner { padding: 0 20px; gap: 40px; }
    .spc-section-title { font-size: 22px; }
    .spc-about-text, .spc-feature-text { font-size: 15px; }
    .spc-feature-icon { width: 20px; height: 20px; }
    .spc-feature-icon .material-symbols-outlined { font-size: 20px; }
    .spc-content { padding: 0 20px; }
    .spc-gallery-section, .spc-units-section, .spc-sitemap-section { padding: 40px 0; }
    .spc-map-section { padding: 40px 0; padding-bottom: 32px; }
    .spc-cta-section { padding-bottom: 40px; }
    .spc-gallery, .spc-units-grid { gap: 20px; }
    .spc-gallery-row { gap: 20px; }
    .spc-gallery-row img, .spc-gallery-last-wrapper, .spc-gallery-full img { height: 200px; }
    .spc-gallery-btn { font-size: 14px; padding: 8px 16px; }
    .spc-units-row { gap: 30px; }
    .spc-unit-image { height: 200px; }
    .spc-unit-content { padding: 15px; }
    .spc-unit-title { font-size: 18px; }
    .spc-badge { font-size: 11px; padding: 4px 10px; }
    .spc-unit-spec-label { font-size: 10px; }
    .spc-unit-spec-value { font-size: 16px; }
    .spc-map-container { height: 300px; }
    .spc-cta-content { padding: 24px 20px; gap: 24px; }
    .spc-cta-text { gap: 24px; }
    .spc-cta-text-inner { gap: 10px; }
    .spc-cta-title { font-size: 22px; }
    .spc-cta-description { font-size: 15px; }
    .spc-cta-image { height: 180px; }
    .spc-footer-spacer { height: 40px; }
    .spc-lightbox { padding: 20px; }
    .spc-lightbox-close { top: 20px; right: 20px; }
    .spc-lightbox-close .material-symbols-outlined { font-size: 32px; }
    .spc-lightbox-controls { gap: 30px; }
    .spc-lightbox-nav .material-symbols-outlined { font-size: 32px; }
    
    .spc-leaflet-marker { width: 24px !important; height: 24px !important; border-width: 2px !important; }
}

/* ========================================
   RESPONSIVE - 376px - 480px
======================================== */
@media (max-width: 480px) {
    .spc-breadcrumb-inner { padding: 8px 16px; }
    .spc-breadcrumb-link, .spc-breadcrumb-separator, .spc-breadcrumb-current { font-size: 11px; }
    
    .spc-hero {
        min-height: 280px;
        max-height: 50vh;
    }
    
    .spc-hero-image,
    .spc-hero-image img {
        min-height: 280px;
        max-height: 50vh;
    }
    
    .spc-hero-overlay-content { padding: 0 16px; }
    .spc-hero-title { font-size: 20px; text-align: left; }
    .spc-hero-address, .spc-hero-price { font-size: 13px; text-align: left; }
    .spc-hero-category { font-size: 14px; text-align: left; }
    
    .spc-hero-badge {
        font-size: 10px;
        padding: 3px 10px;
    }
    
    .spc-btn { font-size: 14px; padding: 10px 16px; height: 42px; }
    .spc-about-features { padding: 30px 0; }
    .spc-about-features-inner { padding: 0 16px; }
    .spc-section-title { font-size: 20px; }
    .spc-about-text, .spc-feature-text { font-size: 14px; }
    .spc-features-col { gap: 20px; }
    .spc-content { padding: 0 16px; }
    .spc-gallery-section, .spc-units-section, .spc-sitemap-section { padding: 30px 0; }
    .spc-map-section { padding: 30px 0; padding-bottom: 28px; }
    .spc-cta-section { padding-bottom: 30px; }
    .spc-gallery-row img, .spc-gallery-last-wrapper, .spc-gallery-full img { height: 180px; }
    .spc-unit-image { height: 180px; }
    .spc-unit-content { padding: 12px; }
    .spc-unit-title { font-size: 16px; }
    .spc-badge { font-size: 10px; padding: 3px 8px; }
    .spc-unit-spec { padding: 10px; }
    .spc-unit-spec-label { font-size: 9px; }
    .spc-unit-spec-value { font-size: 14px; }
    .spc-map-container { height: 250px; }
    .spc-map-zoom { width: 36px; height: 72px; right: 10px; bottom: 10px; }
    .spc-cta-content { padding: 20px 16px; gap: 20px; }
    .spc-cta-text { gap: 20px; }
    .spc-cta-text-inner { gap: 8px; }
    .spc-cta-title { font-size: 20px; }
    .spc-cta-description { font-size: 14px; line-height: 1.5; }
    .spc-cta-image { height: 150px; }
}

/* ========================================
   RESPONSIVE - iPhone SE (320px - 375px)
======================================== */
@media (max-width: 375px) {
    .spc-page { --spc-gap-map-cta: 24px; }
    .spc-breadcrumb-inner { padding: 6px 12px; }
    .spc-breadcrumb-link, .spc-breadcrumb-separator, .spc-breadcrumb-current { font-size: 10px; }
    
    .spc-hero {
        min-height: 260px;
        max-height: 45vh;
    }
    
    .spc-hero-image,
    .spc-hero-image img {
        min-height: 260px;
        max-height: 45vh;
    }
    
    .spc-hero-overlay-content { padding: 0 12px; }
    .spc-hero-info-group { gap: 12px; align-items: flex-start; }
    .spc-hero-info-inner, .spc-hero-details-inner { gap: 6px; align-items: flex-start; }
    .spc-hero-title { font-size: 18px; text-align: left; }
    .spc-hero-address, .spc-hero-price { font-size: 12px; text-align: left; }
    .spc-hero-category { font-size: 13px; text-align: left; }
    .spc-hero-cta { gap: 10px; }
    
    .spc-hero-badge {
        font-size: 9px;
        padding: 2px 8px;
    }
    
    .spc-btn { font-size: 13px; padding: 8px 14px; height: 40px; gap: 8px; }
    .spc-btn-icon { width: 12px; height: 8px; }
    .spc-btn .material-symbols-outlined { font-size: 18px; }
    .spc-about-features { padding: 24px 0; }
    .spc-about-features-inner { padding: 0 12px; gap: 30px; }
    .spc-section-title { font-size: 18px; }
    .spc-about-text, .spc-feature-text { font-size: 13px; line-height: 1.5; }
    .spc-feature-item { gap: 10px; }
    .spc-feature-icon { width: 18px; height: 18px; }
    .spc-feature-icon .material-symbols-outlined { font-size: 18px; }
    .spc-features-col { gap: 16px; }
    .spc-content { padding: 0 12px; }
    .spc-gallery-section, .spc-units-section, .spc-sitemap-section { padding: 24px 0; }
    .spc-map-section { padding: 24px 0; padding-bottom: 24px; }
    .spc-cta-section { padding-bottom: 24px; }
    .spc-gallery, .spc-units-grid { gap: 16px; }
    .spc-gallery-row { gap: 16px; }
    .spc-gallery-row img, .spc-gallery-last-wrapper, .spc-gallery-full img { height: 160px; }
    .spc-gallery-btn { font-size: 12px; padding: 6px 12px; }
    .spc-gallery-btn-overlay { bottom: 10px; right: 10px; }
    .spc-units-row { gap: 24px; }
    .spc-unit-image { height: 160px; }
    .spc-unit-content { padding: 10px; }
    .spc-unit-title { font-size: 15px; }
    .spc-badge { font-size: 9px; padding: 3px 6px; }
    .spc-unit-spec { padding: 8px 6px; }
    .spc-unit-spec-label { font-size: 8px; }
    .spc-unit-spec-value { font-size: 13px; }
    .spc-unit-spec-inner { gap: 6px; }
    .spc-sitemap-wrapper { padding: 10px 12px; }
    .spc-map-container { height: 220px; }
    .spc-map-zoom { width: 32px; height: 64px; right: 8px; bottom: 8px; }
    .spc-map-zoom-btn .material-symbols-outlined { font-size: 20px; }
    .spc-cta-accent { height: 8px; }
    .spc-cta-content { padding: 16px 12px; gap: 16px; }
    .spc-cta-text { gap: 16px; }
    .spc-cta-text-inner { gap: 6px; }
    .spc-cta-title { font-size: 18px; line-height: 1.3; }
    .spc-cta-description { font-size: 13px; line-height: 1.4; }
    .spc-cta-image { height: 130px; }
    .spc-footer-spacer { height: 24px; }
    .spc-lightbox { padding: 12px; gap: 24px; }
    .spc-lightbox-close { top: 12px; right: 12px; width: 32px; height: 32px; }
    .spc-lightbox-close .material-symbols-outlined { font-size: 28px; }
    .spc-lightbox-controls { gap: 20px; }
    .spc-lightbox-nav { width: 32px; height: 32px; }
    .spc-lightbox-nav .material-symbols-outlined { font-size: 28px; }
    .spc-lightbox-counter span { font-size: 14px; }
    
    .spc-leaflet-marker { width: 22px !important; height: 22px !important; border-width: 2px !important; }
}