/* Product card: something to book or buy — a lounge, a voucher. Its picture
   (the accent when there is none), the name, the key facts, a few words and
   the button to go on, which keeps to the foot so cards in a row line up.

   <article class="product-card">
     <div class="product-card__media frame">…</div>
     <div class="product-card__body">
       <h2 class="product-card__title">…</h2>
       <div class="product-card__facts">…</div>
       <p class="product-card__text">…</p>
       <a class="button" data-width="full">…</a>
     </div>
   </article> */
.product-card {
  background: var(--color-surface-1);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Without a picture the accent gradient fills the frame, an icon in its middle */
.product-card__media {
  align-items: center;
  color: var(--color-on-accent);
  display: flex;
  justify-content: center;

  & > .icon {
    --icon-size: var(--step-5);

    opacity: 0.6;
  }
}

.product-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-s-m);

  & > :last-child {
    margin-block-start: auto;
  }
}

.product-card__title {
  font-size: var(--step-2);
}

/* Capacity on the left, the price with what it means on the right */
.product-card__facts {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-s);
  justify-content: space-between;
}

.product-card__price {
  font-size: var(--step-1);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
}

.product-card__text {
  color: var(--color-muted);
  font-size: var(--step--1);
  line-height: var(--leading-normal);
}

/* A card that is a link as a whole lifts a little under the pointer */
a.product-card {
  color: inherit;
  text-decoration: none;
  transition:
    box-shadow var(--duration-base) var(--ease-out),
    translate var(--duration-base) var(--ease-out);

  &:hover {
    box-shadow: var(--shadow-raised);
    translate: 0 -2px;
  }
}