/* ==========================================================================
   ELEMENTOR WIDGET STYLES — bvp- prefix
   Used by BV Portfolio Panel, Description, Testimonial, Navigation widgets.
   These replace the bvs- legacy renderer when the widget-based approach is on.
   ========================================================================== */

/* ── BV Portfolio Panel ──────────────────────────────────────────────────── */
.bvp-panel-wrap { width: 100%; }

.bvp-two-col {
  display:     grid;
  gap:         40px;
  align-items: stretch;
}

/* Image column */
.bvp-col-image { display: flex; flex-direction: column; gap: 20px; }

.bvp-featured-image { width: 100%; }

.bvp-feat-img {
  width:         100%;
  height:        auto;
  display:       block;
  border-radius: 8px;
}

/* Gallery strip */
.bvp-gallery-strip { width: 100%; }

.bvp-gallery-label {
  font-family:    var(--bvs-sans, "Jost", system-ui, sans-serif);
  font-size:      11px;
  font-weight:    600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          rgba(0,0,0,.4);
  margin-bottom:  10px;
}

.bvp-gallery-thumbs {
  display: grid;
  gap:     8px;
}

.bvp-gallery-cols-3 { grid-template-columns: repeat(3, 1fr); }
.bvp-gallery-cols-4 { grid-template-columns: repeat(4, 1fr); }
.bvp-gallery-cols-5 { grid-template-columns: repeat(5, 1fr); }
.bvp-gallery-cols-6 { grid-template-columns: repeat(6, 1fr); }

.bvp-gallery-thumb { display: block; overflow: hidden; border-radius: 4px; }
.bvp-gallery-thumb img { width: 100%; height: auto; display: block; aspect-ratio: 1; object-fit: cover; transition: transform 0.28s ease; }
.bvp-gallery-thumb:hover img { transform: scale(1.05); }

/* Meta column */
.bvp-col-meta { display: flex; flex-direction: column; gap: 16px; }

.bvp-meta-card {
  background:    #26262D;
  border:        1px solid rgba(220,176,100,.25);
  border-radius: 8px;
  padding:       32px;
}

.bvp-meta-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }

.bvp-cat-pill {
  font-family:    var(--bvs-sans, "Jost", system-ui, sans-serif);
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color:          #DCB064;
  background:     rgba(220,176,100,.15);
  padding:        4px 10px;
  border-radius:  3px;
}

.bvp-meta-row {
  display:        flex;
  flex-direction: column;
  gap:            4px;
  padding:        14px 0;
  border-bottom:  1px solid rgba(220,176,100,.12);
}

.bvp-meta-row:last-of-type { border-bottom: none; }

.bvp-meta-label {
  font-family:    var(--bvs-sans, "Jost", system-ui, sans-serif);
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          #DCB064;
}

.bvp-meta-value {
  font-family: var(--bvs-sans, "Jost", system-ui, sans-serif);
  font-size:   15px;
  color:       #ffffff;
  line-height: 1.5;
}

.bvp-meta-cta { margin-top: 24px; }

.bvp-btn {
  display:         block;
  width:           100%;
  text-align:      center;
  font-family:     var(--bvs-sans, "Jost", system-ui, sans-serif);
  font-size:       11px;
  font-weight:     700;
  letter-spacing:  2px;
  text-transform:  uppercase;
  color:           #DCB064;
  border:          1.5px solid #DCB064;
  padding:         14px 0;
  text-decoration: none;
  border-radius:   3px;
  transition:      background-color 0.28s ease, color 0.28s ease;
}

