/**
 * contact-block.css — MVSD-CONTACT-BLOCK.
 *
 * The one Contacts component, in all three places it appears: the main column
 * of a page, the right-hand rail, and /contact on the school sites.
 *
 * ⚠ SCOPING RULE, non-negotiable. The markup reuses .dept-staff* and
 * .dept-contact-info* from css/dept-page.css on purpose — that is what makes
 * this block read as the same component as a department contacts block. Those
 * classes are ALSO used by department pages, the school board sidebar, the
 * Webmaster Help contacts and dept articles. So every rule in this file is
 * qualified by .contact-block (or by .contact-block__staff, which only exists
 * inside one). Nothing here may ever be written on a bare .dept-staff* or
 * .dept-contact-info* selector.
 *
 * Loaded in the `layout` group AFTER css/sidebar-components.css, so the rail
 * tuning in that file (which is qualified by .node-rail .sb--contacts and
 * therefore more specific) still wins where it applies.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. THE GRID
   One rule covers every container the block can land in, with no media query.
   Measured containers: page main column 800px, department/resource main 780px,
   the rail a fixed 300px, and the /contact inner column 632px. auto-fill with
   a 250px floor puts 3 / 3 / 1 / 2 cards per row in those, and the 340px cap
   stops a single card stretching the full width of a wide column. The result
   is a card between 252px and 340px everywhere.

   .dept-staff sets display:flex, so this needs to beat 0,1,0 — hence the
   .contact-block ancestor, which also enforces the scoping rule above.
   ═══════════════════════════════════════════════════════════════════════════ */

.contact-block .contact-block__staff {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.contact-block .contact-block__staff > .dept-staff__card {
  max-width: 340px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. HEADING
   In the rail the heading also carries .sb__heading and takes the shared rail
   treatment from sidebar-components.css, so only the main-column and /contact
   placements are styled here. Matches .student-tools__title, the other
   paragraph-level panel heading, rather than inventing a new one.
   ═══════════════════════════════════════════════════════════════════════════ */

.contact-block--main > .contact-block__heading,
.contact-block--page > .contact-block__heading {
  margin: 0 0 var(--space-4, 1rem);
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: 700;
  letter-spacing: var(--ls-snug, normal);
  color: var(--color-primary, #01491f);
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. INFO LIST
   ═══════════════════════════════════════════════════════════════════════════ */

/* Air between the cards and the info card when both are present. In the rail
   sidebar-components.css already sets this at 0.75rem with a more specific
   selector, so this only takes effect in the wider placements. */
.contact-block .contact-block__staff + .contact-block__info {
  margin-top: 1rem;
}

/*
 * ACCESSIBILITY. dept-page.css hides the <dt> labels with display:none, which
 * takes "Phone" / "Email" / "Hours" / "Address" out of the accessibility tree
 * as well as off the screen — the icon that replaces them is a CSS background
 * with no accessible name, so a screen reader hears bare values with nothing
 * saying what they are.
 *
 * Scoped to .contact-block ONLY for now, deliberately. The same rule is wrong
 * everywhere it appears, but dept-page.css is shared by department pages, the
 * school board sidebar, Webmaster Help and dept articles, and fixing it there
 * is a separate approved item. Visually identical either way: the label is
 * taken out of flow, so the row's 22px + 1fr grid still resolves to the icon
 * and the value.
 */
.contact-block .dept-contact-info__row dt {
  display: block;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. /contact PLACEMENT
   The block is a sibling of the contact form in the page content region, which
   is 1152px wide at desktop — so without this it would run to nearly twice the
   width of the form above it. Mirror the form's own box (max-width 720px,
   centred, 2.75rem side padding from css/forms.css) so the cards line up with
   the form fields instead of overhanging them. 720 - 88 = a 632px inner
   column, which the grid rule above turns into two cards of 310px.

   The rule above it reads as a separate offer ("or reach these people
   directly") rather than as part of the form.
   ═══════════════════════════════════════════════════════════════════════════ */

.contact-block--page {
  max-width: 720px;
  margin: 2rem auto 0;
  padding: 1.5rem 2.75rem 0;
  border-top: 1px solid var(--color-border, #e6ece9);
}

/* Matches the form's own narrow-screen padding step in css/forms.css. */
@media (max-width: 600px) {
  .contact-block--page {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. PRINT
   Contact details are worth keeping on paper, which is how print.css already
   treats .dept-contact-info. Collapse to one column so nothing is clipped.
   ═══════════════════════════════════════════════════════════════════════════ */

@media print {
  .contact-block .contact-block__staff {
    grid-template-columns: 1fr;
  }
  .contact-block .contact-block__staff > .dept-staff__card {
    max-width: none;
    break-inside: avoid;
  }
}