/* ==========================================================================
   Behind The Pumps - reusable component styles
   Buttons, cards, pills, key-fact strips, meta rows.
   Uses the design tokens defined in the child style.css :root.
   ========================================================================== */

/* ---- Layout helpers ---- */
.btp-wrap{ max-width: var(--btp-maxw); margin-inline: auto; padding-inline: 20px; }
.btp-section{ padding-block: 80px; }
@media (max-width: 1024px){ .btp-section{ padding-block: 56px; } }
@media (max-width: 767px){ .btp-section{ padding-block: 32px; } }

/* ---- Buttons ---- */
.btp-btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family: var(--btp-font-body); font-weight:600; font-size:16px; line-height:1;
  padding:14px 22px; border-radius: var(--btp-r-btn);
  text-decoration:none; cursor:pointer; border:2px solid transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btp-btn--primary{ background: var(--btp-brass); color: var(--btp-charcoal); }
.btp-btn--primary:hover{ background:#b07d24; color:var(--btp-charcoal); }
.btp-btn--secondary{ background: var(--btp-green); color: var(--btp-white); }
.btp-btn--secondary:hover{ background:#26382f; color:var(--btp-white); }
.btp-btn--ghost{ background:transparent; color: var(--btp-navy); border-color: var(--btp-border-strong); }
.btp-btn--ghost:hover{ background: var(--btp-cream); }
.btp-btn__arrow{ transition: transform .15s ease; }
.btp-btn:hover .btp-btn__arrow{ transform: translateX(3px); }

/* ---- Pills / chips ---- */
.btp-pill{
  display:inline-flex; align-items:center;
  font-family: var(--btp-font-body); font-weight:600; font-size:13px; line-height:1;
  padding:7px 12px; border-radius: var(--btp-r-pill);
  background: var(--btp-slate); color: var(--btp-white);
}
.btp-pill--brass{ background: var(--btp-brass); color: var(--btp-charcoal); }
.btp-pill--navy{ background: var(--btp-navy); color: var(--btp-white); }
.btp-pill--soft{ background: var(--btp-cream); color: var(--btp-charcoal); }
.btp-pill--outline{ background:transparent; color: var(--btp-navy); border:1px solid var(--btp-border-strong); }

/* ---- Cards ---- */
.btp-card{
  display:flex; flex-direction:column;
  background: var(--btp-white); color: var(--btp-charcoal);
  border:1px solid var(--btp-border); border-radius: var(--btp-r-card);
  box-shadow: var(--btp-shadow-sm); overflow:hidden;
  transition: box-shadow .15s ease, transform .15s ease;
}
.btp-card:hover{ box-shadow: var(--btp-shadow-md); transform: translateY(-2px); }
.btp-card--dark{ background: var(--btp-navy); color: var(--btp-white); border-color: var(--btp-navy); }
.btp-card__media{ aspect-ratio: 3/2; background: var(--btp-cream); object-fit:cover; width:100%; }
.btp-card__body{ padding:20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.btp-card__tag{ align-self:flex-start; }
.btp-card__title{ font-family: var(--btp-font-body); font-weight:600; font-size:22px; line-height:1.3; margin:0; }
.btp-card--dark .btp-card__title{ color: var(--btp-white); }
.btp-card__desc{ font-size:16px; line-height:1.6; color: var(--btp-slate); margin:0; }
.btp-card--dark .btp-card__desc{ color:#c7cdd1; }
.btp-card__cta{
  margin-top:auto; font-weight:600; color: var(--btp-brass);
  text-decoration:none; display:inline-flex; align-items:center; gap:.4em;
}
.btp-card__cta:hover{ text-decoration:underline; }

/* ---- Card grid ---- */
.btp-grid{ display:grid; gap:24px; grid-template-columns:repeat(3,1fr); }
@media (max-width:1024px){ .btp-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .btp-grid{ grid-template-columns:1fr; } }

/* ---- Key-fact strip (single templates) ---- */
.btp-facts{
  display:flex; flex-wrap:wrap; gap:24px;
  padding:20px 24px; background: var(--btp-cream);
  border:1px solid var(--btp-border); border-radius: var(--btp-r-panel);
}
.btp-fact{ display:flex; flex-direction:column; gap:2px; min-width:120px; }
.btp-fact__label{ font-family: var(--btp-font-mono); text-transform:uppercase; font-size:12px; letter-spacing:.04em; color: var(--btp-slate); }
.btp-fact__value{ font-family: var(--btp-font-body); font-weight:600; font-size:18px; color: var(--btp-charcoal); }

/* ---- Meta row ("Last checked" / sources) ---- */
.btp-meta{ font-size:14px; color: var(--btp-slate); display:flex; flex-wrap:wrap; gap:12px 20px; }
.btp-meta a{ color: var(--btp-green); }

/* ---- Section headings ---- */
.btp-h2{ font-family: var(--btp-font-head); font-weight:700; font-size:44px; line-height:1.18; color: var(--btp-navy); margin:0 0 24px; }
.btp-h3{ font-family: var(--btp-font-body); font-weight:600; font-size:28px; line-height:1.3; color: var(--btp-navy); margin:0 0 16px; }