/* The wheat banner lives in hbm-hero.css now — one component shared by
   schools, missionaries, teams and about. Do not re-add .ics-hero rules
   here; they will fight the shared ones. */

/* ---------------------------------------------------------------------
 * International Christian Schools — /schools/*
 *
 * Loaded only by the folded school pages. Built on the tokens already in
 * hbm-modern.css so the section reads as part of the HBM site rather than a
 * bolted-on second brand; the one addition is a gold accent, taken from the
 * schools' own "WE NEED TEACHERS" recruitment poster, which pairs navy with
 * gold. The hero deliberately reuses the wheat-band treatment from
 * .hbm-contact-band so the top and bottom of the page frame each other.
 * ------------------------------------------------------------------ */

:root {
  --ics-gold: #d99f3c;
  --ics-gold-soft: #f0d9a8;
}

.ics-page {
  background: #f7f9fb;
}

/* --------------------------------------------------------------- schools */

.ics-schools {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 56px 20px 8px;
}

/* Two to a section. Adding schools grows the page downward; it never
   reflows the row into an odd shape. */
.ics-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-bottom: 28px;
}

.ics-card {
  display: flex;
  flex-direction: column;
  padding: 30px 30px 26px;
  background: var(--hbm-surface);
  border: 1px solid var(--hbm-line);
  border-top: 3px solid var(--ics-gold);
  border-radius: var(--hbm-r-lg);
  box-shadow: var(--hbm-shadow-sm);
  transition: box-shadow 220ms var(--hbm-ease), transform 220ms var(--hbm-ease);
}

.ics-card:hover {
  box-shadow: var(--hbm-shadow-md);
  transform: translateY(-2px);
}

.ics-card__head {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--hbm-line);
}

/* The school logos are landscape — four of the five are 400x250 — so the box
   is landscape too. A square box shrank them to fit their long edge and left
   them looking like stamps. Pioneer's is square (1242x1229) and simply
   centres within the same box under object-fit. */
.ics-card__logo {
  flex: 0 0 auto;
  width: 112px;
  height: 72px;
  object-fit: contain;
  object-position: left center;
}

.ics-card__name {
  margin: 0;
  color: var(--hbm-navy);
  font-size: 22px;
  line-height: 1.25;
}

.ics-card__where {
  margin: 4px 0 0;
  color: var(--hbm-muted);
  font-size: 15px;
}

.ics-card p {
  margin: 0 0 14px;
  color: var(--hbm-ink);
  font-size: 16px;
  line-height: 1.62;
}

.ics-card__subheading {
  margin: 6px 0 10px;
  color: var(--hbm-blue);
  font-size: 17px;
}

.ics-card__list {
  margin: 0 0 14px;
  padding-left: 22px;
  color: var(--hbm-ink);
  font-size: 16px;
  line-height: 1.62;
}

.ics-card__list li {
  margin-bottom: 6px;
}

/* Pins the button to the foot of the card so a short write-up and a long one
   still line up across a pair. */
.ics-card__more {
  margin: auto 0 0;
  padding-top: 12px;
}

/* ------------------------------------------------------------- buttons */

.ics-button {
  display: inline-block;
  padding: 11px 22px;
  color: var(--hbm-navy);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  background: transparent;
  border: 2px solid var(--hbm-navy);
  border-radius: var(--hbm-r-sm);
  transition: background 180ms var(--hbm-ease), color 180ms var(--hbm-ease);
}

.ics-button:hover,
.ics-button:focus-visible {
  color: #fff;
  background: var(--hbm-navy);
}

.ics-button--solid {
  color: #fff;
  background: var(--hbm-navy);
  border-color: var(--hbm-navy);
}

.ics-button--solid:hover,
.ics-button--solid:focus-visible {
  background: var(--hbm-blue);
  border-color: var(--hbm-blue);
}

/* The three actions, rendered ONCE, immediately above the contact band. */
.ics-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 34px 20px 56px;
}

/* ---------------------------------------------------------------- prose */

.ics-body {
  width: min(880px, 100%);
  margin: 0 auto;
  padding: 52px 20px 8px;
}

/* Logo beside the school name — the shape the original Teaching Opportunities
   page used, with the logo in a left-hand column beside each write-up. */
.ics-section-head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 44px 0 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ics-gold);
}

.ics-section-head:first-child {
  margin-top: 0;
}

.ics-section-head__logo {
  flex: 0 0 auto;
  width: 96px;
  height: 68px;
  object-fit: contain;
  object-position: left center;
}

.ics-section-head h2 {
  margin: 0;
  color: var(--hbm-navy);
  font-size: 27px;
  line-height: 1.2;
}

.ics-subhead {
  margin: 28px 0 12px;
  color: var(--hbm-blue);
}

/* A person's role, under their name in the advisory team. */
.ics-role {
  margin: -8px 0 20px;
  color: var(--hbm-muted);
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ics-figure img {
  max-width: 320px;
  height: auto;
}

.ics-prose {
  margin-bottom: 26px;
  color: var(--hbm-ink);
  font-size: 17px;
  line-height: 1.7;
}

.ics-prose h1,
.ics-prose h2,
.ics-prose h3,
.ics-prose h4 {
  color: var(--hbm-navy);
  line-height: 1.3;
}

.ics-prose h2 { font-size: 26px; margin: 30px 0 12px; }
.ics-prose h3 { font-size: 21px; margin: 26px 0 10px; }
.ics-prose h4 { font-size: 18px; margin: 22px 0 8px; }
.ics-prose p  { margin: 0 0 15px; }
.ics-prose ul,
.ics-prose ol { margin: 0 0 16px; padding-left: 24px; }
.ics-prose li { margin-bottom: 7px; }

.ics-prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--hbm-r-md);
}

