/* ==========================================================================
   Bonaventure Portfolio — bv-portfolio.css
   Flush Nexcess Edge CDN after updating (WP admin bar → Nexcess → Flush Edge CDN).
   ========================================================================== */

/* ── Brand tokens ─────────────────────────────────────────────────────────── */
:root {
  --bv-gold:    #DCB064;
  --bv-charcoal:#26262D;
  --bv-dark:    #1e1e24;
  --bv-slate:   #31313B;
  --bv-bg:      #f8f6f2;
  --bv-white:   #ffffff;

  --bv-font-heading: "scotch-text", Georgia, serif;
  --bv-font-ui:      "rival-sans",  system-ui, sans-serif;

  --bv-radius:       6px;
  --bv-transition:   0.35s ease;
}

/* ── Wrapper ──────────────────────────────────────────────────────────────── */
.bv-portfolio-wrap {
  width: 100%;
}

/* ── Filter bar ───────────────────────────────────────────────────────────── */
.bv-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}

.bv-filter-tab {
  font-family:     var(--bv-font-ui);
  font-size:       0.8125rem;  /* 13px */
  font-weight:     500;
  letter-spacing:  0.04em;
  text-transform:  uppercase;
  cursor:          pointer;
  padding:         7px 18px;
  border-radius:   100px;
  border:          1.5px solid var(--bv-charcoal);
  background:      transparent;
  color:           var(--bv-charcoal);
  transition:      background-color var(--bv-transition),
                   border-color     var(--bv-transition),
                   color            var(--bv-transition);
  line-height:     1;
}

.bv-filter-tab:hover {
  /* colors controlled via Elementor style panel */
}

.bv-filter-tab.is-active {
  /* colors controlled via Elementor style panel */
}

/* ── Grid ─────────────────────────────────────────────────────────────────── */
.bv-portfolio-grid {
  display:               grid;
  gap:                   20px;
  grid-template-columns: repeat(3, 1fr);   /* default 3-col, overridden below */
}

.bv-cols-2 { grid-template-columns: repeat(2, 1fr); }
.bv-cols-3 { grid-template-columns: repeat(3, 1fr); }
.bv-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
  .bv-cols-4 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .bv-cols-3,
  .bv-cols-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .bv-portfolio-grid { grid-template-columns: 1fr !important; }
  .bv-filter-bar     { justify-content: center; }
}

/* ── Cards ────────────────────────────────────────────────────────────────── */
.bv-portfolio-card {
  position:    relative;
  overflow:    hidden;
  border-radius: var(--bv-radius);
  background:  var(--bv-charcoal);    /* shows while image loads */
  cursor:      pointer;
  /* GPU layer for smooth overlay transition */
  transform:   translateZ(0);
  transition:  box-shadow var(--bv-transition);
}

.bv-portfolio-card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,0.22);
}

/* Hidden by JS / PHP pre-render */
.bv-card--hidden {
  display: none !important;
}

/* Filtered-out by JS */
.bv-card--filtered {
  display: none !important;
}

/* ── Image wrap ───────────────────────────────────────────────────────────── */
.bv-card-image-wrap {
  width:    100%;
  overflow: hidden;
}

/* Aspect ratios */
.bv-ratio-landscape .bv-card-image-wrap { aspect-ratio: 4 / 3; }
.bv-ratio-square    .bv-card-image-wrap { aspect-ratio: 1 / 1; }
.bv-ratio-portrait  .bv-card-image-wrap { aspect-ratio: 3 / 4; }
.bv-ratio-original  .bv-card-image-wrap { aspect-ratio: auto; }

.bv-card-img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform var(--bv-transition);
}

.bv-ratio-original .bv-card-img {
  height: auto;
}

.bv-portfolio-card:hover .bv-card-img {
  transform: scale(1.04);
}

.bv-card-img-placeholder {
  width:      100%;
  height:     100%;
  min-height: 220px;
  background: var(--bv-slate);
}

/* ── Full-card link (accessibility) ──────────────────────────────────────── */
.bv-card-link {
  position: absolute;
  inset:    0;
  z-index:  2;
  /* Visually hidden but accessible */
  color:    transparent;
  font-size:0;
}

.bv-card-link:focus-visible {
  outline:        3px solid var(--bv-gold);
  outline-offset: 3px;
}

/* ── Overlay — shared ─────────────────────────────────────────────────────── */
.bv-portfolio-overlay {
  position:   absolute;
  inset:      0;
  background: rgba(30,30,36,0.88);
  display:    flex;
  align-items:flex-end;
  padding:    24px;
  /* z-index above .bv-card-link so overlay content (incl. View Project link)
     is reachable by pointer events when the overlay is visible */
  z-index:    4;
}

.bv-overlay-inner {
  width: 100%;
}

/* ── Overlay — slide-up ───────────────────────────────────────────────────── */
.bv-overlay-slide-up .bv-portfolio-overlay {
  transform:     translateY(100%);
  pointer-events:none;
  transition:    transform var(--bv-transition);
}

