/* assets/css/components/card-office.css
 * @layer components — Office card (city + multi-contact + multi-phone + multi-email + map CTA)
 *
 * Used in the office groups section of the contact page (Food Labs, Environment, etc.).
 * Soft tinted card surface, label/value rows, focused CTA at the bottom.
 * No hover lifts, no gradients, no .btn dependency — keeps render cost low
 * across the dozens of office cards rendered per page.
 * ════════════════════════════════════════════════════════════════════ */

@layer components {

  .card-office {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap);
    padding: var(--card-padding);
    background: var(--surface-tinted);
    border-radius: var(--card-radius);
  }

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

  /* Each label/value row — "Contact:", "Mob:", "Email:" */
  .card-office__field {
    margin: 0;
    font-size: var(--text-s);
    line-height: var(--leading-snug);
  }

  .card-office__field-label {
    display: block;
    font-weight: var(--weight-semibold);
    color: var(--text-main);
    margin-block-end: var(--space-3xs);
  }

  .card-office__field-value {
    display: block;
    color: var(--text-body);
    word-break: break-word;
  }

  .card-office__field-value a {
    color: var(--text-link);
    text-decoration: none;
  }

  .card-office__field-value a:hover {
    text-decoration: underline;
    color: var(--text-link-hover);
  }

  /* Focused CTA — pill button at the bottom of the card.
     Built as its own selector (not extending .btn) for performance —
     this card renders dozens of times per page and avoiding the cascade
     resolution cost of .btn + variants is measurable. */
  .card-office__cta {
    display: inline-block;
    margin-block-start: auto;
    padding: var(--space-xs) var(--space-m);
    background: var(--secondary-light);
    color: var(--text-accent);
    font-size: var(--text-s);
    font-weight: var(--weight-semibold);
    text-align: center;
    text-decoration: none;
    border-radius: var(--radius-full);
    transition: background-color var(--duration-fast) var(--ease-default);
  }

  .card-office__cta:hover {
    background: var(--secondary);
  }

  .card-office__cta:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

}