/* =========================================================================
   Miramar Brewing: beers
   Portrait cards on the page grid: 4 to a row from 1280px (3 columns each), 3 from 1024px,
   2 on tablet, 1 on phones; new beers wrap to new rows. Every card is built the same way: the name (one line)
   and the + on top, the can on its circle, then the style pill, ABV and art credit.
   The + grows the card across its whole row: the beer's panel is laid over the row with the card
   as its first column, and the copy and spec sheet beside it (below it on phones). js/beers.js
   runs it. Retired layouts, both in the Motion Library: the pinned deck (2026-10-08, git d8c5071)
   and the file-tab panel that unfolded under the row (2026-10-08, git 9eeb8e6).
   ========================================================================= */
.beers { position: relative; padding-top: var(--section-pad); }

.beer--bacon { --bc: var(--rosa); --sun: var(--cielo); }
.beer--gallo { --bc: var(--monte); --sun: var(--parcha); }
.beer--libre { --bc: var(--parcha); --sun: var(--cielo); }
.beer--tranque { --bc: var(--gallo); --sun: var(--monte); }

/* Style pill: small and quiet, the name leads */
.pill {
  display: inline-flex; align-items: center; height: var(--s-3); padding: 0 var(--s-1); border-radius: var(--r-pill);
  white-space: nowrap;
  background: var(--ink); color: var(--bc);
  font: 500 max(12px, var(--t--1))/1 var(--f-mono); letter-spacing: .04em; text-transform: uppercase;
  margin-left: calc(-1 * var(--s-0));               /* optical overshoot: the round end lines up with the text under it */
}
.label { display: block; font-weight: 700; margin-bottom: var(--s-1); color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.bpanel .chip { box-shadow: inset 0 0 0 2px var(--ink); }

.bgrid {
  padding: 0 var(--margin);
  margin-bottom: calc(-1 * var(--gutter));          /* the last row's card margin */
}

/* ---------- Groups: the regulars and the seasonals (the client, 2026-10-27: three main beers, and
   El Tranque a seasonal that may never come back; every new beer will be seasonal). Each group is
   its name and its own grid of cards, all in .bgroups, which holds the open boxes (they're placed
   on it). From 1280px it's like the story (Miguel, same day, after a first try with the names big
   beside each row, "a bit awkward... resemble more the history section nav through the years on
   the side"): a small index of the groups rides in the first two columns (js/beers.js builds it,
   with the story's .chapters look), the group you're in on a pill of its color; the cards take the
   other ten, three to a row in thirds, a little bigger than before ("the card width unopened can
   expand a bit"), and an open box covers only them, never the index. Below 1280px the name sits
   above its group as that same pill. ---------- */
.bgroups { position: relative; }
.bgroup + .bgroup { margin-top: calc(var(--s-7) - var(--gutter)); }   /* the cards' own bottom margin is part of the gap */
.bgroup__name {
  display: inline-flex; align-items: center; height: var(--s-4); margin: 0 0 var(--s-3); padding: 0 var(--s-2);
  border-radius: var(--r-pill); background: var(--gc, var(--parcha)); color: var(--ink);
  font: 700 max(12px, var(--t--1))/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase;
}
.bgroup__cards {
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  grid-auto-flow: dense;
}
.bindex { display: none; }
@media (min-width: 1280px) {
  .bgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .bgroups { grid-area: 1 / 3 / 2 / -1; }
  .bgroup__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; padding: 0; margin: 0; }   /* the index says it; kept for screen readers */
  .bgroup__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bgroup__cards > .bcard { grid-column: auto; }
  .beers .bindex {
    grid-area: 1 / 1 / 2 / 3; align-self: start; justify-self: start;
    position: sticky; top: calc(50svh - var(--s-6)); z-index: 1;
    display: flex; flex-direction: column; margin: 0 0 var(--gutter); padding: 0; list-style: none;   /* it stops on the last card, not under it */
    --ix: var(--s-4);
  }
  /* The margin: the grid it sticks in ends a gutter under the last card (the cards' own margin),
     where the section already ends (.bgrid's negative margin), so the index ran a gutter past the
     section's edge and Safari cut it off there (Miguel, 2026-10-27: "gets stuck as you scroll
     instead of sticking and scrolling upward"). Now it ends level with the last card. */
  .bindex button { text-transform: uppercase; white-space: nowrap; }
}
@media (min-width: 1280px) and (pointer: coarse) { .beers .bindex { --ix: var(--s-5); } }   /* a tablet in landscape: 48px to tap */

