/* =========================================================
   Ashwamedh Gurukul Team page
   Palette sampled from the reference page:
   format.ashwamedhgurukul.org/ashwamedh-gurukul-team
   ========================================================= */
:root{
  --maroon:        #5b0e17;
  --maroon-dark:   #4a0a12;
  --pink-bg-top:   #fbdbe0;
  --pink-bg-bot:   #f7c8cf;
  --pink-border:   #7a0019;
  --pink-text:     #6b0015;
  --cream-bg-top:  #fde9c8;
  --cream-bg-bot:  #fbdbad;
  --cream-border:  #a9601f;
  --cream-text:    #8a3d0a;
  --gold:          #c9a227;
  --yellow-banner: #f2e000;
  --green-banner:  #184a21;
  --green-bg:      #e1f5e0;
  --btn-bg:        #fdf2cf;
  --btn-border:    #c0392b;
  --btn-text:      #b93227;
  --shadow:        0 3px 8px rgba(0,0,0,.18);
}

.team-titlebar{
  max-width:900px;
  margin:18px auto 0;
  padding:8px 8px;
  background:#fff;
  border:2px solid var(--maroon);
  border-radius:3;
  box-shadow:var(--shadow);
  text-align:center;
}
.team-titlebar h1{
  margin:0;
  font-size:clamp(20px,4vw,28px);
  font-weight:700;
  color:var(--maroon);
}
.team-subtitle-band{
  background:var(--maroon);
  color:#fff;
  text-align:center;
  padding:8px 8px;
  font-size:15px;
  margin-top:0px;
  margin-bottom:10px;
}

/* Desktop/wider screens: maroon title band + plain subtitle, matches reference */
@media (min-width:760px){
  .team-titlebar{
    max-width:100%;
    margin:0;
    padding:24px 16px;
    background:var(--maroon);
    border:none;
    box-shadow:none;
  }
  .team-titlebar h1{
    color:#fff;
    font-size:clamp(22px,3vw,30px);
  }
  .team-subtitle-band{
    background:#fff;
    color:#1F2124;
    margin-bottom:0;
    padding:16px 8px;
    font-size:16px;
  }
}

.team-wrap{
  max-width:900px;
  margin:0 auto;
  padding:0 16px 40px;
}

/* ---------------- Accordion (shared) ---------------- */
.acc-group{ display:flex; flex-direction:column; gap:10px; }



.acc-header{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  cursor:pointer;
  text-align:left;
  padding:8px 10px;
  font-size:15px;
  font-weight:700;
  font-family:inherit;
  border-radius:30px;
  box-shadow:var(--shadow);
}

.acc-icon{
  flex:0 0 auto;
  width:18px;
  height:18px;
  position:relative;
}
.acc-title{
  color:#1F2124;
}
.acc-icon::before,.acc-icon::after{
  content:"";
  position:absolute;
  background:currentColor;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
}
.acc-icon::before{ width:14px; height:2.5px; }
.acc-icon::after{ width:2.5px; height:14px; transition:transform .2s ease; }
.acc-item.open .acc-icon::after{ transform:translate(-50%,-50%) scaleY(0); }

.acc-panel{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
}
.acc-panel-inner{ padding:16px 16px 22px; }

