/* jdtheme26 - home page block LOVED BY PET FAMILIES (2026-09-30). Markup: inc/jd-home-proof.php ([jd_home_proof]); count-up: assets/js/jd-home-proof.js.
   Heading = the JUST DOG Originals heading (centred, plain, English line with the small icon on both sides). No ground colour.
   Four figures: 4 in a row from 768px, 2 in a row on phones. Figures come from [jd_stat] (.jd-stat / .jd-stat--<key>). */

.jd-home-proof-row .wpb_content_element { margin-bottom: 0; }

.jd-proof {
  --jd-proof-ink: #3b2a1f;
  --jd-proof-muted: #8a7a6d;
  text-align: center;
}
.jd-proof .jd-proof__head {
  --jd-home-eyebrow-color: #e2d4c8;   /* operator 2026-09-30: the category band's colour (was #fea1ab) */
  gap: 8px;
  margin: 0 0 50px;                     /* operator 2026-10-01, every width (was clamp 28-44px) */
}

.jd-proof .jd-proof__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px clamp(16px, 3vw, 48px);
  max-width: 1100px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.jd-proof .jd-proof__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0 0 20px;                           /* operator 2026-10-01: 20px under each item, every width */
  list-style: none;
}
.jd-proof .jd-proof__stat::before { content: none; }
.jd-proof .jd-proof__img {
  display: block;
  width: 100%;
  max-width: 120px;                             /* operator 2026-10-01, every width (was 170px, phones 128px) */
  height: auto;
  aspect-ratio: 340 / 297;                      /* operator 2026-10-01: one box height for all four pictures (they are 273-297px high) so */
  object-fit: contain;                          /* the figures and words of a row line up; each picture is fitted into the box, centred */
  object-position: center;
  margin: 0 auto 20px;                          /* operator 2026-10-01, every width (was 14px, phones 10px) */
  opacity: .8;                                  /* operator 2026-09-30 */
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
@media (hover: hover) {
  .jd-proof .jd-proof__stat:hover .jd-proof__img { transform: translateY(-4px) rotate(-2deg); }
}

/* the figure (operator 2026-09-30, 2nd pass): number in Cormorant Garamond Light Italic #263a33, 72px on a wide screen, small unit beside it,
   no stroke underneath any more. Font file = digits , . + only (3.7 KB, SIL OFL 1.1: assets/fonts/SIL_Open_Font_License_1.1.txt, Cormorant Project). */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-300-italic-digits.woff2') format('woff2');
  font-weight: 300; font-style: italic; font-display: swap;
  unicode-range: U+0020, U+002B, U+002C, U+002E, U+0030-0039;
}
.jd-proof .jd-proof__num {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin: 0 0 6px;
  color: var(--jd-proof-ink);
  line-height: 1;
}
.jd-proof .jd-stat {
  display: inline-block;
  font-family: "Cormorant Garamond", serif;
  font-size: 34px;                              /* operator 2026-10-01, every width (was 48-72px, phones 44px) */
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.015em;
  line-height: 1;
  color: #263a33;
  font-variant-numeric: lining-nums;
}
.jd-proof .jd-proof__unit {                  /* operator 2026-09-30: 12px, light, slanted (was 15px / 600) */
  font-size: 12px;
  font-weight: 300;
  font-style: italic;
  letter-spacing: .1em;
  color: var(--jd-proof-muted);
}
.jd-proof .jd-proof__label {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: .15em;
  color: var(--jd-proof-muted);
}

/* motion (only when the script runs: .jd-proof--anim): the number settles once the count reaches its figure */
.jd-proof.jd-proof--anim .jd-proof__num.is-counted .jd-stat { animation: jd-proof-settle .6s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes jd-proof-settle {
  0% { transform: scale(1); }
  40% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .jd-proof .jd-proof__img { transition: none; }
  .jd-proof.jd-proof--anim .jd-proof__num.is-counted .jd-stat { animation: none; }
}

@media (max-width: 767px) {
  .jd-proof .jd-proof__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
  .jd-proof .jd-proof__label { letter-spacing: .08em; }
}