/* ════════════════════════════════════════════════════
   VintageCigar Helper — Review Slider Block Styles
   ════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&family=DM+Sans:wght@300;400;500&display=swap');

:root {
  --vch-gold:   #F5A623;
  --vch-dark:   #1a1a1a;
  --vch-mid:    #555;
  --vch-light:  #f4f4f2;
  --vch-white:  #ffffff;
  --vch-radius: 14px;
  --vch-shadow: 0 8px 40px rgba(0,0,0,.13);
}

/* ── Outer wrapper ── */
.vch-slider-outer {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 5px;
  font-family: 'DM Sans', sans-serif;
}

/* ── Track ── */
.vch-slider-track-wrap { overflow: hidden; border-radius: var(--vch-radius); }

.vch-slider-track {
  display: flex;
  transition: transform .45s cubic-bezier(.77,0,.18,1);
  will-change: transform;
}

/* ── Card ── */
.vch-review-card {
  min-width: 100%;
  background: var(--vch-white);
  border-radius: var(--vch-radius);
  display: flex;
  flex-direction: row;
  overflow: hidden;
}


.vch-reviewer-info {
    display: flex;
    align-items: center;
    gap: 8px;
	/*flex-direction: column;*/
    justify-content: center;
}

.vch-reviewer-avatar img {
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

.vch-reviewer-meta strong {
    display: block;
    font-size: 14px;
}

.vch-reviewer-meta small {
    color: #777;
    font-size: 12px;
}

.vch-badge {
    color: #000;
    font-size: 12px;
    margin-left: 4px;
}
/* ── Image grid ── */
.vch-card-images {
  flex: 0 0 50%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 3px;
  background: #ddd;
  max-height: 420px;
}

.vch-attrs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.vch-attr-box {
    background: #f3f3f3;
    padding: 5px 15px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.5;
}

.vch-attr-box strong {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    color: #222;
}

.vch-attr-box span {
    color: #666;
}

/* Mobile */
@media (max-width: 767px) {
    .vch-attrs-grid {
         grid-template-columns: repeat(2, 1fr);
    }
}

.vch-img-cell {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.vch-img-cell img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}

.vch-img-cell:hover img { transform: scale(1.06); }

.vch-more-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.48);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-family: 'Playfair Display', serif;
  font-size: 1.7rem;
  font-weight: 600;
  pointer-events: none;
}

/* ── Card content ── */
.vch-card-content {
  flex: 1;
  padding: 0px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  overflow: hidden;
}

.heading_excerpt {
    margin: 0px;
}
.vch-card-content .posttitle {
	margin: 0;
    font-size: 18px;
    font-weight: 600;
}

/* Stars */
.vch-stars { display: flex; gap: 4px; }
.vch-stars .filled { font-size: 1.3rem; color: var(--vch-gold); }
.vch-stars .empty  { font-size: 1.3rem; color: #ddd; }

/* Excerpt */
.vch-excerpt {
  font-size: .96rem;
  line-height: 1.72;
  color: var(--vch-mid);
  font-weight: 300;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  /*-webkit-box-orient: vertical;*/
  /*overflow: hidden;*/
}

/* Attributes */
.vch-attrs {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  font-size: .8rem;
  color: #666;
}
.vch-attrs li strong { color: var(--vch-dark); }

/* Read more */
.vch-read-more {
  background: none; border: none;
  color: #888;
  font-family: 'DM Sans', sans-serif;
  font-size: .88rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  align-self: flex-start;
  transition: color .2s;
}
.vch-read-more:hover { color: var(--vch-dark); background: white; }

/* Reviewer */
.vch-reviewer 
{ 
	display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 4px;
    /*justify-content: center;*/
    /*flex-direction: column;*/
    text-align: center;
 }

.vch-reviewer-avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  overflow: hidden;
  background: #e0e0e0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; font-weight: 600;
  color: #888;
  flex-shrink: 0;
}
.vch-reviewer-avatar img { width: 100%; height: 100%; object-fit: cover; }

.vch-reviewer-info strong {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  color: var(--vch-dark);
  display: flex; align-items: center; gap: 5px;
}
.vch-badge { color: #1da1f2; font-size: .82rem; }
.vch-reviewer-info small { display: block; color: #999; font-size: .78rem; margin-top: 2px; }

/* ── Nav arrows ── */
.vch-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: var(--vch-white);
  border: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--vch-dark);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s;
  z-index: 10;
}
.vch-nav:hover { background: var(--vch-dark); color: #fff; }
.vch-prev { left: 0; }
.vch-next { right: 0; }

/* ── Dots ── */
.vch-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }

.vch-dots .vch-dot {
  width: 8px; height: 8px !important; border-radius: 50%;
  min-height: 8px !important;
  background: #ccc; border: none; cursor: pointer;
  transition: background .25s, transform .25s;
  padding: 0;
}
.vch-dots .vch-dot.active { background: var(--vch-dark); transform: scale(1.3); }