/* ---------- Card ---------- */
.bcard {
  grid-column: span 3; cursor: pointer;   /* the whole card opens the beer, a tap outside closes it (js/beers.js; site version B, kept 2026-10-16) */
  position: relative; aspect-ratio: 3 / 4;
  margin-bottom: var(--gutter);                     /* row spacing lives on the cards, so a panel adds nothing until it opens */
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
  padding: var(--s-3);
  border-radius: var(--r-4);
  background: var(--bc); color: var(--ink);
  overflow: hidden;
  container-type: inline-size;
  isolation: isolate;                               /* its layers (the can is z 3) stay under an open panel */
  transition: margin-bottom var(--t-card) var(--ease-cream);   /* the row making room for a tall panel */
}
.bcard__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.bcard__foot { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1); }

.bcard__plus {
  position: relative; flex: none;
  width: var(--s-4); height: var(--s-4); border-radius: 50%;
  background: var(--ink); color: var(--cream);
  transition: background-color var(--t-btn-color) var(--ease-btn), color var(--t-btn-color) var(--ease-btn);
}
.bcard__plus::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; }   /* a 44px target round the 32px disc */
.bcard__plus i { position: absolute; inset: 0; transition: rotate var(--t-card) var(--ease-cream); }
.bcard__plus i::before, .bcard__plus i::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; border-radius: 2px;
  background: currentColor; translate: -50% -50%;
}
.bcard__plus i::after { rotate: 90deg; }
.bcard__plus:hover { background: var(--cream); color: var(--ink); }
.bcard.is-active .bcard__plus i { rotate: 135deg; }

/* Stage: the circle sits exactly behind the can (both centered on the stage) */
.bcard__stage {
  position: relative; display: grid; place-items: center;
  min-height: 0; margin: var(--s-2) 0;
  container-type: size;
}
/* Layers on the stage: the comb behind the circle (0), the circle (1), the rest of the art (2), the can (3) */
.bcard__stage { --R: min(42cqw, 42cqh); }      /* the circle's radius */
.bcard__sun { position: absolute; z-index: 1; left: 50%; top: 50%; width: min(84cqw, 84cqh); aspect-ratio: 1; border-radius: 50%; background: var(--sun); translate: -50% -50%; }
.bcard__stage .can { height: 100cqh; }

.bcard__name {
  font: 900 italic var(--t-1)/1 var(--f-display);
  font-stretch: 100%; letter-spacing: -.005em; text-transform: uppercase;
  white-space: nowrap; min-width: 0;
}
/* A name too long to share the top row with the + narrows (font-stretch, set by js/beers.js)
   instead of shrinking or wrapping */
.bcard__meta { display: flex; gap: var(--s-1); font-weight: 700; white-space: nowrap; }

/* Wide cards (big desktops, tablets): the same card one step up, so it scales as a unit */
@container (min-width: 400px) {
  .bcard__name { font-size: var(--t-2); }
}

/* ---------- Extra art, only when the card is open ---------- */
/* In with a spring; out with a plain ease-out, which can't overshoot (a spring going to 0 dips
   below it, and the art came back mirrored and tiny for a beat) */
.deco { position: absolute; inset: 0; pointer-events: none; }
.d { position: absolute; z-index: 2; display: block; scale: 0; transition: scale .35s var(--ease-out); }
.bcard.is-active .d { scale: 1; transition: scale .9s var(--ease-spring); }
.bcard.is-active .d:nth-child(2) { transition-delay: .08s; }
.bcard.is-active .d:nth-child(3) { transition-delay: .16s; }

/* Bacon: clouds */
.d--cloud { height: 7%; aspect-ratio: 3.6; border-radius: 99px; background: var(--cream); animation: drift 9s var(--ease-io) infinite alternate; }
.d--cloud::before { content: ''; position: absolute; left: 22%; bottom: 40%; width: 40%; aspect-ratio: 1; border-radius: 50%; background: inherit; }
.d--cloud1 { left: 2%; top: 20%; }
.d--cloud2 { right: 0; top: 46%; height: 5.5%; animation-duration: 11s; animation-direction: alternate-reverse; }
.d--cloud3 { left: 8%; bottom: 14%; height: 5%; animation-duration: 7.5s; }
@keyframes drift { from { transform: translateX(-10%); } to { transform: translateX(12%); } }

/* Papá Gallo: a comb that pops out from behind the circle's upper right (the circle hides where
   the bumps start and join), leaves. The comb layer is the whole stage, so it scales from the
   circle's center and the bumps rise out from behind its edge. */
.d--comb { inset: 0; z-index: 0; }
.d--comb i {
  position: absolute; width: calc(var(--R) * var(--d)); aspect-ratio: 1; border-radius: 50%;
  left: calc(50% + var(--R) * var(--x)); top: calc(50% - var(--R) * var(--y)); translate: -50% -50%;
  background: var(--gallo);
}
.d--comb i:nth-child(1) { --d: .34; --x: .719; --y: .695; }   /* centers on the edge at 46°, 60°, 74°, clear of the can */
.d--comb i:nth-child(2) { --d: .42; --x: .866; --y: .5; }
.d--comb i:nth-child(3) { --d: .3;  --x: .961; --y: .276; }
.d--leaf { width: 26%; aspect-ratio: 1; border-radius: 0 100% 0 100%; background: var(--ink); }   /* the leaf's points are part of the vocabulary */
.d--leaf1 { left: 0; bottom: 8%; rotate: -12deg; }
.d--leaf2 { right: 0; bottom: 18%; rotate: 78deg; width: 21%; }

