/*
Theme Name: AndreaZiegler
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 9.1.1
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
/* FARBY A ORÁMOVANIE PODĽA POŽIADAVKY */
.display-posts-listing .listing-item {
    background-color: rgba(232, 42, 127, 0.05); /* Svetloružové pozadie */
    border: 1px solid rgba(232, 42, 127, 0.1); /* Jemný ružový rám */
    border-radius: 4px; /* Jemne zaoblené rohy */
    padding: 50px 30px;
	font-weight: 600;
    box-shadow: none; /* Odstránime predchádzajúci tieň */
    transition: all 0.3s;
    height: 100%;
}

/* 1. VYTVORENIE 3-STĹPCOVÉHO GRIDU */
.display-posts-listing {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 20px; /* Medzera medzi boxami */
    list-style: none !important; 
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. ŠTÝLOVANIE NÁZVU (ODKAZU) */
.display-posts-listing .listing-item .title {
    font-size: 1.15em;
    font-weight: normal; 
    color: #e82a7f; /* Ružová farba pre nadpis */
    text-decoration: none;
    display: block;
    line-height: 1.5; /* Pre lepšiu čitateľnosť dlhých nadpisov */
}

/* 3. RESPONSIVITA (PRE BEZCHYBNÉ ZOBRAZENIE NA MOBILOCH) */
@media (max-width: 992px) {
    .display-posts-listing {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

@media (max-width: 600px) {
    .display-posts-listing {
        grid-template-columns: 1fr;
    }
}

/* ŠTÝLOVANIE ÚRYVKU AKO TLAČIDLA */
.display-posts-listing .excerpt {
    margin-top: 15px; /* Priestor medzi názvom a tlačidlom */
    text-align: center; /* Vycentruje text "PREJSŤ NA REZERVÁCIU" */
    
    /* Vlastný štýl pre text v úryvku */
    font-size: 0.85em;
    font-weight: bold;
    color: #5b5b5b!important;
    display: inline-block; /* Umožní aplikovať border len pod text */
    padding-top: 10px!important;
	padding-bottom: 5px!important;
    letter-spacing: 0.5px;
}

/* Úprava farby názvu príspevku pri hoveri, aby klikanie na box fungovalo lepšie */
.display-posts-listing .listing-item:hover .title {
    color: #cc256b; /* Jemne tmavšia ružová pri hoveri */
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}