/*
 * contact.css — Toro Legal Marketing
 *
 * Page-specific styling for /contact/. Two sections live here:
 *   1. .tlm-contact-details — two-card directory (Toro + Paul) with
 *      icon-chip + label/value rows. Visual treatment mirrors the
 *      Start-a-Conversation "Ways to reach Paul" list; classes are
 *      scoped to .tlm-contact-details rather than shared with that
 *      module until a third surface justifies promotion.
 *   2. .tlm-contact-help — two-card "Are you looking for help"
 *      CTAs. Cream cards, heading + body + ghost/primary button.
 *
 * Section padding follows the locked mobile standard (60/60 mobile
 * universal, looser at tablet+).
 */

/* sr-only utility for the visually-hidden details H2.
   If the theme already has one, this rule is a harmless duplicate. */
.tlm-contact-details .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================
 * Section 2 — Contact details (Toro + Paul)
 * ============================================ */

.tlm-contact-details {
  background: var(--color-white);
  padding-block: var(--space-3xl);
}

.tlm-contact-details__inner {
  display: grid;
  /* minmax(0,1fr) not 1fr: a plain 1fr track has an `auto` minimum that
     grows to the card's content width, pushing the card past the
     container's right edge. minmax(0,...) lets the track shrink to fit. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
}

.tlm-contact-details__card {
  /* border-box keeps padding inside the track; min-width:0 lets the
     card shrink to the grid track (default min-width:auto refused to go
     below content width, overrunning the right edge -> sideways scroll). */
  box-sizing: border-box;
  min-width: 0;
  background: var(--color-cream);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.tlm-contact-details__card-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: var(--text-h4-mobile);            /* 28 mobile */
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-navy);
}

.tlm-contact-details__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.tlm-contact-details__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

/* Navy chip + white Carbon icon — same Engagements treatment as the
   Start-a-Conversation reach list. 40px square pill. */
.tlm-contact-details__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-xl);
  height: var(--space-xl);
  border-radius: var(--radius-pill);
  background-color: var(--color-navy);
  color: var(--color-white);
}

.tlm-contact-details__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tlm-contact-details__label {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-tight);
  color: var(--color-navy);
}

.tlm-contact-details__value {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-tight);
  color: var(--color-navy-muted);
  /* Long emails (team@torolegalmarketing.com) are unbreakable strings;
     allow them to wrap so they don't force the card wider than its
     grid track. */
  overflow-wrap: anywhere;
}

/* Inherits the global hyperlink + 70%-navy hover-underline from
   base.css. Regular weight so it sits next to the bold label
   cleanly (same treatment as the reach list). */
.tlm-contact-details__value-link {
  font-weight: var(--weight-regular);
}

@media (min-width: 768px) {
  .tlm-contact-details__card {
    padding: var(--space-xl);
  }
}

@media (min-width: 1024px) {
  .tlm-contact-details__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: start;
  }
}

/* ============================================
 * Section 3 — Help CTAs
 * ============================================ */

.tlm-contact-help {
  background: var(--color-cream);
  padding-block: var(--space-3xl);
}

.tlm-contact-help__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.tlm-contact-help__intro {
  text-align: left;
}

.tlm-contact-help__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: var(--text-h3-mobile);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-navy);
  text-wrap: balance;
}

.tlm-contact-help__cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
}

.tlm-contact-help__card {
  box-sizing: border-box;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.tlm-contact-help__card-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: var(--text-h4-mobile);            /* 28 mobile */
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-navy);
}

.tlm-contact-help__card-copy {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-navy-muted);
}

.tlm-contact-help__card-cta {
  align-self: stretch;                          /* full-width on mobile per locked CTA standard */
  margin-top: var(--space-sm);                  /* visual separation from copy */
}

@media (min-width: 768px) {
  .tlm-contact-help__card {
    padding: var(--space-xl);
  }
  .tlm-contact-help__card-cta {
    align-self: flex-start;                     /* natural width at tablet+ */
  }
}

@media (min-width: 1024px) {
  .tlm-contact-help__title {
    font-size: var(--text-h3);                  /* 36 desktop */
  }
  .tlm-contact-help__cards {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-xl);
  }
}