/* Full-bleed: break out of the Divi row so the block spans the whole browser width */
html:has(.ucl-about),body:has(.ucl-about){overflow-x:clip}
.ucl-about{width:100vw;max-width:100vw;position:relative;left:50%;margin-left:-50vw;margin-right:-50vw}

/* Remove Divi's default padding/margins around the module so there is no white gap above or below */
.et_pb_section:has(.ucl-about){padding-top:0!important;padding-bottom:0!important}
.et_pb_row:has(.ucl-about){padding-top:0!important;padding-bottom:0!important}
.et_pb_column:has(.ucl-about),.et_pb_module:has(.ucl-about){margin-bottom:0!important;padding-bottom:0!important}
.et_pb_text:has(.ucl-about) .et_pb_text_inner,.et_pb_code:has(.ucl-about) .et_pb_code_inner{padding:0}

/* UCL About Section — palette: maroon #8A1538, green #00573F, gold #FFB81C */
.ucl-about{
  --ucl-maroon:#8A1538;--ucl-maroon-d:#6E102C;--ucl-green:#00573F;--ucl-gold:#FFB81C;
  /* ===== PHOTO SETTINGS: edit these numbers ===== */
  --ucl-person-ratio:4/5;          /* personnel photo shape: 4/5 portrait (recommended), 1/1 square, 3/4 taller, 16/9 slide */
  --ucl-person-fit:cover;          /* cover = fill the frame (crops edges, never stretches) | contain = show the whole photo */
  --ucl-person-pos:center 20%;     /* which part stays visible: "center 20%" keeps heads in; try "center top" or "center 10%" */
  --ucl-org-head:230px;            /* University Librarian card width */
  --ucl-org-aide:var(--ucl-org-card); /* Admin Aide V (Francis) card width: same as Gemma (210px); change --ucl-org-card to resize both */
  --ucl-org-card:210px;            /* max width of the main-row and support cards */
  --ucl-line:var(--ucl-maroon);    /* org chart line color */
  --ucl-fac-ratio:3/2;             /* facility photo shape */
  --ucl-fac-cols:3;                /* facility cards per row on desktop */
  --ucl-gap:26px;                  /* space between cards */
  /* =============================================== */
  --ucl-gray:#6F6F6F;--ucl-black:#000;--ucl-white:#fff;--ucl-cream:#F7F6EF;
  --ucl-head:Palatino,"Palatino Linotype","Book Antiqua","URW Palladio L",serif;
  --ucl-body:Optima,Candara,"Segoe UI",sans-serif;
  --ucl-ui:Helvetica,Arial,sans-serif;
  font-family:var(--ucl-body);color:#222;line-height:1.7;font-size:17px;background:var(--ucl-cream);
}
.ucl-about *{box-sizing:border-box}
.ucl-about h2,.ucl-about h3{font-family:var(--ucl-head);margin:0;padding:0;line-height:1.2;color:var(--ucl-maroon)}
.ucl-about p{margin:0;padding:0}

/* Section nav */
.ucl-nav{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:22px 16px 20px;background:var(--ucl-cream);
  border-bottom:3px solid var(--ucl-gold)}
.ucl-nav a{font-family:var(--ucl-ui);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;color:var(--ucl-maroon);padding:9px 18px;border:2px solid var(--ucl-maroon);border-radius:999px;transition:.2s}
.ucl-nav a:hover,.ucl-nav a[aria-selected=true]{background:var(--ucl-maroon);color:var(--ucl-white)}
.ucl-nav a[aria-selected=true]{box-shadow:0 3px 0 var(--ucl-gold)}

/* Sections */
.ucl-sec{padding:72px clamp(20px,5vw,80px);scroll-margin-top:70px;background:var(--ucl-cream)}
.ucl-sec[hidden]{display:none}
.ucl-sec>*{max-width:1280px;margin-left:auto;margin-right:auto}
.ucl-head{text-align:center;margin-bottom:44px}
.ucl-eyebrow{display:inline-block;font-family:var(--ucl-ui);font-size:12px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ucl-green);margin-bottom:10px}
.ucl-head h2{font-size:clamp(28px,4vw,42px);position:relative;padding-bottom:18px}
.ucl-head h2::after{content:"";position:absolute;left:50%;bottom:0;width:64px;height:4px;margin-left:-32px;background:var(--ucl-gold);border-radius:2px}
.ucl-head p{margin-top:16px;color:var(--ucl-gray);max-width:640px;margin-left:auto;margin-right:auto}

