/* assets/css/components/card-contact-info.css
 * @layer components — Contact info card (icon + label + description + value)
 *
 * Used in the 3-card row at the top of the contact page (Email / Phone / Address).
 * Soft tinted card surface, icon at top, text stacked below.
 * No hover lifts, no gradients — kept quiet by design.
 * ════════════════════════════════════════════════════════════════════ */

@layer components {

  .card-contact-info {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap);
    padding: var(--card-padding);
    background: var(--surface-tinted);
    border-radius: var(--card-radius);
    text-decoration: none;
    color: inherit;
  }

  /* Anchor variant (when card_url is set) — gets a focus ring */
  a.card-contact-info:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .card-contact-info__icon {
    display: inline-flex;
    align-items: center;
    color: var(--text-accent);
    line-height: 0;
  }

  .card-contact-info__label {
    font-size: var(--text-l);
    font-weight: var(--weight-bold);
    color: var(--text-main);
    line-height: var(--leading-tight);
    margin: 0;
  }

  .card-contact-info__description {
    font-size: var(--text-s);
    color: var(--text-muted);
    line-height: var(--leading-relaxed);
    margin: 0;
  }

  /* Value sits at the bottom, anchored via margin-block-start: auto so all
     cards in the row align their values regardless of description length. */
  .card-contact-info__value {
    margin: 0;
    margin-block-start: auto;
    padding-block-start: var(--space-xs);
    font-size: var(--text-m);
    font-weight: var(--weight-semibold);
    color: var(--text-main);
    line-height: var(--leading-snug);
    word-break: break-word;
  }

}