/* ==========================================================================
   Bonaventure Portfolio — bv-service-cards.css
   Service Cards widget — emoji, numeral, rule, and label styles.
   Flush Nexcess Edge CDN after updating.
   ========================================================================== */

:root {
  --bvsc-gold:       #DCB064;
  --bvsc-gold-lt:    #e8c882;
  --bvsc-charcoal:   #26262D;
  --bvsc-white:      #ffffff;
  --bvsc-text:       #333238;
  --bvsc-muted:      #777;
  --bvsc-serif:      "scotch-text", "Playfair Display", Georgia, serif;
  --bvsc-sans:       "rival-sans",  "Jost", system-ui, sans-serif;
  --bvsc-shadow:     0 4px 24px rgba(0,0,0,.07);
  --bvsc-shadow-lg:  0 16px 48px rgba(0,0,0,.13);
  --bvsc-transition: 0.28s ease;
}

/* ── Grid ─────────────────────────────────────────────────────────────────── */
.bvsc-grid {
  display:     grid;
  gap:         24px;
  align-items: stretch;
}

/* minmax(0,1fr) prevents long words/URLs from blowing out columns */
.bvsc-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bvsc-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bvsc-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ── Card base ────────────────────────────────────────────────────────────── */
.bvsc-card {
  display:         flex;
  flex-direction:  column;
  background:      var(--bvsc-white);
  border:          1px solid rgba(0,0,0,.07);
  border-top:      3px solid var(--bvsc-gold);
  border-radius:   10px;
  padding:         32px 28px 26px;
  box-shadow:      var(--bvsc-shadow);
  text-decoration: none;
  position:        relative;
  overflow:        hidden;
  transition:      transform     var(--bvsc-transition),
                   box-shadow    var(--bvsc-transition),
                   border-color  var(--bvsc-transition);
}

.bvsc-card:hover {
  transform:  translateY(-5px);
  box-shadow: var(--bvsc-shadow-lg);
}

/* Featured */
.bvsc-card--featured {
  border:     2px solid var(--bvsc-gold);
  border-top: 3px solid var(--bvsc-gold);
  box-shadow: 0 16px 48px rgba(220,176,100,.16);
}

/* ── Badge pill ───────────────────────────────────────────────────────────── */
.bvsc-badge {
  position:       absolute;
  top:            13px;
  right:          13px;
  background:     var(--bvsc-gold);
  color:          var(--bvsc-charcoal);
  font-family:    var(--bvsc-sans);
  font-size:      9px;
  font-weight:    700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding:        3px 9px;
  border-radius:  20px;
}

/* ── Title ────────────────────────────────────────────────────────────────── */
.bvsc-title {
  font-family:   var(--bvsc-serif);
  font-size:     19px;
  font-weight:   600;
  color:         var(--bvsc-charcoal);
  margin:        0 0 10px;
  line-height:   1.25;
  transition:    color var(--bvsc-transition);
}

.bvsc-card:hover .bvsc-title { color: var(--bvsc-gold); }

/* ── Description ──────────────────────────────────────────────────────────── */
.bvsc-desc {
  font-family: var(--bvsc-sans);
  font-size:   14px;
  color:       var(--bvsc-muted);
  line-height: 1.7;
  margin:      0 0 20px;
  flex:        1;
}

/* ── Link wrapper ─────────────────────────────────────────────────────────── */
.bvsc-link-wrap {
  margin-top: auto;  /* pin to card bottom */
}

/* ── Link / Button base ───────────────────────────────────────────────────── */
.bvsc-link {
  font-family:    var(--bvsc-sans);
  font-size:      11px;
  font-weight:    600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color:          var(--bvsc-gold);
  display:        inline-flex;
  align-items:    center;
  gap:            4px;
  transition:     gap              var(--bvsc-transition),
                  color            var(--bvsc-transition),
                  background-color var(--bvsc-transition),
                  border-color     var(--bvsc-transition);
}

/* Text link hover — gap grows */
.bvsc-card:hover .bvsc-link--text { gap: 8px; }

/* Outlined button */
.bvsc-link--button {
  border:         1.5px solid var(--bvsc-gold);
  border-radius:  3px;
  padding:        10px 20px;
  gap:            6px;
}