/* Día Libre: sea (its flat edge on the circle's bottom), music notes */
.d--sea { left: 50%; bottom: calc(50% - var(--R)); width: min(84cqw, 84cqh); aspect-ratio: 2; translate: -50% 0; border-radius: 999px 999px 0 0; background: var(--mar); }
.d--note { width: 11%; color: var(--cream); animation: bob 4s var(--ease-io) infinite alternate; }   /* bouba: round heads, fat round ends */
.d--note svg { display: block; width: 100%; height: auto; fill: currentColor; }
.d--note1 { left: 6%; top: 18%; rotate: -10deg; }
.d--note2 { right: 2%; top: 30%; width: 17%; rotate: 8deg; animation-delay: -1.3s; }
.d--note3 { left: 12%; top: 44%; width: 8%; rotate: 12deg; animation-delay: -2.6s; }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-8px); } }

/* El Tranque: dominoes */
.d--domino { width: 11%; aspect-ratio: .5; border-radius: 12%; background: var(--cream); }
.d--domino::before { content: ''; position: absolute; left: 14%; right: 14%; top: calc(50% - 1px); height: 2px; border-radius: 2px; background: var(--ink); }
.d--domino b { position: absolute; width: 16%; aspect-ratio: 1; border-radius: 50%; background: var(--ink); translate: -50% -50%; }
.d--domino b:nth-child(1) { left: 50%; top: 25%; }
.d--domino b:nth-child(2) { left: 30%; top: 64%; }
.d--domino b:nth-child(3) { left: 70%; top: 86%; }
.d--domino b:nth-child(4) { left: 30%; top: 86%; }
.d--domino1 { left: 2%; top: 50%; rotate: -24deg; }
.d--domino2 { right: 4%; top: 30%; rotate: 18deg; width: 12%; }
.d--domino3 { left: 14%; bottom: 6%; rotate: 64deg; width: 9%; }

/* ---------- Panel: the card grown across its row ---------- */
/* Laid over the card's row, it starts clipped to the card's own box and opens to the row. Its
   first column is the card itself (js/beers.js builds it: same size, same insides, square to the
   box), above the copy, so while it slides to the row's start it covers what it hasn't passed
   yet. The × is the card's +, moved to the box's top-right corner. Name, description and the
   sheet's label share their first baseline. */
.bpanel {
  position: absolute; z-index: 3; left: 0; right: 0;   /* across .bgroups: the row's cards (the index stays beside it) */
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter);
  align-items: first baseline;
  border-radius: var(--r-4);
  background: var(--bc); color: var(--ink);
}
.bpanel[hidden] { display: none; }
.lite .bpanel { overflow: hidden; }   /* phones open it without the clip (js/beers.js), so the box rounds its own contents: the card's copy inside is square */
/* and the row makes room at once there: the margin easing open re-laid out the grid and the whole
   page under it every frame for 0.9s (43 layouts on a 4x-slowed phone; Miguel, 2026-10-19: "a bit
   laggy with opening/closing cards") */
.lite .bcard { transition: none; }
.bpanel__card { grid-row: 1; position: relative; z-index: 1; margin: 0; border-radius: 0; transition: none; }
.bpanel__spot { visibility: hidden; }              /* keeps the name's room; the × is in the corner */
.bpanel__close { position: absolute; z-index: 2; right: var(--s-3); }
.bpanel.is-open .bpanel__close i { rotate: 135deg; }

/* Copy and sheet, with the card's padding. The baseline alignment lowers them onto the name's
   line (their padding has to stay under the card's, or the card's column would be pushed down). */
.bpanel__copy, .bpanel__sheet { grid-row: 1; padding-top: var(--s-3); padding-bottom: var(--s-2); }
/* ABV badge (back from the first layout, Miguel, 2026-10-09): a scalloped flower in a second
   color of the palette, turning slowly, at the top right of the copy; the text wraps round it.
   It springs in with the deco when the card opens and leaves without overshoot. One size
   everywhere, with room round the number (Miguel: the first try was tight). aria-hidden:
   the card's own line under the pill says the ABV (the sheet's ABV row went, Miguel, 2026-10-13: three
   times was too many). */
