/* =========================================================
   V84 — Client Stories screenshot match + Video Guidance mosaic
   Loaded after V83 and legacy polish so these approved layouts win.
   ========================================================= */

/* ---------------------------------------------------------
   CLIENT STORIES — match supplied desktop reference
   --------------------------------------------------------- */
.testimonial-section.client-stories-section[data-shg-style="home_testimonial"]{
  padding:56px 0 18px !important;
  background:#fff !important;
  overflow:hidden !important;
}
.client-stories-wrap{
  width:min(1189px,calc(100% - 180px)) !important;
  margin:0 auto !important;
}
.client-stories-head{
  display:grid !important;
  grid-template-columns:minmax(0,1.48fr) minmax(0,1fr) !important;
  gap:72px !important;
  align-items:end !important;
  margin-bottom:40px !important;
}
.client-stories-title-wrap .eyebrow{
  display:block !important;
  margin-bottom:18px !important;
  font-size:10px !important;
  line-height:1.2 !important;
  letter-spacing:.22em !important;
}
.testimonial-section.client-stories-section[data-shg-style="home_testimonial"] .client-stories-title[data-shg-element="heading"]{
  margin:0 !important;
  font-size:52px !important;
  line-height:1 !important;
  letter-spacing:-.042em !important;
  font-weight:400 !important;
}
.client-stories-title em{
  color:var(--accent) !important;
  font-weight:400 !important;
}
.client-stories-aside{
  align-self:end !important;
  padding:0 0 1px !important;
}
.testimonial-section.client-stories-section[data-shg-style="home_testimonial"] .client-stories-aside>[data-shg-element="paragraph"]{
  max-width:470px !important;
  margin:0 0 24px !important;
  color:var(--muted) !important;
  font-size:14px !important;
  line-height:1.58 !important;
}
.client-stories-controls{
  display:flex !important;
  gap:8px !important;
}
.client-story-arrow{
  width:41px !important;
  height:42px !important;
  border:1px solid var(--line) !important;
  border-radius:9px !important;
  background:var(--paper) !important;
  color:var(--ink) !important;
  font-size:16px !important;
  box-shadow:none !important;
}
.client-story-arrow:hover{
  background:var(--ink) !important;
  color:#fff !important;
  border-color:var(--ink) !important;
}
.client-stories-track{
  display:grid !important;
  grid-auto-flow:column !important;
  grid-auto-columns:296px !important;
  gap:15px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scroll-snap-type:x mandatory !important;
  padding:0 !important;
}
.client-story-card{
  min-height:320px !important;
  height:320px !important;
  padding:27px 25px 24px !important;
  border:1px solid var(--line) !important;
  border-radius:9px !important;
  background:var(--paper) !important;
  box-shadow:none !important;
}
.client-story-stars{
  font-size:9px !important;
  letter-spacing:1.6px !important;
  color:var(--accent) !important;
}
.client-story-index{
  font-size:8px !important;
  letter-spacing:.18em !important;
  color:var(--muted) !important;
}
.client-story-card blockquote{
  max-width:100% !important;
  margin:42px 0 28px !important;
  font-size:20px !important;
  line-height:1.02 !important;
  letter-spacing:-.018em !important;
  font-weight:400 !important;
}
.client-story-meta{
  gap:11px !important;
}
.client-story-meta i{
  width:31px !important;
}
.client-story-meta span{
  font-size:8px !important;
  line-height:1.4 !important;
  letter-spacing:.16em !important;
}

/* ---------------------------------------------------------
   VIDEO GUIDANCE — pure six-tile media mosaic from reference
   --------------------------------------------------------- */