/* Pink theme (top-level hierarchy) */
.acc-pink .acc-header{
  border:1.5px solid var(--pink-border);
  background:linear-gradient(180deg,var(--pink-bg-top),var(--pink-bg-bot));
  color:var(--pink-text);
}
.acc-pink .acc-panel-inner{ background:#fff; }

/* Cream theme (team members) — bordered box, flush rows with divider lines */
.acc-cream{
  gap:0;
  border:1.5px solid #1a1a1a;
  border-radius:6px;
  overflow:hidden;
}

.acc-cream .acc-header{
  border:none;
  border-bottom:1.5px solid #1a1a1a;
  border-radius:0;
  background:linear-gradient(180deg,var(--cream-bg-top),var(--cream-bg-bot));
  color:var(--cream-text);
  box-shadow:none;
}
.acc-cream .acc-item:last-child .acc-header{
  border-bottom:none;
}
.acc-cream .acc-item.open .acc-header{
  border-bottom:1.5px solid #1a1a1a;
}
.acc-cream .acc-panel-inner{ background:#fff; }

.hierarchy-img{
  width:100%;
  height:auto;
  display:block;
  border-radius:4px;
}
.img-missing{
  border:2px dashed var(--cream-border);
  border-radius:6px;
  padding:40px 16px;
  text-align:center;
  color:var(--cream-text);
  font-size:14px;
}

/* ---------------- Ornamental divider ---------------- */
.divider{
  display:flex;
  align-items:center;
  gap:14px;
  margin:26px 0;
}
.divider span{
  flex:1;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.divider i{
  font-style:normal;
  color:var(--gold);
  font-size:18px;
}

/* ---------------- Quick tag button grid ---------------- */
.tag-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

/* Mobile (default): pink/red theme, matches reference on narrow screens */
.tag-btn{
  background:linear-gradient(180deg,var(--pink-bg-top),var(--pink-bg-bot));
  border:2px solid var(--pink-border);
  color:var(--pink-text);
  border-radius:20px;
  padding:16px 10px;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  box-shadow:var(--shadow);
  transition:transform .15s ease, background .15s ease;
}
.tag-btn:hover{ background:#f7c8cf; transform:translateY(-2px); }

/* Desktop/wider screens: cream/orange theme, matches reference on wider screens */
@media (min-width:760px){
  .tag-grid{ grid-template-columns:repeat(5,1fr); }
  .tag-btn{
    background:var(--btn-bg);
    border-color:var(--btn-border);
    color:var(--btn-text);
  }
  .tag-btn:hover{ background:#fff2b0; }
}

/* ---------------- Founder / guide banner ---------------- */
.founder-section{
  background:linear-gradient(180deg,var(--cream-bg-top),var(--cream-bg-bot));
  border-radius:10px;
  padding:20px 16px;
  margin:26px 0;
}

.founder-banner{
  background:var(--maroon);
  color:#fff;
  text-align:center;
  padding:8px 10px;
  border-radius:50px;
  margin-bottom:10px;
  margin-top:10px;
}
.founder-banner h2{
  margin:0;
  font-size:clamp(17px,3vw,24px);
}
.founder-banner-rule{
  width:180px;
  height:5px;
  background:#550000;
  border-radius:3px;
  margin:5px auto 10px;
}
@media (min-width:760px){
  .founder-banner-rule{ width:320px; }
}

.contact-box{
  margin:0 auto;
  margin-bottom:16px;
  max-width:300px;
  border:2px solid var(--maroon);
  border-radius:20px;
  background:#fdf8e7;
  text-align:center;
  padding:0px;
  color:var(--maroon);
}
.contact-box p{ margin:4px 0; font-weight:700; }
.contact-name{ font-size:16px; }

/* ---------------- Section banners inside panels ---------------- */
.section-banner{
  text-align:center;
  font-weight:800;
  padding:12px;
  border-radius:4px;
  margin-bottom:18px;
  font-size:16px;
}
.banner-yellow{ background:var(--yellow-banner); color:var(--maroon); }
.banner-green{ background:var(--green-banner); color:#fff; }

/* When a banner sits directly on top of the bordered green roster box,
   remove the gap and square off the touching corners. */
.banner-green + .photo-grid-green{
  margin-top:-18px;
  border-top:none;
  border-radius:0 0 4px 4px;
}
.section-banner.banner-green{ border-radius:4px 4px 0 0; }

/* ---------------- Photo grid ---------------- */
/* Fixed 3-up grid: used for Board of Founders / Executive Board (always 3 people) */
.photo-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
@media (max-width:420px){
  .photo-grid{ gap:6px; }
}

/* Auto grid: used for department rosters with a variable head-count.
   2-up on phones, growing to as many columns as fit on wider screens. */
.photo-grid-auto{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}
@media (min-width:600px){
  .photo-grid-auto{ grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
}

.photo-grid-green{
  background:var(--green-bg);
  border:1px solid #2b2b2b;
  padding:16px;
  border-radius:4px;
}

.photo-card{ text-align:center; }
.photo-role{
  background:var(--maroon);
  color:#fff;
  font-weight:700;
  font-size:12px;
  border-radius:6px;
  padding:8px 6px;
  margin-bottom:8px;
  line-height:1.4;
}
.photo-frame{
  border:2px solid var(--pink-border);
  border-radius:10px;
  overflow:hidden;
  aspect-ratio:1/1;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}
.photo-frame img{ width:100%; height:100%; object-fit:cover; }

.avatar-placeholder{
  width:100%; height:100%;
  background-color:#fff;
  background-image:
    radial-gradient(circle at 50% 35%, #b3b3b3 0 22%, transparent 23%),
    radial-gradient(ellipse at 50% 100%, #b3b3b3 0 34%, transparent 35%);
}

.photo-name{
  margin-top:8px;
  background:var(--maroon);
  color:#fff;
  font-size:12px;
  font-weight:700;
  border-radius:6px;
  padding:8px 6px;
  line-height:1.5;
}