:root {
  --grid-max-width: 328px;
  --grid-cols: 4;
  --grid-gutter: 14px;
  --grid-margin: 16px;
  --container-padding: 16px;
  --row-gap: 14px;
  --row-section-gap: 20px;
  --text-clamp-title: 2;
  --text-clamp-body: 3;
}

@media (min-width: 390px) {
  :root {
    --grid-max-width: 328px;
    --grid-cols: 4;
    --grid-gutter: 14px;
    --grid-margin: 16px;
    --container-padding: 16px;
    --row-gap: 14px;
  }
}

@media (min-width: 768px) {
  :root {
    --grid-max-width: 726px;
    --grid-cols: 8;
    --grid-gutter: 18px;
    --grid-margin: 21px;
    --container-padding: 0px;
    --row-gap: 18px;
  }
}

@media (min-width: 1024px) {
  :root {
    --grid-max-width: 982px;
    --grid-cols: 12;
    --grid-gutter: 20px;
    --grid-margin: 21px;
    --container-padding: 0px;
    --row-gap: 20px;
  }
}

@media (min-width: 1440px) {
  :root {
    --grid-max-width: 1280px;
    --grid-cols: 12;
    --grid-gutter: 20px;
    --grid-margin: 80px;
    --container-padding: 0px;
    --row-gap: 20px;
  }
}

@media (min-width: 1920px) {
  :root {
    --grid-max-width: 1680px;
    --grid-cols: 12;
    --grid-gutter: 20px;
    --grid-margin: 120px;
    --container-padding: 0px;
    --row-gap: 20px;
  }
}

@media (min-width: 2560px) {
  :root {
    --grid-max-width: 1680px;
    --grid-cols: 12;
    --grid-gutter: 20px;
    --grid-margin: 120px;
    --container-padding: 0px;
    --row-gap: 20px;
  }
}

.grid-container {
  width: 100%;
  max-width: var(--grid-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  box-sizing: border-box;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: var(--row-section-gap);
}

.grid-row-wrapper {
  width: 100%;
}

.grid-row {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: var(--row-gap) var(--grid-gutter);
  width: 100%;
  align-items: stretch;
}

.col-1a-100 { grid-column: 1 / -1; }
.col-2a-50, .col-2b-50 { grid-column: span 6; }
.col-3a-33, .col-3b-33, .col-3c-33 { grid-column: span 4; }
.col-2a-60, .col-2b-60 { grid-column: span 7; }
.col-2a-40, .col-2b-40 { grid-column: span 5; }
.col-4a-25, .col-4b-25, .col-4c-25, .col-4d-25 { grid-column: span 3; }
.col-3a-50, .col-3c-50 { grid-column: span 6; }
.col-3b-25, .col-3a-25, .col-3c-25 { grid-column: span 3; }
.col-5a-19, .col-5b-19, .col-5c-19, .col-5d-19, .col-5e-19,
.col-6a-16, .col-6b-16, .col-6c-16, .col-6d-16, .col-6e-16, .col-6f-16 { grid-column: span 2; }

@media (min-width: 1024px) {
  .grid-row.leadership-row {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .grid-row.leadership-row .col-5a-19,
  .grid-row.leadership-row .col-5b-19,
  .grid-row.leadership-row .col-5c-19,
  .grid-row.leadership-row .col-5d-19,
  .grid-row.leadership-row .col-5e-19 {
    grid-column: span 1;
  }
}

.col-block {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 140px;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.col-block img,
.col-block video,
.col-block figure {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  max-width: 100%;
}

.col-block .media-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  min-height: 1px;
  overflow: hidden;
  background: #e8e8e8;
}

.col-block .media-wrapper img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.col-block .media-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd),
              linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
  background-color: #f0f0f0;
}

.col-content {
  flex: 1;
  padding: 12px;
  overflow: hidden;
}

.col-content > * {
  min-width: 0;
}

.col-block h1,
.col-block h2,
.col-block h3,
.col-block h4,
.col-block h5 {
  overflow-wrap: break-word;
  max-width: 100%;
  margin: 0 0 8px;
}

.col-block p {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-clamp: var(--text-clamp-body);
  -webkit-line-clamp: var(--text-clamp-body);
  -webkit-box-orient: vertical;
}

.person-name {
  line-clamp: var(--text-clamp-title);
  -webkit-line-clamp: var(--text-clamp-title);
}

.person-title {
  margin-top: 4px;
}

.placeholder {
  color: #999;
  font-style: italic;
  font-size: 12px;
  margin: 0;
}

.leadership-card .person-name {
  line-clamp: unset;
  -webkit-line-clamp: unset;
  white-space: normal;
}

@media (max-width: 767px) {
  .grid-container {
    gap: 16px;
  }

  .grid-row {
    gap: 12px;
  }

  [class*="col-"] { grid-column: 1 / -1 !important; }
  .col-6a-16, .col-6b-16, .col-6c-16, .col-6d-16, .col-6e-16, .col-6f-16 { grid-column: span 2 !important; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* half: 4+4=8 → side by side */
  .col-2a-50, .col-2b-50 { grid-column: span 4; }

  /* third: 4+4 on row1, 4 on row2 */
  .col-3a-33, .col-3b-33, .col-3c-33 { grid-column: span 4; }

  /* sixty-forty / forty-sixty: 4+4=8 → side by side */
  .col-2a-60, .col-2b-60, .col-2a-40, .col-2b-40 { grid-column: span 4; }

  /* quarter: 2+2+2+2=8 → all four across one row */
  .col-4a-25, .col-4b-25, .col-4c-25, .col-4d-25 { grid-column: span 2; }

  /* half-quarter-quarter: big cell → full row, two small cells → side by side below */
  .col-3a-50, .col-3c-50 { grid-column: span 8; }
  .col-3a-25, .col-3b-25, .col-3c-25 { grid-column: span 4; }

  /* fifth: 2 each → 4 per row */
  .col-5a-19, .col-5b-19, .col-5c-19, .col-5d-19, .col-5e-19 { grid-column: span 2; }

  /* sixth: 2 each → 4 per row */
  .col-6a-16, .col-6b-16, .col-6c-16, .col-6d-16, .col-6e-16, .col-6f-16 { grid-column: span 2; }
}