/* AR Teachers Section v1.0.0 — centred header + responsive teacher cards grid.
   Every control-written value arrives as a CSS var on {{WRAPPER}} and is
   consumed here with its default as the var() fallback — this stylesheet
   declares no control vars of its own, so Elementor's per-device values
   always win. Defaults reproduce the SSITP Teachers section design exactly. */

.artch-root{background:var(--artch-sec-bg,#F7F6F2); padding:var(--artch-sec-pad,84px 20px);
  font-family:'Inter',Arial,sans-serif; overflow-x:clip;}
.artch-inner{max-width:var(--artch-in-max,1200px); margin:0 auto;}
.artch-name,.artch-role,.artch-meta,.artch-bio,.artch-sub{overflow-wrap:break-word;}

/* Header */
.artch-head{text-align:center; max-width:var(--artch-head-max,640px); margin:0 auto var(--artch-head-gap,52px);}
.artch-eyebrow{display:inline-block; background:var(--artch-eb-bg,rgba(219,137,39,.14));
  color:var(--artch-eb-c,#C1751F); font-family:'Plus Jakarta Sans',Arial,sans-serif;
  font-weight:800; font-size:var(--artch-eb-fs,12.5px); letter-spacing:2.2px;
  text-transform:uppercase; padding:8px 18px; border-radius:99px;}
.artch-title{font-family:'Plus Jakarta Sans',Arial,sans-serif; font-size:var(--artch-h-fs,42px);
  font-weight:800; line-height:1.15; color:var(--artch-h-c,#0A083B); margin:18px 0 14px;}
.artch-accent{color:var(--artch-acc-c,#DB8927);}
.artch-sub{font-size:var(--artch-sub-fs,16.5px); color:var(--artch-sub-c,#5D6478);
  line-height:1.7; margin:0;}

/* Grid */
.artch-grid{display:grid; grid-template-columns:repeat(var(--artch-cols,4),1fr);
  gap:var(--artch-gap,26px);}

/* Card */
.artch-card{background:var(--artch-card-bg,#FFFFFF);
  border:var(--artch-bw,1px) solid var(--artch-bc,#ECE9DF);
  border-radius:var(--artch-r,20px); overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 6px 24px rgba(10,8,59,.05);
  transition:transform .3s ease,box-shadow .3s ease;}
.artch-card:hover{transform:translateY(calc(var(--artch-lift,7px) * -1));
  box-shadow:0 20px 42px rgba(10,8,59,.13);}

/* Photo area */
.artch-photo{position:relative; height:var(--artch-photo-h,215px);
  background:linear-gradient(135deg,var(--artch-grad-a,#2C4A70),var(--artch-grad-b,#0A083B));
  display:flex; align-items:center; justify-content:center; flex:none;}
.artch-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.artch-ava{width:var(--artch-ava-size,98px); height:var(--artch-ava-size,98px); border-radius:50%;
  background:var(--artch-ava-bg,rgba(219,137,39,.16)); border:2px solid var(--artch-ava-bc,rgba(219,137,39,.65));
  display:flex; align-items:center; justify-content:center;
  font-family:'Plus Jakarta Sans',Arial,sans-serif; font-size:var(--artch-ava-fs,34px);
  font-weight:800; color:var(--artch-ava-c,#DB8927);}
.artch-chip{position:absolute; left:var(--artch-chip-left,20px); bottom:var(--artch-chip-bottom,-15px);
  background:var(--artch-chip-bg,#DB8927); color:var(--artch-chip-c,#FFFFFF);
  font-family:'Plus Jakarta Sans',Arial,sans-serif; font-size:var(--artch-chip-fs,12px);
  font-weight:800; letter-spacing:.6px; text-transform:uppercase;
  padding:var(--artch-chip-pad,7px 14px); border-radius:99px;
  box-shadow:0 8px 18px rgba(219,137,39,.4); z-index:2;}

/* Body */
.artch-body{padding:var(--artch-body-pad,36px 22px 24px); display:flex; flex-direction:column; flex:1;}
.artch-name{font-family:'Plus Jakarta Sans',Arial,sans-serif; font-size:var(--artch-name-fs,20px);
  font-weight:800; color:var(--artch-name-c,#0A083B); margin:0;}
.artch-role{font-size:var(--artch-role-fs,13px); font-weight:700; letter-spacing:1.1px;
  text-transform:uppercase; color:var(--artch-role-c,#C1751F); margin:6px 0 10px;}
.artch-meta{display:flex; align-items:center; gap:8px; margin:0;
  font-size:var(--artch-meta-fs,13px); font-weight:600; color:var(--artch-meta-c,#5D6478);}
.artch-meta i{width:4px; height:4px; border-radius:50%; background:var(--artch-dot-c,#DB8927); flex:none;}
.artch-bio{font-size:var(--artch-bio-fs,14.5px); line-height:1.65;
  color:var(--artch-bio-c,#5D6478); margin:12px 0 18px;
  display:-webkit-box; -webkit-line-clamp:var(--artch-bio-lines,2);
  -webkit-box-orient:vertical; overflow:hidden;}
.artch-socials{margin-top:auto; border-top:1px solid var(--artch-soc-bc,#ECE9DF);
  padding-top:16px; display:flex; gap:var(--artch-soc-gap,9px);}
.artch-socials a{width:var(--artch-soc-size,36px); height:var(--artch-soc-size,36px);
  border-radius:50%; border:1.5px solid var(--artch-soc-bc,#ECE9DF);
  display:flex; align-items:center; justify-content:center; text-decoration:none;
  color:var(--artch-soc-c,#C1751F); transition:all .25s ease;}
.artch-socials a:hover{background:var(--artch-soc-hbg,#0A083B); border-color:var(--artch-soc-hbg,#0A083B);
  color:var(--artch-soc-hc,#FFFFFF);}
.artch-socials svg{width:var(--artch-soc-ic,17px); height:var(--artch-soc-ic,17px);}

/* Entrance animations.
   Hidden state is applied ONLY when JS is running (it adds .artch-anim-on),
   so the section stays fully visible when JS is disabled. */
.artch-anim.artch-anim-on .artch-anim-item{opacity:0;}
.artch-anim.artch-anim-on[data-anim="fade-up"] .artch-anim-item{transform:translateY(30px);}
.artch-anim.artch-anim-on[data-anim="fade-down"] .artch-anim-item{transform:translateY(-30px);}
.artch-anim.artch-anim-on[data-anim="slide-left"] .artch-anim-item{transform:translateX(-42px);}
.artch-anim.artch-anim-on[data-anim="slide-right"] .artch-anim-item{transform:translateX(42px);}
.artch-anim.artch-anim-on[data-anim="zoom"] .artch-anim-item{transform:scale(.94);}
.artch-anim.artch-anim-on .artch-anim-item.in{opacity:1; transform:none;
  transition:opacity .6s ease, transform .6s ease;}

@media (max-width:480px){
  .artch-eyebrow{letter-spacing:1.5px; padding:6px 13px;}
}
@media (prefers-reduced-motion: reduce){
  .artch-anim.artch-anim-on .artch-anim-item{opacity:1; transform:none; transition:none;}
  .artch-card{transition:none;}
  .artch-socials a{transition:none;}
}