/**
 * TG Iwata Product Details
 * Intro (kicker + headline via admin typography) → product image → spray-scale
 * bar → 4 content columns. The scale wipes in from the left and the columns
 * fade in one-by-one when the section scrolls into view (see script.js).
 */
.tg-pd { text-align: center; }

/* ---- Yellow highlight bar under the subheadline (large font block) ----
   No <span> available on the text, so a centered pseudo-bar sits behind the
   last line (z-index:-1 = highlighter look). Width is a % per breakpoint since
   the line wraps differently — tune these three numbers to taste. */
.tg-pd-section .subheading-wrapper { position: relative; }
.tg-pd-section .subheading-wrapper::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.32em;
  transform: translateX(-50%);
  width: 78%;                 /* mobile */
  height: 0.7rem;
  background: var(--theme-primary-color, #F6EC23);
  z-index: -1;
  pointer-events: none;
}
@media (min-width: 48em) { .tg-pd-section .subheading-wrapper::after { width: 55%; } }  /* tablet */
@media (min-width: 62em) { .tg-pd-section .subheading-wrapper::after { width: 56%; } }  /* desktop */

/* ---- Product image ---- */
.tg-pd__media { margin: 0 auto 1.5rem; }
.tg-pd__img {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  margin: 0 auto;
}

/* ---- Spray scale ---- */
.tg-pd-scale { max-width: 720px; margin: 0 auto 3.5rem; }
.tg-pd-scale__labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.6rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #8a8a8a;
}
.tg-pd-scale__track {
  position: relative;
  height: 18px;
  border-radius: 999px;
  background: #e6e6e6;                 /* gray remainder */
}
.tg-pd-scale__fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;                            /* animates to --fill when in view */
  border-radius: 999px;
  background-image: linear-gradient(90deg, #F6EC23 0%, #00FF4D 50%, #00E3FF 100%);   /* full spectrum spread across the fill, ending on blue at the marker */
  background-repeat: no-repeat;
  /* gradient sizes to the fill's own width (Fine -> Medium), so the whole
     yellow->green->blue runs across the fill and lands on blue at the marker */
  transition: width 1.1s var(--reveal-ease, cubic-bezier(.22,.61,.36,1));
}
.tg-pd-scale.is-active .tg-pd-scale__fill { width: var(--fill, 40%); }
.tg-pd-scale__marker {
  position: absolute;
  top: 50%;
  left: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--theme-primary-color, #F6EC23);
  transform: translate(-50%, -50%);
  transition: left 1.1s var(--reveal-ease, cubic-bezier(.22,.61,.36,1));
  z-index: 2;
}
/* expanding "ping" ring behind the dot */
.tg-pd-scale__marker::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--theme-primary-color, #F6EC23);
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  z-index: -1;
}
.tg-pd-scale.is-active .tg-pd-scale__marker {
  left: var(--fill, 40%);
  animation: tg-pd-pulse 1.7s ease-in-out infinite;
}
.tg-pd-scale.is-active .tg-pd-scale__marker::before {
  animation: tg-pd-ping 1.7s ease-out infinite;
}
@keyframes tg-pd-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.18); }
}
@keyframes tg-pd-ping {
  0%       { transform: translate(-50%, -50%) scale(1);   opacity: 0.6; }
  80%,100% { transform: translate(-50%, -50%) scale(3.2); opacity: 0; }
}

/* ---- Content columns ----
   CSS Grid (not o-layout): these are filled cards with a gap, and o-layout's
   gutter is item padding that would fill with the card background instead of
   showing as a gap. CSS Grid puts the gap *between* the cards — the right tool
   here. 1-up mobile → 2-up at ≥48em (== Shadows --m). */
.tg-pd-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  max-width: 920px;
  margin: 0 auto;
  text-align: left;
}
@media (min-width: 48em) {
  .tg-pd-columns { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}
/* Card default (mobile + tablet): number STACKED on top of the content */
.tg-pd-col {
  display: grid;
  grid-template-columns: 1fr;
  background: #1a1a1a;
  color: #fff;
  border-radius: 12px;
  padding: 1.5rem 1.5rem 1.75rem;
  /* fade-in defaults (staggered via is-active below) */
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.tg-pd-columns.is-active .tg-pd-col { opacity: 1; transform: none; }
.tg-pd-columns.is-active .tg-pd-col:nth-child(1) { transition-delay: .05s; }
.tg-pd-columns.is-active .tg-pd-col:nth-child(2) { transition-delay: .20s; }
.tg-pd-columns.is-active .tg-pd-col:nth-child(3) { transition-delay: .35s; }
.tg-pd-columns.is-active .tg-pd-col:nth-child(4) { transition-delay: .50s; }
.tg-pd-col__num {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 0.9;
  margin-bottom: 0.5rem;
  color: var(--theme-primary-color, #F6EC23);
}
.tg-pd-col__heading {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
}
.tg-pd-col__body {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.65;
  color: #b8b8b8;
}

/* Desktop: number BESIDE the content, sizes bumped up */
@media (min-width: 62em) {
  .tg-pd-col {
    grid-template-columns: auto 1fr;
    column-gap: 1.1rem;
    align-items: start;
    padding: 1.75rem 1.85rem 2rem;
  }
  .tg-pd-col__num { grid-row: 1 / 3; font-size: 3.25rem; margin-bottom: 0; }
  .tg-pd-col__heading { grid-column: 2; margin: 0.35rem 0 0.5rem; font-size: 1rem; }
  .tg-pd-col__body { grid-column: 2; font-size: 0.85rem; }
}

/* ---- Respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .tg-pd-scale__fill, .tg-pd-col { transition: none; }
  .tg-pd-col { opacity: 1; transform: none; }
  .tg-pd-scale .tg-pd-scale__fill { width: var(--fill, 40%); }
  .tg-pd-scale .tg-pd-scale__marker { left: var(--fill, 40%); transition: none; animation: none; }
  .tg-pd-scale .tg-pd-scale__marker::before { animation: none; }
}

/* Hide the "See Technical Specs" button on tablet & mobile — desktop only (design notes) */
@media (max-width: 61.99em) {
  .tg-iwata-product-details-button-wrapper { display: none; }
}