/* ==========================================================================
   PRODUTO — layout that only exists on the product listing. Text, boxes and images still come from presets.css;
   the carousel, plate and flood behavior come from components.css.
   ========================================================================== */

/* 3 columns on desktop (span 4 of 12), 2 on tablet, 1 on mobile; the photo keeps the sketch's proportion */
.card { grid-column: span 12; aspect-ratio: 491 / 563; }

/* Text on a card scales with the CARD, not the window: on a phone the card is as wide as the screen, so viewport-based
   sizes would leave the plate tiny. The ratios are the sketch's (card 491px: body 39px = 8%, fine print 21px = 4.3%). */
.card {
  container-type: inline-size;
  --fs-2: max(1rem, 8cqw);
  --fs-0: max(0.75rem, 4.3cqw);
  --card-inset: max(0.75rem, 4.7cqw);
}
@media (min-width: 640px) { .card { grid-column: span 6; } }
@media (min-width: 1025px) { .card { grid-column: span 4; } }

/* Radii on a card scale with the CARD too. The pill tokens follow the window width and stop at a minimum, so a phone-wide
   card would get the same small radius as a small button and look almost square. Here pill 2 (the card) is 5.47% of the
   card's width and pill 3 (the plate) 2.73% — exactly what the tokens give on a 1920px screen (27px / 13px on a 492px card).
   The card's own radius is measured against the grid (its container); its children measure against the card. */
#product-grid { container-type: inline-size; }
.card {
  --cols: 1;
  --card-w: calc((100cqw - (var(--cols) - 1) * clamp(1rem, 2vw, 2.5rem)) / var(--cols));   /* = the grid's column width */
  --pill-2: calc(var(--card-w) * 0.0547);
}
@media (min-width: 640px) { .card { --cols: 2; } }
@media (min-width: 1025px) { .card { --cols: 3; } }
.card > * { --pill-3: 2.73cqw; }

.grid > p { grid-column: 1 / -1; }   /* a message in place of the cards spans the full row */

/* A fine ring of the liquid gradient (.ring-liquid, as thick as a button's rim) around the round step buttons and the label plate, so they read over any photo.
   `.flood-flush` zeroes --rim on exactly these two, so the thickness is read from the card, which still has the real one. */
.card { --ring: var(--rim); }

/* the whole card opens the product: an invisible link over the photo, under the step buttons and the plate */
.card__media-link { position: absolute; inset: 0; z-index: 1; }