/* ==========================================================================
   Cards — Edge Pharma
   Structural shells for the general Card block plus its Product Card and
   News Card variants, and the CTA Banner. Visual design is implemented
   in a later step, once each is used on a page.
   ========================================================================== */

/* ---------------------------------------------------------------------
   Card (base)
   --------------------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
}

.card__media {
  position: relative;
}

.card__body {
  display: flex;
  flex-direction: column;
}

.card__title {
  /* styled in a later step */
}

.card__text {
  /* styled in a later step */
}

/* ---------------------------------------------------------------------
   Product Card
   --------------------------------------------------------------------- */

.product-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
}

.product-card__media {
  position: relative;
}

.product-card__badge {
  position: absolute;
}

.product-card__body {
  display: flex;
  flex-direction: column;
}

.product-card__category {
  /* styled in a later step */
}

.product-card__title {
  /* styled in a later step */
}

.product-card__meta {
  display: flex;
  align-items: center;
}

.product-card__link {
  display: inline-flex;
  align-items: center;
}

/* ---------------------------------------------------------------------
   News Card
   --------------------------------------------------------------------- */

.news-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
}

.news-card__media {
  position: relative;
}

.news-card__date {
  position: absolute;
}

.news-card__body {
  display: flex;
  flex-direction: column;
}

.news-card__category {
  /* styled in a later step */
}

.news-card__title {
  /* styled in a later step */
}

.news-card__excerpt {
  /* styled in a later step */
}

.news-card__link {
  display: inline-flex;
  align-items: center;
}

/* ---------------------------------------------------------------------
   CTA Banner
   --------------------------------------------------------------------- */

.cta-banner {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
}

.cta-banner__content {
  /* styled in a later step */
}

.cta-banner__title {
  /* styled in a later step */
}

.cta-banner__text {
  /* styled in a later step */
}

.cta-banner__actions {
  display: flex;
  flex-wrap: wrap;
}