/* ==========================================================================
   SPAV — Faculty Research Profile pages (RP1, 2026-11-14)
   Loaded only by the 37 legacy research-profile pages that use the
   .well / .panel / .wrapper > .table > .row.header > .cell markup.
   The original Bootstrap + table stylesheet these pages relied on was
   never carried over when they were converted to PHP, so the cells
   stacked as plain text. This file restores a clean, readable layout in
   the institute palette without changing any page content.
   Palette: marigold #EEAB20, charcoal #2E2A27, near-black #221F1F,
            deep marigold #7A4F00, gold tint #FDF3DC.
   ========================================================================== */

/* Page backdrop (one page set body padding-top:10vh inline — neutralised) */
body:has(.wrapper > .table > .row.header) {
  padding-top: 0 !important;
  background: #f6f4f0 !important;
}

/* ---------- Hero / identity card (.well) ---------- */
.well {
  max-width: 1180px;
  margin: 28px auto 20px !important;
  padding: 0 16px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.well > .container {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 26px 30px !important;
  background: #fff;
  border-radius: 14px;
  border-top: 4px solid #EEAB20;
  box-shadow: 0 6px 24px rgba(34, 31, 31, .08);
}
.well > .container > .row {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px 32px;
  margin: 0 !important;
}
.well .col-md-6 {
  flex: 1 1 420px;
  min-width: 0;
  width: auto !important;
  float: none !important;
  padding: 0 !important;
}
.well .col-md-4 {
  flex: 0 0 auto;
  width: auto !important;
  float: none !important;
  padding: 0 !important;
  text-align: center;
}
.well h1.text-primary {
  margin: 0 0 8px !important;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem) !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  color: #221F1F !important;
}
.well h3 {
  margin: 0 0 12px !important;
  font-size: clamp(1rem, 1.5vw, 1.18rem) !important;
  line-height: 1.45 !important;
  font-weight: 600 !important;
  color: #7A4F00 !important;
}
.well i {
  display: block;
  font-size: .95rem;
  line-height: 1.6;
  color: #4a4541;
}
.well .img-thumbnail {
  display: block;
  width: 170px !important;
  height: 210px !important;
  max-width: 100%;
  object-fit: cover;
  object-position: center top;
  padding: 5px;
  background: #fff;
  border: 1px solid #e6dcc6;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(34, 31, 31, .12);
}

/* ---------- Content card (.panel) ---------- */
.well + .panel,
.panel.panel-default {
  max-width: 1148px;
  margin: 0 auto 32px !important;
  background: #fff !important;
  border: 0 !important;
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(34, 31, 31, .08);
  overflow: hidden;
}
.panel.panel-default > .panel-body {
  padding: 26px 30px !important;
}
.panel .media,
.panel .media-body {
  display: block !important;
  width: auto !important;
  overflow: visible !important;
}
.panel .media-body > h3 {
  margin: 0 0 18px !important;
  padding-bottom: 10px;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: #221F1F !important;
  text-align: center;
  border-bottom: 2px solid #FDF3DC;
}
.panel .media-body > h3::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin: 10px auto 0;
  background: #EEAB20;
  border-radius: 2px;
}

/* ---------- Research profile "table" ----------
   Markup is a header row of labels followed by one row of values.
   Rows become display:contents so every cell is a grid item; `order`
   pairs label n with value n, giving a two-column label/value list
   that reads correctly whatever the number of fields (3–10). */
