/* =====================================================================
   jdtheme26 - shared HERO frame (2026-10-05, owner: every hero / carousel slide has the SAME size and the same irregular outer edge).
   Geometry = one fixed ratio (--jd-hero-ratio, 1957 / 668, the native size of the painted hero rasters) + one shared outline mask
   (assets/img/hero/jd-hero-frame-mask.svg, same ratio). The mask only trims the OUTER shape; paint, colour field and subjects are the raster.
   The picture is never stretched or upscaled (default: object-fit: contain inside a frame of its own ratio; another source size is letterboxed
   transparent). Modifier --copy-left (below) trims plain field with object-fit: cover. No CSS colour / gradient replaces the painted field.
   Markup:
     <div class="jd-hero-frame">
       <div class="jd-hero-frame__media"><img ...></div>          picture (masked)
       <div class="jd-hero-frame__copy"> HTML title / text / button </div>   copy (never masked); composition is chosen per campaign
     </div>
   >= 1025px: media and copy share ONE grid cell (copy centred on the picture). The cell is at least the picture's height, and it GROWS when the copy
   is taller - copy is never clipped, truncated or allowed to overflow. Below 1025px the copy follows the picture in normal flow.
   MODIFIER .jd-hero-frame--copy-left (2026-10-07, /pet-toys/): art with a plain field on its LEFT, copy in that field. The overlap starts at 768px (not
   1025px); the picture is cropped with object-fit: cover (only plain field is trimmed: ~2% of the width on tablet / desktop, the left third on phones, where
   the frame is 2 / 1 and object-position is right); the outline mask is inlined as a data URI (no extra request for the LCP element); on every
   phone width (<= 767px) the English line and the sub line are visually hidden. Composition (padding, alignment) stays in the page sheet.
   COPY SIMPLIFICATION (follows the homepage hero, jd-home-hero.css: tags <=1279px, description <=1023px, phones <=599px = main title + button only):
     .jd-hero-frame__tags   hidden (display:none) <=1279.98px          .jd-hero-frame__lead   description, hidden <=1023.98px
     .jd-hero-frame__sub / __eyebrow   sub line / English line, on phones <=599.98px visually hidden (still in the DOM and the accessible name of the H1)
     the button's arrow icon (.jd-btn__icon) is dropped on phones. Mark the copy parts with these classes; the picture and its painted field stay.
   CAROUSEL (reusable, no script required by the CSS; a slider only toggles .is-active and sets aria-hidden / inert on the others):
     <div class="jd-hero-carousel"><div class="jd-hero-carousel__slide is-active"> .jd-hero-frame </div> <div class="jd-hero-carousel__slide"> ... </div></div>
   ALL slides sit in the SAME grid cell, so the carousel is as tall as its tallest slide at the current width (short and long copy alike) and the
   blocks after it never move when the active slide changes; inactive slides are only hidden (visibility), they keep contributing their height.
   ===================================================================== */

.jd-hero-carousel { display: grid; }
.jd-hero-carousel__slide {
  grid-area: 1 / 1;
  min-width: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity .4s ease, visibility 0s linear .4s;
}
.jd-hero-carousel__slide.is-active { visibility: visible; opacity: 1; transition: opacity .4s ease; }
@media (prefers-reduced-motion: reduce) {
  .jd-hero-carousel__slide,
  .jd-hero-carousel__slide.is-active { transition: none; }
}

.jd-hero-frame {
  --jd-hero-ratio: 1957 / 668;
  --jd-hero-max: 1440px;
  --jd-hero-mask: url("../img/hero/jd-hero-frame-mask.svg");
  --jd-hero-fit: contain;
  --jd-hero-pos: center;
  display: grid;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--jd-hero-max);
  margin-inline: auto;
}
.jd-hero-frame__media {
  aspect-ratio: var(--jd-hero-ratio);
  -webkit-mask: var(--jd-hero-mask) center / 100% 100% no-repeat;
  mask: var(--jd-hero-mask) center / 100% 100% no-repeat;
}
.jd-hero-frame__media > img,
.jd-hero-frame__media > .jd-pt-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--jd-hero-fit);
  object-position: var(--jd-hero-pos);
}
.jd-hero-frame__copy {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: var(--jd-space-m) var(--jd-space-s) 0;
  text-align: center;
  overflow-wrap: anywhere;   /* long unbroken strings wrap instead of overflowing */
}
@media (min-width: 1025px) {
  .jd-hero-frame__media,
  .jd-hero-frame__copy { grid-area: 1 / 1; }
  .jd-hero-frame__media { align-self: start; }
  .jd-hero-frame__copy { position: relative; z-index: 1; align-self: center; justify-content: center; padding: var(--jd-space-s); }   /* above the masked picture (a mask makes the media paint over unpositioned siblings) */
}