/* Vision & Mission */
.ucl-vm{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.ucl-card{padding:38px 34px;border-radius:14px;color:var(--ucl-white);position:relative;overflow:hidden;box-shadow:0 10px 28px rgba(0,0,0,.12)}
.ucl-card::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:var(--ucl-gold)}
.ucl-vision{background:linear-gradient(145deg,var(--ucl-maroon),var(--ucl-maroon-d))}
.ucl-mission{background:linear-gradient(145deg,var(--ucl-green),#003c2c)}
.ucl-card h3{color:var(--ucl-gold);font-size:28px;margin-bottom:14px}
.ucl-card p{font-size:17px;color:#fff}

/* Goals */
.ucl-goals-wrap{margin-top:56px}
.ucl-sub{text-align:center;font-size:28px;margin-bottom:28px}
.ucl-goals{list-style:none;margin:0 auto;padding:0;counter-reset:g;display:grid;gap:14px;max-width:900px}
.ucl-goals li{counter-increment:g;display:flex;gap:18px;align-items:flex-start;background:var(--ucl-white);
  border-left:5px solid var(--ucl-gold);border-radius:10px;padding:18px 22px;margin:0}
.ucl-goals li::before{content:counter(g);flex:0 0 38px;height:38px;border-radius:50%;background:var(--ucl-maroon);color:var(--ucl-white);
  font-family:var(--ucl-ui);font-weight:700;display:flex;align-items:center;justify-content:center}
.ucl-goals li span{padding-top:5px}

/* Grids & cards */
.ucl-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--ucl-gap)}
.ucl-fac>article{flex:0 0 calc((100% - (var(--ucl-fac-cols) - 1)*var(--ucl-gap))/var(--ucl-fac-cols));max-width:calc((100% - (var(--ucl-fac-cols) - 1)*var(--ucl-gap))/var(--ucl-fac-cols))}
.ucl-person,.ucl-facility{background:var(--ucl-white);border-radius:14px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,.09);
  border-top:4px solid var(--ucl-gold);transition:transform .25s,box-shadow .25s}
