/**
 * Ateca – Card Component (components/cards.css)
 * @package Ateca
 */

/* ============================================================
   BASE CARD
   ============================================================ */
:where(.ateca-card) {
  background: var(--ateca-card-bg);
  border: 1px solid var(--ateca-card-border);
  border-radius: var(--ateca-card-radius);
  box-shadow: var(--ateca-card-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

:where(.ateca-card__image) {
  display: block;
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

:where(.ateca-card__body) {
  padding: var(--ateca-card-padding);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--ateca-space-s);
}

:where(.ateca-card__title) {
  font-size: var(--ateca-font-size-l);
  font-weight: var(--ateca-font-weight-semibold);
  margin: 0;
  color: var(--ateca-text);
  line-height: var(--ateca-line-height-snug);
}

:where(.ateca-card__excerpt) {
  font-size: var(--ateca-font-size-s);
  color: var(--ateca-text-secondary);
  line-height: var(--ateca-line-height-relaxed);
  flex: 1;
}

:where(.ateca-card__meta) {
  display: flex;
  align-items: center;
  gap: var(--ateca-space-xs);
  font-size: var(--ateca-font-size-xs);
  color: var(--ateca-text-muted);
}

:where(.ateca-card__footer) {
  padding: var(--ateca-space-m) var(--ateca-card-padding);
  border-block-start: 1px solid var(--ateca-border);
  display: flex;
  align-items: center;
  gap: var(--ateca-space-xs);
}

/* ============================================================
   HOVER CARD
   ============================================================ */
:where(.ateca-card--hoverable) {
  transition:
    box-shadow var(--ateca-duration-normal) var(--ateca-ease-out),
    transform  var(--ateca-duration-normal) var(--ateca-ease-out);
  cursor: pointer;
}
:where(.ateca-card--hoverable):hover {
  box-shadow: var(--ateca-card-shadow-hover);
  transform: translateY(-3px);
}

/* ============================================================
   BLOG POST CARD
   ============================================================ */
:where(.ateca-post-card) {
  background: var(--ateca-card-bg);
  border: 1px solid var(--ateca-card-border);
  border-radius: var(--ateca-card-radius);
  overflow: hidden;
  transition: box-shadow var(--ateca-duration-normal) var(--ateca-ease-out),
              transform  var(--ateca-duration-normal) var(--ateca-ease-out);
}
:where(.ateca-post-card):hover {
  box-shadow: var(--ateca-card-shadow-hover);
  transform: translateY(-2px);
}

/* ============================================================
   PRICING CARD
   ============================================================ */
:where(.ateca-pricing-card) {
  background: var(--ateca-surface);
  border: 2px solid var(--ateca-border);
  border-radius: var(--ateca-card-radius);
  padding: var(--ateca-space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--ateca-space-l);
}
:where(.ateca-pricing-card--featured) {
  background: var(--ateca-brand);
  border-color: var(--ateca-brand);
  color: #fff;
  box-shadow: var(--ateca-shadow-xl);
  scale: 1.03;
}
:where(.ateca-pricing-card__price) {
  font-size: var(--ateca-font-size-5xl);
  font-weight: var(--ateca-font-weight-black);
  line-height: 1;
}
:where(.ateca-pricing-card__price sup) {
  font-size: var(--ateca-font-size-2xl);
  vertical-align: super;
}
:where(.ateca-pricing-card__period) {
  font-size: var(--ateca-font-size-s);
  opacity: 0.75;
}
:where(.ateca-pricing-card__features) {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ateca-space-s);
}
:where(.ateca-pricing-card__features li)::before {
  content: '✓';
  margin-inline-end: var(--ateca-space-xs);
  font-weight: var(--ateca-font-weight-bold);
  color: var(--ateca-color-success);
}

/* ============================================================
   TESTIMONIAL CARD
   ============================================================ */
:where(.ateca-testimonial) {
  background: var(--ateca-surface);
  border: 1px solid var(--ateca-border);
  border-radius: var(--ateca-card-radius);
  padding: var(--ateca-space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--ateca-space-m);
}
:where(.ateca-testimonial__quote) {
  font-size: var(--ateca-font-size-m);
  line-height: var(--ateca-line-height-relaxed);
  color: var(--ateca-text);
  font-style: italic;
}
:where(.ateca-testimonial__quote)::before { content: '\201C'; }
:where(.ateca-testimonial__quote)::after  { content: '\201D'; }
:where(.ateca-testimonial__author) {
  display: flex;
  align-items: center;
  gap: var(--ateca-space-m);
}
:where(.ateca-testimonial__avatar) {
  inline-size: 48px;
  block-size:  48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
:where(.ateca-testimonial__name) {
  font-weight: var(--ateca-font-weight-semibold);
  font-size: var(--ateca-font-size-s);
}
:where(.ateca-testimonial__role) {
  font-size: var(--ateca-font-size-xs);
  color: var(--ateca-text-muted);
}

/* ============================================================
   TEAM CARD
   ============================================================ */
:where(.ateca-team-card) {
  text-align: center;
  padding: var(--ateca-space-xl);
}
:where(.ateca-team-card__photo) {
  inline-size: 96px;
  block-size:  96px;
  border-radius: 50%;
  object-fit: cover;
  margin-inline: auto;
  margin-block-end: var(--ateca-space-m);
}
:where(.ateca-team-card__name)  { font-weight: var(--ateca-font-weight-semibold); margin: 0; }
:where(.ateca-team-card__title) { font-size: var(--ateca-font-size-s); color: var(--ateca-text-secondary); }