/* Home "Why Coat a Concrete Floor" (section.why-p, index.html only).
   Split layout: copy on the left, one confident photo stage on the right.
   - Ground: the shared light surface, as the model site does.
   - Copy: lead, then the four benefits as a numbered ledger (hairline rows, ink numerals, short orange rule).
   - Stage: the shared photo slider, framed in ink. The photo sits on top; beneath it one control bar
     carries the count ("03 / 06"), the authored caption and the shared blades. Nothing hangs off the photo.
     The dots become a four-pixel segmented progress line along the bottom edge of the photo.
   Everything is the shared slider (js/site.js): same markup, same engine, same arrows; this file only restyles it
   inside .why-p. js/site.js writes --slide and --slides on the shell; the count is read from them with CSS counters.
   No motion of its own: colour fades only. */

.why-p { --why-r: 16px; --why-bar: 64px; }

/* ---------- layout ---------- */
body main .why-p .h-why { align-items: center; }
body main .why-p .why-p__copy { min-width: 0; }
body main .why-p .why-p__stage { min-width: 0; }
body main .why-p .lead { font-size: 20px; line-height: 1.5; margin: 0 0 28px; max-width: 30em; }

/* ---------- the numbered ledger ---------- */
body main .why-p .why-p__list.why-p__list { counter-reset: why; display: block; margin: 0 0 32px; border-bottom: 1px solid var(--ink-alpha-14); }
body main .why-p .why-p__list li {
  counter-increment: why; position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: start;
  column-gap: 0; padding: 18px 0 18px 0; margin: 0; border-top: 1px solid var(--ink-alpha-14);
  font-size: var(--t-body); line-height: 1.5; font-weight: 500; color: var(--ink);
}
body main .why-p .why-p__list li::before {
  content: counter(why, decimal-leading-zero); position: static; transform: none; width: auto; height: auto; border-radius: 0; background: none;
  font: 800 24px/1.1 var(--font-head); font-stretch: 100%; letter-spacing: -.005em; color: var(--ink); font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
body main .why-p .why-p__list li::after {
  content: ""; position: absolute; left: 0; top: -2px; width: 24px; height: 3px; background: var(--orange);
}

/* ---------- the photo stage: ink frame, one control bar ---------- */
body main .why-p .photo-slider-shell {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto 12px; grid-template-rows: auto var(--why-bar);
  align-items: center; padding: 0; max-width: 100%; overflow: hidden;
  background: var(--ink); border-radius: var(--why-r);
}
body main .why-p .photo-slider-shell > .photo-slider:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) {
  grid-area: 1 / 1 / 2 / -1; margin: 0; aspect-ratio: 4 / 3; border-radius: 0;
}
/* count: "03 / 06", read from --slide and --slides */
body main .why-p .photo-slider-shell::before {
  content: counter(slide, decimal-leading-zero) " / " counter(slides, decimal-leading-zero);
  counter-reset: slide var(--slide, 1) slides var(--slides, 1);
  grid-area: 2 / 1; align-self: center; padding: 0 0 0 22px;
  font: 800 18px/1 var(--font-head); font-variant-numeric: tabular-nums; letter-spacing: .06em; color: var(--white); white-space: nowrap;
}
/* caption: authored text, mirrored by the shared engine into .photo-slider__caption */
body main .why-p .photo-slider-shell > .photo-slider__caption.photo-slider__caption.photo-caption:not(#_):not(#_):not(#_):not(#_):not(#_) {
  grid-area: 2 / 2; position: static; inset: auto; transform: none; width: auto; max-width: none; min-width: 0; margin: 0;
  padding: 0 20px 0 22px; border: 0; border-radius: 0; background: none; box-shadow: none;
  font: 600 var(--t-body)/1.3 var(--font-body); text-align: left; color: var(--white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-self: center;
}
/* blades: the shared control, seated in the bar */
body main .why-p .photo-slider-shell > button.carousel-arrow.carousel-arrow.carousel-arrow:not(#_):not(#_):not(#_) {
  position: relative; inset: auto; top: auto; left: auto; right: auto; transform: none; align-self: center; margin: 0 0 0 8px;
  border-radius: var(--pill); background: transparent; color: var(--white); border-color: var(--paper-alpha-20); box-shadow: none; z-index: 2;
}
body main .why-p .photo-slider-shell > button.carousel-arrow[data-arrow-direction="prev"]:not(#_):not(#_):not(#_) { grid-area: 2 / 3; }
body main .why-p .photo-slider-shell > button.carousel-arrow[data-arrow-direction="next"]:not(#_):not(#_):not(#_) { grid-area: 2 / 4; }
body main .why-p .photo-slider-shell > button.carousel-arrow.carousel-arrow.carousel-arrow:hover:not(:disabled):not(#_):not(#_):not(#_):not(#_) { background: var(--orange); color: var(--ink); border-color: var(--orange); }

/* dots: a four-pixel segmented progress line on an ink track at the foot of the photo; the targets stay 40px */
body main .why-p .photo-slider .photo-slider__dots:not(#_):not(#_) {
  inset: auto 0 0 0; height: 40px; justify-content: stretch; gap: 0; z-index: 3; pointer-events: none;
}
body main .why-p .photo-slider .photo-slider__dots::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--ink); z-index: 0;
}
body main .why-p .photo-slider .photo-slider__dots button:not(#_):not(#_):not(#_) {
  flex: 1 1 0; width: auto; min-width: 40px; z-index: 1; pointer-events: auto; border-radius: 0;
}
body main .why-p .photo-slider .photo-slider__dots button:not(#_):not(#_):not(#_)::before {
  inset: auto 1px 0 1px; width: auto; height: 4px; border-radius: 0; background: var(--white); opacity: .4;
  transition: opacity var(--dur-2) var(--ease-standard), background-color var(--dur-2) var(--ease-standard);
}
body main .why-p .photo-slider .photo-slider__dots button[aria-current="true"]:not(#_):not(#_):not(#_)::before { width: auto; left: 1px; background: var(--orange); opacity: 1; }
body main .why-p .photo-slider .photo-slider__dots button:hover:not(#_):not(#_):not(#_)::before { opacity: .7; }
body main .why-p .photo-slider .photo-slider__dots button[aria-current="true"]:hover:not(#_):not(#_):not(#_)::before { opacity: 1; }

/* ---------- between phone and desktop: one column, wider stage ---------- */
@media (max-width: 899.98px) {
  body main .why-p .h-why { gap: 36px; }
  body main .why-p .photo-slider-shell > .photo-slider:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { aspect-ratio: 16 / 10; }
  body main .why-p .lead { max-width: none; }
}

/* ---------- phone: ledger, then the stage with caption above the count and blades ---------- */
@media (max-width: 559.98px) {
  .why-p { --why-r: 12px; }
  body main .why-p .h-why { gap: 28px; }
  body main .why-p .lead { font-size: var(--t-lead); margin-bottom: 20px; }
  body main .why-p .why-p__list.why-p__list { margin-bottom: 24px; }
  body main .why-p .why-p__list li { grid-template-columns: 48px minmax(0, 1fr); padding: 16px 0; }
  body main .why-p .why-p__copy .btn { display: flex; width: 100%; justify-content: center; }
  body main .why-p .photo-slider-shell {
    grid-template-columns: minmax(0, 1fr) auto auto 12px; grid-template-rows: auto auto auto; padding: 0 0 12px;
  }
  body main .why-p .photo-slider-shell > .photo-slider:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { aspect-ratio: 4 / 3; }
  body main .why-p .photo-slider-shell > .photo-slider__caption.photo-slider__caption.photo-caption:not(#_):not(#_):not(#_):not(#_):not(#_) {
    grid-area: 2 / 1 / 3 / -1; padding: 16px 16px 4px; white-space: normal; text-overflow: clip; align-self: start;
  }
  body main .why-p .photo-slider-shell::before { grid-area: 3 / 1; padding-left: 16px; font-size: 16px; }
  body main .why-p .photo-slider-shell > button.carousel-arrow[data-arrow-direction="prev"]:not(#_):not(#_):not(#_) { grid-area: 3 / 2; margin-left: 0; }
  body main .why-p .photo-slider-shell > button.carousel-arrow[data-arrow-direction="next"]:not(#_):not(#_):not(#_) { grid-area: 3 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  body main .why-p .photo-slider .photo-slider__dots button::before { transition: none; }
}