/* ==========================================================================
   GARAGE GALS . BUTTERE-CARD with GG FLARE
   --------------------------------------------------------------------------
   The verbatim /buttere-card cream/pearl tile system (L-brackets, cursor
   spotlight, 3D tilt, click-to-expand accordion, diagonal sweep), retuned to
   Garage Gals red and given the signature glowing red-to-amber gradient
   border that Sammy built on the old site. Structure, bracket sizes (22/32px),
   and easings are kept exactly per the skill; only colors change, plus the
   added glow border. Class prefix bt-card-* (shared with the skill).
   ========================================================================== */

.bt-card-grid {
  /* GG flare palette (swapped from butter to red) */
  --card-warm: 230, 58, 45;          /* GG red as RGB */
  --card-accent: #E63A2D;
  --card-deep: #B81E12;              /* darker red for hover brackets */
  --card-cream-top: #FDFBF6;
  --card-cream-bottom: #F5EFE4;
  --card-hover-top: #FFFFFF;
  --card-hover-bottom: #F4EAD9;
  --card-text: #1A1A1A;
  --card-text-soft: rgba(26, 26, 26, 0.74);
  --card-radius: 16px;
  --card-ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* the glowing flame border gradient */
  --card-flare: linear-gradient(120deg, #8B0000 0%, #E63A2D 30%, #FF6F3C 55%, #FFB155 78%, #E63A2D 100%);
}

.bt-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
  perspective: 1200px;
}
@media (max-width: 1024px) { .bt-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .bt-card-grid { grid-template-columns: 1fr; } }

.bt-card-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .bt-card-grid--cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .bt-card-grid--cols-4 { grid-template-columns: 1fr; } }

/* ----- Base card ----- */
.bt-card {
  --mx: 50%;
  --my: 50%;
  position: relative;
  align-self: stretch;
  min-height: 210px;
  border: 1px solid rgba(var(--card-warm), 0.40);
  border-radius: var(--card-radius);
  padding: 30px 22px 28px;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transform-style: preserve-3d;
  will-change: transform;
  background:
    radial-gradient(600px circle at var(--mx) var(--my), rgba(255, 234, 214, 0.55), transparent 40%),
    linear-gradient(rgba(var(--card-warm), 0.85), rgba(var(--card-warm), 0.85)) top    12px left  12px / 22px 1px no-repeat,
    linear-gradient(rgba(var(--card-warm), 0.85), rgba(var(--card-warm), 0.85)) top    12px left  12px / 1px 22px no-repeat,
    linear-gradient(rgba(var(--card-warm), 0.85), rgba(var(--card-warm), 0.85)) top    12px right 12px / 22px 1px no-repeat,
    linear-gradient(rgba(var(--card-warm), 0.85), rgba(var(--card-warm), 0.85)) top    12px right 12px / 1px 22px no-repeat,
    linear-gradient(rgba(var(--card-warm), 0.85), rgba(var(--card-warm), 0.85)) bottom 12px left  12px / 22px 1px no-repeat,
    linear-gradient(rgba(var(--card-warm), 0.85), rgba(var(--card-warm), 0.85)) bottom 12px left  12px / 1px 22px no-repeat,
    linear-gradient(rgba(var(--card-warm), 0.85), rgba(var(--card-warm), 0.85)) bottom 12px right 12px / 22px 1px no-repeat,
    linear-gradient(rgba(var(--card-warm), 0.85), rgba(var(--card-warm), 0.85)) bottom 12px right 12px / 1px 22px no-repeat,
    linear-gradient(180deg, var(--card-cream-top) 0%, var(--card-cream-bottom) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 0 0 1px rgba(var(--card-warm), 0.14),
    0 8px 26px rgba(139, 0, 0, 0.14);
  transition:
    transform 460ms var(--card-ease),
    background 460ms var(--card-ease),
    border-color 460ms var(--card-ease),
    box-shadow 460ms var(--card-ease);
  transform-origin: center center;
}

/* diagonal warm sweep on hover */
.bt-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 110, 60, 0.30) 50%, transparent 68%);
  background-size: 220% 100%;
  background-position: -100% 0;
  opacity: 1;
  transition: background-position 1100ms var(--card-ease);
  pointer-events: none;
  z-index: 0;
}

