/* ═══════════════════════════════════════════════════════════════
   PORTION. Pick your portion, a butcher's chart.
   Lives inside the cream Grill section (.section--outside).
   Root: <div class="portion" id="portion" data-cut="whole|half|quarter">
   ═══════════════════════════════════════════════════════════════ */

.portion {
  --portion-cut-r: 0%;   /* right inset of the solid hen */
  --portion-cut-b: 0%;   /* bottom inset of the solid hen */
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
.portion[data-cut="half"]    { --portion-cut-r: 50%; --portion-cut-b: 0%; }
.portion[data-cut="quarter"] { --portion-cut-r: 50%; --portion-cut-b: 50%; }

/* ── The hen (butcher's chart) ─────────────────────────────────── */
.portion__hen {
  position: relative;
  width: min(60%, 320px);
  margin-inline: auto;
}

/* A soft cream plate behind the bird, ringed like a chart badge */
.portion__plate {
  position: absolute;
  left: 50%; top: 50%;
  width: 118%;
  aspect-ratio: 1;
  transform: translate(-50%, -52%);
  border-radius: 50%;
  background-color: var(--cream-2);
  background-image: var(--grain);
  background-size: var(--grain-size);
  box-shadow: inset 0 0 0 2px var(--line), inset 0 2px 0 rgba(255, 255, 255, .5);
  pointer-events: none;
}
.portion__plate::after {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 1.5px dashed var(--line);
}

.portion__chart {
  position: relative;
  width: 100%;
  aspect-ratio: 1256 / 1440;
}
.portion__svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}
.portion__svg--ghost { position: relative; }

.portion__ghost { fill: var(--brown); opacity: .18; }
.portion__solid { fill: var(--brown); }
.portion__comb  { fill: var(--red); }

/* The solid bird is clipped by the chosen cut, head side stays */
.portion__svg--solid {
  clip-path: inset(0 var(--portion-cut-r) var(--portion-cut-b) 0);
}

/* Dashed butcher's cut lines, only for the cuts in play */
.portion__cut {
  opacity: 0;
  stroke: var(--red);
  fill: var(--red);
}
.portion__cut line {
  fill: none;
  stroke-width: 6;
  stroke-dasharray: 14 10;
  stroke-linecap: round;
}
.portion__cut circle { stroke: none; }
.portion[data-cut="half"] .portion__cut--v,
.portion[data-cut="quarter"] .portion__cut--v,
.portion[data-cut="quarter"] .portion__cut--h { opacity: 1; }

.portion__caption {
  margin: 1.1rem 0 0;
  text-align: center;
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sage-ink);
}

/* ── The boards ────────────────────────────────────────────────── */
.portion__pick { display: grid; gap: 1rem; }
.portion__sub { margin: 0; color: var(--ink); }
.portion__group { display: grid; gap: .75rem; }
.portion__slot { display: block; }   /* carries .reveal so the board keeps its own transform */

.portion__board {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  min-height: 56px;
  padding: .9rem 1.1rem .9rem 1.25rem;
  text-align: left;
  color: var(--brown);
  background-color: var(--timber);
  background-image: var(--grain);
  background-size: var(--grain-size);
  border: 2px solid var(--brown);
  border-radius: var(--r-sign);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.portion__board:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.portion__board:active { transform: translateY(0) scale(.985); }
.portion__board[aria-checked="true"] {
  border-color: var(--red);
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--red), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.portion__board:focus-visible { outline-offset: 3px; }

/* The red cut marker: a butcher's tag on the left edge */
.portion__marker {
  position: absolute;
  left: -2px; top: 50%;
  width: 10px; height: 34px;
  transform: translate(-50%, -50%) scaleX(0);
  transform-origin: 50% 50%;
  background: var(--red);
  border-radius: 3px;
  pointer-events: none;
}
.portion__board[aria-checked="true"] .portion__marker { transform: translate(-50%, -50%) scaleX(1); }

.portion__text { display: grid; gap: .15rem; flex: 1 1 auto; min-width: 0; }
.portion__name {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.1;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.portion__desc {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: .95rem;
  line-height: 1.35;
  color: var(--brown);
}
.portion__price {
  flex: none;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0;
  color: var(--brown);
  padding-left: .75rem;
  border-left: 2px dashed var(--line);
  align-self: stretch;
  display: flex;
  align-items: center;
}
.portion__dollar { font-size: .55em; align-self: flex-start; margin-top: .15em; margin-right: .05em; }

/* ── Motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .portion__svg--solid { transition: clip-path 400ms var(--ease); }
  .portion__cut { transition: opacity 400ms var(--ease); }
  .portion__marker { transition: transform var(--t) var(--ease-out); }
}
@media (prefers-reduced-motion: reduce) {
  .portion__svg--solid, .portion__cut, .portion__marker, .portion__board { transition: none; }
}

/* ── Breakpoints ───────────────────────────────────────────────── */
@media (min-width: 480px) {
  .portion__board { padding: 1rem 1.25rem 1rem 1.5rem; gap: 1.25rem; }
  .portion__price { font-size: 2rem; padding-left: 1rem; }
}

@media (min-width: 760px) {
  .portion__hen { width: min(52%, 360px); }
}
@media (min-width: 760px) and (max-width: 979px) {
  .portion__pick { width: 100%; max-width: 640px; margin-inline: auto; }
}

@media (min-width: 980px) {
  .portion {
    grid-template-columns: 45fr 55fr;
    gap: clamp(2.5rem, 6vw, 5rem);
  }
  .portion__hen { width: min(86%, 440px); margin-inline: auto; }
  .portion__pick { gap: 1.25rem; }
  .portion__group { gap: .85rem; }
}

@media (min-width: 1200px) {
  .portion__hen { width: min(84%, 420px); }
  .portion__board { padding: 1.1rem 1.5rem 1.1rem 1.75rem; }
}