.bv-overlay-slide-up:hover .bv-portfolio-overlay {
  transform:     translateY(0);
  pointer-events:auto;
}

/* ── Overlay — fade ───────────────────────────────────────────────────────── */
.bv-overlay-fade .bv-portfolio-overlay {
  opacity:       0;
  pointer-events:none;
  transition:    opacity var(--bv-transition);
}

.bv-overlay-fade:hover .bv-portfolio-overlay {
  opacity:       1;
  pointer-events:auto;
}

/* ── Overlay text ─────────────────────────────────────────────────────────── */
.bv-overlay-title {
  font-family:    var(--bv-font-heading);
  font-size:      clamp(1rem, 2vw, 1.25rem);
  font-weight:    700;
  color:          var(--bv-white);
  margin:         0 0 6px;
  line-height:    1.25;
}

.bv-overlay-client {
  font-family:    var(--bv-font-ui);
  font-size:      0.75rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:          var(--bv-gold);
  margin:         0 0 2px;
}

.bv-overlay-year {
  font-family:    var(--bv-font-ui);
  font-size:      0.75rem;
  color:          rgba(255,255,255,0.55);
  margin:         0 0 10px;
}

.bv-overlay-link {
  font-family:    var(--bv-font-ui);
  font-size:      0.8125rem;
  font-weight:    600;
  color:          var(--bv-gold);
  text-decoration:none;
  letter-spacing: 0.03em;
  display:        inline-flex;
  align-items:    center;
  gap:            4px;
  transition:     gap              var(--bv-transition),
                  color            var(--bv-transition),
                  background-color var(--bv-transition),
                  border-color     var(--bv-transition);
  position:       relative;
}

.bv-overlay-link:hover {
  gap: 8px;
  text-decoration: none;
}

/* ── Load More ────────────────────────────────────────────────────────────── */
.bv-load-more-wrap {
  text-align: center;
  margin-top: 40px;
}

.bv-load-more-btn {
  font-family:    var(--bv-font-ui);
  font-size:      0.875rem;
  font-weight:    600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor:         pointer;
  padding:        12px 36px;
  border-radius:  100px;
  border:         1.5px solid var(--bv-gold);
  background:     transparent;
  color:          var(--bv-gold);
  transition:     background-color var(--bv-transition),
                  color            var(--bv-transition),
                  transform        var(--bv-transition);
}

.bv-load-more-btn:hover {
  /* colors controlled via Elementor style panel */
  transform: translateY(-1px);
}

.bv-load-more-btn:disabled,
.bv-load-more-btn.is-hidden {
  display: none;
}

/* ── Empty / no-results ───────────────────────────────────────────────────── */
.bv-portfolio-empty,
.bv-no-results {
  font-family: var(--bv-font-ui);
  color:       var(--bv-charcoal);
  text-align:  center;
  padding:     48px 0;
  opacity:     0.6;
}

/* ── Editor / preview: first card overlay always visible ─────────────────── */
/*
   When in the Elementor editor or preview pane the .bv-overlay--preview class
   is added to .bv-portfolio-wrap. This forces the first card's overlay open
   so typography and color style controls have a live target to react against.
*/
.bv-overlay--preview .bv-portfolio-card:first-child .bv-card-img {
  transform: scale(1.04);
}

/* slide-up variant */
.bv-overlay--preview .bv-portfolio-card:first-child.bv-overlay-slide-up .bv-portfolio-overlay {
  transform: translateY(0);
}

/* fade variant */
.bv-overlay--preview .bv-portfolio-card:first-child.bv-overlay-fade .bv-portfolio-overlay {
  opacity: 1;
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */

/* Scrollable filter bar on small screens — no wrapping, swipe to see more */
@media (max-width: 640px) {
  .bv-filter-bar {
    flex-wrap:          nowrap;
    overflow-x:         auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width:    none;       /* Firefox */
    padding-bottom:     4px;        /* room for momentum scroll */
    gap:                6px;
    /* Fade out at the right edge to hint scrollability */
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
    mask-image:         linear-gradient(to right, black 85%, transparent 100%);
  }

  .bv-filter-bar::-webkit-scrollbar { display: none; }

  .bv-filter-tab {
    flex-shrink: 0;   /* tabs never compress */
    font-size:   0.75rem;
    padding:     6px 14px;
  }
}

/* Slightly smaller overlay text on phones */
@media (max-width: 520px) {
  .bv-overlay-title {
    font-size: 1rem;
  }

  .bv-overlay-client,
  .bv-overlay-year,
  .bv-overlay-link {
    font-size: 0.6875rem;
  }

  .bv-portfolio-overlay {
    padding: 16px;
  }

  .bv-load-more-btn {
    padding:   10px 28px;
    font-size: 0.8125rem;
  }
}