/*
Theme Name: Magazine
Theme URI: https://ashfordselection.com
Author: Andrzej Fink
Author URI: https://ashfordselection.com
Description: A minimal WordPress theme designed for Elementor compatibility.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: minimal, custom, elementor
Text Domain: magazine
*/

body {
  margin: 0px;
}

.elementor img {
  border-radius: 10px;
}

.newsletter-small {
  line-height: 1em !important;
}

/* MENU */

.custom-scroll-menu {
    overflow-x: auto; /* Ermöglicht horizontales Scrollen */
    overflow-y: hidden !important; /* Deaktiviert vertikales Scrollen */
    white-space: nowrap; /* Kein Zeilenumbruch */
    scrollbar-width: thin; /* Dünner Scrollbalken für unterstützte Browser */
    scrollbar-color: #ccc transparent; /* Scrollbalken-Farbe */
    display: block;
}

.custom-scroll-menu ul.menu-items {
    display: inline-flex; /* Items horizontal anordnen */
    padding: 0;
    margin: 0;
    list-style: none;
}

.custom-scroll-menu ul.menu-items li {
    font-weight: 300;
    margin-right: 15px; /* Abstand zwischen den Punkten: 15px */
    text-align: center; /* Zentrierte Texte */
}

@media (max-width: 768px) { /* Für Geräte mit einer Breite von maximal 768px */
    .custom-scroll-menu ul.menu-items li {
        margin-right: 5px !important; /* Mobile Padding */
    }
}

.custom-scroll-menu ul.menu-items li a {
    display: block; /* Ganzer Bereich klickbar */
    padding: 10px; /* Optional: Innenabstand */
    text-decoration: none; /* Keine Unterstreichung */
    color: #000; /* Standardfarbe */
    transition: color 0.3s ease; /* Übergang nur für die Farbe */
}

.custom-scroll-menu ul.menu-items li a:hover {
    color: var( --e-global-color-accent ); /* Textfarbe bei Hover */
}

/* Optional: Scrollbalken-Styling */
.custom-scroll-menu::-webkit-scrollbar {
    height: 8px; /* Höhe des horizontalen Scrollbalkens */
}

.custom-scroll-menu::-webkit-scrollbar-thumb {
    background: #ccc; /* Farbe des Scrollbalkens */
    border-radius: 4px; /* Abgerundete Ecken */
}

.custom-scroll-menu::-webkit-scrollbar-track {
    background: transparent; /* Hintergrund des Scrollbalkens */
}

/* SIMILAR POSTS */

.similar-posts-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 20px 0;
}

.similar-post-item {
    display: flex;
    gap: 10px;
    padding-bottom: 10px;
}

.similar-post-item:not(:last-child) {
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
}

.similar-post-image {
    flex: 0 0 120px;
}

.similar-post-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.similar-post-content {
    flex: 1;
}

.similar-post-category {
    display: inline-block;
    background: #f5f5f5;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.8em;
    margin-bottom: 8px;
}

.similar-post-title {
    margin: 0;
    font-family: Manrope, sans-serif;
    font-size: 14px !important;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.similar-post-title a {
    color: #000000;
    text-decoration: none;
}

.similar-post-title a:hover {
    color: var( --e-global-color-accent );
}

/* Post Grid Styles */
.post-grid {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
}

.post-grid__container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.post-grid__item {
    display: flex;
    flex-direction: column;
}

.post-grid__link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.post-grid__image-wrapper {
    position: relative;
    padding-bottom: 75%;
    margin-bottom: 16px;
    border-radius: 10px;
    overflow: hidden;
}

.post-grid__image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    display: block;
}

.post-grid__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 14px;
    color: #717171;
	font-weight: 200;
}

.post-grid__category {
    color: #000;
    font-weight: 500;
}

.post-grid__separator {
    color: #666;
}

.post-grid__title {
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1.3;
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.post-grid__excerpt {
    font-size: 0.8rem;
    line-height: 1.5;
    color: #000;
    font-weight: 200;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.post-grid__loader {
    text-align: center;
    padding: 20px;
}

.loader-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #333;
    border-radius: 50%;
    margin: 0 auto;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive Styles */
@media (max-width: 1024px) {
    .post-grid__container {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .post-grid {
        padding: 0;
    }
    
    .post-grid__container {
        grid-template-columns: 1fr;
    }
}