/* jdtheme26 - HOME PAGE BLOCK "two picture cards" (2026-10-02), markup: inc/jd-home-promos.php ([jd_home_promos], row .jd-home-promos-row).
   One row, two columns from 768px (cake picture | dining-ware picture); phones stack, one card per row.
   Each card is ONE link around the picture; the heading and the pill sit on the picture's empty wash (left on both cards since the 2026-10-03 pictures) and scale with the
   card width (container query units), so they fit at every width. Padding 20px top / bottom (operator 2026-10-02; deliberately not the 60px .jd-home-section rule);
   title look = jd-home-title.css (with the eyebrow spark), pill = .jd-btn--cocoa (jd-button.css, sizes set per card width like the hero button). */

.jd-promos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--jd-space-m);
  padding-block: var(--jd-space-m);        /* 20px above and below (operator 2026-10-02) - this row is NOT a 60px .jd-home-section */
}

.jd-promo {
  position: relative;
  display: block;
  container-type: inline-size;
  aspect-ratio: 1200 / 566;                /* one card height for both cards = the pictures' own size (2026-10-03 pictures 1200 x 566, both washes y 100-543 so the two cards' washes are equally tall, nothing cropped) */
  border-radius: 20px;
  color: var(--jd-ink-900, #3b2a1f);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .25s ease;
}
.jd-promo picture { display: block; height: 100%; }
.jd-promo__img {
  display: block;
  width: 100%;
  height: 100%;
  transition: filter .25s ease;
}
.jd-promo__img { filter: url(#jd-pic-feather); object-fit: cover; object-position: 50% 55%; }   /* picture edge slightly soft (about 2.4px, #jd-pic-feather in functions.php); the lines inside stay sharp */   /* both pictures share the same ratio (2026-10-02 dining picture replaced), so the cards line up exactly */

/* eyebrow + heading + (line) + pill on the empty wash: the left ~38% of both pictures is free of animals */
.jd-promo__text {
  position: absolute;
  top: 56.7%;                              /* centre of the wash band (y 321 of 566), not of the whole picture */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.2cqw;
  left: 6%;
  width: 34%;                              /* the heading stays on one line when it fits, the drawn pieces wrap only on narrow cards */
  transform: translateY(-50%);
}
@media (min-width: 1025px) {
  .jd-promo--dining .jd-promo__text { left: 11%; width: 31%; }   /* the desktop dining picture's wash is narrower (x 89-1111 of 1200) */
}

.jd-promo__head {
  --jd-home-title-size: clamp(15px, 3.2cqw, 26px);
  --jd-home-eyebrow-size: clamp(11px, 3.1cqw, 19px);
  --jd-home-eyebrow-color: #7a5240;     /* cocoa of .jd-btn--cocoa: 5.3:1 on the pink wash, 5.8:1 on the yellow wash */
  gap: 30px 0;                  /* eyebrow -> heading, the same 30px as every home section head on wide cards */
  margin: 0 0 max(7px, 1.2cqw);   /* clear space between heading and the line / pill at every width */
}
body .jd-promo .jd-home-head .jd-home-title { line-height: 1.35; }
.jd-promo .jd-home-eyebrow { gap: clamp(3px, .8cqw, 8px); }
.jd-promo .jd-home-eyebrow.jd-home-eyebrow--spark2::after {
  width: calc(var(--jd-home-eyebrow-size) * 1.1);
  height: calc(var(--jd-home-eyebrow-size) * 1.1);
  margin-top: calc(var(--jd-home-eyebrow-size) * -.35);
}

/* the short line only on wide cards (not enough room beside the animals below this) */
.jd-promo__lead {
  display: none;
  margin: 0;
  color: var(--jd-ink-700, #5c4a3c);
  font-size: clamp(12px, 2.1cqw, 13px);
  line-height: 1.6;
  letter-spacing: .06em;
  text-wrap: balance;
  word-break: keep-all;          /* break only at the commas, never inside a word (派對帽, 飲水器) */
}
@container (min-width: 520px) {
  .jd-promo__lead { display: block; }
}

body .jd-promo .jd-promo__pill {
  --jd-btn-h: clamp(28px, 6.6cqw, 40px);
  --jd-btn-px: clamp(11px, 3cqw, 22px);
  --jd-btn-fs: clamp(11px, 2.6cqw, 15px);
}
.jd-promo .jd-btn__icon svg { width: 1.1em; height: 1.1em; }
/* narrower cards (phones, stacked tablets' small widths): the eyebrow, the heading and the pill stay one tight group on the wash */
@container (max-width: 520px) {
  .jd-promo__head { row-gap: 8px; }
}
@container (max-width: 439px) {
  .jd-promo .jd-home-head .jd-home-title { max-width: 6.6em; }   /* both headings break into their two pieces on small cards (one line from 440px up) */
  .jd-promo__text { gap: 1.2cqw; }                          /* small cards: tighter, the block stays inside the wash band */
  .jd-promo__head { --jd-home-title-size: 14px; }
  body .jd-promo .jd-promo__pill { --jd-btn-h: 26px; }
}
@container (max-width: 330px) {
  .jd-promo .jd-btn__icon { display: none; }   /* narrow phones: the pill keeps its text only, like the hero button */
}

/* the button floats a little all the time, like the hero button (stops on hover and for reduced motion) */
@keyframes jd-promo-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: no-preference) {
  .jd-promo__pill { animation: jd-promo-float 3.2s ease-in-out 1s infinite; }
  .jd-promo:hover .jd-promo__pill { animation-play-state: paused; }
}

/* the whole card reacts */
@media (hover: hover) {
  .jd-promo:hover { transform: translateY(-3px); }
  .jd-promo:hover .jd-promo__img { filter: url(#jd-pic-feather) drop-shadow(0 10px 14px rgba(60, 30, 40, .12)); }
  .jd-promo:hover .jd-promo__pill::before { background-color: var(--jd-btn-bg-hover); }
}
.jd-promo { --wd-otl-style: solid; --wd-otl-color: var(--jd-ink-900, #3b2a1f); --wd-otl-offset: 4px; }   /* WoodMart's own :focus-visible outline (it carries !important) reads these tokens */
@media (prefers-reduced-motion: reduce) {
  .jd-promo, .jd-promo__img { transition: none; }
  .jd-promo:hover { transform: none; }
}

/* phones AND tablets: one card per row, so both washes start and end at the same x (operator 2026-10-03). The dining card uses its second picture
   here (inc/jd-home-promos.php, -full: the wash fills the width like the birthday one, 1200 x 627), so its box follows that picture and its text
   sits where the birthday text sits. Side by side only from 1025px, where the two 1200 x 566 pictures keep equal heights. */
@media (max-width: 1024.98px) {
  .jd-promos { grid-template-columns: minmax(0, 1fr); }
  .jd-promo--dining { aspect-ratio: 1200 / 627; }
  .jd-promo--dining .jd-promo__text { top: 56.5%; }   /* centre of the dining wash (y 354 of 627) */
}