/* ── Modal overlay ── */
.vch-modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(10,10,10,.78);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(4px);
}
.vch-modal-overlay.open { display: flex; }

/* ── Modal box ── */
.vch-modal {
  background: var(--vch-white);
  border-radius: var(--vch-radius);
  overflow: hidden;
  max-width: 1020px;
  width: 100%;
  display: flex;
  max-height: 90vh;
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
  animation: vchModalIn .3s cubic-bezier(.34,1.56,.64,1);
}

@keyframes vchModalIn {
  from { opacity:0; transform: scale(.93) translateY(20px); }
  to   { opacity:1; transform: scale(1) translateY(0); }
}

/* Image side */
.vch-modal-image-side {
  flex: 0 0 55%;
  position: relative;
  background: #111;
  display: flex; align-items: stretch;
  min-height: 380px;
}

.vch-modal-img-viewport {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.vch-modal-img-track {
  display: flex;
  height: 100%;
  transition: transform .4s cubic-bezier(.77,0,.18,1);
}

.vch-modal-img-slide {
  min-width: 100%;
  display: flex; align-items: center; justify-content: center;
}

.vch-modal-img-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  max-height: 90vh;
}

.vch-modal-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.3);
  color: #fff;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: .95rem;
  transition: background .2s;
  z-index: 5;
  backdrop-filter: blur(6px);
}
.vch-modal-arrow:hover { background: rgba(255,255,255,.32); }
.vch-mprev { left: 14px; }
.vch-mnext { right: 14px; }

.vch-modal-img-dots {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px;
}
.vch-modal-img-dots .vch-mdot {
  width: 6px; height: 6px !important; border-radius: 50%; min-height: 6px !important;
  background: rgba(255,255,255,.4); border: none; cursor: pointer;
  padding: 0;
  transition: background .2s;
}
.vch-modal-img-dots .vch-mdot.active { background: #fff; }

/* Content side */
.vch-modal-content-side {
  flex: 1;
  padding: 32px 28px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}

.vch-modal-close {
  position: absolute; top: 14px; right: 16px;
  background: none; border: none;
  font-size: 1.25rem; cursor: pointer; color: #aaa;
  transition: color .2s; line-height: 1;
}
.vch-modal-close:hover { color: var(--vch-dark); }

.vch-modal-reviewer { display: flex; align-items: center; gap: 12px; }

.vch-modal-avatar {
  width: 44px; height: 44px;
  border-radius: 50%; overflow: hidden;
  background: #e0e0e0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 600; color: #888;
  flex-shrink: 0;
}
.vch-modal-avatar img { width: 100%; height: 100%; object-fit: cover; }

.vch-modal-reviewer-info strong {
  font-family: 'Playfair Display', serif;
  font-size: .98rem; color: var(--vch-dark);
  display: flex; align-items: center; gap: 5px;
}
.vch-modal-reviewer-info small { color: #999; font-size: .78rem; display: block; margin-top: 2px; }

.vch-modal-stars { display: flex; gap: 3px; }
.vch-modal-stars .filled { font-size: 1.1rem; color: var(--vch-gold); }
.vch-modal-stars .empty  { font-size: 1.1rem; color: #ddd; }

.vch-modal-thoughts {
  font-size: .9rem;
  line-height: 1.78;
  color: var(--vch-mid);
  font-weight: 300;
}
.vch-modal-thoughts p { margin-bottom: .8em; }

.vch-modal-attrs {
  list-style: none;
  padding: 10px 14px;
  margin: 0;
  background: var(--vch-light);
  border-radius: 8px;
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  font-size: .82rem;
  color: #555;
}
.vch-modal-attrs li strong { color: var(--vch-dark); }

.vch-modal-link {
  display: inline-block;
  margin-top: 6px;
  font-size: .82rem;
  color: var(--vch-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── No posts message ── */
.vch-no-posts { padding: 2rem; text-align: center; color: #888; font-family: 'DM Sans', sans-serif; }

/* ════ RESPONSIVE ════ */
@media (max-width: 820px) {
  .vch-review-card { flex-direction: column; }
  .vch-card-images { flex: none; max-height: 260px; }
  .vch-card-content { padding: 24px 20px; }

  .vch-modal { flex-direction: column; max-height: 95vh; }
  .vch-modal-image-side { flex: none; min-height: 220px; max-height: 44vw; }
  .vch-modal-content-side { padding: 20px 18px; }
}

@media (max-width: 500px) {
  .vch-card-content { padding: 18px 16px; }
  .vch-excerpt { font-size: .85rem; }
  .vch-modal-content-side { padding: 16px 14px; }
  .vch-modal-thoughts { font-size: .83rem; }
}