/* ==========================================================================
   Mamma Pret a Porter - K2 Category View Style (Refined & Enhanced)
   - Preserves original brand fonts: "Amatic SC" & "Source Sans Pro"
   - Category Header (catInfo): Description and Photo are equal in size & height
   - Category Articles (itemContainer): Photo as large as the space occupied by text (50/50 width, 100% height)
   - Complete text visibility (no ellipsis truncation, multi-line wrapping for titles & intro)
   - Complete photo visibility (clean cover alignment, rounded borders, zero distortion)
   - Refined brand aesthetic: soft rounded corners (14px), harmonious teal (#6db8b1) borders
   - Responsive: perfectly responsive on tablets and mobile screens
   ========================================================================== */

/* 1. Category Main Title */
#k2Container div.itemListCategory > h1,
#k2Container div.itemListCategory h1.catTitle,
#k2Container .category-main-title {
  margin: 0 0 20px 0 !important;
  color: #58aba2 !important;
  font-size: 52px !important;
  line-height: 1.15 !important;
  letter-spacing: 1px !important;
  padding: 0 0 12px 0 !important;
  font-family: "Amatic SC", cursive !important;
  font-weight: 700 !important;
  background: url("../images/themes/mammapretaporter/punti3.png") repeat-x left bottom transparent !important;
}

#k2Container .category-badge-pill {
  display: inline-block !important;
  font-family: "Amatic SC", cursive !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #be5387 !important;
  margin-bottom: 5px !important;
  letter-spacing: 1px !important;
}

#k2Container .category-items-count {
  font-family: "Amatic SC", cursive !important;
  font-size: 30px !important;
  color: #79c1b9 !important;
  font-weight: normal !important;
  margin-left: 10px !important;
}

/* 2. Category Header Info (Description & Category Image: Equal Size & Height) */
#k2Container div.catInfo {
  padding: 10px 0 25px 0 !important;
  margin-bottom: 25px !important;
}

#k2Container div.catInfo > .row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
}

@media (min-width: 768px) {
  /* When image exists: 50/50 columns */
  #k2Container div.catInfo > .row > div.col-sm-6 {
    display: flex !important;
    flex-direction: column !important;
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
    float: none !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
  }

  /* When no image exists: description takes full 100% width */
  #k2Container div.catInfo > .row > div.col-sm-12,
  #k2Container div.catInfo > .row > div:only-child {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    float: none !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
  }
}

#k2Container div.catInfo .descrizione {
  padding: 24px 28px !important;
  background-color: #b6dbd8 !important;
  border: 2px solid #6db8b1 !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 18px rgba(109, 184, 177, 0.15) !important;
  font-family: 'Source Sans Pro', sans-serif !important;
  font-size: 18px !important;
  line-height: 1.65 !important;
  color: #383838 !important;
  height: 100% !important;
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

#k2Container div.catInfo .descrizione p {
  margin-bottom: 8px !important;
  font-family: 'Source Sans Pro', sans-serif !important;
  font-size: 18px !important;
  line-height: 1.65 !important;
  color: #383838 !important;
}

#k2Container div.catInfo .descrizione p:last-child {
  margin-bottom: 0 !important;
}

#k2Container div.catInfo .descrizione strong {
  font-family: 'Source Sans Pro', sans-serif !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  color: #2b5752 !important;
  display: block !important;
  margin-bottom: 6px !important;
}

#k2Container div.catInfo .immagine {
  height: 100% !important;
  width: 100% !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
}

#k2Container div.catInfo .immagine img {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  border: 2px solid #6db8b1 !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 18px rgba(109, 184, 177, 0.15) !important;
  display: block !important;
  box-sizing: border-box !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* 3. Items List Containers */
#k2Container div.itemListCategory {
  padding: 0 !important;
  border: none !important;
  margin: 4px 0 !important;
  background: transparent !important;
}

#k2Container div.itemContainer {
  margin-bottom: 32px !important;
}

#k2Container div.catItemView {
  padding: 0 !important;
  margin: 0 !important;
}

#k2Container div.catItemBody {
  margin: 0 !important;
  padding: 0 !important;
}