.badge {
  float: right; clear: right; position: relative; width: var(--s-7); aspect-ratio: 1;   /* under the ×'s spacer on tablets */
  margin: 0 0 var(--s-2) var(--s-3); shape-outside: circle(50%);
  display: grid; place-items: center; color: var(--ink);
  scale: 0; transition: scale .35s var(--ease-out);
}
.bpanel.is-open .badge { scale: 1; transition: scale .9s var(--ease-spring) .2s; }
.badge svg { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--badge); animation: spin 26s linear infinite; }
.badge span { position: relative; display: grid; justify-items: center; font: 900 italic var(--t-0)/1 var(--f-display); font-stretch: 110%; }
.badge small { font: 700 var(--t--1)/1 var(--f-mono); font-style: normal; letter-spacing: .1em; margin-top: var(--s-0); }
.bpanel .label { margin-bottom: var(--s-2); }      /* the sheet's first rule clears the × in the corner */
.beer__desc { margin-bottom: var(--s-3); font-size: var(--t-0); line-height: var(--lh-body); max-width: 66ch; }
.beer__pairs { display: flex; flex-direction: column; gap: var(--s-0); margin-top: var(--s-3); font-weight: 800; line-height: 1.33; max-width: 66ch; }
.beer__pairs .label { margin-bottom: 0; }

/* Specs: a compact sheet under its own label (same as "Sabor"), label left and value right on
   thin ink rules; one column beside the copy, two of three when it runs under it (tablets). */
.bpanel__sheet { padding-right: var(--s-3); }
.bpanel__specs { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--gutter); }
.bpanel__specs > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2);
  padding: var(--s-1) 0; border-top: 2px solid var(--ink);
}
.bpanel__specs .wide { grid-column: 1 / -1; }
.bpanel__specs dt { flex: none; font: 700 max(12px, var(--t--1))/1.5 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.bpanel__specs dd { font-weight: 800; text-align: right; text-wrap: balance; }

/* From 1280px the box is three tracks: the first exactly a card (the cards are thirds of the same
   width), then the copy and the sheet, 5 : 2. Every beer fits the card's height from 1366px; at
   1280-1365 the longest copy needs up to 31px more and the row makes room (measured 2026-10-27) */
@media (min-width: 1280px) {
  .bpanel { grid-template-columns: calc((100% - 2 * var(--gutter)) / 3) minmax(0, 5fr) minmax(0, 2fr); }
  .bpanel__card { grid-column: 1; }
  .bpanel__copy { grid-column: 2; }
  .bpanel__sheet { grid-column: 3; }
}
/* 1280 to 1439: a little less air so the row doesn't move (Spanish Bacon ran 31px past its card at
   1280-1365; since the client's copy, 2026-10-26, the chips are a little narrower so its four
   flavors keep to one line; to 1439 since the cards got bigger beside the index, 2026-10-27) */
@media (min-width: 1280px) and (max-width: 1439px) {
  .badge { margin-left: var(--s-2); }
  .beer__desc { margin-bottom: var(--s-2); text-wrap: pretty; }
  .beer__pairs { margin-top: var(--s-2); }
  .bpanel .chip { padding: 6px 12px; }
  .bpanel__copy { padding-bottom: var(--s-1); }
}

/* ---------- Small desktop: 3 cards to a row (4 would squeeze the pill and the meta line) ---------- */
@media (min-width: 1024px) and (max-width: 1279px) {
  .bcard { grid-column: span 4; }
  .bpanel__card { grid-column: 1 / span 4; }
  .bpanel__copy { grid-column: 5 / span 4; }
  .bpanel__sheet { grid-column: 9 / span 4; }
}
/* ---------- Tablet: 2 cards to a row; the copy beside the card, the sheet across under both ---------- */
@media (max-width: 1023px) {
  .bcard { grid-column: span 4; }
  .bpanel__card { grid-column: 1 / span 4; }
  .bpanel__copy { grid-column: 5 / span 4; padding-right: var(--s-3); }
  .bpanel__copy::before { content: ''; float: right; width: calc(var(--s-4) + var(--s-2)); height: var(--s-5); }   /* the copy steps around the ×, and the badge drops clear of it */
  .bpanel__sheet { grid-column: 1 / -1; grid-row: 2; padding: 0 var(--s-3) var(--s-3); }
  .bpanel__specs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-flow: column; grid-template-rows: repeat(3, auto); }   /* on the card's and the copy's edges */
}
/* ---------- Phone: 1 card to a row; the box grows down: card, copy, sheet ---------- */
@media (max-width: 639px) {
  .bcard { grid-column: 1 / -1; }
  .bpanel__card { grid-column: 1 / -1; }
  .bpanel__copy { grid-column: 1 / -1; grid-row: 2; padding: 0 var(--s-3); }
  .bpanel__sheet { grid-column: 1 / -1; grid-row: 3; padding: var(--s-4) var(--s-3) var(--s-3); }
  .bpanel__specs { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-template-rows: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bcard, .d, .badge { transition: none; }
  .badge svg { animation: none; }
}