/* =============================================================
   iwork — custom.css
   Small optional overrides layered on top of style.css.
   Safe to edit per-site; loaded after style.css.
   ============================================================= */

/* Center + constrain rich custom_html blocks on the homepage */
.custom-html-block .iw-svc-grid,
.custom-html-block .iw-tst-grid,
.custom-html-block .iw-pf-grid { max-width: var(--max-w); margin: 0 auto; }

/* Give homepage custom_html sections consistent vertical rhythm */
.block-shell .custom-html-block .iw-sec-head { margin-bottom: 40px; }

/* ---------- Team grid (about page) ---------- */
.iw-team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; max-width: var(--max-w); margin: 0 auto; }
.iw-team-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); }
.iw-team-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.iw-team-photo { aspect-ratio: 1/1; background: linear-gradient(135deg, #3b57d6, #7d5bff); }
.iw-team-photo img { width: 100%; height: 100%; object-fit: cover; }
.iw-team-body { padding: 18px 20px; }
.iw-team-body .nm { font-family: var(--font-head); font-weight: 700; font-size: 16px; color: var(--black); }
.iw-team-body .rl { font-size: 12.5px; color: var(--muted); margin-top: 3px; }

/* ---------- Contact info cards (contact page) ---------- */
.iw-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 0 0 32px; }
.iw-info-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }
.iw-info-ic { width: 46px; height: 46px; border-radius: 12px; background: var(--red-soft); color: var(--red-dark); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.iw-info-card h4 { font-family: var(--font-head); font-weight: 700; font-size: 16px; color: var(--black); margin-bottom: 4px; }
.iw-info-card p, .iw-info-card a { font-size: 14px; color: var(--muted); line-height: 1.6; }
.iw-info-card a:hover { color: var(--red); }
/* height:auto — embed codes (Google Maps included) ship width/height HTML
   attributes, which map to presentational hints and would beat aspect-ratio.
   min-height is a floor, not a layout constraint: an iframe is a replaced
   element whose UA default height is 150px, so any engine that ignores
   aspect-ratio here degrades to an unusable sliver. At the ratios below the
   computed height is 216px at 320px wide and 404px at desktop, so this never
   binds when aspect-ratio is honoured — it only catches the failure. */
.iw-map { width: 100%; height: auto; min-height: 200px; aspect-ratio: 21/7; border: 0; border-radius: var(--radius); box-shadow: var(--shadow-sm); background: var(--bg-alt); margin-top: 8px; }

@media (max-width: 900px) {
  .iw-team-grid { grid-template-columns: repeat(2, 1fr); }
  .iw-info-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .iw-info-grid { grid-template-columns: 1fr; }
  /* A 21:7 embed is barely 90px tall on a phone — give the map usable height. */
  .iw-map { aspect-ratio: 4/3; }
}
@media (max-width: 560px) { .iw-team-grid { grid-template-columns: 1fr; } }