/*
Theme Name: Buscom Child
Theme URI: http://thememine.net/buscom/
Template: buscom
Author: DroitThemes
Author URI: https://themeforest.net/user/validthemes/portfolio
Description: Buscom is a Bootstrap Based WordPress Theme.
Version: 1.2.1
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: buscom-child
*/

/* ===================================================================
   BLOG GRID — 3 kolumny na listach wpisów
   Dotyczy:   body.blog           → index.php (strona bloga)
              body.category       → archiwum kategorii
              body.tag            → archiwum tagów
              body.search-results → wyniki wyszukiwania
   Wykluczone automatycznie przez selektor body.*:
     - body.single       (single.php ma .blog-area.single.full-blog)
     - body.post-type-archive-buscom-* (CPT archives)
     - strony VC, widgety, sekcje Latest Posts
       (nie renderują .blog-area.full-blog)
   =================================================================== */

/* 1. Grid container ------------------------------------------------- */
.blog .blog-area.full-blog .blog-item-box,
.category .blog-area.full-blog .blog-item-box,
.tag .blog-area.full-blog .blog-item-box,
.search-results .blog-area.full-blog .blog-item-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* 2. Komórka siatki — flex column + transition hover ---------------- */
.blog .blog-area.full-blog .blog-item-box .single-item,
.category .blog-area.full-blog .blog-item-box .single-item,
.tag .blog-area.full-blog .blog-item-box .single-item,
.search-results .blog-area.full-blog .blog-item-box .single-item {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
}

/* 2a. Hover: uniesienie karty */
.blog .blog-area.full-blog .blog-item-box .single-item:hover,
.category .blog-area.full-blog .blog-item-box .single-item:hover,
.tag .blog-area.full-blog .blog-item-box .single-item:hover,
.search-results .blog-area.full-blog .blog-item-box .single-item:hover {
  transform: translateY(-5px);
}

/* 3. Karta (.item) -------------------------------------------------- */
/* overflow: hidden klipuje obraz do border-radius bez dodatkowych reguł na .thumb */
.blog .blog-area.full-blog .blog-item-box .single-item .item,
.category .blog-area.full-blog .blog-item-box .single-item .item,
.tag .blog-area.full-blog .blog-item-box .single-item .item,
.search-results .blog-area.full-blog .blog-item-box .single-item .item {
  flex: 1;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

/* 3a. Hover: pogłębienie cienia */
.blog .blog-area.full-blog .blog-item-box .single-item:hover .item,
.category .blog-area.full-blog .blog-item-box .single-item:hover .item,
.tag .blog-area.full-blog .blog-item-box .single-item:hover .item,
.search-results .blog-area.full-blog .blog-item-box .single-item:hover .item {
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.13);
}

/* 4. Zdjęcie: edge-to-edge ----------------------------------------- */
/* padding: 0 usuwa poprzedni padding: 15px (parent theme i wcześniejszy child CSS)
   flex-shrink: 0 zapobiega ściskaniu .thumb gdy .info rośnie */
.blog .blog-area.full-blog .blog-item-box .single-item .item .thumb,
.category .blog-area.full-blog .blog-item-box .single-item .item .thumb,
.tag .blog-area.full-blog .blog-item-box .single-item .item .thumb,
.search-results .blog-area.full-blog .blog-item-box .single-item .item .thumb {
  padding: 0;
  flex-shrink: 0;
}

/* 4a. Kontener proporcji 16:9 — stała wysokość niezależna od rozmiaru oryginału */
.blog .blog-area.full-blog .blog-item-box .single-item .item .thumb a,
.category .blog-area.full-blog .blog-item-box .single-item .item .thumb a,
.tag .blog-area.full-blog .blog-item-box .single-item .item .thumb a,
.search-results
  .blog-area.full-blog
  .blog-item-box
  .single-item
  .item
  .thumb
  a {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

/* 5. Zdjęcie: kadrowanie + animacja zoom przy hover karty ----------- */
/* border-radius: 0 nadpisuje parent theme: .thumb img { border-radius: 5px }
   Rogi obsługuje .item { border-radius: 8px; overflow: hidden } */
.blog .blog-area.full-blog .blog-item-box .single-item .item .thumb img,
.category .blog-area.full-blog .blog-item-box .single-item .item .thumb img,
.tag .blog-area.full-blog .blog-item-box .single-item .item .thumb img,
.search-results
  .blog-area.full-blog
  .blog-item-box
  .single-item
  .item
  .thumb
  img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  display: block;
  transition: transform 0.45s ease;
}

/* 5a. Zoom zdjęcia przy hover */
.blog .blog-area.full-blog .blog-item-box .single-item:hover .item .thumb img,
.category
  .blog-area.full-blog
  .blog-item-box
  .single-item:hover
  .item
  .thumb
  img,
.tag .blog-area.full-blog .blog-item-box .single-item:hover .item .thumb img,
.search-results
  .blog-area.full-blog
  .blog-item-box
  .single-item:hover
  .item
  .thumb
  img {
  transform: scale(1.06);
}

/* 6. Treść karty (.info) ------------------------------------------- */
/* padding: 24px (było 30px) — lepsze proporcje w kolumnie ~250-300px
   parent theme .full-blog nadpisuje padding: 0; padding-top: 30px → przywracamy */
