/**
 * Frontend styles for Cat Teaser block
 */
.cat-teaser-block {
    margin-bottom: 2rem;
}

/* Grid layout for columns */
.cat-teaser-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 30px;
}

/* Column configurations */
.cat-teaser-block.columns-2 .cat-teaser-grid {
    grid-template-columns: repeat(2, 1fr);
}

.cat-teaser-block.columns-3 .cat-teaser-grid {
    grid-template-columns: repeat(3, 1fr);
}

.cat-teaser-block.columns-4 .cat-teaser-grid {
    grid-template-columns: repeat(4, 1fr);
}

/* Base item styling */
.cat-teaser-item {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #eaeaea;
}

.cat-teaser-grid .cat-teaser-item {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.cat-teaser-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* Layout: Side Image Right Content (default) */
.cat-teaser-item.layout-side-image-right-content {
    display: flex;
    gap: 20px;
}

.cat-teaser-item.layout-side-image-right-content .cat-teaser-image {
    flex: 0 0 30%;
    order: 1;
}

.cat-teaser-item.layout-side-image-right-content .cat-teaser-content {
    flex: 1;
    order: 2;
}

/* Layout: Side Content Right Image */
.cat-teaser-item.layout-side-content-right-image {
    display: flex;
    gap: 20px;
}

.cat-teaser-item.layout-side-content-right-image .cat-teaser-image {
    flex: 0 0 30%;
    order: 2;
}

.cat-teaser-item.layout-side-content-right-image .cat-teaser-content {
    flex: 1;
    order: 1;
}

/* Layout: Stack Image Top */
.cat-teaser-item.layout-stack-image-top {
    display: block;
}

.cat-teaser-item.layout-stack-image-top .cat-teaser-image {
    margin-bottom: 15px;
}

/* Layout: Stack Image Bottom */
.cat-teaser-item.layout-stack-image-bottom {
    display: block;
}

.cat-teaser-item.layout-stack-image-bottom .cat-teaser-content {
    margin-bottom: 15px;
}

/* Layout: Stack Image Middle */
.cat-teaser-item.layout-stack-image-middle {
    display: block;
}

.cat-teaser-item.layout-stack-image-middle .cat-teaser-header {
    margin-bottom: 15px;
}

.cat-teaser-item.layout-stack-image-middle .cat-teaser-image {
    margin-bottom: 15px;
}

/* Header part for the middle image layout */
.cat-teaser-header {
    display: flex;
    flex-direction: column;
}

/* Date styles - deutlich kleiner */
.cat-teaser-date {
    font-size: 0.75rem; /* Geändert von em zu rem */
    color: #666;
    margin-bottom: 0.5rem;
}

/* Inline date specific styling */
.cat-teaser-block.date-inline .cat-teaser-date {
    display: inline-block;
    margin-right: 0.5rem;
    margin-bottom: 0;
}

/* Title styling */
.cat-teaser-title {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.2rem; /* Geändert von em zu rem */
    line-height: 130%; /* Geändert von 1.3 zu 130% */
}

.cat-teaser-title a {
    color: inherit;
    text-decoration: none;
}

.cat-teaser-title a:hover {
    color: #0073aa;
    text-decoration: underline;
}

/* More link styling */
.cat-teaser-more-link {
    display: inline-block;
    margin-left: 0.3rem;
    font-size: 0.9rem; /* Geändert von em zu rem */
}

.cat-teaser-more-link a {
    color: #0073aa;
    text-decoration: none;
}

.cat-teaser-more-link a:hover {
    text-decoration: underline;
}

/* Image styling - kein Border-Radius */
.cat-teaser-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0; /* Kein abgerundeter Bereich */
}

/* Square image option */
.cat-teaser-square-image {
    aspect-ratio: 1/1;
    object-fit: cover;
}

/* Content styling */
.cat-teaser-content {
    display: flex;
    flex-direction: column;
}

.cat-teaser-excerpt {
    font-size: 0.95rem; /* Geändert von em zu rem */
    line-height: 150%; /* Geändert von 1.5 zu 150% */
    color: #444;
}

.cat-teaser-excerpt p {
    margin-top: 0.5rem;
    margin-bottom: 0;
}

.cat-teaser-notice {
    padding: 20px;
    text-align: center;
    color: #666;
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 0; /* Kein abgerundeter Bereich */
}

/* Responsive styles */
@media screen and (max-width: 992px) {
    /* Reduce columns for medium screens */
    .cat-teaser-block.columns-4 .cat-teaser-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .cat-teaser-block.columns-3 .cat-teaser-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    /* Single column for small screens */
    .cat-teaser-block .cat-teaser-grid {
        grid-template-columns: 1fr;
    }
    
    /* Switch to stacked layout on small screens */
    .cat-teaser-item.layout-side-image-right-content,
    .cat-teaser-item.layout-side-content-right-image {
        flex-direction: column;
        gap: 10px;
    }
    
    .cat-teaser-item.layout-side-image-right-content .cat-teaser-image,
    .cat-teaser-item.layout-side-content-right-image .cat-teaser-image {
        flex: none;
        order: 1;
        margin-bottom: 1rem;
    }
    
    .cat-teaser-item.layout-side-image-right-content .cat-teaser-content,
    .cat-teaser-item.layout-side-content-right-image .cat-teaser-content {
        flex: none;
        order: 2;
    }
}