/* See ./product-tile-card.md for design notes and rationale.
 *
 * This block is a content container authored inside a fragment page and
 * consumed by the product-tile block (which builds the real overlay card and
 * owns the production visual design). These styles only give a readable card
 * preview when the fragment page is opened on its own - in Universal Editor or
 * a direct fragment preview - so authors can see the name / description / price
 * / CTA they are editing.
 *
 * product-tile-card.js is a simple (single-tier) decorator that runs in every
 * mode, so by the time these styles apply each field cell already carries its
 * stable class hook (.product-tile-card__image / __copy / __price / __cta).
 * We target those hooks (not raw nth-child rows) so the preview survives
 * regardless of authored row order. Typography mirrors the tokens product-tile
 * uses for the rendered tile (name at .h5, body copy, price big number).
 */

.product-tile-card {
  display: flex;
  flex-direction: column;
  gap: var(--ll-space-3);
  max-width: 416px;
  padding: var(--ll-space-5);
  border-radius: var(--ll-radius-md);
  background: var(--ll-color-bg-secondary);
  box-shadow: var(--ll-shadow-resting);
  color: var(--ll-color-text-primary);
}

.product-tile-card > div {
  margin: 0;
  padding: 0;
}

/* Background image: full-width banner at the top of the preview. */
.product-tile-card .product-tile-card__image {
  overflow: hidden;
  border-radius: var(--ll-radius-s);
  aspect-ratio: 416 / 240;
}

.product-tile-card .product-tile-card__image picture,
.product-tile-card .product-tile-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Copy cell: product name (heading) at the .h5 ramp, description below. */
.product-tile-card .product-tile-card__copy :is(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  color: var(--ll-color-text-primary);
  font-family: var(--ll-text-h5-family);
  font-size: var(--ll-text-h5-size);
  line-height: var(--ll-text-h5-line-height);
  letter-spacing: var(--ll-text-h5-letter-spacing);
  font-weight: var(--ll-text-h5-weight);
}

.product-tile-card .product-tile-card__copy p {
  margin: var(--ll-space-2) 0 0;
  color: var(--ll-color-text-secondary);
  font-family: var(--ll-text-body-base-family);
  font-size: var(--ll-text-body-base-size);
  line-height: var(--ll-text-body-base-line-height);
  letter-spacing: var(--ll-text-body-base-letter-spacing);
  font-weight: var(--ll-text-body-base-weight);
}

/* Price cell: big number, semibold. */
.product-tile-card .product-tile-card__price {
  color: var(--ll-color-text-primary);
  font-family: var(--ll-text-body-3xl-family);
  font-size: var(--ll-text-body-3xl-size);
  line-height: var(--ll-text-body-3xl-line-height);
  letter-spacing: var(--ll-text-body-3xl-letter-spacing);
  font-weight: var(--ds-font-weight-semibold, 600);
}

.product-tile-card .product-tile-card__price p {
  margin: 0;
}

/* An authored #dp/price link in the price row reads as the price value, never
 * link-blue and never underlined. Explicit none shields it from the global
 * :where(a:any-link) underline default so the preview matches the rendered
 * product-tile. */
.product-tile-card .product-tile-card__price a {
  color: inherit;
  text-decoration: none;
}

/* CTA cell: a cream pill preview of the rendered .button.accent molecule. */
.product-tile-card .product-tile-card__cta {
  margin-top: var(--ll-space-2);
}

.product-tile-card .product-tile-card__cta p {
  margin: 0;
}

.product-tile-card .product-tile-card__cta a {
  display: inline-block;
  padding: var(--ll-space-3) var(--ll-space-6);
  border-radius: var(--ll-radius-pill);
  background: var(--ll-color-bg-accent);
  color: var(--ll-color-text-primary);
  font-family: var(--ll-text-body-base-family);
  font-size: var(--ll-text-body-base-size);
  line-height: var(--ll-text-body-base-line-height);
  font-weight: var(--ds-font-weight-semibold, 600);
  text-decoration: none;
}