/* Fail: final_grid.css (LÕPLIK VERSIOON) */

.card-grid-masonry {
    display: grid;
    /* Nüüd see töötab, sest sisu ei takista seda enam! */
    /* Pane siia soovitud minimaalne laius, nt 120px on hea algus */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.card-item {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    color: #333;
    break-inside: avoid;
    min-width: 0;
}

.card-item img {
    width: 100%;
    height: auto;
}

.card-title-container {
    padding: 15px;
    text-align: center;
    border-top: 1px solid #f0f0f0;
}

/* See on parandatud reegel */
.card-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    overflow-wrap: break-word; /* Hea on alles jätta */
    
    /* === SEE ON UUS JA OLULINE RIDA === */
    /* See käsib brauseril murda sõna suvalisest kohast, et see mahuks ära. */
}
/* See reegel paneb laia kaardi võtma enda alla kahe veeru laiuse */
.card-item.wide {
    grid-column: span 2;
}

/* See reegel paneb portree-orientatsioonis kaardi võtma enda alla kahe rea kõrguse */
.card-item.portrait {
    grid-row: span 2;
}

/* See tagab, et pilt venitatakse ilusti, et täita kogu kaardi ala */
.card-item.portrait .card-image-wrapper,
.card-item.wide .card-image-wrapper {
    height: 100%;
    flex-grow: 1;
}
.card-item.portrait .card-image-wrapper img,
.card-item.wide .card-image-wrapper img {
    height: 100%;
    object-fit: cover; /* See väldib pildi venitamist ja kärbib seda ilusti */
}
#scrollToTopBtn {
  display: none; /* Alguses peidus */
  position: fixed; /* Jääb kerimisel paigale */
  bottom: 20px; /* Kaugus alumisest servast */
  right: 30px; /* Kaugus paremast servast */
  z-index: 99; /* Jääb teiste elementide peale */
  border: none;
  outline: none;
  background-color: #555; /* Muuda see oma teiste nuppude värviks! */
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 50%; /* Teeb nupu ümmarguseks */
  font-size: 18px;
  line-height: 1; /* Aitab noolt paremini tsentreerida */
  width: 50px;
  height: 50px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: background-color 0.3s, opacity 0.3s;
}

#scrollToTopBtn:hover {
  background-color:  #e7c4a4; /* Värv, kui hiirega peale minna */
}
/* === KATEGOORIATE NAVIGEERIMISE STIILID === */

/* Konteiner, mis hoiab nuppe */
.category-nav {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 40px; /* Või kui palju ruumi soovid enne kaartide ruudustikku */
}

/* Nuppude nimekiri */
.category-nav ul {
    display: flex;
    flex-wrap: wrap; /* Lubab nuppudel minna uuele reale */
    justify-content: center; /* Joondab nupud horisontaalselt keskele */
    list-style-type: none;
    padding: 0;
    margin: 0;
    gap: 10px; /* Automaatne vahe nuppude vahel */
}

/* Üldine nupu stiil */
.category-nav a {
    display: block;
    padding: 10px 18px;
    background-color:  #e7c4a4; /* Tumehall taust */
    color: #fff;
    text-decoration: none;
    border-radius: 6px; /* Ümarad nurgad */
    font-size: 15px;
    font-family: 'Roboto', sans-serif; /* Või mis iganes fonti eelistad */
    font-weight: 500;
    transition: background-color 0.2s ease, transform 0.2s ease;
    white-space: nowrap; /* Hoiab teksti ühel real */
}

/* Nupu stiil hiirega peale minnes */
.category-nav a:hover {
    background-color: #555;
    transform: translateY(-2px); /* Kerge tõsteefekt */
}

/* AKTIIVSE NUPU STIIL (roosa) */
.category-nav a.active {
    background-color:  #c2966c; /* Pildile sarnane roosakas/punane toon */
    color: #fff;
    pointer-events: none; /* Teeb aktiivse lingi mitte-klikitavaks, sest oled juba sel lehel */
}

@media (max-width: 768px) {

    /* 1. Vähendame nuppude vahelist ruumi (gap) */
    .category-nav ul {
        gap: 8px; /* Vähendame 10px pealt 8px peale */
    }

    /* 2. Vähendame nuppude suurust ja teksti */
    .category-nav a {
        padding: 8px 12px; /* Desktopis oli 10px 18px. Vähendame oluliselt. */
        font-size: 14px;   /* Desktopis oli 15px. Natuke väiksem tekst. */
        border-radius: 4px; /* Väiksemad nupud näevad paremad välja väiksema ümardusega */
    }
}

/* === Eriti väikeste ekraanide jaoks (nt vanemad/väiksemad telefonid) === */
@media (max-width: 480px) {
    
    .category-nav ul {
        gap: 6px; /* Veel väiksem vahe */
    }

    .category-nav a {
        padding: 6px 10px; /* Veel väiksem siseruum */
        font-size: 13px;   /* Veel väiksem tekst */
    }
}
 @media (max-width: 768px) {
           
            .card-grid-masonry { gap: 15px; grid-template-columns: repeat(2, 1fr)!important; }
        }