/* Spud & Root recipe card: the 4 x 6 in card that goes on the bin, both faces.
   Shown on the retail page and printed by scripts/recipe-card.mjs, from the same markup.
   Everything inside is sized in cqi (a hundredth of the card's width), so the card is
   the same design at any size. Fonts, and p { margin: 0 }, come from site.css (or the print page). */

.rcard {
  --c: #ff4438;
  --cream: #fff8ea;
  --ink: #231f20;
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  color: var(--ink);
  font-family: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: left;
}
.rcard[data-variety="gold"] { --c: #ffb81b; }
.rcard[data-variety="russet"] { --c: #bc6124; }
.rcard[data-variety="white"] { --c: #5fb4e6; }

.rcard__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--cream);
}

/* ---------- Front ---------- */
.rcard__front {
  padding: 6cqi 6cqi 5cqi;
}
.rcard__take {
  position: absolute;
  top: 3.2cqi;
  left: 3.2cqi;
  z-index: 1;
  padding: 1.3cqi 3.2cqi 1.1cqi;
  background: #ffde00;
  border: 0.7cqi solid var(--ink);
  border-radius: 99cqi;
  font: 700 3.6cqi/1 "Fredoka", system-ui, sans-serif;
  rotate: -4deg;
}
.rcard__photo {
  flex: none;
  margin: 0;
  height: 74cqi;
  overflow: hidden;
  background: #e7dcc4;
  border: 0.8cqi solid var(--ink);
  border-radius: 4cqi;
}
.rcard__photo img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
}
/* The variety's character, standing on the photo's frame. */
.rcard__char {
  position: absolute;
  right: 8cqi;
  bottom: calc(150cqi - 80.6cqi);
  width: auto;
  height: 22cqi;
}
.rcard__variety {
  display: flex;
  align-items: center;
  gap: 1.8cqi;
  margin-top: 4.4cqi;
  font: 700 3cqi/1 "Archivo", sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.rcard__dot {
  flex: none;
  width: 3.6cqi;
  height: 3.6cqi;
  background: var(--c);
  border: 0.6cqi solid var(--ink);
  border-radius: 50%;
}
.rcard__title {
  margin-top: 2.2cqi;
  font: 700 8.4cqi/1 "Fredoka", system-ui, sans-serif;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.rcard__meta {
  margin-top: 2.6cqi;
  font: 600 3.6cqi/1.2 "Archivo", sans-serif;
}
.rcard__foot {
  display: flex;
  align-items: center;
  gap: 3cqi;
  margin-top: auto;
  padding-top: 3cqi;
  border-top: 0.6cqi solid var(--ink);
  font: 400 4.8cqi/1.05 "Caveat Brush", cursive;
}
.rcard__logo {
  flex: none;
  width: 17cqi;
  height: auto;
}

/* ---------- Back ---------- */
.rcard__back {
  padding: 5.5cqi 6cqi 5cqi;
}
.rcard__head {
  display: flex;
  align-items: center;
  gap: 3cqi;
  padding-bottom: 2.6cqi;
  border-bottom: 0.6cqi solid var(--ink);
}
.rcard__head .rcard__dot {
  width: 5cqi;
  height: 5cqi;
}
.rcard__name {
  font: 700 5.2cqi/1.02 "Fredoka", system-ui, sans-serif;
}
.rcard__name span {
  display: block;
  margin-top: 1cqi;
  font: 600 3cqi/1.1 "Archivo", sans-serif;
}
.rcard__label {
  margin: 3.4cqi 0 1.8cqi;
  font: 700 2.6cqi/1 "Archivo", sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.rcard__shop {
  display: grid;
  margin: 0;
  gap: 1.3cqi;
  padding: 0;
  list-style: none;
  font: 400 2.95cqi/1.28 "Archivo", sans-serif;
}
.rcard__shop li {
  display: grid;
  grid-template-columns: 17.5cqi 1fr;
  gap: 2.2cqi;
  align-items: start;
}
.rcard__where {
  --dept: var(--ink);
  --dept-fg: #fff;
  padding: 0.9cqi 0.6cqi 0.7cqi;
  background: var(--dept);
  color: var(--dept-fg);
  border-radius: 1.2cqi;
  font: 700 2.3cqi/1 "Archivo", sans-serif;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}
/* The departments round the walls, in the colours they have on the store plan. Aisles stay ink. */
[data-dept="produce"] > .rcard__where { --dept: #97d700; --dept-fg: #231f20; }
[data-dept="bakery"] > .rcard__where { --dept: #e8b36a; --dept-fg: #231f20; }
[data-dept="deli"] > .rcard__where { --dept: #ffb81b; --dept-fg: #231f20; }
[data-dept="seafood"] > .rcard__where { --dept: #5fb4e6; --dept-fg: #231f20; }
[data-dept="meat"] > .rcard__where { --dept: #ff4438; --dept-fg: #231f20; }
[data-dept="dairy"] > .rcard__where { --dept: #ffffff; --dept-fg: #231f20; box-shadow: inset 0 0 0 0.45cqi #231f20; }
[data-dept="frozen"] > .rcard__where { --dept: #b8e2f7; --dept-fg: #231f20; }
[data-dept="pantry"] > .rcard__where { --dept: transparent; --dept-fg: #52494b; box-shadow: inset 0 0 0 0.45cqi #52494b; }
.rcard__steps {
  display: grid;
  margin: 0;
  gap: 1.1cqi;
  padding-left: 4.2cqi;
  font: 400 2.85cqi/1.3 "Archivo", sans-serif;
}
.rcard__steps li::marker {
  font-weight: 700;
}
.rcard__qr {
  display: flex;
  align-items: center;
  gap: 3.4cqi;
  margin-top: auto;
  padding-top: 2.8cqi;
  border-top: 0.6cqi solid var(--ink);
}
.rcard__qr svg {
  flex: none;
  width: 17cqi;
  height: 17cqi;
}
.rcard__qr p {
  font: 400 4.4cqi/1.08 "Caveat Brush", cursive;
}
.rcard__qr small {
  display: block;
  margin-top: 1cqi;
  font: 600 2.5cqi/1.2 "Archivo", sans-serif;
}