/* 4. Articles Flex Row: Equal Height Columns for Image & Text */
#k2Container div.catItemBody > .row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
}

@media (min-width: 768px) {
  /* When image exists: both columns occupy exactly 50% width */
  #k2Container div.catItemBody .blocco-immagine,
  #k2Container div.catItemBody .blocco-testo.col-sm-6 {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
    display: flex !important;
    flex-direction: column !important;
    float: none !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
  }

  /* When NO image exists: text occupies 100% full width */
  #k2Container div.catItemBody .blocco-testo.col-sm-12,
  #k2Container div.catItemBody .blocco-testo:only-child {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    display: block !important;
    float: none !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
  }

  /* Pari: Photo Left (order 1), Text Right (order 2) */
  #k2Container div.itemContainer.pari .blocco-immagine {
    order: 1 !important;
  }
  #k2Container div.itemContainer.pari .blocco-testo {
    order: 2 !important;
  }

  /* Dispari: Text Left (order 1), Photo Right (order 2) */
  #k2Container div.itemContainer.dispari .blocco-immagine {
    order: 2 !important;
  }
  #k2Container div.itemContainer.dispari .blocco-testo {
    order: 1 !important;
  }
}

/* 5. Photo Card: Sized to match the full space of the text card */
#k2Container div.catItemBody .catItemImageBlock {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  height: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

#k2Container div.catItemBody .catItemImage {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  height: 100% !important;
  width: 100% !important;
  margin: 0 !important;
}

#k2Container div.catItemBody .catItemImage a {
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  flex: 1 1 auto !important;
  height: 100% !important;
  min-height: 100% !important;
  width: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  border: 2px solid #6db8b1 !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(109, 184, 177, 0.12) !important;
  background-color: #ffffff !important;
  box-sizing: border-box !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

#k2Container div.catItemBody .catItemImage a img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  border: none !important;
  border-radius: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: transform 0.4s ease !important;
}

#k2Container div.catItemView:hover .catItemImage a {
  border-color: #4fa99f !important;
  box-shadow: 0 8px 24px rgba(109, 184, 177, 0.25) !important;
}

#k2Container div.catItemView:hover .catItemImage a img {
  transform: scale(1.03) !important;
}

/* 6. Text Card: Matches height and width of photo card */
#k2Container div.catItemBody .blocco-testo {
  display: flex !important;
  flex-direction: column !important;
}

#k2Container div.item-wrapper {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  box-sizing: border-box !important;
  padding: 24px 26px !important;
  position: relative !important;
  border: 2px solid #6db8b1 !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(109, 184, 177, 0.12) !important;
  background-color: #ffffff !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

#k2Container div.catItemView:hover div.item-wrapper {
  border-color: #4fa99f !important;
  box-shadow: 0 8px 24px rgba(109, 184, 177, 0.25) !important;
}

/* Title: Full Text, Original Brand Font "Amatic SC" */
#k2Container div.item-wrapper .catItemHeader h3.catItemTitle {
  margin: 0 0 8px 0 !important;
  font-size: 34px !important;
  line-height: 1.15 !important;
  font-family: "Amatic SC", cursive !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  display: block !important;
  overflow: visible !important;
  white-space: normal !important; /* Testo visibile completamente su più righe */
  text-overflow: clip !important;
  word-wrap: break-word !important;
}

#k2Container div.item-wrapper .catItemHeader h3.catItemTitle a {
  display: inline !important;
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: clip !important;
  color: #383838 !important;
  text-decoration: none !important;
  font-family: "Amatic SC", cursive !important;
  font-weight: 700 !important;
  transition: color 0.2s ease !important;
}

#k2Container div.item-wrapper .catItemHeader h3.catItemTitle a:hover,
#k2Container div.item-wrapper .catItemHeader h3.catItemTitle a:focus {
  color: #4fa99f !important;
}

/* Date: Clean and matching brand font & palette */
#k2Container div.item-wrapper .catItemHeader .catItemDateCreated {
  color: #5aa59e !important;
  display: inline-block !important;
  font-family: "Amatic SC", cursive !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  margin: 0 0 12px 0 !important;
  text-transform: uppercase !important;
}

