/* ═══════════════════════════════════════════════════════════════
   REVIEWS (#reviews): "See what people say", photos on the barn wall.
   Each review is a food photo in the shop's red steel window with a
   blonde timber sign nailed under it and the reviewer's picture on
   the join. Phones: a sideways swipe row with scroll snap and a
   numbered picket pager. 760 to 1179px: the same row, with arrow
   buttons for mouse users. 1180px and up: five across, hung like
   pictures, more wrap to a second row (a card is never hidden).
   Every card opens Google reviews. No autoplay. Texture is the PNG
   grain only (Safari safe). reviews.js fills in the stars, avatars,
   link names, pager and edge fades.
   ═══════════════════════════════════════════════════════════════ */

.reviews {
  --rev-card: min(300px, calc(100vw - 2 * var(--gutter) - 46px));
  --rev-gap: 14px;
  --rev-av: 52px;
  padding: 3.25rem 0 2.5rem;
}

/* ── Heading ───────────────────────────────────────────────────── */
.reviews__head { margin-bottom: 1.1rem; }
.reviews .h-display { margin: 0; }
.reviews__lede {
  margin: .55rem 0 0;
  font-family: var(--font-cond);
  font-size: 1rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
.section--inside .reviews__lede { color: var(--paper-soft); }

/* ── The row ───────────────────────────────────────────────────── */
.reviews__stage { position: relative; margin-inline: calc(-1 * var(--gutter)); }
.reviews__row {
  display: flex;
  gap: var(--rev-gap);
  padding: 10px var(--gutter) 22px;   /* room for the focus ring above and the card shadows below */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.reviews__row::-webkit-scrollbar { display: none; }
/* reviews.js marks the side(s) that still have cards out of view */
.reviews__row[data-more="right"] {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
}
.reviews__row[data-more="left"] {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px);
          mask-image: linear-gradient(90deg, transparent, #000 40px);
}
.reviews__row[data-more="both"] {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}

.reviews__item {
  flex: 0 0 var(--rev-card);
  display: flex;
  scroll-snap-align: start;
}

/* ── A card: the whole thing is one link ───────────────────────── */
.reviews__card {
  position: relative;
  display: flex; flex-direction: column;
  width: 100%;
  border-radius: var(--r-frame);
  -webkit-tap-highlight-color: transparent;
}
.reviews__card:focus-visible { outline-offset: 4px; border-radius: 10px; }

/* The picture: the site's red steel window with its gold picket sill */
.reviews__frame {
  display: block;
  aspect-ratio: 16 / 10;
  border-width: 5px;
  border-bottom-width: 0;
  border-radius: var(--r-frame) var(--r-frame) 0 0;
  box-shadow: none;
  z-index: 1;
}
.reviews__frame::after { height: 22px; background-size: 24px 22px; }
/* a soft shade at the top so the dish label always reads */
.reviews__frame::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 46%; z-index: 1;
  background: linear-gradient(180deg, rgba(26, 20, 16, .6), transparent);
  pointer-events: none;
}
.reviews__dish {
  position: absolute; left: 10px; top: 9px; right: 10px; z-index: 2;
  font-family: var(--font-cond);
  font-size: .8rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  line-height: 1.1;
  color: var(--cream);
  text-shadow: 0 1px 2px rgba(26, 20, 16, .75);
}

/* The sign: blonde timber, nailed under the window */
.reviews__board {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: var(--rev-av) 1fr;
  column-gap: 10px;
  align-content: start;
  padding: 10px 14px 14px;
  border: 2px solid var(--brown);
  border-top: 4px solid var(--red-2);   /* the frame's bottom rail */
  border-radius: 0 0 var(--r-sign) var(--r-sign);
  background-color: var(--timber);
  background-image:
    repeating-linear-gradient(90deg, transparent 0 96px, rgba(74, 46, 24, .12) 96px 97px, transparent 97px 100px),
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(255, 255, 255, .05) 7px 8px),
    var(--grain);
  background-size: auto, auto, var(--grain-size);
  color: var(--brown);
  box-shadow: 0 16px 26px -14px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .35);
}
/* two gold nail heads, bottom corners */
.reviews__board::before, .reviews__board::after {
  content: ''; position: absolute; bottom: 7px;
  width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #F6DC9C, var(--wood-2) 70%);
  box-shadow: 0 1px 1px rgba(26, 20, 16, .55);
}
.reviews__board::before { left: 7px; }
.reviews__board::after { right: 7px; }

