/* Mollura v2 -- results + reviews rows.
   Loaded after tokens.css and styles.css; every value below resolves from
   the theme's own custom properties. */

/* ===================================================================
   THE ROW  --  everything below .mol-rrow is the shippable part
   =================================================================== */
/* The card widths are flex-basis values, so they are only correct under
   border-box. The theme's reset supplies that today, but a component that
   silently depends on a global reset renders 42px wider anywhere the reset is
   absent -- which is how this was found. Scoped, so it cannot touch the rest
   of the theme. */
.mol-rrow, .mol-rrow *, .mol-rrow *::before, .mol-rrow *::after { box-sizing: border-box; }

.mol-rrow{
  background:var(--color-bg);
  padding:var(--space-16) 0 var(--space-20);
  overflow:hidden;
}
.mol-rrow__head{
  max-width:var(--container-max);
  margin:0 auto var(--space-8);
  padding:0 var(--container-pad);
}
.mol-rrow .mol-eyebrow{
  display:block;
  font-family:var(--font-heading);
  font-size:13px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-primary);
  margin-bottom:var(--space-3);
}
.mol-rrow__head h2{
  font-size:26px;font-weight:800;color:var(--color-fg);
  max-width:22ch;
}
.mol-rrow__sub{
  margin:var(--space-4) 0 0;
  color:#41626f;font-size:16px;max-width:60ch;
}

/* --- marquee mechanics ---------------------------------------------
   Track = the card list duplicated EXACTLY twice, translated -50%.
   gap between all items + a trailing padding-right of one gap, so the
   first copy is exactly half the track and -50% lands seamlessly.
   Never remove that trailing padding.
   ------------------------------------------------------------------ */
.mol-marquee{
  position:relative;
  --gap:16px;
  --duration:70s;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);
}
.mol-marquee__track{
  display:flex;
  gap:var(--gap);
  padding-right:var(--gap);
  width:max-content;
  animation:mol-drift var(--duration) linear infinite;
  /* No will-change here. A transform animation is composited anyway, and the
     hint forces a single layer -- which silently fails to rasterise once the
     track passes Chrome's 16,384px max texture size, painting nothing. */
}
@keyframes mol-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes mol-drift-rev{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
.mol-marquee--rev .mol-marquee__track{animation-name:mol-drift-rev}
.mol-marquee:hover .mol-marquee__track,
.mol-marquee:focus-within .mol-marquee__track{animation-play-state:paused}

/* --- the card ------------------------------------------------------ */
.mol-rcard{
  flex:0 0 300px;
  min-width:0;
  background:var(--color-bg);
  border:1px solid var(--color-border);
  border-radius:var(--radius-card);
  overflow:hidden;
  display:flex;flex-direction:column;
  text-decoration:none;color:inherit;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.mol-rcard:hover,.mol-rcard:focus-visible{
  border-color:var(--color-secondary);
  box-shadow:0 10px 28px rgba(4,67,93,.10);
  transform:translateY(-2px);
  outline:none;
}
.mol-rcard__media{
  position:relative;
  background:var(--color-white);
  aspect-ratio:16 / 9;
  border-bottom:1px solid var(--color-border);
}
.mol-rcard__media img{width:100%;height:100%;object-fit:contain;object-position:center}
/* Seven of the eleven source composites carry a Mollura logo band across the
   top and a light margin down each side, and the margins differ per file. Left
   alone they read as seven identical stripes down the row. Each rule below
   frames that file's photo block exactly, measured off the source pixels:
   width/left/top are derived from the crop rectangle, so the band and the
   margins fall outside the media box. The crop's TOP is anchored to the box top
   rather than centred -- centring it puts half the slack above, which is exactly
   where the logo band lives. Geometry, not taste. */
.mol-rcard__media--band img{
  position:absolute;
  height:auto;
  object-fit:fill;
}
.mol-rcard__media--cs3 img{width:105.654%;left:-2.650%;top:-24.499%}
.mol-rcard__media--cs4 img{width:104.912%;left:-1.754%;top:-26.199%}
.mol-rcard__media--cs5 img{width:108.925%;left:-2.550%;top:-26.553%}
.mol-rcard__media--cs6 img{width:107.942%;left:-4.332%;top:-26.635%}
.mol-rcard__media--cs7 img{width:111.152%;left:-5.948%;top:-25.444%}
.mol-rcard__media--cs8 img{width:101.528%;left:-0.679%;top:-23.845%}
.mol-rcard__media--cs9 img{width:101.528%;left:-0.679%;top:-23.845%}
.mol-rcard__tag{
  position:absolute;left:10px;top:10px;
  background:rgba(0,42,60,.86);color:var(--on-dark);
  font-family:var(--font-heading);font-weight:700;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 9px;border-radius:6px;
}
.mol-rcard__tag--video{background:var(--color-primary)}
.mol-rcard__play{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,42,60,.22);
}
.mol-rcard__play i{
  width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,.94);
  display:flex;align-items:center;justify-content:center;
}
.mol-rcard__play i::after{
  content:"";
  border-left:15px solid var(--color-primary);
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
  margin-left:4px;
}
.mol-rcard__body{padding:var(--space-4) var(--space-5) var(--space-5);display:flex;flex-direction:column;flex:1}

