/* =========================================
   Management Team – 2x2 Large Image Layout
   Scope: .team-wrap--management ONLY
   ========================================= */

.team-wrap--management h2,
.team-wrap--management .section-heading {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: 500;
}

/* Tighten header → content spacing */
.team-wrap--management .page-header,
.team-wrap--management .hero,
.team-wrap--management .banner {
  padding-bottom: 24px;
  margin-bottom: 0;
}

.team-wrap--management main {
  padding-top: 0;
}

/* 2 x 2 grid with larger cards */
.team-wrap--management .umb-block-grid__layout,
.team-wrap--management .umb-block-grid__layout-container,
.team-wrap--management .umbraco-block-grid__layout,
.team-wrap--management .block-grid__layout {
  max-width: 1040px;            /* narrower than full page, feels premium */
  margin: 0 auto;
  padding: 32px 16px;

  display: grid;
  grid-template-columns: repeat(2, minmax(420px, 1fr));
  gap: 48px 40px;               /* generous vertical rhythm */
  justify-content: center;
}

/* Neutralise Umbraco inline grid positioning */
.team-wrap--management .umb-block-grid__layout-item,
.team-wrap--management .umb-block-grid__item,
.team-wrap--management .umbraco-block-grid__layout-item {
  grid-column: auto !important;
  grid-row: auto !important;
}

.team-wrap--management .umb-block-grid__layout-item { min-width: 0; }

/* Card sizing – let the image breathe */
.team-wrap--management .team-card {
  max-width: none !important;   /* removes the 320px cap from component */
  width: 100% !important;       /* stretches to column width */
  margin: 0 !important;         /* stops auto-centering */
}

/* Tablet: still 2-up but tighter */
@media (max-width: 1024px) {
  .team-wrap--management .umb-block-grid__layout,
  .team-wrap--management .umb-block-grid__layout-container {
    grid-template-columns: repeat(2, minmax(360px, 1fr));
    gap: 36px 32px;
  }
}

/* Mobile: single column */
@media (max-width: 768px) {
  .team-wrap--management .umb-block-grid__layout,
  .team-wrap--management .umb-block-grid__layout-container {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 24px 16px;
  }
}