.ucl-person:hover,.ucl-facility:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(138,21,56,.2)}
.ucl-person figure,.ucl-facility figure{margin:0;position:relative;overflow:hidden;background:var(--ucl-cream)}
.ucl-person figure{aspect-ratio:var(--ucl-person-ratio)}
.ucl-facility figure{aspect-ratio:var(--ucl-fac-ratio)}
.ucl-about figure img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;max-width:none;transition:transform .5s}
.ucl-person figure img{object-fit:var(--ucl-person-fit);object-position:var(--ucl-person-pos)}
.ucl-facility:hover img{transform:scale(1.06)}
.ucl-noimg{display:block;width:100%;height:100%;background:linear-gradient(135deg,var(--ucl-maroon),var(--ucl-green))}
.ucl-tag{position:absolute;left:14px;top:14px;background:var(--ucl-green);color:var(--ucl-white);font-family:var(--ucl-ui);
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.ucl-pbody{padding:20px 22px;text-align:center}
.ucl-pbody h3{font-size:21px}
.ucl-role{font-family:var(--ucl-ui);font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--ucl-green);font-weight:700;margin-top:6px}
.ucl-fbody{padding:22px 24px 26px}
.ucl-fbody h3{font-size:23px;margin-bottom:8px}
.ucl-fbody p{color:#444;font-size:16px}


/* ===== Organizational chart (Personnel) ===== */
.ucl-org{max-width:1180px;margin:0 auto}
.ucl-org .ucl-person{width:100%}
.ucl-org .ucl-pbody{padding:14px 12px}
.ucl-org .ucl-pbody h3{font-size:17px}
.ucl-org .ucl-role{font-size:11.5px;line-height:1.4}
.ucl-org-l1{display:flex;justify-content:center;gap:var(--ucl-gap)}
.ucl-org-l1 .ucl-person{width:var(--ucl-org-head);border-top:4px solid var(--ucl-gold)!important}
.ucl-org-l1 .ucl-pbody h3{font-size:20px}
.ucl-org .ucl-org-down{width:2px;height:32px;background:var(--ucl-line);margin:0 auto}
.ucl-org-l2{display:grid;grid-template-columns:1fr 2px 1fr;align-items:center}
.ucl-org-stem{grid-column:2;display:block;align-self:stretch;min-height:36px;background:var(--ucl-line)}
.ucl-org-aide{grid-column:3;position:relative;padding-left:42px;display:flex;flex-direction:column;gap:var(--ucl-gap);margin:40px 0}
.ucl-org-aide::before{content:"";position:absolute;left:0;top:50%;width:42px;height:2px;background:var(--ucl-line)}
.ucl-org-l2 .ucl-person{width:var(--ucl-org-aide)}
.ucl-org .ucl-org-l3{list-style:none!important;margin:0!important;padding:0!important;display:flex;justify-content:center;gap:var(--ucl-gap);align-items:stretch}
.ucl-org-l3>li{position:relative;flex:1 1 0;min-width:0;max-width:var(--ucl-org-card);padding:32px 0 0!important;margin:0!important;list-style:none!important;display:flex}
.ucl-org-l3>li::before{content:"";position:absolute;top:0;left:calc(var(--ucl-gap)/-2);right:calc(var(--ucl-gap)/-2);height:2px;background:var(--ucl-line)}
.ucl-org-l3>li:first-child::before{left:50%}
.ucl-org-l3>li:last-child::before{right:50%}
.ucl-org-l3>li:only-child::before{display:none}
.ucl-org-l3>li::after{content:"";position:absolute;top:0;left:50%;width:2px;height:32px;margin-left:-1px;background:var(--ucl-line)}
.ucl-org-l3>li .ucl-person{display:flex;flex-direction:column}
.ucl-org-l3>li .ucl-pbody{flex:1}
.ucl-org .ucl-org-join{list-style:none!important;margin:0!important;padding:0!important;display:flex;justify-content:center;gap:var(--ucl-gap)}
.ucl-org-join>li{position:relative;flex:1 1 0;min-width:0;max-width:var(--ucl-org-card);height:32px;margin:0!important;padding:0!important;list-style:none!important}
.ucl-org-join>li::before{content:"";position:absolute;top:0;left:50%;width:2px;height:32px;margin-left:-1px;background:var(--ucl-line)}
.ucl-org-join>li::after{content:"";position:absolute;bottom:0;left:calc(var(--ucl-gap)/-2);right:calc(var(--ucl-gap)/-2);height:2px;background:var(--ucl-line)}
.ucl-org-join>li:first-child::after{left:50%}
.ucl-org-join>li:last-child::after{right:50%}
.ucl-org-join>li:only-child::after{display:none}
.ucl-org-l4{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--ucl-gap);position:relative;padding-top:32px}
.ucl-org-join+.ucl-org-l4::before{content:"";position:absolute;top:-1px;left:50%;width:2px;height:32px;margin-left:-1px;background:var(--ucl-line)}
.ucl-org-join+.ucl-org-l4{padding-top:32px}
.ucl-org-l4 .ucl-person{width:var(--ucl-org-card)}
.ucl-dash{position:absolute;left:100%;top:calc(32px + (100% - 32px)/2);width:var(--ucl-gap);border-top:2px dashed var(--ucl-line)}
.ucl-org-l3>li:last-child .ucl-dash{display:none}
@media(max-width:980px){
  .ucl-org-l2{display:block}
  .ucl-org-stem{display:none}
  .ucl-org-aide{margin:24px 0 0;padding:0;align-items:center}
  .ucl-org-aide::before{display:none}
    .ucl-org .ucl-org-l3{flex-wrap:wrap;margin-top:24px!important}
  .ucl-org-l3>li{flex:0 0 calc(50% - var(--ucl-gap)/2);max-width:none;padding-top:0!important}
  .ucl-org-l3>li::before,.ucl-org-l3>li::after,.ucl-dash{display:none}
  .ucl-org .ucl-org-down{display:none}
  .ucl-org-l1{margin-bottom:0}
  .ucl-org .ucl-org-join{display:none}
  .ucl-org-l4,.ucl-org-join+.ucl-org-l4{padding-top:24px}
  .ucl-org-join+.ucl-org-l4::before{display:none}
}
@media(max-width:560px){
  .ucl-org-l3>li{flex-basis:100%}
  .ucl-org-l3>li .ucl-person,.ucl-org-l1 .ucl-person,.ucl-org-aide .ucl-person,.ucl-org-l4 .ucl-person{max-width:300px;margin-left:auto;margin-right:auto;width:100%}
}

@media(max-width:980px){.ucl-about{--ucl-fac-cols:2}}
@media(max-width:640px){
  .ucl-sec{padding:52px 16px}
  .ucl-vm{grid-template-columns:1fr}
  .ucl-about{--ucl-fac-cols:1}
}