.mol-rcard__stat{
  font-family:var(--font-heading);font-weight:800;
  font-size:24px;line-height:1.1;color:var(--color-fg);
}
.mol-rcard__stat small{
  display:block;font-family:var(--font-body);font-weight:400;
  font-size:12px;letter-spacing:.10em;text-transform:uppercase;
  color:#7d8f99;margin-top:3px;
}
.mol-rcard__meta{
  display:flex;flex-wrap:wrap;gap:6px;
  margin:var(--space-4) 0 var(--space-4);
}
.mol-rcard__meta span{
  font-size:12px;letter-spacing:.04em;
  color:var(--color-accent);
  background:var(--color-surface-alt);
  border-radius:999px;padding:4px 10px;white-space:nowrap;
}
.mol-rcard__note{
  font-size:14px;color:#41626f;margin:0 0 var(--space-4);
}
.mol-rcard__cta{
  margin-top:auto;
  font-family:var(--font-heading);font-weight:700;font-size:14px;
  color:var(--color-secondary);
  display:inline-flex;align-items:center;gap:7px;
}
.mol-rcard__cta::after{content:"";width:6px;height:6px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}

/* --- verified review strip ----------------------------------------- */
.mol-voices{
  max-width:var(--container-max);
  margin:var(--space-16) auto 0;
  padding:0 var(--container-pad);
}
.mol-voices__head{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-4);
  margin-bottom:var(--space-6);
}
.mol-voices__head h3{font-size:20px;font-weight:800;color:var(--color-fg)}
.mol-voices__score{font-size:14px;color:#7d8f99}
.mol-vcard{
  margin:0;  /* <figure> carries a 40px UA side margin */
  flex:0 0 316px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-card);
  padding:var(--space-5);
  background:var(--color-bg);
  /* Fixed height: a card swapping to a longer quote must not move its neighbours. */
  height:262px;
  overflow:hidden;
}
.mol-vcard__fade{display:flex;flex-direction:column;height:100%}
.mol-vcard__top{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-4);margin-bottom:var(--space-4);
}
.mol-vcard__logo{display:flex;align-items:center;height:22px}
.mol-vcard__logo svg{height:20px;width:auto;display:block}
/* the Yelp burst is optically denser than the Google G at the same box height */
.mol-vcard__logo--yelp svg{height:22px}
.mol-vcard blockquote{
  margin:0;font-size:15px;line-height:24px;color:#2c4f5d;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;
  /* EXACTLY four line-boxes -- the longest of the 23 quotes measures 4 lines in
     a 318px card. A fractional height renders a sliver of the next line BELOW
     the clamp's ellipsis, which reads as "fantastic... care." */
  height:96px;
}
.mol-vcard footer{
  margin-top:auto;
  padding-top:var(--space-4);
  border-top:1px solid var(--color-border);
}
.mol-vcard__who{
  display:block;
  font-family:var(--font-heading);font-weight:700;font-size:14px;
  color:var(--color-fg);
}
.mol-vcard__meta{display:block;font-size:12px;color:#7d8f99;margin-top:2px}
.mol-stars{color:var(--color-primary);letter-spacing:1px}

.mol-disclaimer{
  max-width:var(--container-max);
  margin:var(--space-8) auto 0;
  padding:0 var(--container-pad);
  font-size:12px;color:#7d8f99;
}

/* --- responsive ---------------------------------------------------- */
@media (min-width:640px){
  .mol-rrow__head h2{font-size:32px}
  .mol-rcard{flex:0 0 340px}
  .mol-vcard{flex:0 0 340px}
}
@media (min-width:1024px){
  .mol-rcard{flex:0 0 380px}
  .mol-marquee{--gap:20px}
  .mol-vcard{flex:0 0 360px}
}

/* --- reduced motion: no animation, becomes a swipeable rail -------- */
@media (prefers-reduced-motion:reduce){
  .mol-marquee{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:var(--space-4)}
  .mol-marquee__track{animation:none;width:auto}
  .mol-marquee__track .is-clone{display:none}
  .mol-vcard__fade{transition:none}
}