:root{
  --bg-iig:#2f6f8e;
  --bg-gbs:#0e2246;
  --bg-bsl:#ff2b45;
  --white:#ffffff;
  --shadow: 0 10px 30px rgba(0,0,0,.22);
  --ease: cubic-bezier(.2,.9,.2,1);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:#0b0f14;
}

.shen{
  height:100vh;
  width:100%;
  position:relative;
  overflow:hidden;
}

/* Header */
.shen__header{
  position:absolute;
  top:24px;
  left:0;
  right:0;
  display:flex;
  justify-content:center;
  z-index:20;
  pointer-events:none;
}
.shen__header-box{
  pointer-events:none;
  color:var(--white);
  border:3px solid rgba(255,255,255,.9);
  padding:10px 18px;
  font-family: Georgia, "Times New Roman", serif;
  font-weight:700;
  font-size:28px;
  letter-spacing:.3px;
  background:rgba(0,0,0,.15);
  backdrop-filter: blur(2px);
}

/* Panels layout */
.shen__panels{
  height:100%;
  width:100%;
  display:flex;
}

.panel{
  position:relative;
  flex:1 1 33.333%;
  min-width:0;
  display:flex;
  align-items:stretch;
  transition: flex 650ms var(--ease);
  overflow:hidden;
}

.panel--iig{ background:var(--bg-iig); }
.panel--gbs{ background:var(--bg-gbs); }
.panel--bsl{ background:var(--bg-bsl); }

.panel__inner{
  width:100%;
  height:100%;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Center logo */
.panel__logoWrap{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: transform 450ms var(--ease), opacity 300ms var(--ease);
  z-index:2;
}
.panel__logo{
  max-width:min(520px, 70%);
  max-height:140px;
  height:auto;
  width:auto;
  object-fit:contain;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.25));
}

/* Hover layer (summary + button) */
.panel__hover{
  position:absolute;
  left:50%;
  top:54%;
  transform: translate(-50%, 0);
  width:min(560px, 80%);
  text-align:center;
  color:rgba(255,255,255,.92);
  opacity:0;
  pointer-events:none;
  transition: opacity 300ms var(--ease), transform 450ms var(--ease);
  z-index:3;
}
.panel__summary{
  margin:33px 0px 18px;
  line-height:1.55;
  font-size:18px;
  color:rgba(255,255,255,.85);
}
.panel__btn{
  pointer-events:auto;
  appearance:none;
  border:3px solid rgba(255,255,255,.9);
  background:transparent;
  color:var(--white);
  padding:12px 20px;
  font-size:16px;
  font-weight:650;
  cursor:pointer;
  transition: transform 200ms var(--ease), background 200ms var(--ease);
}
.panel__btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.08); }
.panel__btn:active{ transform: translateY(0px) scale(.99); }

/* Expanded content base */
.panel__expandedContent{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding: clamp(22px, 4vw, 60px);
  opacity:0;
  transform: translateY(10px);
  pointer-events:none;
  transition: opacity 320ms var(--ease), transform 500ms var(--ease);
  z-index:5;
  color:var(--white);
}

.panel__title{
  margin:0;
  width: 25%;							
  padding-top: 40px;
  font-size: clamp(22px, 3vw, 40px);
  letter-spacing:.2px;
}

.panel__close{
  position:absolute;
  top:18px;
  right:18px;
  width:44px;
  height:44px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.7);
  background:rgba(0,0,0,.18);
  color:var(--white);
  font-size:26px;
  cursor:pointer;
  box-shadow: var(--shadow);
  z-index: 10;
}
.panel__close:hover{ background:rgba(0,0,0,.28); }

/* Hover behavior (only when not expanded) */
.shen:not(.is-expanded) .panel:hover .panel__logoWrap{
  transform: translateY(-26px);
}
.shen:not(.is-expanded) .panel:hover .panel__hover{
  opacity:1;
  transform: translate(-50%, 10px);
  pointer-events:auto;
}

/* EXPANDED state */
.shen.is-expanded .panel{
  cursor:default;
}
.shen.is-expanded .panel .panel__hover{
  opacity:0 !important;
  pointer-events:none !important;
}

/* 90/5/5 distribution */
.shen.is-expanded .panel{
  flex:0 0 5%;
}
.shen.is-expanded .panel.is-active{
  flex:1 1 90%;
}

/* Active panel: hide logo entirely when expanded */
.shen.is-expanded .panel.is-active .panel__logoWrap{
  opacity:0;
  transform: translateY(-10px);
}

/* Active panel: show expanded content */
.shen.is-expanded .panel.is-active .panel__expandedContent{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
  margin-top: 25px;
}

/* Inactive panels: rotate logo 90deg + center */
.shen.is-expanded .panel:not(.is-active) .panel__logoWrap{
  opacity:1;
  transform: rotate(90deg);
}
.shen.is-expanded .panel:not(.is-active) .panel__logo{
  max-height:90px;
  max-width: 220px;
}

/* ===== Clean 2-column expanded layout (no boxes, no decoration) ===== */

.expandedLayout{
  width:100%;
  margin-top: 18px;
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 44px);
  align-items:start;
}

.sectionBlock__title{
  margin: 14px 0px 10px;
															  width: fit-content;
  font-size: 28px;
  letter-spacing:.2px;
  color: rgba(255,255,255,.95);
}

.sectionBlock__text{
  margin:0;
  line-height:1.75;
  color: rgba(255,255,255,.88);
  max-width: 82ch;
    text-align: justify;
  font-size: 18px;
}

/* Locations under About */
.sectionBlock--locations{
  margin-top: 20px;
}

.locationsRow{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:flex-start;
}

.loc{
  margin:0;
  width: 110px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap: 8px;
															  margin-bottom: 20px;
}

.loc__img{
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 14px;
  /* no border/background decoration */
}

.loc__label{
  font-weight: 650;
  font-size: 18px;
  color: rgba(255,255,255,.92);
}
/* Programs */
.programGroups{
  display:flex;
  flex-direction:column;
  gap: 16px;
}

.programGroup__title{
  margin: 14px 0 8px;
  font-size: 24px;
  letter-spacing: .25px;
  color: rgba(255,255,255,.92);
}

.programGroup__list{
  margin: 2px;
    font-size: 19px;
    padding-left: 22px;
  line-height:1.75;
  color: rgba(255,255,255,.86);
}
.programGroup__list li{ margin: 4px 0; }

/* CTA under Programs */
.expandedLayout__cta{
  margin-top: 18px;
  display:flex;
  justify-content:flex-start;
}

/* Visit website button */
.visitBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 15px 18px;
    margin: 6px;
  border-radius: 14px;
  border: 3px solid rgba(255,255,255,.92);
  color:#fff;
  text-decoration:none;
  font-weight: 750;
  transition: transform 200ms var(--ease), background 200ms var(--ease);
}
.visitBtn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.08); }
.visitBtn:active{ transform: translateY(0) scale(.99); }

/* Mobile: stack panels + stack columns */
@media (max-width: 820px){
  .shen__panels{ flex-direction:column; }
  .panel{ flex:1 1 33.333%; }
  .shen.is-expanded .panel{ flex:0 0 10%; }
  .shen.is-expanded .panel.is-active{ flex:1 1 80%; }

  .shen.is-expanded .panel:not(.is-active) .panel__logoWrap{
    transform: rotate(0deg);
  }
}

@media (max-width: 980px){
  .expandedLayout{
    grid-template-columns: 1fr;
  }
  .expandedLayout__cta{
    margin-top: 12px;
  }
}