/* Reviews (partials/reviews.php): index cards pinned to the cork board by the register, each on a slight
   tilt with a brass tack, the quote set on the card's ruled lines. Used by the home page, the shop page's
   call-ahead section and /review. Needs the tokens in baker-feed.css. */

.reviews-band{padding-block:clamp(64px,7vw,104px);background:var(--cream)}
/* The heading row the home page's other sections use: title and lead on the left, the ratings and the ask on the
   right, their bottoms level; then the board across the full width. */
.reviews-heading{display:flex;justify-content:space-between;align-items:end;gap:clamp(36px,5vw,80px);margin-bottom:clamp(32px,3.6vw,48px)}
.reviews-heading>p{display:none}
.reviews-intro{max-width:34em}
.reviews-intro h2{font-size:clamp(38px,3.8vw,56px);line-height:1.1;letter-spacing:-1.8px;margin-top:-.13em}
.reviews-intro>p{font-size:16px;line-height:1.8;color:var(--muted);margin-top:18px;max-width:30em}
.reviews-aside{flex:0 0 auto;width:min(100%,380px)}
.reviews-aside .review-tallies{margin-top:0}
.reviews-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:22px}
.reviews-actions .button svg{width:17px;height:17px}

/* Each review site's rating, as a line you can follow to the reviews. */
.review-tallies{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid #ddd3bd}
.review-tallies li{border-bottom:1px solid #ddd3bd}
.review-tallies a,.review-tallies li:not(:has(a)){display:block;padding:12px 0;font:16px/1.4 var(--serif);color:var(--green)}
.review-tallies a{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:color .2s,text-decoration-color .2s}
.review-tallies a:hover{color:var(--red);text-decoration-color:currentColor}

/* The board: cork in a plain wood frame. Cards keep their own height and flow down columns, the way notes go
   up on a board. */
.review-board{position:relative;columns:2 250px;column-gap:clamp(22px,2.6vw,34px);padding:clamp(34px,3.6vw,50px) clamp(28px,3.4vw,46px) clamp(10px,1.4vw,18px);
  background:radial-gradient(circle at 20% 30%,#c79a66 0 1.5px,transparent 2px) 0 0/17px 19px,
  radial-gradient(circle at 70% 60%,#a77d4f 0 1.2px,transparent 1.7px) 0 0/13px 11px,
  radial-gradient(circle at 40% 80%,#cfa673 0 1px,transparent 1.5px) 0 0/9px 13px,#b98d5c;border:12px solid #6d4b2c;border-radius:6px;box-shadow:inset 0 0 0 2px #8a6239,inset 0 6px 18px #0000002e,0 10px 0 #e2d6bd}
/* The home page's row: four cards across, each its own height. */
.review-board--row{columns:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(20px,2.2vw,30px);align-items:start}
.review-board--single{columns:1;padding:clamp(30px,2.6vw,36px) clamp(22px,2.4vw,30px) clamp(8px,1vw,12px);border-width:10px}

/* An index card: a red rule under the top margin, faint blue lines the quote sits on. */
.review-card{position:relative;margin:0 0 clamp(26px,2.8vw,36px);break-inside:avoid;display:flex;flex-direction:column;gap:12px;padding:30px 22px 20px;background:#fffdf6;
  background-image:linear-gradient(#fffdf6 0 22px,#d9534f80 22px 23.5px,transparent 23.5px);background-repeat:no-repeat;
  box-shadow:0 1px 1px #0000001a,0 8px 14px -6px #3b2a1666;transform:rotate(-1.4deg);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.review-card:nth-child(3n+2){transform:rotate(1.1deg) translateY(6px)}
.review-card:nth-child(3n+3){transform:rotate(-.6deg) translateY(-4px)}
.review-card:hover{transform:rotate(0) translateY(-2px);box-shadow:0 1px 1px #0000001a,0 14px 22px -8px #3b2a1680}
/* Inside the card's top margin: a tack poking above a card at the top of a column would show in the column before. */
.review-tack{position:absolute;top:4px;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffe7a3,#d9a441 45%,#8a5d17 100%);box-shadow:0 3px 3px #00000055}
.review-stars{display:flex;gap:2px;color:#d9a441}
.review-stars svg{width:16px;height:16px;fill:currentColor}
.review-recommends{align-self:flex-start;padding:2px 9px;font-size:11px;font-weight:700;color:#24502f;background:#dcebd9;border-radius:20px}
.review-card blockquote{margin:0;padding:0;border:0;font-style:normal}
/* The quote is written on the card's lines: one faint blue rule under every line of text. */
.review-card blockquote p{margin:0;font:16.5px/28px var(--serif);color:#2b3a30;letter-spacing:-.1px;
  background:repeating-linear-gradient(transparent 0 26px,#9fb7d470 26px 27px,transparent 27px 28px)}
.review-card figcaption{display:grid;gap:2px;margin:auto 0 0;padding-top:6px;font-size:13px;line-height:1.5;color:var(--muted);text-align:left;font-style:normal}
.review-card figcaption strong{font-size:14px;color:var(--green)}
.review-link{justify-self:start;margin-top:6px;font-size:12.5px;font-weight:700;color:var(--red);text-decoration:underline;text-underline-offset:3px}
.review-link:hover{color:var(--green)}

/* A rating on its own card, while no reviews are featured. */
.review-card--tally{align-items:flex-start}
.review-figure{font:clamp(44px,4vw,60px)/1 var(--serif);letter-spacing:-2px;color:var(--green)}
.review-figure small{font-size:18px;letter-spacing:0;color:var(--muted)}

/* The shop page's call-ahead section: one card beside the ratings, under the order ticket. */
.review-counter{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center;margin-top:clamp(40px,4.4vw,64px)}
.review-counter-copy h3{font-size:clamp(24px,2.2vw,32px);line-height:1.2;letter-spacing:-.8px}
.review-counter-copy .review-tallies{margin-top:18px}
.review-counter-copy .text-link{display:inline-flex;margin-top:18px}

/* /review: the ask on the left, the board on the right. */
.review-page-grid{display:grid;gap:clamp(36px,4vw,56px)}
.review-page-copy{max-width:760px}
.review-board--wall{columns:3 250px}
.review-page-copy h1{font-size:clamp(44px,4.6vw,72px);line-height:1.08;letter-spacing:-2.4px;margin-top:-.13em}
.review-page-copy>p{font-size:17px;line-height:1.8;color:var(--muted);margin-top:22px;max-width:30em}
.review-page-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.review-page-actions .button svg{width:17px;height:17px}
p.review-page-thanks{font:italic 16px/1.6 var(--serif);color:var(--green);margin-top:26px}

@media(max-width:1150px){.review-board--row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.review-counter{grid-template-columns:1fr}.reviews-heading{display:block}.reviews-aside{width:auto;max-width:380px;margin-top:26px}}
@media(max-width:600px){
  .review-board{columns:1;padding:30px 18px 8px;border-width:9px}
  .review-board--row{grid-template-columns:1fr}
  .review-card,.review-card:nth-child(3n+2),.review-card:nth-child(3n+3){transform:rotate(-.8deg)}
  .review-card:nth-child(even){transform:rotate(.7deg)}
}
@media(prefers-reduced-motion:reduce){.review-card{transition:none}}