/* ═══════════════════════════════════════════════════════════
   GROOMING PAGE STYLES
   Companion to styles.css + section-index.css
═══════════════════════════════════════════════════════════ */

/* Card top background for grooming section */
.si-grooming .gi-card-top {
  background: linear-gradient(135deg, #f3e8ff 0%, #ede9fe 100%);
}

/* ── COAT TYPE SECTION ────────────────────────────────────── */
.coat-section {
  padding: 80px 0;
  background: #fff;
}

.coat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
  margin-top: 40px;
}

.coat-card {
  background: var(--light, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 18px;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform .22s, box-shadow .22s;
}
.coat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,0,0,.09);
  border-color: var(--teal);
}

.coat-icon { font-size: 2.2rem; }

.coat-card h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark, #0f172a);
  margin: 0;
}

.coat-card p {
  font-size: .83rem;
  color: var(--soft, #64748b);
  line-height: 1.55;
  margin: 0;
  flex: 1;
}

.coat-breed-examples {
  font-size: .76rem;
  color: var(--teal, #0d9488);
  font-weight: 600;
}

.coat-freq-pill {
  display: inline-block;
  background: #f3e8ff;
  color: #7c3aed;
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .04em;
  width: fit-content;
}

/* ── QUICK REFERENCE TABLE ────────────────────────────────── */
.gr-reference {
  padding: 80px 0;
  background: var(--light, #f8fafc);
}

.gr-table {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  margin-bottom: 16px;
}

.gr-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: 0;
  align-items: center;
  border-bottom: 1px solid var(--border, #e2e8f0);
  padding: 14px 20px;
  font-size: .88rem;
  transition: background .15s;
}
.gr-row:last-child { border-bottom: none; }
.gr-row:hover:not(.gr-header) { background: #f8fafc; }

.gr-header {
  background: var(--dark, #0f172a);
  color: rgba(255,255,255,.92);
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 14px 20px;
}

.gr-coat-name { font-weight: 600; color: var(--dark); }

.gr-freq-badge {
  display: inline-flex;
  align-items: center;
  font-size: .78rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  width: fit-content;
}
.gr-freq-badge.low    { background: #dcfce7; color: #166534; }
.gr-freq-badge.medium { background: #fef9c3; color: #854d0e; }
.gr-freq-badge.high   { background: #fee2e2; color: #991b1b; }

.gr-disclaimer {
  font-size: .82rem;
  color: var(--soft);
  text-align: center;
  margin: 0;
}

/* ── GROOMING FACTS ───────────────────────────────────────── */
.gr-facts {
  padding: 80px 0;
  background: var(--dark, #0f172a);
}
.gr-facts .section-header h2 { color: #fff; }
.gr-facts .section-tag { background: rgba(255,255,255,.1); color: rgba(255,255,255,.92); }

.gr-facts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.gr-fact-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 28px 22px;
  text-align: center;
}

.gr-fact-num {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  color: #c4b5fd;
  margin-bottom: 12px;
}
.gr-fact-card p {
  font-size: .87rem;
  color: rgba(255,255,255,.88);
  line-height: 1.6;
  margin: 0;
}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .gr-facts-grid { grid-template-columns: repeat(2, 1fr); }
  .coat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .gr-row { grid-template-columns: 1fr 1fr; gap: 6px; row-gap: 4px; }
  .gr-header { display: none; }
  .gr-facts-grid { grid-template-columns: 1fr 1fr; }
  .coat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .gr-facts-grid { grid-template-columns: 1fr; }
  .coat-grid { grid-template-columns: 1fr; }
  .gr-row { grid-template-columns: 1fr; }
}