/* =========================================================
   Page-specific styles
   ========================================================= */

/* ===== HOME ===== */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    align-items: center;
}
.about-image { aspect-ratio: 4 / 5; overflow: hidden; background: var(--color-light-gray); }
.about-image img { width: 100%; height: 100%; object-fit: cover; }
.stats-row {
    display: flex;
    gap: var(--space-md);
    margin: var(--space-md) 0;
    padding: var(--space-md) 0;
    border-top: 1px solid var(--color-light-gray);
    border-bottom: 1px solid var(--color-light-gray);
}
.stat strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--color-accent);
    line-height: 1;
}
.stat span { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-light); }

.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}
.why-item { text-align: center; padding: var(--space-md); }
.why-icon {
    font-size: 2.5rem;
    color: var(--color-accent);
    margin-bottom: var(--space-sm);
}
.why-item h3 { font-size: 1.25rem; }
.why-item p { color: var(--color-text-light); }

.newsletter-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    align-items: center;
}
.newsletter-form { display: grid; gap: var(--space-xs); }
.newsletter-form input[type="email"] {
    padding: 14px 16px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--color-off-white);
}
.newsletter-form input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.5); }
.newsletter-gdpr { font-size: var(--fs-caption); opacity: 0.8; display: flex; gap: 6px; align-items: flex-start; }

/* ===== PROJECT SINGLE ===== */
.project-hero {
    position: relative;
    padding: calc(var(--header-height) + var(--space-xl)) 0 var(--space-xl);
    min-height: 620px;
    background-size: cover;
    background-position: center;
    color: var(--color-off-white);
    display: flex;
    align-items: flex-end;
}
.project-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 22, 32, 0.4), rgba(15, 22, 32, 0.8));
}
.project-hero-content { position: relative; z-index: 1; }
.project-hero-content .status-badge { position: static; margin-top: var(--space-sm); }

.project-sticky-nav {
    position: sticky;
    top: var(--header-height-scrolled);
    background: var(--color-white);
    border-bottom: 1px solid var(--color-light-gray);
    z-index: var(--z-sticky);
    box-shadow: var(--shadow-sm);
}
.project-sticky-nav ul {
    display: flex;
    gap: var(--space-lg);
    overflow-x: auto;
    padding: var(--space-sm) 0;
}
.project-sticky-nav a {
    font-size: var(--fs-small);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary);
    font-weight: var(--fw-medium);
    white-space: nowrap;
}
.project-sticky-nav a:hover { color: var(--color-accent); }

.overview-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-lg);
    align-items: flex-start;
}
.quick-facts {
    background: var(--color-off-white);
    padding: var(--space-md);
    border-top: 3px solid var(--color-accent);
}
.quick-facts h3 {
    font-size: 1.15rem;
    margin-bottom: var(--space-sm);
    letter-spacing: 0.05em;
}
.quick-facts ul li {
    display: flex;
    justify-content: space-between;
    padding: var(--space-xs) 0;
    border-bottom: 1px dashed var(--color-light-gray);
    font-size: var(--fs-small);
}
.quick-facts ul li:last-child { border-bottom: none; }
.quick-facts strong { color: var(--color-primary); font-family: var(--font-heading); }

.rich-text p { margin-bottom: var(--space-sm); line-height: 1.8; }
.rich-text h3 { margin-top: var(--space-md); }

/* Property table */
.property-table-wrap { overflow-x: auto; }
.property-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-white);
    box-shadow: var(--shadow-card);
    font-size: var(--fs-small);
}
.property-table th {
    text-align: left;
    padding: 14px 16px;
    background: var(--color-primary);
    color: var(--color-off-white);
    font-weight: var(--fw-medium);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: var(--fs-caption);
}
.property-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-light-gray);
}
.property-table tbody tr { transition: background var(--transition-fast); }
.property-table tbody tr:hover { background: var(--color-off-white); }
.property-table tr.status-sold { opacity: 0.55; }

.specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-md);
}
.spec-item {
    padding: var(--space-md);
    background: var(--color-white);
    border: 1px solid var(--color-light-gray);
    text-align: center;
}
.spec-icon { font-size: 1.5rem; color: var(--color-accent); margin-bottom: var(--space-xs); }
.spec-item h4 { font-size: 1rem; }
.spec-item p { color: var(--color-text-light); font-size: var(--fs-small); margin: 0; }

.project-map {
    width: 100%;
    height: 450px;
    background: var(--color-light-gray);
    box-shadow: var(--shadow-card);
}
.project-map::before {
    content: 'Karta će se učitati kada se postavi Google Maps API ključ.';
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--color-text-light);
}

.contact-section-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    align-items: flex-start;
}

/* ===== PROPERTY SINGLE ===== */
.breadcrumb-bar {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--color-light-gray);
    padding: calc(var(--header-height) + var(--space-sm)) 0 var(--space-sm);
}
.breadcrumbs {
    display: flex;
    gap: var(--space-xs);
    font-size: var(--fs-small);
    color: var(--color-text-light);
    align-items: center;
    flex-wrap: wrap;
}
.breadcrumbs a { color: var(--color-primary); }

.property-top-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-md);
    align-items: flex-start;
}
.property-main-image {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-light-gray);
}
.property-main-image img { width: 100%; height: 100%; object-fit: cover; }
.property-thumbs {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-xs);
    margin-top: var(--space-xs);
}
.property-thumbs a { aspect-ratio: 1; overflow: hidden; }
.property-thumbs img { width: 100%; height: 100%; object-fit: cover; }

.property-summary {
    background: var(--color-white);
    padding: var(--space-md);
    box-shadow: var(--shadow-card);
    position: sticky;
    top: calc(var(--header-height-scrolled) + var(--space-sm));
    border-top: 3px solid var(--color-accent);
}
.property-summary-code { font-size: var(--fs-caption); letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-accent); }
.property-summary-title { font-size: 1.75rem; margin-bottom: var(--space-sm); }
.property-summary-price {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--color-accent);
    font-weight: var(--fw-bold);
}
.property-summary-subprice { font-size: var(--fs-small); color: var(--color-text-light); margin-bottom: var(--space-sm); }
.property-status-badge { position: static; margin-bottom: var(--space-md); }
.property-summary-specs { margin: var(--space-sm) 0; }
.property-summary-specs li {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px dashed var(--color-light-gray);
    font-size: var(--fs-small);
}
.property-summary-specs strong { color: var(--color-primary); }
.property-summary-actions { display: grid; gap: var(--space-xs); margin-top: var(--space-sm); }

.floorplan-wrap {
    display: block;
    max-width: 800px;
    margin: 0 auto;
    background: var(--color-white);
    padding: var(--space-md);
    box-shadow: var(--shadow-card);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-xs) var(--space-md);
}
.features-grid li {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 10px 0;
    border-bottom: 1px solid var(--color-light-gray);
    font-size: var(--fs-small);
}
.feature-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--color-accent);
    color: var(--color-primary);
    font-size: 0.75rem;
    font-weight: var(--fw-bold);
}

/* Contact page */
.contact-page-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-lg);
    align-items: flex-start;
}
.contact-info h3 { font-size: 1.5rem; }
.contact-info h4 { margin-top: var(--space-md); }

.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    text-align: center;
}

/* Responsive */
@media (max-width: 1023px) {
    .about-grid,
    .why-grid,
    .newsletter-inner,
    .overview-grid,
    .contact-section-grid,
    .property-top-grid,
    .contact-page-grid,
    .contact-info-grid {
        grid-template-columns: 1fr;
    }
    .property-summary { position: static; }
}