/* ---- modifier --copy-left (see the header) ---- */
.jd-hero-frame--copy-left {
  --jd-hero-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1957 668' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M90.0 24.6 C121.9 16.7 173.7 31.6 215.5 32.7 C257.3 33.8 299.2 32.6 341.0 31.4 C382.8 30.2 424.7 27.0 466.5 25.8 C508.3 24.5 550.2 24.1 592.0 23.6 C633.8 23.2 675.7 23.1 717.5 23.3 C759.3 23.5 801.2 24.8 843.0 24.6 C884.8 24.5 926.7 24.7 968.5 22.6 C1010.3 20.4 1052.2 13.8 1094.0 11.8 C1135.8 9.8 1177.7 10.2 1219.5 10.8 C1261.3 11.4 1303.2 13.2 1345.0 15.4 C1386.8 17.6 1428.7 22.2 1470.5 24.1 C1512.3 26.0 1554.2 26.4 1596.0 26.8 C1637.8 27.2 1679.7 26.9 1721.5 26.6 C1763.3 26.2 1812.3 17.4 1847.0 24.6 C1881.7 31.9 1916.6 48.0 1929.7 70.0 C1942.9 92.0 1925.3 127.6 1925.9 156.3 C1926.6 185.1 1931.8 213.9 1933.7 242.7 C1935.5 271.4 1935.0 300.2 1937.1 329.0 C1939.2 357.8 1947.6 386.6 1946.4 415.3 C1945.2 444.1 1932.4 472.9 1930.0 501.7 C1927.6 530.4 1944.0 564.6 1931.9 588.0 C1919.7 611.4 1890.3 634.0 1857.0 642.0 C1823.7 650.0 1773.8 636.8 1732.2 635.9 C1690.6 634.9 1649.0 635.1 1607.4 636.2 C1565.8 637.4 1524.2 641.2 1482.6 642.7 C1441.0 644.2 1399.5 644.9 1357.9 645.0 C1316.3 645.1 1274.7 643.9 1233.1 643.3 C1191.5 642.7 1149.9 640.4 1108.3 641.3 C1066.7 642.3 1025.1 646.8 983.5 648.8 C941.9 650.8 900.3 652.0 858.7 653.4 C817.1 654.8 775.5 657.1 733.9 657.1 C692.3 657.1 650.7 656.0 609.1 653.4 C567.5 650.8 526.0 643.9 484.4 641.6 C442.8 639.2 401.2 639.2 359.6 639.3 C318.0 639.4 276.4 641.4 234.8 642.1 C193.2 642.8 144.5 654.2 110.0 643.5 C75.5 632.8 41.4 602.7 27.7 578.0 C14.1 553.3 28.8 522.7 28.2 495.0 C27.7 467.3 25.5 439.7 24.5 412.0 C23.5 384.3 24.8 356.7 22.5 329.0 C20.2 301.3 10.2 273.7 10.6 246.0 C11.0 218.3 22.7 190.7 25.0 163.0 C27.3 135.3 13.6 103.1 24.4 80.0 C35.2 56.9 58.1 32.4 90.0 24.6Z'/%3E%3C/svg%3E");   /* same outline as jd-hero-frame-mask.svg, inlined */
  --jd-hero-fit: cover;
}
@media (min-width: 768px) and (max-width: 1024.98px) {   /* the overlap of the base rule above, started earlier */
  .jd-hero-frame--copy-left .jd-hero-frame__media,
  .jd-hero-frame--copy-left .jd-hero-frame__copy { grid-area: 1 / 1; }
  .jd-hero-frame--copy-left .jd-hero-frame__media { align-self: start; }
  .jd-hero-frame--copy-left .jd-hero-frame__copy { position: relative; z-index: 1; align-self: center; justify-content: center; }   /* padding: composition, set by the page sheet */
}
@media (max-width: 767.98px) {
  .jd-hero-frame--copy-left { --jd-hero-ratio: 2 / 1; --jd-hero-pos: right center; }   /* crops only the plain left third */
  .jd-hero-frame--copy-left .jd-hero-frame__sub,
  .jd-hero-frame--copy-left .jd-hero-frame__eyebrow {   /* visually hidden, not display:none: the H1 keeps its full text */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .jd-hero-frame--copy-left .jd-hero-frame__copy .jd-btn .jd-btn__icon { display: none; }
}

/* ---- copy simplification (homepage rules, see the header) ---- */
@media (max-width: 1279.98px) {
  .jd-hero-frame__tags { display: none; }
}
@media (max-width: 1023.98px) {
  .jd-hero-frame__lead { display: none; }
}
@media (max-width: 599.98px) {
  .jd-hero-frame__sub,
  .jd-hero-frame__eyebrow {   /* visually hidden, not display:none: the H1 keeps its full text for assistive tech and search */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .jd-hero-frame__copy .jd-btn .jd-btn__icon { display: none; }   /* same weight as the button sheet's .jd-btn .jd-btn__icon, loaded either way */
}

/* the bar that separates the two parts of a split H1 is read by assistive tech and search, never shown (own utility, not the WordPress helper class) */
.jd-hero-frame__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.jd-hero-frame__part { display: inline-block; }   /* a split heading line keeps each phrase whole */