/* Solid button */
.bvsc-link--solid {
  background:     var(--bvsc-gold);
  color:          var(--bvsc-charcoal);
  border:         1.5px solid var(--bvsc-gold);
  border-radius:  3px;
  padding:        10px 20px;
  gap:            6px;
}

/* Button hover defaults (overridden by Elementor inline styles) */
.bvsc-card:hover .bvsc-link--button {
  background-color: var(--bvsc-gold);
  color:            var(--bvsc-charcoal);
}

.bvsc-card:hover .bvsc-link--solid {
  background-color: var(--bvsc-gold-lt);
  border-color:     var(--bvsc-gold-lt);
}

/* ── Empty ────────────────────────────────────────────────────────────────── */
.bvsc-empty { font-family: var(--bvsc-sans); color: var(--bvsc-muted); padding: 24px 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   STYLE A — Emoji / Icon Badge
   ═══════════════════════════════════════════════════════════════════════════ */

.bvsc-card--emoji .bvsc-icon {
  width:           44px;
  height:          44px;
  background:      rgba(220,176,100,.10);
  border-radius:   8px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       20px;
  line-height:     1;
  margin-bottom:   18px;
  flex-shrink:     0;
  transition:      background var(--bvsc-transition);
}

.bvsc-card--emoji:hover .bvsc-icon { background: rgba(220,176,100,.18); }

/* ═══════════════════════════════════════════════════════════════════════════
   STYLE B — Stroke Icon (FA / Eicon / uploaded SVG)
   ═══════════════════════════════════════════════════════════════════════════ */

.bvsc-card--svg .bvsc-svg-icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin-bottom:   18px;
  flex-shrink:     0;
  /* Size and bg controlled via Elementor style panel */
  transition:      background-color var(--bvsc-transition);
}

/* Font-based icons (FA, Eicons) inside icon div — inherit colour, preserve fill */
.bvsc-card--svg .bvsc-svg-icon i {
  font-size:   28px;
  color:       var(--bvsc-gold);
  line-height: 1;
  transition:  color var(--bvsc-transition);
}

.bvsc-card--svg:hover .bvsc-svg-icon i {
  color: var(--bvsc-charcoal);
}

/* FA / Eicons rendered as inline SVG (Elementor "Inline SVG" mode) — preserve fill */
.bvsc-svg-icon--font svg {
  width:  28px;
  height: 28px;
  fill:   currentColor;
}

/* Uploaded SVG files — force stroke rendering, strip fill */
.bvsc-svg-icon--uploaded svg {
  width:      28px;
  height:     28px;
  transition: stroke var(--bvsc-transition);
}

.bvsc-svg-icon--uploaded svg path,
.bvsc-svg-icon--uploaded svg circle,
.bvsc-svg-icon--uploaded svg rect,
.bvsc-svg-icon--uploaded svg line,
.bvsc-svg-icon--uploaded svg polyline,
.bvsc-svg-icon--uploaded svg polygon {
  stroke:       var(--bvsc-gold);
  stroke-width: 1.5;
  fill:         none;
  transition:   stroke var(--bvsc-transition);
}

.bvsc-card--svg:hover .bvsc-svg-icon--uploaded svg path,
.bvsc-card--svg:hover .bvsc-svg-icon--uploaded svg circle,
.bvsc-card--svg:hover .bvsc-svg-icon--uploaded svg rect,
.bvsc-card--svg:hover .bvsc-svg-icon--uploaded svg line,
.bvsc-card--svg:hover .bvsc-svg-icon--uploaded svg polyline,
.bvsc-card--svg:hover .bvsc-svg-icon--uploaded svg polygon {
  stroke: var(--bvsc-charcoal);
}

/* ═══════════════════════════════════════════════════════════════════════════
   STYLE C — Serif Numerals
   ═══════════════════════════════════════════════════════════════════════════ */

.bvsc-card--numeral .bvsc-numeral {
  font-family:   var(--bvsc-serif);
  font-size:     36px;
  font-weight:   400;
  color:         var(--bvsc-gold);
  line-height:   1;
  margin-bottom: 14px;
  display:       block;
  transition:    color var(--bvsc-transition);
}