/* GG FLARE: glowing flame gradient border (always on, brighter on hover) */
.bt-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.6px;
  background: var(--card-flare);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: 0.42;
  transition: opacity 460ms var(--card-ease);
  pointer-events: none;
  z-index: 2;
}
.bt-card > * { position: relative; z-index: 1; }

/* ----- Hover + active state ----- */
.bt-card:hover,
.bt-card.active {
  transform: perspective(1000px) translateY(-6px) rotateX(2.5deg);
  border-color: rgba(var(--card-warm), 0.85);
  background:
    linear-gradient(var(--card-deep), var(--card-deep)) top    12px left  12px / 32px 1px no-repeat,
    linear-gradient(var(--card-deep), var(--card-deep)) top    12px left  12px / 1px 32px no-repeat,
    linear-gradient(var(--card-deep), var(--card-deep)) top    12px right 12px / 32px 1px no-repeat,
    linear-gradient(var(--card-deep), var(--card-deep)) top    12px right 12px / 1px 32px no-repeat,
    linear-gradient(var(--card-deep), var(--card-deep)) bottom 12px left  12px / 32px 1px no-repeat,
    linear-gradient(var(--card-deep), var(--card-deep)) bottom 12px left  12px / 1px 32px no-repeat,
    linear-gradient(var(--card-deep), var(--card-deep)) bottom 12px right 12px / 32px 1px no-repeat,
    linear-gradient(var(--card-deep), var(--card-deep)) bottom 12px right 12px / 1px 32px no-repeat,
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(var(--card-warm), 0.30), transparent 70%),
    radial-gradient(600px circle at var(--mx) var(--my), rgba(255, 234, 214, 0.7), transparent 40%),
    linear-gradient(180deg, var(--card-hover-top) 0%, var(--card-hover-bottom) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 0 0 1px rgba(var(--card-warm), 0.55),
    0 0 22px rgba(var(--card-warm), 0.34),
    0 0 54px rgba(var(--card-warm), 0.20),
    0 18px 48px rgba(139, 0, 0, 0.26);
}
.bt-card:hover::before,
.bt-card.active::before { background-position: 200% 0; }
.bt-card:hover::after,
.bt-card.active::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .bt-card:hover, .bt-card.active { transform: translateY(-2px); }
}

