/* Home page: hero, quick-link cards and the property map.
   Shared tokens (--primary-color, --accent-color, --border-color) come from style.css. */

.home {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Card surface shared by the home page sections, matching .container */
.hero,
.map-section,
.card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    padding: 30px;
}

/* --- HERO --- */

.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    border-top: 4px solid var(--accent-color);
}

.hero-text {
    flex: 1 1 420px;
    min-width: 0;
}

.hero h1 {
    font-size: 32px;
    line-height: 1.25;
    margin-bottom: 10px;
}

.hero-subtitle {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0 0 15px;
}

.hero-text p {
    margin: 0 0 15px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 25px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 22px;
    border-radius: 4px;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.btn-primary {
    background-color: var(--primary-color);
    color: #fff;
    border: 2px solid var(--primary-color);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background-color: #34495e;
    border-color: #34495e;
}

.btn-outline {
    background-color: #fff;
    color: var(--primary-color);
    border: 2px solid var(--border-color);
}

.btn-outline:hover,
.btn-outline:focus-visible {
    color: var(--accent-color);
    border-color: var(--accent-color);
    background-color: #e8f8f5;
}

/* Building count badge */
.hero-stat {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px 30px;
    background-color: #e8f8f5;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.hero-stat-number {
    font-size: 56px;
    font-weight: bold;
    line-height: 1;
    color: var(--accent-color);
}

.hero-stat-label {
    margin-top: 6px;
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
}

.hero-stat-note {
    margin-top: 4px;
    font-size: 13px;
    color: #666;
}

/* The apartment count and the postal code sit below the houses they belong to,
   ruled off from them because they are further facts about the same buildings
   rather than more of the first. */
.hero-stat-facts {
    /* stretch, so the rule spans the badge rather than only the words */
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
    font-size: 13px;
    color: #666;
}

.hero-stat-facts strong {
    color: var(--primary-color);
    letter-spacing: 0.04em;
}

/* --- QUICK LINK CARDS --- */

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.card {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
    border-top: 3px solid transparent;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.card:hover,
.card:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.12);
    border-top-color: var(--accent-color);
}

.card h2 {
    margin: 0 0 10px;
    font-size: 20px;
    color: var(--primary-color);
}

.card p {
    margin: 0 0 20px;
}

/* Pushed to the bottom so cards of different text length stay aligned */
.card-more {
    margin-top: auto;
    font-weight: 600;
    color: var(--accent-color);
}

.card-more::after {
    content: " →";
}

/* --- PROPERTY MAP --- */

.map-section h2 {
    margin: 0 0 10px;
    font-size: 22px;
    color: var(--primary-color);
}

.map-section p {
    margin: 0 0 20px;
}

.map-figure {
    margin: 0;
}

.map-figure img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.map-figure figcaption {
    margin-top: 10px;
    font-size: 13px;
    color: #666;
    text-align: right;
}

/* --- NOTICE --- */

.home .recommendation-box {
    margin-bottom: 0;
}

.home .recommendation-box h3 {
    margin: 0 0 8px;
    color: var(--primary-color);
}

.home .recommendation-box p {
    margin: 0;
}

@media (max-width: 768px) {
    .hero,
    .map-section,
    .card {
        padding: 20px;
    }

    /* Badge moves above the text so the headline leads on small screens */
    .hero {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 20px;
    }

    .hero h1 { font-size: 26px; }
    .hero-subtitle { font-size: 16px; }

    .hero-stat { padding: 15px; }
    .hero-stat-number { font-size: 44px; }

    .hero-actions { margin-top: 20px; }
    .btn { width: 100%; }

    .cards { grid-template-columns: 1fr; gap: 15px; }

    .map-figure figcaption { text-align: left; }
}