/**
 * Contact methods.
 *
 * Almost everything is kit-owned: `.grid--2/3/4`, `.card`, `.card--lift`,
 * `.card__icon`, `.card__foot` and `.link-cta` (which already carries its own
 * 44px tap target, so the mock-up's local patch for that is not ported).
 *
 * What the kit does not have is the contact detail line, which has to read as
 * the card's payload rather than as body copy. `.card p` in pages.css sets
 * `--ink-soft`, so the override is scoped through `.contact-methods__card` to
 * win on specificity rather than on load order. That line is also the one place
 * on the page holding an unbreakable string, so it owns the wrapping rule too.
 *
 * The head's block-end margin lives here because the approved design uses a
 * value other than the `.section-head` default. See below.
 *
 * Every class is prefixed `contact-methods__`, per AGENTS.md §2.
 */

/* The head carried no bottom margin, so the heading sat straight on top of the
   card row (review note, Contact tab 2 row 11). `.section-head--center` already
   supplies the auto inline margin; contact.html's approved head sets the block
   end to --s-5, so that is what is restored here rather than the --s-6 that
   `.section-head` now carries by default. This file loads after base.css, so
   at equal specificity this wins - that is the intended override, not a clash. */
.contact-methods__head { margin-block-end: var(--s-5); }

/* Email and address lines break inside a word when they have to.
   `info@finasmanpower.com.ph` has no space, hyphen or other break opportunity
   in it, so at 320px it ran straight out of the card (review finding F-12d).
   `anywhere` rather than `break-word` because only `anywhere` also shrinks the
   element's min-content contribution, which is what the grid track and the card
   are sized from: with `break-word` the track still asks for the full unbroken
   width and the card overflows anyway. Wrapped, never truncated – an applicant
   has to be able to read and copy the whole address. */
.contact-methods__card .contact-methods__value {
  color: var(--ink);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.contact-methods__card .contact-methods__value a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color var(--dur-fast) ease;
}

.contact-methods__card .contact-methods__value a:hover { color: var(--blue); }

.contact-methods__intro { color: var(--ink-soft); }