/* ----- Icon ----- */
.bt-card-icon {
  width: 46px;
  height: 46px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  flex-shrink: 0;
  background: radial-gradient(circle at 35% 30%, rgba(var(--card-warm), 0.50) 0%, rgba(255, 248, 240, 0.92) 70%);
  border: 1px solid rgba(var(--card-warm), 0.60);
  color: var(--card-accent);
  transition: all 0.4s var(--card-ease);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.60),
    0 0 10px rgba(var(--card-warm), 0.28),
    0 0 22px rgba(var(--card-warm), 0.16),
    0 4px 10px rgba(139, 0, 0, 0.12);
}
.bt-card:hover .bt-card-icon,
.bt-card.active .bt-card-icon {
  background: radial-gradient(circle at 35% 30%, rgba(var(--card-warm), 0.85) 0%, rgba(255, 244, 236, 0.95) 70%);
  border-color: var(--card-deep);
  transform: rotate(-5deg) scale(1.05);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.70),
    0 0 18px rgba(var(--card-warm), 0.45),
    0 0 36px rgba(var(--card-warm), 0.22),
    0 6px 14px rgba(139, 0, 0, 0.22);
}
.bt-card-icon svg {
  width: 23px;
  height: 23px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ----- Title (GG uses the display serif) ----- */
.bt-card-name {
  font-family: var(--font-display, inherit);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.01em;
  line-height: 1.22;
  color: var(--card-text);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.40);
  transition: color 0.3s ease;
}
.bt-card:hover .bt-card-name,
.bt-card.active .bt-card-name { color: #0a0a0a; }

/* ----- Description (collapsed, expands on active) ----- */
.bt-card-desc {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  transition:
    max-height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 0.4s ease,
    margin-top 0.4s ease;
}
/* CLICK-ONLY expansion (accordion, site-wide rule): ONLY the clicked .active card
   opens. Hover and focus deliberately do NOT expand the body, so two cards can
   never be open at the same time. The accordion JS (cards.js) closes any other
   open card in the grid when one is clicked. */
.bt-card.active .bt-card-desc {
  max-height: 520px;
  opacity: 1;
  margin-top: 12px;
}
/* compact checklist revealed when a service card opens */
.bt-card-list { list-style: none; margin: 0.7rem auto 0; padding: 0; text-align: left; display: inline-block; }
.bt-card-list li { position: relative; padding-left: 1.25em; font-size: 13.5px; line-height: 1.5; color: var(--card-text-soft); margin-top: 0.3rem; }
.bt-card-list li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--card-accent); font-weight: 800; }
.bt-card-desc p {
  font-family: var(--font-body, inherit);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.65;
  color: var(--card-text-soft);
  margin: 0;
}
.bt-card-desc a {
  color: var(--card-accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--card-warm), 0.55);
  padding-bottom: 1px;
}
.bt-card-desc a:hover { color: #0a0a0a; border-bottom-color: #0a0a0a; }

/* ----- Metric chip (GG red pill) ----- */
.bt-card-metric {
  display: inline-block;
  margin-top: 10px;
  padding: 5px 12px;
  background: rgba(var(--card-warm), 0.16);
  border: 1px solid rgba(230, 58, 45, 0.50);
  border-radius: 999px;
  color: #8B0000;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 1px 3px rgba(139, 0, 0, 0.16);
  white-space: nowrap;
}

/* ----- Chevron ----- */
.bt-card-expand {
  margin-top: 20px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  transition: transform 0.3s ease, margin-top 0.4s ease;
}
.bt-card.active .bt-card-expand { transform: rotate(180deg); margin-top: 14px; }
.bt-card-expand svg {
  width: 26px;
  height: 26px;
  stroke: var(--card-accent);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter:
    drop-shadow(0 0 3px rgba(230, 58, 45, 0.55))
    drop-shadow(0 0 6px rgba(255, 110, 60, 0.35));
}

/* ----- On dark sections: keep cream cards, they pop beautifully ----- */
[data-theme="dark"] .bt-card-grid { /* cream cards stand out on ink, no change needed */ }

/* ==========================================================================
   REVIEW VARIANT . the verbatim cream tile (L-brackets + flare + cream
   gradient, identical to the services cards) reused for the Google reviews.
   No accordion: the testimonial is always visible. Icon slot -> star rating,
   chevron slot -> reviewer attribution.
   ========================================================================== */
.reviews-bt-center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 70rem;
  margin-inline: auto;
}
.reviews-bt-center .bt-card { flex: 1 1 17rem; max-width: 21rem; }

.bt-card--review { cursor: default; min-height: 16rem; }
.bt-card--review .rev-quote {
  font-family: var(--font-display);
  font-size: 3.4rem;
  line-height: 0.5;
  height: 1.3rem;
  color: rgba(184, 30, 18, 0.5);
  margin-bottom: 0.4rem;
  user-select: none;
}
.bt-card--review .bt-card-stars {
  color: #E8912C;
  letter-spacing: 0.18em;
  font-size: 18px;
  line-height: 1;
  margin-bottom: 14px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}
/* force the testimonial open (defeats the collapsed-accordion default) */
.bt-card--review .bt-card-desc {
  max-height: none;
  opacity: 1;
  overflow: visible;
  margin-top: 10px;
}
.bt-card--review .bt-card-cite {
  margin-top: 16px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--card-text-soft);
}
.bt-card--review .bt-card-cite strong { color: #8B0000; font-weight: 700; }