/* Introtext: Full Text, Original Brand Font 'Source Sans Pro' */
#k2Container div.item-wrapper .catItemIntroText {
  font-family: 'Source Sans Pro', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #4a4a4a !important;
  margin-bottom: 16px !important;
  min-height: auto !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important; /* Testo completo mai troncato */
  display: block !important;
}

/* Read More Button: Refined original style, anchored at the bottom */
#k2Container div.item-wrapper .catItemReadMore,
#k2Container div.itemContainer .blocco-testo .catItemReadMore {
  position: static !important;
  margin-top: auto !important; /* Sempre allineato in fondo alla card */
  padding-top: 12px !important;
  text-align: right !important;
  display: block !important;
}

#k2Container div.item-wrapper .catItemReadMore a.k2ReadMore,
#k2Container div.itemContainer .blocco-testo .catItemReadMore a.k2ReadMore {
  display: inline-block !important;
  color: #383838 !important;
  font-family: "Amatic SC", cursive !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  padding: 4px 22px !important;
  position: relative !important;
  background-color: #c3e2df !important;
  border: 1px solid #6db8b1 !important;
  border-radius: 20px !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(109, 184, 177, 0.15) !important;
  transition: all 0.25s ease !important;
}

#k2Container div.itemContainer .blocco-testo .catItemReadMore a.k2ReadMore::before {
  display: none !important;
  content: none !important;
}

#k2Container div.itemContainer .blocco-testo .catItemReadMore a.k2ReadMore::after {
  content: " \2192" !important;
  font-size: 22px !important;
  margin-left: 4px !important;
  transition: transform 0.2s ease !important;
}

#k2Container div.itemContainer .blocco-testo .catItemReadMore a.k2ReadMore:hover {
  background-color: #58aba2 !important;
  border-color: #58aba2 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(109, 184, 177, 0.35) !important;
}

/* 7. Pagination: Refined with Original Brand Palette & Font */
#k2Container div.k2Pagination {
  padding: 10px 0 !important;
  margin: 30px 0 10px 0 !important;
  text-align: center !important;
  font-family: "Amatic SC", cursive !important;
  font-size: 22px !important;
  color: #558d86 !important;
}

#k2Container div.k2Pagination ul.pagination {
  float: none !important;
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 10px auto !important;
  background-color: #b2d9d6 !important;
  border: 1px solid #6db8b1 !important;
  border-radius: 25px !important;
  padding: 4px 15px !important;
  box-shadow: 0 3px 12px rgba(109, 184, 177, 0.15) !important;
}

#k2Container div.k2Pagination ul.pagination > li {
  padding: 4px 8px !important;
  display: inline-block !important;
  font-family: "Amatic SC", cursive !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  float: none !important;
}

#k2Container div.k2Pagination ul.pagination > li > a,
#k2Container div.k2Pagination ul.pagination > li > span {
  color: #383838 !important;
  font-family: "Amatic SC", cursive !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  border: none !important;
  background-color: transparent !important;
}

#k2Container div.k2Pagination ul.pagination > li > a:hover {
  background-color: rgba(255, 255, 255, 0.5) !important;
  color: #245752 !important;
}

#k2Container div.k2Pagination ul.pagination > li.active > a,
#k2Container div.k2Pagination ul.pagination > li.active > span {
  background-color: #ffffff !important;
  color: #245752 !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}

/* 8. Mobile & Tablet Responsiveness */
@media (max-width: 767px) {
  #k2Container div.catInfo > .row,
  #k2Container div.catItemBody > .row {
    flex-direction: column !important;
  }

  #k2Container div.catInfo > .row > div {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #k2Container div.catInfo .descrizione {
    margin-bottom: 14px !important;
  }

  #k2Container div.catInfo .immagine img {
    height: 240px !important;
  }

  #k2Container div.catItemBody .blocco-immagine {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    order: 1 !important;
    float: none !important;
    margin-bottom: 14px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #k2Container div.catItemBody .blocco-testo {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    order: 2 !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #k2Container div.catItemBody .catItemImage a {
    height: 240px !important;
    min-height: 240px !important;
  }

  #k2Container div.item-wrapper {
    padding: 18px 20px !important;
  }
}