:root {
  --bio-gap: 12px;            
  --bio-row-gap: 20px;        
  --bio-text-max: 600px;      
  --bio-row-max-width: 860px; 
  --phantom-img-space: 100px; 
  --img-text-gap: 15px;       
}

.bio-wrapper {
  width: 100%;
  max-width: 860px; /* Cap at 860px for PC screens */
  margin: var(--offset-banner, 20px) auto 40px;
  padding: 0 16px;
  box-sizing: border-box;
  overflow-x: hidden; /* Prevent horizontal overflow */
}

.bio-grid {
  display: flex;
  flex-direction: column;
  gap: var(--bio-row-gap);
  width: 100%;
  align-items: center;
}

/* Header */
.bio-header {
  text-align: center;
  padding: 8px 12px;
}
.bio-header h1 { margin: 0 0 8px; }
.bio-header .stripe {
  display: block;
  height: 3px;
  width: 100%;
  background: url('images/stripe.gif') repeat-x;
  margin-top: 6px;
}

/* General row */
.bio-row {
  display: grid;
  grid-template-columns: var(--phantom-img-space) 1fr var(--phantom-img-space);
  align-items: center; /* Vertical center */
  justify-content: center;
  gap: var(--img-text-gap);
  padding: 8px;
  border-radius: 10px;
  width: 100%;
  max-width: var(--bio-row-max-width);
}

.bio-row:hover {
  transform: translateY(-2px);
  transition: transform .12s ease;
}

/* Vital stats row: side-by-side, centered */
.bio-row.vital-stats {
  display: flex;
  justify-content: center;
  align-items: center; /* Vertical center */
  gap: var(--img-text-gap);
  flex-wrap: nowrap;
}
.bio-row.vital-stats img {
  flex-shrink: 0;
  align-self: center; /* Ensure image is vertically centered */
}
.bio-row.vital-stats .bio-text {
  max-width: 380px;
  text-align: left;
  margin-left: var(--img-text-gap);
  flex: 0 0 auto;
  align-self: center; /* Ensure text is vertically centered */
}

/* Long-bio row: text in center column */
.bio-row.full-width {
  display: grid;
  grid-template-columns: 100px 600px 100px; /* Explicit 100px | 600px | 100px */
  align-items: center; /* Vertical center */
  margin: 0 auto; /* Center row */
  width: 800px; /* Match total column width */
  gap: var(--img-text-gap);
  padding: 8px;
  border-radius: 10px;
}
.bio-row.full-width .bio-text {
  grid-column: 2 / 3;
  width: 100% !important; /* Force fit within 600px column */
  max-width: 600px !important; /* Explicitly cap width */
  min-width: 0 !important; /* Prevent overflow */
  box-sizing: border-box !important; /* Account for padding/margins */
  overflow: hidden !important; /* Clip excess content */
  margin: 0;
  text-align: left;
  align-self: center; /* Ensure text is vertically centered */
}

/* Three-cell rows: image | text | image */
.bio-row.three-cell {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) 100px; /* Fixed 100px columns for images */
  align-items: center; /* Vertical center */
  justify-items: stretch;
  gap: var(--img-text-gap);
}
.bio-row.three-cell img:first-child {
  justify-self: end; /* Right-align left image */
  align-self: center; /* Vertical center */
}
.bio-row.three-cell img:last-child {
  justify-self: start; /* Left-align right image */
  align-self: center; /* Vertical center */
}
.bio-row.three-cell .bio-text {
  justify-self: stretch;
  align-self: center; /* Vertical center */
  max-width: var(--bio-text-max); /* 600px */
  min-width: 0; /* Prevent overflow */
  box-sizing: border-box; /* Account for padding/margins */
}

/* Text block */
.bio-text {
  line-height: 1.45;
}

/* Responsive: stack rows on small screens */
@media (max-width: 800px) {
  .bio-wrapper {
    max-width: 100%; /* Ensure wrapper fits viewport */
    padding: 0 8px; /* Reduce padding for narrow screens */
  }

  .bio-row.three-cell,
  .bio-row.vital-stats,
  .bio-row.full-width {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%; /* Fit within viewport */
    max-width: 100%; /* Prevent overflow */
  }

  /* Adjust full-width row to scale down */
  .bio-row.full-width {
    width: 100%;
    grid-template-columns: 1fr; /* Single column for text */
    padding: 8px;
  }
  .bio-row.full-width .bio-text {
    grid-column: 1 / 2;
    max-width: var(--bio-text-max); /* 600px or less */
    width: 100%;
  }

  /* Constrain vital-stats row */
  .bio-row.vital-stats {
    max-width: 100%;
  }
  .bio-row.vital-stats img {
    max-width: 300px; /* Match HTML width but allow scaling down if viewport is narrower */
  }
  .bio-row.vital-stats .bio-text {
    max-width: 100%; /* Fit within viewport */
    margin-left: 0;
    margin-top: var(--img-text-gap);
  }

  /* Constrain three-cell rows */
  .bio-row.three-cell {
    max-width: 100%;
  }
  .bio-row.three-cell .bio-text {
    max-width: 100%;
  }

  /* Enforce HTML-specified sizes for specific images */
  img[src="scans/lee_1.jpg"] {
    width: 300px !important;
    height: 240px !important;
    max-width: 100% !important; /* Allow scaling down if viewport is narrower */
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    flex-shrink: 0 !important;
  }
  img[src="scans/llh_89.jpg"] {
    width: 75px !important;
    height: 100px !important;
    max-width: 100% !important; /* Allow scaling down if viewport is narrower */
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    flex-shrink: 0 !important;
  }
  img[src="scans/unl_seal.jpg"] {
    width: 100px !important;
    height: 100px !important;
    max-width: 100% !important; /* Allow scaling down if viewport is narrower */
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    flex-shrink: 0 !important;
  }

  /* Add stripe dividers between stacked rows */
  .bio-row + .bio-row::before {
    content: "";
    display: block;
    width: 30%;
    height: 3px;
    background: url('images/stripe.gif') repeat-x;
    margin: 15px auto;
  }

  .bio-row.three-cell .bio-text,
  .bio-row.vital-stats .bio-text,
  .bio-row.full-width .bio-text {
    max-width: var(--bio-text-max);
    text-align: center; /* Center text content in stacked mode */
    margin: 0 auto; /* Center the text block horizontally */
  }

  /* Ensure images are centered in stacked mode */
  .bio-row img {
    margin: 0 auto; /* Center images horizontally */
  }
}

/* Override conflicting media query from mus_main.css for landscape tablets to keep img/text/img on same row */
@media (min-width: 500px) and (max-width: 699px) and (orientation: landscape) {
  .bio-row {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    max-width: 100% !important;
    justify-content: center !important;
  }

  .bio-row.three-cell {
    display: grid !important;
    grid-template-columns: 100px minmax(0, 1fr) 100px !important;
  }

  .bio-row.vital-stats {
    flex-wrap: nowrap !important;
  }

  .bio-row.full-width {
    width: 800px !important;
  }
}

/* Images: respect HTML width/height attributes */
.bio-row img {
  display: block;
  border-radius: 6px;
}

.bio-text a { color: inherit; text-decoration: underline; }