/* ===================================================================
   IMAGES STYLES — Sportwetten Dart
   =================================================================== */

/* Hero Image — 21:9 prominent banner after H1 */
.hero-image {
    aspect-ratio: 21 / 9;
    border-radius: var(--radius-lg);
    overflow: hidden;
   
    box-shadow: var(--shadow-lg);
}

.hero-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-out);
}

.hero-image:hover img {
    transform: scale(1.02);
}

/* Article Images — 16:9 section illustrations */
.article-image {
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md);
    overflow: hidden;
    margin: var(--space-lg) 0;
    box-shadow: var(--shadow-md);
    transition: box-shadow var(--duration-base) var(--ease-out);
}

.article-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-out);
}

.article-image:hover {
    box-shadow: var(--shadow-lg);
}

.article-image:hover img {
    transform: scale(1.02);
}

/* Footer content styling */
.footer-content {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: var(--space-xl) var(--gutter);
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.6;
}

.footer-content p {
    margin-bottom: var(--space-sm);
}

.footer-content p:last-child {
    margin-bottom: 0;
}

.footer-content a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.footer-content a:hover {
    color: var(--accent-hover);
}

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 768px) {
    .hero-image {
        aspect-ratio: 16 / 9;
        border-radius: var(--radius-md);
    }

    .article-image {
        margin: var(--space-md) 0;
    }
}

@media (max-width: 480px) {
    .hero-image {
        aspect-ratio: 4 / 3;
        border-radius: var(--radius-sm);
    }

    .article-image {
        border-radius: var(--radius-sm);
    }
}