.bvsc-card--numeral:hover .bvsc-numeral { color: var(--bvsc-charcoal); }

/* ═══════════════════════════════════════════════════════════════════════════
   STYLE D — Gold Rule
   ═══════════════════════════════════════════════════════════════════════════ */

.bvsc-card--rule {
  /* Remove the top accent — the rule takes its place */
  border-top: 1px solid rgba(0,0,0,.07) !important;
}

.bvsc-card--rule.bvsc-card--featured {
  border-top: 2px solid var(--bvsc-gold) !important;
}

.bvsc-card--rule .bvsc-rule {
  width:         40px;
  height:        3px;
  background:    var(--bvsc-gold);
  margin-bottom: 20px;
  border-radius: 0;
  flex-shrink:   0;
  transition:    width var(--bvsc-transition);
}

.bvsc-card--rule:hover .bvsc-rule { width: 60px; }

/* ═══════════════════════════════════════════════════════════════════════════
   STYLE E — Category Label
   ═══════════════════════════════════════════════════════════════════════════ */

.bvsc-card--label .bvsc-cat-label {
  font-family:    var(--bvsc-sans);
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color:          var(--bvsc-gold);
  display:        block;
  margin-bottom:  10px;
  transition:     color var(--bvsc-transition);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

/* Large tablet / small desktop: 4-col → 3-col */
@media (max-width: 1024px) {
  .bvsc-cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Tablet portrait: 3-col and 4-col → 2-col */
@media (max-width: 860px) {
  .bvsc-cols-3,
  .bvsc-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Large phone / small tablet: 2-col → 1-col earlier than small phones
   Catches phablets and landscape phones (600–640px) that would otherwise
   get two very narrow columns */
@media (max-width: 640px) {
  .bvsc-cols-2 { grid-template-columns: minmax(0, 1fr); }
}

/* Phone: everything → single column */
@media (max-width: 520px) {
  .bvsc-cols-2,
  .bvsc-cols-3,
  .bvsc-cols-4 { grid-template-columns: minmax(0, 1fr); }

  .bvsc-card   { padding: 24px 20px 20px; }

  /* Scale down the large serif numeral on narrow screens */
  .bvsc-numeral { font-size: clamp(24px, 8vw, 36px); }

  /* Titles can afford to be slightly smaller on phone */
  .bvsc-title  { font-size: clamp(15px, 4.5vw, 19px); }

  /* Solid / outlined buttons go full-width on phone for easier tapping */
  .bvsc-link--button,
  .bvsc-link--solid {
    display:    flex;
    width:      100%;
    justify-content: center;
  }
}

/* Touch devices: disable hover-only effects that don't fire reliably on mobile.
   Cards still look polished without the lift/animation effects. */
@media (hover: none) {
  .bvsc-card:hover              { transform: none; box-shadow: var(--bvsc-shadow); }
  .bvsc-card--rule:hover .bvsc-rule { width: 40px; } /* keep rule static */
  .bvsc-card--numeral:hover .bvsc-numeral { color: var(--bvsc-gold); }
  .bvsc-card--svg:hover .bvsc-svg-icon i  { color: var(--bvsc-gold); }
  .bvsc-card--svg:hover .bvsc-svg-icon svg path,
  .bvsc-card--svg:hover .bvsc-svg-icon svg circle,
  .bvsc-card--svg:hover .bvsc-svg-icon svg rect,
  .bvsc-card--svg:hover .bvsc-svg-icon svg line,
  .bvsc-card--svg:hover .bvsc-svg-icon svg polyline,
  .bvsc-card--svg:hover .bvsc-svg-icon svg polygon { stroke: var(--bvsc-gold); }
  .bvsc-card--emoji:hover .bvsc-icon { background: rgba(220,176,100,.10); }
  .bvsc-card--rule:hover .bvsc-title,
  .bvsc-card--numeral:hover .bvsc-title,
  .bvsc-card--svg:hover .bvsc-title,
  .bvsc-card--emoji:hover .bvsc-title,
  .bvsc-card--label:hover .bvsc-title { color: var(--bvsc-charcoal); }
}