.ics-prose a {
  color: var(--hbm-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ------------------------------------------------- appointment request */

.ics-formwrap {
  margin: 8px 0 34px;
  padding: 30px 32px 24px;
  background: var(--hbm-surface);
  border: 1px solid var(--hbm-line);
  border-top: 3px solid var(--ics-gold);
  border-radius: var(--hbm-r-lg);
  box-shadow: var(--hbm-shadow-sm);
}

.ics-formwrap form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 22px;
}

.ics-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.ics-field--wide,
.ics-field--submit {
  grid-column: 1 / -1;
}

.ics-field label {
  color: var(--hbm-navy);
  font-size: 15px;
  font-weight: 600;
}

.ics-field label span {
  color: #b4462f;
}

.ics-field input,
.ics-field select,
.ics-field textarea {
  width: 100%;
  padding: 10px 12px;
  color: var(--hbm-ink);
  font: inherit;
  font-size: 16px;
  background: #fff;
  border: 1px solid var(--hbm-line);
  border-radius: var(--hbm-r-sm);
}

.ics-field input:focus,
.ics-field select:focus,
.ics-field textarea:focus {
  outline: 2px solid var(--hbm-accent);
  outline-offset: 1px;
  border-color: var(--hbm-accent);
}

.ics-field textarea {
  resize: vertical;
}

.ics-field__hint {
  color: var(--hbm-muted);
  font-size: 13px;
}

.ics-field--submit {
  margin-top: 4px;
}

.ics-field--submit .ics-button {
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
}

/* --------------------------------------------------------- breakpoints */

@media (max-width: 900px) {
  .ics-pair {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    margin-bottom: 22px;
  }
}

@media (max-width: 640px) {
  .ics-schools { padding: 38px 16px 4px; }
  .ics-body { padding: 34px 16px 4px; }
  .ics-card { padding: 24px 20px 22px; }
  .ics-card__head { gap: 14px; }
  .ics-card__logo { width: 88px; height: 58px; }
  .ics-card__name { font-size: 19px; }
  .ics-formwrap { padding: 22px 18px 18px; }
  .ics-formwrap form { grid-template-columns: minmax(0, 1fr); }
  .ics-section-head { gap: 14px; margin: 32px 0 16px; }
  .ics-section-head__logo { width: 72px; height: 52px; }
  .ics-section-head h2 { font-size: 21px; }
  .ics-actions { padding: 26px 16px 44px; }
  .ics-actions .ics-button { flex: 1 1 100%; text-align: center; }
}

/* The appointment form is hidden until the Lambda is redeployed; this is the
   panel that stands in its place. */
.ics-formwrap--notice p { margin: 0 0 14px; font-size: 17px; line-height: 1.65; color: var(--hbm-ink); }
.ics-formwrap--notice a { color: var(--hbm-blue); }
.ics-formwrap--notice .ics-button { text-decoration: none; }


/* ---------------------------------------------------------------------
 * Photographs on a school's card. Collin, 2026-08-20 — roughly three per
 * school, sent as they come.
 *
 * They sit inside the card rather than beside it: the cards are already laid
 * two to a row, so there is no "right or left" of one without breaking the
 * pair apart on every width. Inside, they read as that school's own pictures
 * and the row keeps its shape.
 *
 * One frame for all of them, cropped to fill, so a portrait snapshot and a
 * wide classroom shot sit as one set rather than at whatever height they
 * happen to be — the same fault the missionary cards had.
 * ------------------------------------------------------------------ */
.ics-card__shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 10px;
  margin: 18px 0 4px;
}

.ics-card__shots a {
  display: block;
  overflow: hidden;
  border-radius: 8px;
  background: #eef2f6;
  line-height: 0;
}

.ics-card__shots img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.ics-card__shots a:hover img,
.ics-card__shots a:focus-visible img {
  transform: scale(1.05);
}


/* Cards sit two to a row and stretch to the taller of the pair, so a school
   with less to say left its photographs stranded mid-card with white space
   under them — Pioneer against Solid Rock most obviously. Pushing the strip
   to the foot puts that slack above the pictures instead, where it reads as
   spacing rather than as something missing, and lands every school's
   photographs on the same line across the page. */
.ics-card {
  display: flex;
  flex-direction: column;
}

.ics-card__shots {
  margin-top: auto;
}

/* The button belongs under the pictures, not pushed away from them. */
.ics-card__shots + .ics-card__more {
  margin-top: 16px;
}

/* Mrs. Vicki, 2026-08-20: bring Pioneer's row of pictures level with Solid
   Rock's.
 *
 * They were 94px apart, and the cause is that Pioneer has no Learn More
 * button. Every other school links out to its own site; Pioneer has no
 * address to link to, so its card ends at the photographs while the others
 * end at a button. With the strips anchored to the foot of the card, Solid
 * Rock's sits above its button and Pioneer's drops the height of that button
 * lower.
 *
 * The reserve is 98px, measured rather than derived: the button block is 64px
 * with 16px above it and 14px below, but its own 12px of padding-top applies
 * only on the cards that have a button, so adding the three together leaves
 * the rows 4px out. Measured level, and confirmed level.
 *
 * So a card whose photographs are the last thing in it reserves the space the
 * button would have taken. The pictures then land on the same line across the
 * row whether or not the school has somewhere to send you. The measurement
 * lives in one place rather than being repeated as a magic number. */
.ics-card {
  --ics-more-block: 98px;
}

.ics-card__shots:last-child {
  margin-bottom: var(--ics-more-block);
}