/* =========================================================
   ZARTOM LAYOUT CSS (PHP v2.3.3)
   - Smooth stacking by default (no blank line reservation)
   - Optional equalize mode: equalize="yes" => reserves min lines
   - LIST: responsive image width/height + vertical centering
   - LIST on mobile stays ROW (image left, content right)
   ========================================================= */

/* =========================================================
   ROOT / VARIABLES
   ========================================================= */
.zartom-wrapper{
  width: 100%;
  --card-pad: 16px;
  --stack-gap: 10px;

  /* 0 = smooth (default), 1 = reserve min lines */
  --equalize: 0;

  /* clamp line defaults */
  --title-lines: 6;
  --title-min-lines: 3;
}

/* Tablet overrides for title clamp vars */
@media (max-width: 980px){
  .zartom-wrapper{
    --title-lines: var(--title-lines-tablet, var(--title-lines));
    --title-min-lines: var(--title-min-lines-tablet, var(--title-min-lines));
  }
}

/* Mobile overrides for title clamp vars */
@media (max-width: 640px){
  .zartom-wrapper{
    --title-lines: var(--title-lines-mobile, var(--title-lines));
    --title-min-lines: var(--title-min-lines-mobile, var(--title-min-lines));
  }
}

/* =========================================================
   SECTION HEADER (optional)
   ========================================================= */
.zartom-section-header{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-left: var(--card-pad);
  padding-right: var(--card-pad);
  box-sizing: border-box;
}

.zartom-section-header h2{ margin: 0; }
.zartom-show-more{ text-decoration: none; }

/* =========================================================
   GRID LAYOUT (default)
   ========================================================= */
.zartom-layout{
  display: grid;
  grid-template-columns: repeat(var(--cols-desktop, 4), 1fr);
  gap: 24px;
  align-items: stretch;
}

@media (max-width: 980px){
  .zartom-layout{
    grid-template-columns: repeat(var(--cols-tablet, 2), 1fr);
  }
}

@media (max-width: 640px){
  .zartom-layout{
    grid-template-columns: repeat(var(--cols-mobile, 1), 1fr);
  }
}

/* =========================================================
   CARD
   ========================================================= */