.video-guides-section.video-guides-gallery{
  position:relative !important;
  padding:26px 0 56px !important;
  background:#fff !important;
  overflow:hidden !important;
}
.video-guides-section.video-guides-gallery:before{
  display:none !important;
  content:none !important;
}
.video-guides-gallery .video-guides-grid.video-guides-mosaic{
  width:min(1068px,calc(100% - 64px)) !important;
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:minmax(0,1.28fr) minmax(0,.49fr) minmax(0,.49fr) !important;
  grid-template-rows:252px 221px !important;
  gap:14px 18px !important;
}
.video-guides-gallery .video-guide-card{
  min-width:0 !important;
  display:block !important;
  background:#999 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:hidden !important;
}
.video-guides-gallery .video-guide-card.guide-1{grid-column:1 !important;grid-row:1 !important}
.video-guides-gallery .video-guide-card.guide-2{grid-column:1 !important;grid-row:2 !important}
.video-guides-gallery .video-guide-card.guide-3{grid-column:2 !important;grid-row:1 !important}
.video-guides-gallery .video-guide-card.guide-4{grid-column:3 !important;grid-row:1 !important}
.video-guides-gallery .video-guide-card.guide-5{grid-column:2 !important;grid-row:2 !important}
.video-guides-gallery .video-guide-card.guide-6{grid-column:3 !important;grid-row:2 !important}
.video-guides-gallery .video-guide-media{
  position:relative !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:#999 !important;
  overflow:hidden !important;
}
.video-guides-gallery .video-guide-media img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  transform:none !important;
  transition:transform .5s ease,filter .5s ease !important;
}
.video-guides-gallery .video-guide-shade{
  background:linear-gradient(0deg,rgba(0,0,0,.22),rgba(0,0,0,.02) 55%) !important;
  opacity:.62 !important;
  transition:opacity .25s ease !important;
}
.video-guides-gallery .video-guide-play{
  width:54px !important;
  height:54px !important;
  padding:0 !important;
  border:1px solid rgba(255,255,255,.78) !important;
  border-radius:50% !important;
  background:rgba(16,16,15,.18) !important;
  color:#fff !important;
  font-size:12px !important;
  opacity:0 !important;
  transform:translate(-50%,-50%) scale(.94) !important;
  transition:opacity .2s ease,transform .2s ease,background .2s ease !important;
}
.video-guides-gallery .video-guide-media[data-preview-only="true"] .video-guide-play,
.video-guides-gallery .video-guide-media[data-preview-only="true"]:after{
  display:none !important;
  content:none !important;
}
.video-guides-gallery .video-guide-media:not([aria-disabled="true"]):hover img{
  transform:scale(1.025) !important;
}
.video-guides-gallery .video-guide-media:not([aria-disabled="true"]):hover .video-guide-shade{
  opacity:.9 !important;
}
.video-guides-gallery .video-guide-media:not([aria-disabled="true"]):hover .video-guide-play,
.video-guides-gallery .video-guide-media:not([aria-disabled="true"]):focus-visible .video-guide-play{
  opacity:1 !important;
  transform:translate(-50%,-50%) scale(1) !important;
}
.video-guides-gallery .video-guide-media:focus-visible{
  outline:2px solid var(--ink) !important;
  outline-offset:-2px !important;
}

@media(max-width:1100px){
  .client-stories-wrap{width:calc(100% - 64px) !important}
  .client-stories-head{grid-template-columns:1fr !important;gap:26px !important;margin-bottom:34px !important}
  .client-stories-aside{display:grid !important;grid-template-columns:minmax(0,1fr) auto !important;gap:20px !important;align-items:end !important}
  .testimonial-section.client-stories-section[data-shg-style="home_testimonial"] .client-stories-aside>[data-shg-element="paragraph"]{margin:0 !important}
  .client-stories-track{grid-auto-columns:min(44vw,296px) !important}

  .video-guides-gallery .video-guides-grid.video-guides-mosaic{
    width:calc(100% - 48px) !important;
    grid-template-columns:1.28fr .49fr .49fr !important;
    grid-template-rows:228px 200px !important;
  }
}

@media(max-width:760px){
  .testimonial-section.client-stories-section[data-shg-style="home_testimonial"]{padding:68px 0 34px !important}
  .client-stories-wrap{width:calc(100% - 32px) !important}
  .testimonial-section.client-stories-section[data-shg-style="home_testimonial"] .client-stories-title[data-shg-element="heading"]{font-size:clamp(40px,12vw,52px) !important;line-height:.98 !important}
  .client-stories-aside{grid-template-columns:1fr !important;gap:18px !important}
  .client-stories-track{grid-auto-columns:min(84vw,296px) !important;gap:12px !important}
  .client-story-card{height:300px !important;min-height:300px !important;padding:25px 22px 22px !important}
  .client-story-card blockquote{margin-top:36px !important;font-size:20px !important}

  .video-guides-section.video-guides-gallery{padding:24px 0 42px !important}
  .video-guides-gallery .video-guides-grid.video-guides-mosaic{
    width:calc(100% - 32px) !important;
    grid-template-columns:1fr 1fr !important;
    grid-template-rows:auto !important;
    gap:12px !important;
  }
  .video-guides-gallery .video-guide-card{
    grid-column:auto !important;
    grid-row:auto !important;
    aspect-ratio:1.18/1 !important;
  }
  .video-guides-gallery .video-guide-card.guide-1,
  .video-guides-gallery .video-guide-card.guide-2{
    grid-column:1/-1 !important;
    aspect-ratio:1.78/1 !important;
  }
  .video-guides-gallery .video-guide-play{
    opacity:1 !important;
    width:48px !important;
    height:48px !important;
  }
}

@media(max-width:460px){
  .video-guides-gallery .video-guides-grid.video-guides-mosaic{
    grid-template-columns:1fr !important;
  }
  .video-guides-gallery .video-guide-card,
  .video-guides-gallery .video-guide-card.guide-1,
  .video-guides-gallery .video-guide-card.guide-2{
    grid-column:auto !important;
    aspect-ratio:16/10 !important;
  }
}