/* Scoped to this Fluid stream. Existing field containers occupy a complete row. */
.drf-fluid-stream { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); }
.drf-fluid-stream > .container { grid-column:1 / -1; min-width:0; }
.drf-fluid-stream > .container.drf-card-slot {
  grid-column:auto / span 12; width:100%; max-width:none; margin:0 0 1.5rem;
  padding:0 15px; display:flex;
}
@media(min-width:768px) {
  .drf-fluid-stream > .container.drf-card-slot { grid-column:auto / span 6; }
}
@media(min-width:1200px) {
  .drf-fluid-stream > .container.drf-card-slot { grid-column:auto / span 4; }
}
/* No dense packing: DOM and reading order stay the same. */
.drf-person-card { box-sizing:border-box; width:100%; min-width:0; padding:1.25rem;
  border:1px solid #a9b4bd; border-radius:8px; background:#fff; color:#202830;
  display:flex; flex-direction:column; overflow-wrap:anywhere; }
.drf-person-card__name { margin:0 0 .75rem; font-size:1.35rem; line-height:1.35; }
.drf-person-card__blurb { margin-bottom:1rem; }
.drf-person-card__blurb > :last-child { margin-bottom:0; }
.drf-person-card .drf-person-card__media { list-style:none; padding:0; margin:auto 0 0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,80px),1fr)); gap:.75rem; }
.drf-person-card__media > li { min-width:0; padding:0; margin:0; }
.drf-media-link { display:block; color:#164d70; text-decoration:underline; font-size:.8rem; line-height:1.4; }
.drf-media-link img { display:block; width:100%; height:auto; aspect-ratio:8/5;
  object-fit:cover; border-radius:4px; margin-bottom:.35rem; }
.drf-media-link:focus-visible, .drf-media-dialog button:focus-visible, .drf-media-dialog a:focus-visible {
  outline:3px solid #164d70; outline-offset:4px; }
.drf-media-dialog { box-sizing:border-box; width:min(960px,calc(100% - 24px)); max-height:90vh;
  margin:auto; padding:1.25rem; border:2px solid #526473; border-radius:8px;
  background:#fff; color:#202830; overflow:auto; }
.drf-media-dialog::backdrop { background:rgb(0 0 0 / .75); }
.drf-media-dialog__bar { display:flex; gap:1rem; align-items:flex-start; justify-content:space-between; }
.drf-media-dialog__bar h2 { font-size:1.35rem; margin:0 0 1rem; }
.drf-media-dialog button { flex:none; min-height:44px; padding:.5rem .85rem;
  background:#164d70; color:#fff; border:2px solid transparent; border-radius:4px; cursor:pointer; }
.drf-media-dialog__body img { display:block; max-width:100%; max-height:65vh; width:auto; height:auto; margin:auto; object-fit:contain; }
.drf-media-dialog__body iframe { display:block; width:100%; height:min(65vh,650px); min-height:300px; border:0; }
.drf-media-dialog__fallback { margin:1rem 0 0; }
html.drf-modal-open { overflow:hidden; }
@media print {
  .drf-media-dialog { display:none !important; }
  .drf-person-card { break-inside:avoid; }
}

/* Keep all Fluid items in one shared layout. */
.drf-fluid-stream {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

/* Normal Fluid content occupies a complete row. */
.drf-fluid-stream > .container {
  grid-column: 1 / -1;
  min-width: 0;
}

/* Identify card containers by the actual card inside them. */
.drf-fluid-stream > .container:has(> .drf-person-card) {
  grid-column: auto / span 12;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0 0 1.5rem;
  padding: 0 15px;
}

/* Tablet: two cards across. */
@media (min-width: 768px) {
  .drf-fluid-stream > .container:has(> .drf-person-card) {
    grid-column: auto / span 6;
  }
}

/* Place thumbnails directly after the blurb. */
.drf-person-card .drf-person-card__media {
  margin-top: 0;
}

/* Append this to the bottom of your CURRENT cards.css. */
.drf-media-dialog__gallery {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  margin: 1rem 0 1rem 0;
}

.drf-media-dialog .drf-media-dialog__position {
  flex: 1 1 12rem;
  min-width: 0;
  margin: 0;
  font-size: .95rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.drf-media-dialog__navigation {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.drf-media-dialog__navigation[hidden] {
  display: none;
}

.drf-media-dialog .drf-media-dialog__navigation button {
  min-width: 6rem;
  min-height: 44px;
}

.drf-media-dialog button.drf-media-dialog__previous, .drf-media-dialog button.drf-media-dialog__next {
  min-height: 20px;
  padding:.25rem .85rem;
}

/* Consistent thumbnail widths, including cards with only one item. */
.drf-person-card .drf-person-card__media {
  grid-template-columns: repeat(auto-fill, minmax(0, 110px));
  justify-content: start;
}

/* Constrain the entire grid using Bootstrap's container widths.
   Child containers already supply the horizontal padding. */
.drf-fluid-stream.drf-fluid-stream--contained {
  padding-left: 0;
  padding-right: 0;
}