/* Centers the comparison page content and keeps it comfortably narrow */
.compare-page {
    max-width: 1100px;
    margin: 50px auto 80px;
    padding: 0 20px;
}

/* Intro text block at the top of the comparison page */
.compare-hero {
    text-align: center;
    margin-bottom: 34px;
}

/* Small uppercase label above the main heading */
.compare-kicker {
    color: var(--brown);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: var(--text-caption);
    margin-bottom: 8px;
}

/* Main page heading for the comparison view */
.compare-hero h2 {
    font-size: var(--text-hero);
    margin-bottom: 12px;
}

/* Supporting paragraph under the heading */
.compare-hero p:last-child {
    font-size: 1.04rem;
    color: rgba(46, 50, 48, 0.82);
    max-width: 760px;
    margin: 0 auto;
}

/* Layout for the comparison card area */
.compare-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

/* Main comparison card container */
.compare-card {
    padding: 24px;
    border-radius: 18px;
    text-align: left;
    background: var(--surface-main);
    border: 2px solid var(--border-green);
    box-shadow:
        var(--shadow-soft),
        inset 0 0 0 2px rgba(34, 82, 50, 0.24);
}

/* Card heading styles */
.compare-card h3,
.compare-header h3 {
    color: var(--green);
    font-size: var(--text-section);
    margin-bottom: 6px;
}

/* Short descriptive text inside the card header */
.compare-header p {
    font-size: var(--text-small);
    color: rgba(129, 105, 74, 0.82);
    margin-bottom: 18px;
}

/* Two-column input layout for choosing countries */
.compare-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

/* Full-width compare button inside the form */
.compare-form .button {
    grid-column: 1 / -1;
    width: 100%;
}

/* Helper feedback text for loading or validation states */
.compare-feedback {
    margin-top: 14px;
    color: var(--brown);
}

/* Two-column result grid shown after a successful comparison */
.compare-result {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 18px;
}

/* Each country's detail column inside the comparison result */
.compare-column {
    flex: 1 1 320px;
    padding: 18px;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255, 252, 247, 0.78), rgba(238, 247, 250, 0.66));
    border: 2px solid var(--border-green);
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: inset 0 0 0 2px rgba(34, 82, 50, 0.22);
}

/* Country name heading inside one result column */
.compare-column h4 {
    color: var(--green);
    margin-bottom: 12px;
}

/* Country summary block that sits above the historical place list */
.compare-country-summary {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Individual detail row styling */
.compare-stat {
    margin-bottom: 10px;
    color: var(--brown);
}

/* Highlights the stat labels in each comparison row */
.compare-stat strong {
    color: var(--green);
}

/* Reduces outer spacing and keeps the form comfortable on medium screens */
@media (max-width: 980px) {
    .compare-page {
        margin: 40px auto 64px;
        padding: 0 16px;
    }

    .compare-card {
        padding: 22px;
    }
}

/* Stacks the form and results on smaller screens */
@media (max-width: 768px) {
    .compare-page {
        margin: 34px auto 56px;
        padding: 0 14px;
    }

    .compare-hero h2 {
        font-size: 1.95rem;
    }

    .compare-form {
        grid-template-columns: 1fr;
    }

    .compare-result {
        flex-direction: column;
    }

    .compare-card {
        padding: 18px;
    }
}

@media (max-width: 480px) {
    .compare-hero h2 {
        font-size: 1.72rem;
    }
}