/* The reviewer: a round picture sitting on the join */
.reviews__avatar {
  grid-row: 1 / 3;
  position: relative; z-index: 3;
  width: var(--rev-av); height: var(--rev-av);
  margin-top: calc(var(--rev-av) * -.62);
  display: grid; place-items: center;
  border-radius: 50%;
  border: 3px solid var(--cream);
  background: var(--red);
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 1.45rem; line-height: 1;
  overflow: hidden;
  box-shadow: 0 6px 12px -4px rgba(26, 20, 16, .7);
}
/* no script: a plain head and shoulders shape instead of the letter */
.reviews__avatar:empty::before {
  content: ''; width: 58%; height: 66%;
  background: var(--cream);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4.5'/%3E%3Cpath d='M3 22c0-5 4-8 9-8s9 3 9 8z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4.5'/%3E%3Cpath d='M3 22c0-5 4-8 9-8s9 3 9 8z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.reviews__avatar img { width: 100%; height: 100%; object-fit: cover; }
.reviews__item:nth-child(4n + 2) .reviews__avatar { background: var(--brown); }
.reviews__item:nth-child(4n + 3) .reviews__avatar { background: var(--sage-ink); }
.reviews__item:nth-child(4n + 4) .reviews__avatar { background: var(--wood-2); }

.reviews__who { min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-right: 34px; }
.reviews__name {
  font-family: var(--font-cond);
  font-size: 1.08rem; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase;
  line-height: 1.05;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reviews__rating { display: flex; align-items: center; gap: 7px; }

/* Stars: solid gold, a faint outline row behind for any empty ones */
.reviews__stars {
  --star: 17px;
  position: relative; flex: none;
  width: calc(var(--star) * 5); height: var(--star);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.8 6 6.5.7-4.9 4.4 1.4 6.5L12 16.9l-5.8 3.3 1.4-6.5-4.9-4.4 6.5-.7z' fill='%23D6B987' stroke='%234A2E18' stroke-opacity='.5' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") left center / var(--star) var(--star) repeat-x;
}
.reviews__stars::before {
  content: ''; position: absolute; inset: 0 auto 0 0;
  width: calc(var(--star) * var(--n, 5));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.8 6 6.5.7-4.9 4.4 1.4 6.5L12 16.9l-5.8 3.3 1.4-6.5-4.9-4.4 6.5-.7z' fill='%23E9A63A' stroke='%234A2E18' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") left center / var(--star) var(--star) repeat-x;
}
.reviews__item[data-stars="4"] .reviews__stars { --n: 4; }
.reviews__item[data-stars="3"] .reviews__stars { --n: 3; }
.reviews__item[data-stars="2"] .reviews__stars { --n: 2; }
.reviews__item[data-stars="1"] .reviews__stars { --n: 1; }
.reviews__src {
  font-family: var(--font-cond);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft);
}

.reviews__quote {
  grid-column: 1 / -1;
  margin-top: 9px;
  font-size: .98rem;
  line-height: 1.42;
  color: var(--brown);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
/* one big comb red quote mark, top right of the sign (an aria-hidden span) */
.reviews__mark {
  position: absolute; top: 2px; right: 12px;
  font-family: var(--font-display);
  font-size: 3.4rem; line-height: 1;
  color: var(--red);
  pointer-events: none;
}

/* ── Foot: the picket pager, arrows for mouse users, the Google link ── */
.reviews__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem;
  margin-top: 2px;
}
.reviews__nav { display: flex; align-items: center; gap: .6rem; }
.reviews__pager {
  position: relative;
  display: flex; align-items: flex-end; gap: 5px;
  height: 38px;
  padding: 0 3px 4px;
  flex: none;
  isolation: isolate;   /* keeps the rail below inside the pager */
}
/* the rail the pickets stand on */
.reviews__pager::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: var(--wood-2); border-radius: 2px;
  z-index: -1;
}
.reviews__pager li {
  display: grid; place-items: end center;
  width: 17px; height: 24px;
  padding-bottom: 3px;
  background: #7A5A30;   /* the gold picket in shade */
  clip-path: polygon(0 5px, 50% 0, 100% 5px, 100% 100%, 0 100%);
  font-family: var(--font-cond);
  font-size: .72rem; font-weight: 700; line-height: 1;
  color: var(--barn);
}
.reviews__pager li.is-on { height: 32px; background: var(--wood); }
.reviews__pager:empty { display: none; }

