/* ==========================================================================
   ATRAKCIE.CSS — Attraction page styles pre stellasirava.sk
   ========================================================================== */

/* === ATTRACTION CARD === */

.attraction-card {
    position: relative;
}

.attraction-card .card-image {
    aspect-ratio: 16 / 9;
}

.distance-badge {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    background-color: var(--color-accent);
    color: var(--text-inverse);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--rounded-full);
    z-index: 1;
}

/* === CTA SECTION === */

.cta-section {
    background-color: var(--bg-secondary);
    padding: var(--space-16) 0;
    text-align: center;
}

.cta-section h2 {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-6);
}

/* === RESPONSIVE === */

@media (max-width: 767px) {
    .cta-section h2 {
        font-size: var(--text-2xl);
    }
}