/* ============================================
   HoK Reviews Widget — Phase 3 Rebuild
   2026-05-10
   Enqueued via Code Snippets entry #67

   NOTE: H2 clamp value duplicates global-styles.css —
   future refactor opportunity for --hok-h2-clamp variable.

   Pagination dot dimensions use pixels per bible §5 styling-conventions
   exception (fixed-size UI elements, not proportional spacing). Values
   match the existing loop-carousel widget's custom_css empirical pattern
   (46px × 4px, rgba(0,0,0,0.4) inactive, #000 active).

   margin-top values extracted from retired container 2e1cf58a's
   responsive variants — Phase 4a Step 1 Chrome MCP verification
   confirmed parent containers contribute zero vertical spacing.

   Phase 4b.4: 11 Figma-driven deltas applied (heading 55px Ultra, quote 145px,
   card grid restructure with quote-gutter, body 18px, attribution SemiBold,
   stars swap to inline SVG, pagination gap/margin tightening, auto-scroll).
   Tablet/mobile breakpoints add responsive overrides for the new card grid —
   Brian's mobile/tablet Figma not yet available, so these are sensible scale-downs.
   ============================================ */

.hok-reviews-widget {
  background-color: var(--hok-yellow);
  border-radius: 3.75rem; /* 60px — matches Phase 2 Track A landing */
  padding: 1.5rem 1.5rem 2.5rem; /* Phase 4f.4: top/sides 24px (was 64px); bottom 40px unchanged */
  /* Phase 4f.4: removed vestigial 43rem margin-top from retired container 2e1cf58a.
     Vertical placement now controlled by the Elementor container.
     Auto sides + max-width still centers the widget within its parent. */
  margin-top: 0;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 0;
  max-width: 1372px; /* Phase 4b.1: matches Figma card width; prevents full-viewport bleed */
  position: relative;
}

.hok-reviews-widget__title {
  font-family: 'Ultra', serif;
  font-weight: 400;
  font-size: 3.4375rem; /* 55px — Figma extraction node 34:59870 */
  line-height: 1.25; /* 69px / 55px ≈ 1.25 — Figma extraction */
  color: #000; /* Phase 4b.1: pure black per Figma (was var(--hok-text-dark) #333) */
  text-align: center;
  margin: 0 0 3rem;
}

/* Scroll-snap viewport.
   Phase 4b.3: `scroll-behavior: smooth` removed — empirically confirmed via
   claude.ai Chrome MCP DOM testing that the combo `scroll-behavior: smooth` +
   `scroll-snap-type: x mandatory` was blocking ALL programmatic scrollTo calls
   (cards wouldn't advance on dot click; viewport.scrollLeft pinned regardless).
   Smoothness preserved via the JS handler passing `behavior: 'smooth'` in
   scrollTo options — that path doesn't conflict with scroll-snap. */
.hok-reviews-widget__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hok-reviews-widget__viewport::-webkit-scrollbar {
  display: none;
}

.hok-reviews-widget__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(50% - 1rem);
  gap: 2rem;
  padding-bottom: 0.5rem;
}

/* Phase 4b.4: card restructured from flex-column to grid.
   Quote glyph occupies left gutter (column 1), body/attribution/stars stack
   in column 2 (matches Figma indent pattern — quote at x_rel ~88, content at x_rel ~172). */
/* Phase 4b.5 (2026-05-13): row-grid restructure. Quote (auto) | body (1fr, absorbs
   extra space) | footer (auto, pinned to card-bottom). Attribution + rating now
   wrapped in .hok-reviews-widget__footer in PHP markup (v1.2.0). */
.hok-reviews-widget__card {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto; /* quote (auto) · body (1fr fill) · footer (auto bottom) */
  row-gap: 0;
}

.hok-reviews-widget__quote {
  font-family: 'Ultra', serif;
  font-weight: 400;
  font-size: 9.0625rem; /* 145px — Figma extraction node 34:59871 */
  line-height: 1; /* glyph is decorative; tight line-height keeps it from creating excess vertical space */
  color: #000; /* Phase 4b.1: pure black per Figma (was var(--hok-text-dark) #333) */
  height: 80px; /* caps grid row height; glyph overflows */
  overflow: visible; /* allow 145px glyph to render beyond container */
  margin: 0;
  padding: 0;
}

.hok-reviews-widget__body {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400; /* Figma: blurb has no weight differentiation from body */
  font-size: 1.125rem; /* 18px — Figma extraction */
  line-height: 1.4;
  color: #000;
  margin: 0;
  padding-left: 5rem; /* indent body content right of quote */
}

/* Phase 4b.5 / v1.2.1 (2026-05-13): __footer holds name + location + rating as direct
   flex children (no __attribution wrapper). gap: 0 — name→location gap controlled by
   line-height residue; location→rating gap controlled by margin-top on __rating. */
