/* 21-careers-testimonial-pad — Careers "Why we work here" reviews carousel.
 *
 * REGRESSION: the testimonial quote text ("There's an entrepreneurial spirit
 * here..." / "Since joining Vest in 2015..." / "Everybody here shares...")
 * runs FLUSH to the LEFT edge of its card, with no inner gutter, at every
 * width >= 768px (desktop AND the iPad-portrait / 768-789 tablet band).
 *
 * ROOT CAUSE (verified against the LIVE staging DOM + the actual matched CSS
 * rules via CDP CSS.getMatchedStylesForNode, not the stale QA copies):
 *
 *   The original Nuxt build inset the quote block with a horizontal MARGIN on
 *   the scoped selector `.review-container__content[data-v-87e8ab99]`
 *   (`margin: auto 2rem 2rem` desktop => the 32px = 2rem inset seen on prod,
 *   `margin: 2rem 1rem 1rem 2rem` tablet). The WP theme port stripped the
 *   `data-v-87e8ab99` scope attribute from the markup, so NONE of those Nuxt
 *   margin rules match on staging. The theme's replacement,
 *   assets/css/12-careers-whywework.css, redefines the block with only
 *
 *       .review-container__content { width:70%; margin-top:24px; }
 *
 *   i.e. a VERTICAL margin only — zero horizontal inset. So at >=768px the
 *   block resolves to margin/padding 0 horizontally and the quote text touches
 *   the card's left edge. (The theme's tablet override is also dead: its
 *   `@media (min-width: 600px and max-width: 789px)` is invalid media syntax
 *   and never matches.)
 *
 *   Below 768px the block is NOT flush: a page-inline <style> in the careers
 *   template BODY carries `@media (max-width:767px){ #why-we-work-here
 *   .review-container__content { padding:20px !important } }`, which already
 *   supplies a 20px gutter there. That body-inline `!important` is why a non-
 *   important fix — and even an equal-specificity `!important` fix — is
 *   silently ignored across <=767px: the inline rule is later in source order
 *   and same specificity (1,1,0), so it wins the !important tie. To beat it the
 *   <=767px bands raise specificity to (1,2,0) via the slide ancestor.
 *
 * FIX: restore prod's horizontal inset on the reviews content block across the
 * FULL width range, scoped to #why-we-work-here so nothing else is touched.
 * The block is box-sizing:border-box with an explicit width, so padding insets
 * the quote text without disturbing the carousel geometry or the per-slide
 * background image. `!important` is used ONLY in the two bands that must beat
 * the inline `padding:20px !important`; the >=790px desktop band needs none.
 * Bands are contiguous and use VALID media syntax, with no coverage gap:
 *
 *   >= 790px  desktop : 32 / 32  (prod margin 32 / 32)               [the regression]
 *   768-789px tablet  : 32 / 16  (prod margin 32 / 16)               [the regression]
 *   600-767px tablet  : 32 / 16  (prod margin 32 / 16; beats inline 20px)
 *   <= 599px  mobile  : 16 / 16  (prod padding 16 / 16; beats inline 20px)
 *
 * Specificity:
 *   >=768px bands use `#why-we-work-here .review-container__content` (1,1,0);
 *     nothing !important competes there, so this wins on specificity over the
 *     bare-class 12-careers rule.
 *   <=767px bands add the `.carousel-3d-slide` ancestor =>
 *     `#why-we-work-here .carousel-3d-slide .review-container__content`
 *     (1,2,0) and use `!important`, so they beat the later, lower-specificity
 *     body-inline `padding:20px !important` (1,1,0) regardless of source order.
 * Vertical margin-top and the --mob-bg-pos background rule are left untouched.
 */

/* Desktop: prod insets the quote 32px from each card edge. No competing
 * !important here, so plain declarations win on specificity + source order. */
@media (min-width: 790px) {
  #why-we-work-here .review-container__content {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* Upper tablet 768-789px (iPad portrait — the band flagged in QA): prod
 * margin 32 left / 16 right. Above the 767px inline rule, so no !important. */
@media (min-width: 768px) and (max-width: 789px) {
  #why-we-work-here .review-container__content {
    padding-left: 32px;
    padding-right: 16px;
  }
}

/* Lower tablet 600-767px: prod margin 32 / 16. Raised specificity (1,2,0) +
 * !important to beat the body-inline `padding:20px !important` (<=767px). */
@media (min-width: 600px) and (max-width: 767px) {
  #why-we-work-here .carousel-3d-slide .review-container__content {
    padding-left: 32px !important;
    padding-right: 16px !important;
  }
}

/* Mobile <=599px: prod gives the content block a 16px inner gutter. Same
 * raised specificity + !important to beat the inline rule. */
@media (max-width: 599px) {
  #why-we-work-here .carousel-3d-slide .review-container__content {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}