/* Sole owner of competition-card and card-scoped countdown presentation. */

.competition-card {
  height: 100%;
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  color: var(--dice-ds-strong);
  background: var(--dice-ds-surface);
  border: 1px solid var(--dice-ds-border);
  border-radius: var(--dice-ds-radius-card);
  scroll-snap-align: start;
  font-family: var(--dice-font-body);
  container-type: inline-size;
}

.competition-card__media {
  position: relative;
  aspect-ratio: 1;
  display: block;
  background: var(--dice-ds-raised);
  overflow: hidden;
  border-radius: var(--dice-ds-radius-card) var(--dice-ds-radius-card) 0 0;
}

.competition-card .competition-card__media img,
.woocommerce ul.products li.product .competition-card__media img {
  width: 100%;
  height: 100%;
  display: block;
  margin: 0;
  object-fit: cover;
  transition: transform var(--dice-ds-image-duration) var(--dice-ds-ease);
}

.competition-card__draw-ribbon {
  position: absolute;
  top: var(--dice-ds-space-3);
  left: var(--dice-ds-space-3);
  z-index: 2;
  max-width: calc(100% - 24px);
  display: inline-flex;
  align-items: center;
  gap: var(--dice-ds-space-1);
  padding: var(--dice-ds-space-2);
  color: var(--dice-ds-strong);
  background: var(--dice-ds-raised);
  border-radius: var(--dice-ds-radius-badge);
  font: 700 var(--dice-ds-type-label)/1.4 var(--dice-font-display);
  text-transform: uppercase;
  letter-spacing: var(--dice-ds-action-tracking);
}

.competition-card__draw-ribbon.is-urgent {
  color: var(--dice-ds-on-urgent);
  background: var(--dice-ds-urgent);
}

.competition-card__body {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(2.5em, auto) minmax(0, 1fr);
  gap: var(--dice-ds-space-3);
  padding: var(--dice-ds-space-5);
}

.competition-card__title {
  color: var(--dice-ds-strong);
  overflow-wrap: anywhere;
  text-decoration: none;
  font: 700 var(--dice-ds-type-card)/1.25 var(--dice-font-display);
  text-transform: uppercase;
  letter-spacing: var(--dice-ds-heading-tracking);
  line-height: var(--dice-ds-heading-leading);
  text-wrap: balance;
}

.competition-card__action-stack {
  align-self: end;
  display: grid;
  gap: var(--dice-ds-space-3);
}

.competition-card__meta {
  color: var(--dice-ds-muted);
  font: 700 var(--dice-ds-type-label)/1.4 var(--dice-font-display);
  text-transform: uppercase;
  letter-spacing: var(--dice-ds-label-tracking);
}

.competition-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--dice-ds-space-2);
}

.competition-card__progress-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--dice-ds-space-2);
}

.competition-card__progress {
  height: var(--dice-ds-progress-height);
  background: var(--dice-ds-raised);
  overflow: hidden;
  border-radius: var(--dice-ds-track-radius);
}

.competition-card__progress span {
  display: block;
  width: clamp(0%, var(--progress), 100%);
  height: 100%;
  background: var(--dice-ds-yellow);
}

.competition-card__sold {
  color: var(--dice-ds-muted);
  font: 400 var(--dice-ds-type-label)/1.5 var(--dice-font-body);
}

.competition-card__entry-price {
  color: var(--dice-ds-muted);
  font: 400 var(--dice-ds-type-label)/1.5 var(--dice-font-body);
  font-variant-numeric: tabular-nums;
}

.competition-card__entry-price .woocommerce-Price-amount {
  display: block;
  color: var(--dice-ds-strong);
  font: 700 var(--dice-ds-type-panel)/1.2 var(--dice-font-display);
}

.competition-card .countdown-timer--card .countdown-timer__unit {
  padding: var(--dice-ds-space-2) var(--dice-ds-space-1);
  background: var(--dice-ds-raised);
  border-radius: var(--dice-ds-radius-badge);
}

.competition-card .countdown-timer--card .countdown-timer__unit strong {
  font-size: var(--dice-ds-type-card);
}

.competition-card .countdown-timer--card .countdown-timer__unit small {
  font-size: var(--dice-ds-type-label);
}

/* Repeated component class beats WooCommerce's inherited anchor colour without !important. */

.competition-card :is(a, button):focus-visible {
  outline: 2px solid var(--dice-ds-focus);
  outline-offset: 3px;
}

.competition-card__media:focus-visible {
  outline-offset: -3px;
}

.competition-card.is-sold-out .competition-card__draw-ribbon {
  color: var(--dice-ds-strong);
  background: var(--dice-ds-raised);
}

@container (max-width: 250px) {
  .competition-card__footer > .competition-card__cta {
    width: 100%;
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .competition-card:not(.is-sold-out):hover .competition-card__media img {
    transform: scale(var(--dice-ds-image-scale));
  }
}

.dice-card-icon {
  width: var(--dice-ds-icon);
  height: var(--dice-ds-icon);
  flex: 0 0 auto;
}

.competition-card__draw-ribbon .dice-card-icon {
  width: var(--dice-ds-icon-small);
  height: var(--dice-ds-icon-small);
}

/* Mobile collections share two columns. Hero slides are a separate component. */
@media(max-width:980px) {
 body.dice-design-site ul.products { --dice-mobile-product-columns:repeat(2,minmax(0,1fr)); --dice-mobile-column-gap:12px; --dice-mobile-row-gap:16px; }
 body.dice-design-site .product-row { --dice-mobile-card-width:calc((100% - 12px) / 2); gap:12px; }
 @container(max-width:220px) {
  .competition-card__body { padding:10px; gap:8px; grid-template-rows:auto auto minmax(0,1fr); }
  .competition-card__title { font-size:16px; line-height:1.2; letter-spacing:0; }
  .competition-card__action-stack { gap:8px; }
  .competition-card__footer { gap:8px; }
  .competition-card__entry-price .woocommerce-Price-amount { font-size:20px; }
  .competition-card .dice-card-action { box-sizing:border-box; width:100%; max-width:100%; padding-inline:6px; font-size:13px; white-space:normal; text-align:center; }
  .competition-card .countdown-timer--card { gap:3px; }
  .competition-card .countdown-timer--card .countdown-timer__unit { min-width:0; padding:6px 1px; }
  .competition-card .countdown-timer--card .countdown-timer__unit strong { font-size:16px; }
  .competition-card .countdown-timer--card .countdown-timer__unit small { font-size:10px; }
  .competition-card__draw-ribbon { top:6px; left:6px; max-width:calc(100% - 12px); padding:5px; gap:3px; font-size:10px; }
 }
}