.hok-reviews-widget__footer {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 5rem; /* match body indent */
}
.hok-reviews-widget__blurb {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600; /* semibold — differentiate from body text 400 */
  font-size: 1.125rem;
  line-height: 1.4;
  color: #000;
  margin: 0;
  margin-bottom: 0.25rem; /* small separator between blurb and body */
  display: block; /* keeps blurb on its own line above body */
}
.hok-reviews-widget__text {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.4;
  color: #000;
  margin: 0;
  display: block;
}

.hok-reviews-widget__name,
.hok-reviews-widget__location {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600; /* SemiBold — Figma extraction, both name and location */
  font-size: 1.125rem; /* 18px — Figma extraction */
  line-height: 1; /* tight stack — was 1.2 — collapses name-to-location gap further */
  color: #000;
  margin: 0 !important; /* defends against sitewide p-tag margins */
}

/* Phase 4b.4: stars swapped from Unicode glyphs to inline SVG.
   PHP emits SVG markup per star; CSS sizes the wrapper. */
.hok-reviews-widget__rating {
  display: flex;
  gap: 0.4rem; /* 23.27 - 17 ≈ 6.27px between stars — Figma extraction */
  margin-top: 0.25rem; /* 4px between location and stars (footer gap is 0) */
}
.hok-reviews-widget__star {
  display: inline-block;
  width: 1.0625rem; /* 17px — Figma extraction */
  height: 1.0625rem;
}
.hok-reviews-widget__star svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Pagination dots.
   Phase 4b.1 attempted `all: unset` alone — insufficient because global-styles.css
   has `button:not(.e-n-menu-dropdown-icon) { min-width: 14.0625rem !important }`
   which wins against any non-!important rule regardless of specificity.

   Phase 4b.2: compound selector (.hok-reviews-widget .hok-reviews-widget__dot)
   raises specificity to (0,2,0) vs `button` (0,0,1), plus explicit !important on
   each property that the global button cascade is setting. Six !important
   overrides total to comprehensively defeat the cascade.

   Future architectural alternative (deferred): switch <button> markup to <span
   role="button" tabindex="0"> in the PHP template + add Enter/Space keydown
   handler in JS. Avoids the cascade fight entirely. Out of Phase 4b.2 scope. */
.hok-reviews-widget__pagination {
  display: flex;
  justify-content: center;
  gap: 0.91rem; /* 14.54px between dots — Figma extraction */
  margin-top: 4.25rem; /* 91.70px (~68px from card bottom) — Figma extraction */
}
.hok-reviews-widget .hok-reviews-widget__dot {
  all: unset; /* strip what we can without !important */
  display: inline-block !important;
  width: 46px !important;
  min-width: 0 !important;       /* defeat global `button { min-width: 14.0625rem !important }` */
  max-width: 46px !important;
  height: 4px !important;
  padding: 0 !important;          /* defeat global button padding */
  border: none !important;
  border-radius: 0 !important;    /* defeat global button border-radius: 3px */
  box-shadow: none !important;    /* defeat global button box-shadow */
  background-color: rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.hok-reviews-widget .hok-reviews-widget__dot:hover {
  background-color: rgba(0, 0, 0, 0.7);
}
.hok-reviews-widget .hok-reviews-widget__dot.is-active {
  background-color: #000;
}
.hok-reviews-widget .hok-reviews-widget__dot:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

/* ============================================
   Responsive — extracted from retired container 2e1cf58a's
   tablet/mobile margin variants. Track C will refine later
   when Brian's mobile/tablet Figma arrives.

   Phase 4b.4 additions: scale quote gutter + quote font-size for narrower
   viewports; collapse grid to single column on mobile so 145px desktop quote
   doesn't overflow the cards-per-page=1 viewport.
   ============================================ */
@media (max-width: 1024px) {
  .hok-reviews-widget {
    padding: 1.5rem 1.5rem 2.5rem;
    /* Phase 4f.4: margin-top zeroed (matches desktop v1.3.4 fix); padding matched to desktop */
    margin-top: 0;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 0;
  }
  .hok-reviews-widget__title {
    margin-bottom: 2rem;
  }
  .hok-reviews-widget__track {
    grid-auto-columns: calc(75% - 1rem);
  }
  /* Phase 4b.5: card grid-template-columns override removed — desktop is now single-column. */
  .hok-reviews-widget__quote {
    font-size: 6rem; /* 96px — scale down from desktop 145px */
  }
}

@media (max-width: 767px) {
  .hok-reviews-widget {
    padding: 1rem 1rem 1.5rem;
    /* Phase 4f.4: margin-top zeroed; padding tapered for mobile */
    margin-top: 0;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 0;
  }
  .hok-reviews-widget__track {
    grid-auto-columns: calc(100% - 1rem);
  }
  /* Phase 4b.5: card-grid-collapse override removed — desktop is now single-column already. */
  .hok-reviews-widget__quote {
    font-size: 4.5rem; /* 72px */
    text-align: left;
  }

  .hok-reviews-widget__body,
  .hok-reviews-widget__footer {
    padding-left: 2rem;   /* mobile: was 5rem — recovers ~48px text width on ~344px cards; quote no longer side-aligned at this breakpoint. Swap to 1rem or 0 to taste. */
  }
}