/* ==========================================================================
   WV PDP — All About (F5 only)
   --------------------------------------------------------------------------
   Two-column section: lifestyle image left, heading + 4-row accordion
   right. Native <details>/<summary> for semantics + a11y; minimal JS
   enforces single-open behavior. Row 2 is default-open per design.

   Typography is fully delegated to global classes applied in the template
   (.wv-h2 on heading, .wv-h5 on subtitle, .wv-body-lg on body). No local
   font-family / font-size / font-weight / line-height declarations here.
   ========================================================================== */

.wv-pdp-all-about {
  /* NEEDS DESIGNER REVIEW: vertical padding */
  padding: 80px 0;
}

.wv-pdp-all-about__inner {
  max-width: var(--wv-container-max);
  margin: 0 auto;
  /* Mobile-first padding cadence: 24 (base) → 50 (min-width: 768) →
     80 (min-width: 1280). Matches other PDP sections. */
  padding: 0 24px;

  display: grid;
  /* Mobile-first grid: 1fr stacked (base) → 1fr 1fr at min-width: 768. */
  grid-template-columns: 1fr;
  /* Column gap: 40 (tablet) → 60 (desktop, at min-width: 1280). */
  gap: 40px;
  align-items: start;
}

.wv-pdp-all-about__image {
  display: block;
  /* Mobile-first: image bleeds to both viewport edges (escapes the
     __inner column's 24px side padding). At mobile the grid is
     single-column so the image fills the row; bleeding extends it
     edge-to-edge. Radius removed since the image now sits flush to
     the viewport. Tablet+ block below resets to column-fit + radius
     + the existing left-bleed modifier behavior. */
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  height: auto;
}

/* Left-bleed variant — promoted 2026-06-03 from the postid-75844 test.
   Image's right edge stays at the grid-column boundary; left edge
   bleeds to the viewport's left edge. Applied via the .--bleed-left
   modifier — parts/pdp-all-about.php adds it unconditionally (the
   partial is F5-only).

   Math: at viewports ≥ container_max, the bleed distance is
   (viewport - container_max) / 2 + inner padding; below container_max
   the centering offset is 0 so the bleed is just the inner padding.
   max(0px, …) clamps the centering term to zero at narrow viewports.
   Only applies at ≥768 — at mobile the grid is single-column so the
   image already fills the row. */
@media (min-width: 768px) {
  /* Reset the mobile viewport-bleed: at tablet+ the image fits its column
     (left half of the 2-col grid) and restores the radius corner. The
     --bleed-left modifier below extends the LEFT edge into the viewport
     while keeping the right edge at the column boundary. */
  .wv-pdp-all-about__image {
    width: 100%;
    margin-left: 0;
    border-bottom-right-radius: var(--wv-radius-lg);
  }

  .wv-pdp-all-about__image--bleed-left {
    max-width: none;
    width: calc(100% + max(0px, (100vw - var(--wv-container-max)) / 2) + 50px);
    margin-left: calc(-1 * (max(0px, (100vw - var(--wv-container-max)) / 2) + 50px));
  }
}
@media (min-width: 1280px) {
  .wv-pdp-all-about__image--bleed-left {
    width: calc(100% + max(0px, (100vw - var(--wv-container-max)) / 2) + 80px);
    margin-left: calc(-1 * (max(0px, (100vw - var(--wv-container-max)) / 2) + 80px));
  }
}

/* When no image is set (per-product or defaults), the partial omits the
   __media element. Lock the content column to the right half so the
   layout reads intentionally instead of left-aligning into the empty
   media slot. Mobile (single-column) — see min-width: 768 block below
   for the right-lock that only applies at tablet+. */
.wv-pdp-all-about__content:only-child {
  grid-column-start: auto;
}

.wv-pdp-all-about__heading {
  /* NEEDS DESIGNER REVIEW: gap below heading before accordion */
  margin-bottom: 32px;
}

.wv-pdp-all-about__accordion {
  display: flex;
  flex-direction: column;
  /* NEEDS DESIGNER REVIEW: gap between accordion items */
  gap: 12px;
}

.wv-pdp-all-about__item {
  border: 1px solid var(--wv-color-olive-dark);
  border-radius: var(--wv-radius-sm);
  /* NEEDS DESIGNER REVIEW: internal padding */
  padding: 20px 24px;
}

.wv-pdp-all-about__subtitle {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Hide the native <summary> disclosure marker so the ::before indicator
   below is the only visual cue. */
.wv-pdp-all-about__subtitle::-webkit-details-marker {
  display: none;
}
.wv-pdp-all-about__subtitle::marker {
  content: "";
}

.wv-pdp-all-about__subtitle::before {
  /* Designer-approved icons 2026-06-01: use icon-green-plus /
     icon-green-minus PNGs instead of the text "+" / "−" characters.
     Width matches the typography line-height so the icon sits inline
     without changing the row's vertical metrics. */
  content: "";
  display: inline-block;
  width: 26px;
  height: 26px;
  vertical-align: middle;
  margin-right: 8px;
  background-image: url('../images/icons/icon-green-plus.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.wv-pdp-all-about__item[open] .wv-pdp-all-about__subtitle::before {
  background-image: url('../images/icons/icon-green-minus.png');
}

.wv-pdp-all-about__body {
  /* NEEDS DESIGNER REVIEW: spacing between subtitle and body when open */
  padding-top: 16px;
}

.wv-pdp-all-about__body p {
  margin: 0 0 12px;
}

.wv-pdp-all-about__body p:last-child {
  margin-bottom: 0;
}

/* ── Responsive tiers — match other PDP sections ── */

@media (min-width: 768px) {
  .wv-pdp-all-about__inner {
    padding: 0 50px;
    grid-template-columns: 1fr 1fr;
  }

  /* Tablet+ right-lock: when no image renders, content sits in the
     right column so the layout reads intentionally. */
  .wv-pdp-all-about__content:only-child {
    grid-column-start: 2;
  }
}

@media (min-width: 1280px) {
  .wv-pdp-all-about__inner {
    padding: 0 80px;
    gap: 60px;
  }
}

/* ==========================================================================
   MOBILE — NOT YET BUILT
   --------------------------------------------------------------------------
   At ≤899px the grid collapses to a single column (image above content).
   Mobile-specific tuning (vertical padding, item padding, body spacing,
   subtitle indicator size) deferred until designer provides mobile spec.
   See MOBILE-DESIGN-RULES.md.
   ========================================================================== */