/* =========================
   PetDentify · components.css
   Purpose: shared UI components (buttons, cards, hero, color grid, progress, pricing, footer)
   Depends on: base.css
   ========================= */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  border: 1px solid #d2d6db;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.btn-primary { background: var(--green); color: #fff; border-color: transparent; }
.btn-primary:hover { opacity: .94; }
.btn-secondary { background: #fff; color: var(--fg); border-color: #d2d6db; }
.btn-ghost { background: #fff; border-color: #d2d6db; }
.btn.small { padding: 8px 12px; font-size: var(--text-sm); }
/* Niceties */
.btn:disabled, .btn[disabled]{ opacity:.6; cursor:not-allowed; }
/* .btn, .btn.small { min-height: 44px; } */

/* ---------- Utilities (shared) ---------- */
.fw-800 { font-weight: 800 !important; }      /* used by “Pick a color”, etc. */
.eyebrow { color: var(--green); }             /* small green kicker line */

/* ---------- Cards ---------- */
.card {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  background: #fff;
  box-shadow: var(--shadow-md);
}

/* ---------- Hero ---------- */
.hero { padding: 96px 0 24px; }
.hero .grid { grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 44px; }
.hero h1 { font-size: var(--h1); line-height: var(--leading-tight); margin-bottom: 14px; }
.hero .lead { margin-bottom: 18px; }
.hero-media { display: block; width: 100%; }
.hero-media img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
}
/* Tiny CTA spacing band below hero heading */
.cta-band { margin-block-end: 8px; text-align: center; }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  gap: 8px;
  background: #EBF9F1;
  border: 1px solid #d5f0e2;
  color: #1a5736;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: var(--text-sm);
}

/* ---------- Feature cards (3-up) ---------- */
.feature h3 { margin: 0 0 8px; }

/* ---------- Progress bars ---------- */
.progress {
  position: relative;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: #f3f4f6;
  overflow: hidden;
  margin-top: 8px;
}
.progress .fill {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  width: var(--fill, 0%);
  background: var(--green);
  border-radius: 999px;
}