/* Previous and next: only for a mouse at tablet widths (phones swipe) */
.reviews__arrow { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 760px) and (max-width: 1179px) {
  .reviews__arrow {
    display: grid; place-items: center;
    width: 44px; height: 44px;
    border: 2px solid var(--brown);
    border-radius: 50%;
    background-color: var(--timber);
    background-image: var(--grain);
    background-size: var(--grain-size);
    color: var(--brown);
    box-shadow: var(--shadow-sm);
  }
  .reviews__arrow .ico { width: 20px; height: 20px; stroke-width: 2.2; }
  .reviews__arrow--prev .ico { transform: scaleX(-1); }
  .reviews__arrow[disabled] { opacity: .35; cursor: default; }
}

.reviews__cta {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 44px;
  padding: .3rem 0;
  font-family: var(--font-cond);
  font-size: .98rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  line-height: 1.15;
  white-space: nowrap;
  color: var(--cream);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.reviews__cta-ico {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: var(--gold); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── Motion (only when welcome) ────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .reviews__card { transition: transform var(--t) var(--ease); }
  .reviews__card:active { transform: translateY(1px) scale(.99); }
  .reviews__frame img { transition: transform 700ms var(--ease-out); }
  .reviews__pager li { transition: height var(--t) var(--ease), background-color var(--t) var(--ease); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .reviews__card:hover { transform: translateY(-4px); }
  .reviews__card:hover .reviews__frame img { transform: scale(1.05); }
  .reviews__cta:hover { color: var(--gold); }
}

/* ── Small phones ──────────────────────────────────────────────── */
@media (max-width: 359px) {
  .reviews { --rev-av: 46px; }
  .reviews__cta { font-size: .9rem; letter-spacing: .04em; }
  .reviews__pager li { width: 15px; }
  .reviews__pager { gap: 4px; }
}

/* ── Tablet ────────────────────────────────────────────────────── */
@media (min-width: 760px) {
  .reviews { --rev-card: 300px; --rev-gap: 18px; padding: 4.5rem 0 4rem; }
  .reviews__head { margin-bottom: 1.5rem; }
}

/* ── Desktop: five across, hung like pictures; more wrap below ── */
@media (min-width: 1180px) {
  .reviews { --rev-av: 46px; padding: var(--section) 0 clamp(3rem, 5vw, 4rem); }
  .reviews__shell {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "head foot" "stage stage";
    align-items: end;
    column-gap: 2rem;
  }
  .reviews__head { grid-area: head; margin-bottom: 1.9rem; }
  .reviews__foot { grid-area: foot; margin: 0 0 1.9rem; }
  .reviews__stage { grid-area: stage; margin-inline: 0; }
  .reviews__row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: start;   /* each card its own height, so no empty timber under a short review */
    gap: 26px 22px;
    padding: 6px 0 10px;
    overflow: visible;
    -webkit-mask-image: none !important; mask-image: none !important;
  }
  /* every other one hangs a little lower */
  .reviews__item:nth-child(even) { margin-top: 22px; }
  .reviews__frame { aspect-ratio: 4 / 3; }
  .reviews__frame::after { height: 18px; background-size: 20px 18px; }
  .reviews__board { padding-inline: 12px; column-gap: 9px; }
  .reviews__who { padding-right: 20px; }
  .reviews__mark { font-size: 2.6rem; right: 9px; }
  .reviews__name { font-size: 1rem; }
  .reviews__stars { --star: 15px; }
  .reviews__quote { font-size: .95rem; }
  .reviews__nav { display: none; }
  .reviews__cta { font-size: 1.08rem; }
}

@media print {
  .reviews__foot { display: none; }
  .reviews__row { display: block; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .reviews__item { display: block; margin-bottom: 1rem; break-inside: avoid; }
  .reviews__frame { display: none; }
  .reviews__board { background: none; box-shadow: none; }
}