.blog .blog-area.full-blog .blog-item-box .single-item .item .info,
.category .blog-area.full-blog .blog-item-box .single-item .item .info,
.tag .blog-area.full-blog .blog-item-box .single-item .item .info,
.search-results .blog-area.full-blog .blog-item-box .single-item .item .info {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 24px;
  overflow: hidden;
}

/* 7. Tytuł (h3): max 2 linie, wyrównana min-wysokość --------------- */
/* Obliczenia: 27px (font-size) × 1.4 (line-height) × 2 linie = 75.6px = 2.8em
   margin-top: 0 nadpisuje Bootstrap: h3 { margin-top: 20px }
   Efekt: 1-liniowe tytuły zajmują tyle samo miejsca co 2-liniowe */
.blog .blog-area.full-blog .blog-item-box .single-item .item .info h3,
.category .blog-area.full-blog .blog-item-box .single-item .item .info h3,
.tag .blog-area.full-blog .blog-item-box .single-item .item .info h3,
.search-results
  .blog-area.full-blog
  .blog-item-box
  .single-item
  .item
  .info
  h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
  margin-top: 0;
  margin-bottom: 12px;
}

/* 8. Excerpt (p): max 3 linie, wyrównana min-wysokość -------------- */
/* Obliczenia: 16px (body font-size) × 1.8 (line-height) × 3 linie = 86.4px = 5.4em
   margin-bottom: 24px (było 15px) → wyraźniejszy odstęp przed przyciskiem */
/*.blog .blog-area.full-blog .blog-item-box .single-item .item .info p,
.category .blog-area.full-blog .blog-item-box .single-item .item .info p,
.tag .blog-area.full-blog .blog-item-box .single-item .item .info p,
.search-results .blog-area.full-blog .blog-item-box .single-item .item .info p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 5.4em;
    margin-bottom: 24px;
}*/

/* 9. Przycisk Read More: zawsze przy dolnej krawędzi karty --------- */
.blog .blog-area.full-blog .blog-item-box .single-item .item .info > a.btn,
.category .blog-area.full-blog .blog-item-box .single-item .item .info > a.btn,
.tag .blog-area.full-blog .blog-item-box .single-item .item .info > a.btn,
.search-results
  .blog-area.full-blog
  .blog-item-box
  .single-item
  .item
  .info
  > a.btn {
  margin-top: auto;
  align-self: flex-start;
}

/* 10. Dark mode ----------------------------------------------------- */
/* Nasze reguły mają wyższą specyficzność niż parent theme (>6 klas vs 4 klasy),
   dlatego jawnie przywracamy ciemne tła z parent theme:
   style.css:9433-9443 i style.css:9942 */
body.dark-layout.blog .blog-area.full-blog .blog-item-box .single-item .item,
body.dark-layout.category
  .blog-area.full-blog
  .blog-item-box
  .single-item
  .item,
body.dark-layout.tag .blog-area.full-blog .blog-item-box .single-item .item,
body.dark-layout.search-results
  .blog-area.full-blog
  .blog-item-box
  .single-item
  .item {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inherit;
}

body.dark-layout.blog
  .blog-area.full-blog
  .blog-item-box
  .single-item
  .item
  .info,
body.dark-layout.category
  .blog-area.full-blog
  .blog-item-box
  .single-item
  .item
  .info,
body.dark-layout.tag
  .blog-area.full-blog
  .blog-item-box
  .single-item
  .item
  .info,
body.dark-layout.search-results
  .blog-area.full-blog
  .blog-item-box
  .single-item
  .item
  .info {
  background: rgba(255, 255, 255, 0.01);
}

/* === Responsive ==================================================== */

/* Tablet 768px–991px: 2 kolumny */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .blog .blog-area.full-blog .blog-item-box,
  .category .blog-area.full-blog .blog-item-box,
  .tag .blog-area.full-blog .blog-item-box,
  .search-results .blog-area.full-blog .blog-item-box {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

/* Mobile <768px: 1 kolumna, 4 linie excerpta */
@media only screen and (max-width: 767px) {
  .blog .blog-area.full-blog .blog-item-box,
  .category .blog-area.full-blog .blog-item-box,
  .tag .blog-area.full-blog .blog-item-box,
  .search-results .blog-area.full-blog .blog-item-box {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .blog .blog-area.full-blog .blog-item-box .single-item .item .info p,
  .category .blog-area.full-blog .blog-item-box .single-item .item .info p,
  .tag .blog-area.full-blog .blog-item-box .single-item .item .info p,
  .search-results
    .blog-area.full-blog
    .blog-item-box
    .single-item
    .item
    .info
    p {
    -webkit-line-clamp: 4;
    min-height: 7.2em; /* 4 × 1.8em */
  }

  .blog .blog-area.full-blog .blog-item-box .single-item:hover,
  .category .blog-area.full-blog .blog-item-box .single-item:hover,
  .tag .blog-area.full-blog .blog-item-box .single-item:hover,
  .search-results .blog-area.full-blog .blog-item-box .single-item:hover {
    transform: none; /* wyłącz translateY na dotyk */
  }
}