.zartom-card{
  background: #fff;
  border-radius: var(--radius, 14px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* =========================================================
   IMAGE (grid/default)
   ========================================================= */
.zartom-image{
  width: 100%;
  height: var(--image-height, 320px) !important;
  overflow: hidden;
  border-radius: calc(var(--radius, 14px) - 2px);
}

.zartom-image a{
  display: block;
  width: 100%;
  height: 100%;
}

.zartom-image img{
  width: 100% !important;
  height: 100% !important;
  object-fit: var(--image-fit, cover) !important;
  display: block;
}

/* =========================================================
   SMOOTH STACKING (category/title/excerpt/readmore)
   ========================================================= */
.zartom-wrapper .zartom-category,
.zartom-wrapper .zartom-title,
.zartom-wrapper .zartom-excerpt,
.zartom-wrapper .zartom-readmore{
  margin: 0;
}

.zartom-wrapper .zartom-category{ margin-top: var(--stack-gap); }
.zartom-wrapper .zartom-title{ margin-top: var(--stack-gap); }
.zartom-wrapper .zartom-excerpt{ margin-top: var(--stack-gap); }
.zartom-wrapper .zartom-readmore{ margin-top: var(--stack-gap); }

/* =========================================================
   TITLE
   ========================================================= */
.zartom-wrapper .zartom-title{
  font-family: var(--title-font-family, inherit) !important;
  font-size: var(--title-font-size, 1.05rem) !important;
  color: var(--title-color, #000) !important;
  font-weight: var(--title-font-weight, 800) !important;
  line-height: var(--title-line-height, 1.25) !important;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: var(--title-lines, 3);

  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;

  /* smooth default */
  min-height: 0;
}

/* equalize mode (reserve min lines) */
.zartom-wrapper[style*="--equalize:1"] .zartom-title{
  min-height: calc(var(--title-min-lines, 3) * 1lh);
}

.zartom-wrapper .zartom-title a{
  text-decoration: none !important;
  color: inherit !important;
  font: inherit !important;
  line-height: inherit !important;
  display: inline;
}

.zartom-wrapper .zartom-title a:hover{
  text-decoration: underline !important;
}

@media (max-width: 980px){
  .zartom-wrapper .zartom-title{
    font-size: var(--title-font-size-tablet, var(--title-font-size, 1.05rem)) !important;
  }
}
@media (max-width: 640px){
  .zartom-wrapper .zartom-title{
    font-size: var(--title-font-size-mobile, var(--title-font-size, 1.05rem)) !important;
  }
}

/* Optional: keep titles fully visible on mobile (you had this behavior earlier)
   If you prefer clamping on mobile, delete this block. */
@media (max-width: 640px){
  .zartom-wrapper .zartom-title{
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
    min-height: 0 !important;
  }
}

/* =========================================================
   CATEGORY
   ========================================================= */
.zartom-wrapper .zartom-category{
  line-height: var(--category-line-height, 1.05) !important;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: var(--category-lines, 1);

  min-height: 0;
}

.zartom-wrapper[style*="--equalize:1"] .zartom-category{
  min-height: calc(var(--category-min-lines, 1) * 1lh);
}

.zartom-wrapper .zartom-category a{
  font-family: var(--category-font-family, inherit) !important;
  font-size: var(--category-font-size, 0.75rem) !important;
  font-weight: var(--category-font-weight, 800) !important;

  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--category-color, #18750c) !important;
  text-decoration: none !important;

  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

@media (max-width: 980px){
  .zartom-wrapper .zartom-category a{
    font-size: var(--category-font-size-tablet, var(--category-font-size, 0.75rem)) !important;
  }
}
@media (max-width: 640px){
  .zartom-wrapper .zartom-category a{
    font-size: var(--category-font-size-mobile, var(--category-font-size, 0.75rem)) !important;
  }
}

/* =========================================================
   EXCERPT
   ========================================================= */
.zartom-wrapper .zartom-excerpt{
  font-family: var(--excerpt-font-family, inherit) !important;
  font-size: var(--excerpt-font-size, 0.95rem) !important;
  font-weight: var(--excerpt-font-weight, 400) !important;
  line-height: var(--excerpt-line-height, 1.65) !important;
  color: var(--excerpt-color, #222) !important;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: var(--excerpt-lines, 5);

  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;

  min-height: 0;
}

.zartom-wrapper[style*="--equalize:1"] .zartom-excerpt{
  min-height: calc(var(--excerpt-min-lines, 5) * 1lh);
}

@media (max-width: 980px){
  .zartom-wrapper .zartom-excerpt{
    font-size: var(--excerpt-font-size-tablet, var(--excerpt-font-size, 0.95rem)) !important;
  }
}
@media (max-width: 640px){
  .zartom-wrapper .zartom-excerpt{
    font-size: var(--excerpt-font-size-mobile, var(--excerpt-font-size, 0.95rem)) !important;
  }
}

/* =========================================================
   READMORE
   ========================================================= */
.zartom-wrapper .zartom-readmore a{
  font-family: var(--readmore-font-family, inherit) !important;
  font-size: var(--readmore-font-size, 0.95rem) !important;
  font-weight: var(--readmore-font-weight, 800) !important;
  color: var(--readmore-color, #6a00ff) !important;
  text-decoration: none !important;
}

@media (max-width: 980px){
  .zartom-wrapper .zartom-readmore a{
    font-size: var(--readmore-font-size-tablet, var(--readmore-font-size, 0.95rem)) !important;
  }
}
@media (max-width: 640px){
  .zartom-wrapper .zartom-readmore a{
    font-size: var(--readmore-font-size-mobile, var(--readmore-font-size, 0.95rem)) !important;
  }
}

/* =========================================================
   PAGINATION
   ========================================================= */
.zartom-pagination{ margin-top: 18px; }

.zartom-pagination .page-numbers{
  display: inline-block;
  padding: 8px 10px;
  border-radius: 10px;
  text-decoration: none;
}

.zartom-pagination .current{
  font-weight: 900;
}

/* =========================================================
   LIST MODE (image left, content right)
   Requires PHP to wrap non-image blocks in: <div class="zartom-content">...</div>
   ========================================================= */

/* Keep list wrapper as a grid so you can do 2 columns on tablet if you want */
.zartom-layout.zartom-list{
  display: grid !important;
  grid-template-columns: repeat(var(--cols-desktop, 1), 1fr);
  gap: 18px !important;
  align-items: stretch;
}

@media (max-width: 980px){
  .zartom-layout.zartom-list{
    grid-template-columns: repeat(var(--cols-tablet, 1), 1fr);
  }
}

@media (max-width: 640px){
  .zartom-layout.zartom-list{
    grid-template-columns: repeat(var(--cols-mobile, 1), 1fr);
  }
}

/* Each list card becomes a ROW, vertically centered */
.zartom-layout.zartom-list .zartom-card{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;  /* centers image vs content block */
  gap: 16px;
}

/* Image sizing via vars */
.zartom-layout.zartom-list .zartom-image{
  flex: 0 0 var(--list-image-width, 220px);
  width: var(--list-image-width, 220px);
  height: var(--list-image-height, 140px) !important;
}

/* Tablet image vars */
@media (max-width: 980px){
  .zartom-layout.zartom-list .zartom-image{
    flex: 0 0 var(--list-image-width-tablet, var(--list-image-width, 220px));
    width: var(--list-image-width-tablet, var(--list-image-width, 220px));
    height: var(--list-image-height-tablet, var(--list-image-height, 140px)) !important;
  }
}

/* Mobile: KEEP ROW (image left), use mobile image vars */
@media (max-width: 640px){
  .zartom-layout.zartom-list .zartom-card{
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px;
  }

  .zartom-layout.zartom-list .zartom-image{
    flex: 0 0 var(--list-image-width-mobile, 110px);
    width: var(--list-image-width-mobile, 110px);
    height: var(--list-image-height-mobile, 90px) !important;
  }

  /* safety for long text */
  .zartom-layout.zartom-list .zartom-title,
  .zartom-layout.zartom-list .zartom-excerpt{
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* Right-side content column (center as a unit) */
.zartom-layout.zartom-list .zartom-content{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center; /* centers whole text stack vs image */
  gap: var(--stack-gap);
}

/* In list mode, use gap instead of per-element margin-top */
.zartom-layout.zartom-list .zartom-content .zartom-category,
.zartom-layout.zartom-list .zartom-content .zartom-title,
.zartom-layout.zartom-list .zartom-content .zartom-excerpt,
.zartom-layout.zartom-list .zartom-content .zartom-readmore{
  margin-top: 0 !important;
}