/* ---------- “Choose your color” grid ---------- */
.grid.colors {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 12px;
}
.grid.colors .card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 8px;
}
.grid.colors .card img{
  height: 220px; width: auto; object-fit: contain; margin: 0 auto;
  background:
    linear-gradient(45deg,#f3f4f6 25%,transparent 25%) 0 0/16px 16px,
    linear-gradient(45deg,transparent 75%,#f3f4f6 75%) 0 0/16px 16px,
    linear-gradient(45deg,transparent 25%,#f3f4f6 25%) 8px 8px/16px 16px,
    linear-gradient(45deg,#f3f4f6 75%,transparent 75%) 8px 8px/16px 16px;
  border-radius: 12px; box-shadow: 0 6px 18px rgba(2,6,12,.08);
}

/* ---------- Comparison table ---------- */
.compare { width: 100%; border-collapse: separate; border-spacing: 0; }
.compare th, .compare td { border: 1px solid var(--line); padding: 12px 10px; text-align: left; }
.compare thead th { background: #f9fafb; font-weight: 800; }
.compare .yes { font-weight: 700; color: #065f46; }
.compare .yes a { color: var(--green); }
.compare .no  { color: #9ca3af; }
.compare .star{ font-weight: 700; }

/* ---------- Guarantee band (explicit colors; single source of truth) ---------- */
.guarantee{
  background:#EBF9F1;
  border:1px solid #d5f0e2;
  color:#1a5736;
  padding:14px 16px;
  border-radius:12px;
  display:flex; gap:10px; align-items:center;
}
.guarantee .lock{ font-weight:800; }

/* ---------- Pricing ---------- */
#pricing .grid-3 { gap: 18px; }
#pricing .card{
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 18px; border: 1px solid #e9edf1; border-radius: 18px; box-shadow: var(--shadow-md);
  min-height: 260px;
}
#pricing .card h3{ margin: 0 0 6px; font-weight: 800; font-size: 18px; letter-spacing: -.005em; }
#pricing .pill{
  background: #fff2e8; color: #b45309; border: 1px solid #ffd2ad; border-radius: 999px;
  padding: 6px 10px; font-size: var(--text-sm);
}
#pricing .price-xl{ font-size: 36px; font-weight: 800; line-height: 1; margin: 4px 0 6px; }
#pricing .lead{ margin: 0 0 12px; }
#pricing .btn{ width: 100%; }
#pricing .card .btn{ margin-top: auto; }

/* ---------- Partners & Testimonials (optional) ---------- */
.partners{ display: grid; grid-template-columns: repeat(5,1fr); gap: 16px; align-items: center; }
.partners img{ filter: grayscale(100%); opacity: .85; height: 46px; width: auto; margin: auto; }
.testi{ display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 16px; }
.quote{ border-left: 4px solid var(--green); padding: 14px 16px; background: #f9fefb; border-radius: 12px; }

/* ---------- Form niceties ---------- */
.input-pill { border: 1px solid #d2d6db; border-radius: 999px; padding: 14px; min-width: 220px; }

/* ---------- Responsive tweaks ---------- */
@media (max-width: 1024px){
  .hero .grid { grid-template-columns: 1fr; }
  .grid-3      { grid-template-columns: 1fr; }
  .partners    { grid-template-columns: repeat(2,1fr); }
  .testi       { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}
@media (max-width:960px){ .grid.colors { grid-template-columns: repeat(3,1fr); } }
@media (max-width:600px){ .grid.colors { grid-template-columns: repeat(2,1fr); } }

/* Partnerships banner */
.partners-banner {
  background:#f9fafb;
  padding: var(--space-9) 0;                 /* 54px 0 */
  border-top:1px solid #eef2f7;
  border-bottom:1px solid #eef2f7;
}
.partners-header {
  text-align:center;
  margin-bottom: var(--space-7);             /* 28px */
}
.partners-header .eyebrow {
  font-size:.875rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#64748b;
  margin:0 0 .25rem;
}
.partners-header h2 {
  margin:0 0 .5rem;
  letter-spacing:-.01em;
}
.partners-header .subhead { color:#475569; margin:0; }

.partners-grid { display:grid; grid-template-columns:1fr; gap: var(--space-5); }
@media (min-width:720px){ .partners-grid { grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .partners-grid { grid-template-columns:1fr 1fr 1fr; } }

.partner-card {
  background:#fff;
  border:1px solid #eef2f7;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(2,6,12,.04);
  transition:transform .2s, box-shadow .2s, border-color .2s;
}

/* Keep the card as a column so CTAs align on the baseline */
.partner-link{
  display:flex;
  flex-direction:column;
  height:100%;
}
/* Uniform media height & rounded top corners across all cards */
/* Make the three media blocks EXACTLY the same height */
.partner-media{
  height: 200px;                 /* fixed height so the divider aligns 1:1 */
  /* keep the rest of your rules */
  display:grid; place-items:center;
  background:#fff;
  padding: var(--space-5);
  border-bottom:1px solid #eef2f7;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  overflow: hidden;
}

/* Remove the inline-image baseline gap that nudges the divider */
.partner-media img{
  display:block;                 /* <— this removes the extra 2–4px baseline gap */
  max-width:90%;
  max-height: calc(100% - 2px);  /* <— leave a tiny buffer above the divider */
  height:auto; width:auto;
  object-fit: contain;
}

/* Dark card keeps logo visible */
.partner-media--dark{ background:#0b1220; }
.partner-media--dark img{ filter: brightness(1.15) contrast(1.05); }

/* Let the body fill the remaining height and anchor the CTA to the bottom */
.partner-body{
  flex:1;
  display:flex;
  flex-direction:column;
  padding: var(--space-5);
}
.partner-body .btn{
  margin-top:auto;
  align-self:flex-start;
}

.partner-title { margin:0 0 .25rem; font-size:1.125rem; letter-spacing:-.01em; }
.partner-copy  { margin:0 0 .75rem; color:#475569; }

.partner-card:hover { transform: translateY(-2px) scale(1.002); border-color:#e2e8f0; box-shadow:0 6px 16px rgba(2,6,12,.08); }
.partner-card { 
  display:flex;                 /* new */
  flex-direction:column;        /* new */
  border-radius: var(--radius); 
}

.partners-cta {
  margin-top: var(--space-6);                /* 24px */
  display:flex; justify-content:center;
}
.partners-fineprint {
  margin-top: var(--space-4);                /* 16px */
  font-size:.8125rem; color:#64748b; text-align:center;
}

/* Button baseline already centers text; ensure outline variant exists */
.btn-outline { background:#fff; color:#0f172a; border:1px solid #e2e8f0; }
.btn-outline:hover { background:#f8fafc; }