.bvp-btn:hover { background-color: #DCB064; color: #26262D; }

.bvp-back-link {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  font-family:     var(--bvs-sans, "Jost", system-ui, sans-serif);
  font-size:       12px;
  font-weight:     600;
  letter-spacing:  1px;
  text-transform:  uppercase;
  color:           #DCB064;
  text-decoration: none;
  transition:      color 0.28s ease;
}

.bvp-back-link:hover { color: #ffffff; }

/* ── BV Portfolio Description ────────────────────────────────────────────── */
.bvpd-wrap { width: 100%; }
.bvpd-inner { max-width: 780px; margin: 0 auto; }

.bvpd-label {
  display:        block;
  font-family:    var(--bvs-sans, "Jost", system-ui, sans-serif);
  font-size:      11px;
  font-weight:    600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color:          #DCB064;
  margin-bottom:  16px;
}

.bvpd-body { font-family: var(--bvs-sans, "Jost", system-ui, sans-serif); line-height: 1.75; }
.bvpd-body a { color: #DCB064; }
.bvpd-body h2, .bvpd-body h3, .bvpd-body h4 { margin-top: 1.5em; margin-bottom: .5em; }
.bvpd-body p { margin-bottom: 1em; }
.bvpd-body p:last-child { margin-bottom: 0; }

/* ── BV Portfolio Testimonial ────────────────────────────────────────────── */
.bvpt-wrap { background: #26262D; padding: 64px 24px; width: 100%; }
.bvpt-inner { max-width: 780px; margin: 0 auto; }

.bvpt-label {
  display:        block;
  font-family:    var(--bvs-sans, "Jost", system-ui, sans-serif);
  font-size:      11px;
  font-weight:    600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color:          #DCB064;
  margin-bottom:  24px;
  text-align:     center;
}

.bvpt-body { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; }

.bvpt-quote-mark {
  font-family:   var(--bvs-serif, "Playfair Display", Georgia, serif);
  font-size:     72px;
  color:         #DCB064;
  line-height:   .7;
  display:       block;
  margin-bottom: -12px;
}

.bvpt-quote-text {
  font-family: var(--bvs-serif, "Playfair Display", Georgia, serif);
  font-size:   clamp(18px, 2.5vw, 24px);
  font-style:  italic;
  font-weight: 400;
  color:       #ffffff;
  line-height: 1.55;
  margin:      0;
  max-width:   680px;
}

.bvpt-attribution {
  display:     flex;
  align-items: center;
  gap:         14px;
  margin-top:  8px;
}

.bvpt-avatar {
  width:         56px;
  height:        56px;
  border-radius: 50%;
  object-fit:    cover;
  flex-shrink:   0;
}

.bvpt-attribution-text { display: flex; flex-direction: column; gap: 2px; text-align: left; }

.bvpt-name {
  font-family: var(--bvs-sans, "Jost", system-ui, sans-serif);
  font-size:   14px;
  font-weight: 600;
  color:       #ffffff;
}

.bvpt-title {
  font-family: var(--bvs-sans, "Jost", system-ui, sans-serif);
  font-size:   13px;
  color:       rgba(255,255,255,.55);
}

/* ── BV Portfolio Navigation ─────────────────────────────────────────────── */
.bvpn-wrap { width: 100%; }

.bvpn-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   20px;
}

/* Card — horizontal flex layout */
.bvpn-card {
  display:         flex !important;
  align-items:     stretch !important;
  overflow:        hidden;
  border-radius:   8px;
  background:      #ffffff;
  border:          1px solid rgba(0,0,0,.08);
  text-decoration: none;
  min-height:      100px;
  transition:      border-color 0.28s ease,
                   box-shadow   0.28s ease,
                   transform    0.28s ease,
                   background   0.28s ease;
}

.bvpn-card:hover {
  border-color: rgba(220,176,100,.5);
  box-shadow:   0 4px 24px rgba(0,0,0,.10);
  transform:    translateY(-2px);
}

/* Prev: thumbnail LEFT, text RIGHT */
.bvpn-card--prev { flex-direction: row; }

/* Next: text LEFT, thumbnail RIGHT */
.bvpn-card--next { flex-direction: row-reverse; }

/* Thumbnail strip — fixed width, fills height via flex stretch */
.bvpn-thumb {
  width:               130px;
  flex-shrink:         0;
  background-size:     cover !important;
  background-position: center !important;
  background-repeat:   no-repeat !important;
  background-color:    rgba(220,176,100,.06);
  transition:          transform 0.35s ease;
  overflow:            hidden;
}

.bvpn-thumb--empty {
  background-image: none;
}

.bvpn-card:hover .bvpn-thumb { transform: scale(1.04); }

/* Card body — takes remaining space, vertically centred */
.bvpn-body {
  flex:           1;
  min-width:      0;
  padding:        20px 24px;
  display:        flex;
  flex-direction: column;
  justify-content:center;
  gap:            6px;
}

.bvpn-body--right {
  align-items: flex-end;
  text-align:  right;
}

/* Direction label */
.bvpn-dir {
  font-family:    var(--bvs-sans, "Jost", system-ui, sans-serif);
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          #DCB064;
  display:        block;
}

/* Title */
.bvpn-title {
  font-family: var(--bvs-sans, "Jost", system-ui, sans-serif);
  font-size:   16px;
  font-weight: 600;
  color:       #26262D;
  line-height: 1.3;
  display:     block;
  transition:  color 0.28s ease;

  /* Prevent very long titles overflowing */
  overflow:       hidden;
  text-overflow:  ellipsis;
  display:        -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bvpn-card:hover .bvpn-title { color: #DCB064; }

.bvpn-empty {
  font-family: var(--bvs-sans, "Jost", system-ui, sans-serif);
  font-size:   13px;
  color:       rgba(0,0,0,.3);
  font-style:  italic;
  text-align:  center;
  padding:     20px;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .bvp-two-col  { grid-template-columns: 1fr !important; }
  .bvpn-grid    { grid-template-columns: 1fr; }
  /* Keep horizontal card layout on tablet — thumbnail still on side */
  .bvpn-body--right { align-items: flex-end; text-align: right; }
}

@media (max-width: 520px) {
  .bvp-gallery-cols-5,
  .bvp-gallery-cols-6 { grid-template-columns: repeat(4, 1fr); }
  .bvpt-wrap { padding: 48px 20px; }

  /* Narrow thumbnail on phones */
  .bvpn-thumb  { width: 90px; }
  .bvpn-body   { padding: 16px 16px; }
  .bvpn-title  { font-size: 14px; }
}