.wrapper {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.wrapper > .table {
  display: grid !important;
  grid-template-columns: minmax(150px, 230px) minmax(0, 1fr);
  width: 100% !important;
  margin: 0 !important;
  background: #fff !important;
  border: 1px solid #ece4d3;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: none !important;
}
.wrapper > .table > .row {
  display: contents !important;
}
.wrapper > .table > .row > div {
  display: block !important;
  min-width: 0;
  margin: 0 !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid #f0e9da;
  font-size: .98rem;
  line-height: 1.65;
  color: #2E2A27 !important;
  text-align: left !important;
  overflow-wrap: anywhere;
}
/* Labels */
.wrapper > .table > .row.header > div {
  background: #FDF3DC !important;
  color: #221F1F !important;
  font-weight: 700 !important;
  font-size: .95rem;
  border-right: 3px solid #EEAB20;
  white-space: normal;
}
/* Values */
.wrapper > .table > .row:not(.header) > div {
  background: #fff !important;
}
.wrapper > .table > .row:not(.header) > div::before {
  content: none !important;   /* ignore legacy data-title labels (some say "Age") */
}
.wrapper > .table > .row > div p { margin: 0 0 .7em !important; }
.wrapper > .table > .row > div p:last-child { margin-bottom: 0 !important; }
.wrapper > .table > .row > div ul,
.wrapper > .table > .row > div ol { margin: .2em 0 .6em .2em !important; padding: 0 !important; }
.wrapper > .table > .row > div li { margin: 0 0 .35em 1.1em !important; list-style: disc; }
.wrapper > .table > .row > div ol > li { list-style: decimal; }
.wrapper > .table > .row > div ul > br { display: none; }
.wrapper > .table > .row > div a { color: #7A4F00 !important; text-decoration: underline; }
.wrapper > .table > .row > div a:hover { color: #221F1F !important; }

/* Pair label n with value n */
.wrapper > .table > .row.header > div:nth-child(1)  { order: 1; }
.wrapper > .table > .row:not(.header) > div:nth-child(1)  { order: 2; }
.wrapper > .table > .row.header > div:nth-child(2)  { order: 3; }
.wrapper > .table > .row:not(.header) > div:nth-child(2)  { order: 4; }
.wrapper > .table > .row.header > div:nth-child(3)  { order: 5; }
.wrapper > .table > .row:not(.header) > div:nth-child(3)  { order: 6; }
.wrapper > .table > .row.header > div:nth-child(4)  { order: 7; }
.wrapper > .table > .row:not(.header) > div:nth-child(4)  { order: 8; }
.wrapper > .table > .row.header > div:nth-child(5)  { order: 9; }
.wrapper > .table > .row:not(.header) > div:nth-child(5)  { order: 10; }
.wrapper > .table > .row.header > div:nth-child(6)  { order: 11; }
.wrapper > .table > .row:not(.header) > div:nth-child(6)  { order: 12; }
.wrapper > .table > .row.header > div:nth-child(7)  { order: 13; }
.wrapper > .table > .row:not(.header) > div:nth-child(7)  { order: 14; }
.wrapper > .table > .row.header > div:nth-child(8)  { order: 15; }
.wrapper > .table > .row:not(.header) > div:nth-child(8)  { order: 16; }
.wrapper > .table > .row.header > div:nth-child(9)  { order: 17; }
.wrapper > .table > .row:not(.header) > div:nth-child(9)  { order: 18; }
.wrapper > .table > .row.header > div:nth-child(10) { order: 19; }
.wrapper > .table > .row:not(.header) > div:nth-child(10) { order: 20; }

/* No bottom rule on the last pair */
.wrapper > .table > .row.header > div:last-child,
.wrapper > .table > .row:not(.header) > div:last-child { border-bottom: 0; }

/* ---------- Projects tabs (used on one page) ---------- */
.panel .tabs {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-start !important;
  gap: 6px;
  margin: 26px 0 0 !important;
}
.panel .tabs input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.panel .tabs label {
  order: 1;
  margin: 0 !important;
  padding: 10px 20px !important;
  border-radius: 8px 8px 0 0;
  background: #2E2A27 !important;
  color: #fff !important;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.panel .tabs label:hover { background: #4a4541 !important; }
.panel .tabs input[type="radio"]:checked + label { background: #EEAB20 !important; color: #221F1F !important; }
.panel .tabs input[type="radio"]:focus-visible + label { outline: 3px solid #7A4F00; outline-offset: 2px; }
.panel .tabs .tab {
  order: 99;
  flex: 1 1 100%;
  width: 100% !important;
  display: none;
  padding: 22px 24px !important;
  background: #fff !important;
  border: 1px solid #ece4d3;
  border-top: 3px solid #EEAB20;
  border-radius: 0 10px 10px 10px;
  line-height: 1.65;
  color: #2E2A27;
}
.panel .tabs input[type="radio"]:checked + label + .tab { display: block !important; }

/* ---------- More links footer ---------- */
.panel > .panel-footer {
  padding: 18px 24px 22px !important;
  background: #2E2A27 !important;
  color: #fff !important;
  border: 0 !important;
  text-align: center;
  line-height: 2;
}
.panel > .panel-footer h4 {
  margin: 0 0 4px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #EEAB20 !important;
  text-transform: none !important;
  letter-spacing: .02em;
}
.panel > .panel-footer a {
  display: inline-block;
  color: #fff !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(238, 171, 32, .55);
}
.panel > .panel-footer a:hover,
.panel > .panel-footer a:focus-visible { color: #EEAB20 !important; border-bottom-color: #EEAB20; }

/* Empty legacy trailer block left by the conversion */
.panel ~ .section-1.clearfix:has(> .sub-mainbottom:empty),
.panel ~ .section-1.clearfix { min-height: 0 !important; padding: 0 !important; margin: 0 !important; }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .well { margin-top: 16px !important; padding: 0 10px !important; }
  .well > .container { padding: 20px 18px !important; }
  .well > .container > .row { flex-direction: column-reverse; align-items: center; text-align: center; }
  .well .col-md-6 { flex-basis: auto; }
  .well .img-thumbnail { width: 140px !important; height: 172px !important; margin: 0 auto; }
  .panel.panel-default { margin: 0 10px 24px !important; }
  .panel.panel-default > .panel-body { padding: 18px 14px !important; }
  .wrapper > .table { grid-template-columns: minmax(0, 1fr); }
  .wrapper > .table > .row.header > div {
    border-right: 0;
    border-left: 4px solid #EEAB20;
    border-bottom: 0;
    padding: 10px 14px !important;
  }
  .wrapper > .table > .row:not(.header) > div { padding: 12px 14px 16px !important; }
  .wrapper > .table > .row.header > div:last-child { border-bottom: 0; }
  .panel .tabs label { flex: 1 1 100%; border-radius: 8px; }
  .panel .tabs .tab { border-radius: 10px; padding: 16px !important; }
}

@media print {
  .well > .container, .well + .panel, .panel.panel-default { box-shadow: none; }
  .panel > .panel-footer { background: #fff !important; color: #000 !important; }
}