/* Ported from the prototype's teacher.css — kept in the 'legacy' cascade layer so Tailwind utilities can override it. */
@layer legacy {
/* =========================================================
   الأترجة — teacher profile
   Loads after circles.css (page ground and tokens).
   ---------------------------------------------------------
   OPENING — td-signal.framer.website, "Who we are", read at 1440:
     a tall portrait (~480px wide, white 6px frame, soft shadow)
     against the left edge, tilted ~1° and drifting up with the
     scroll; on the right a small label with a star, a ~64px
     statement in two tones (dark, then grey) whose words fade in
     one by one, a hand-written signature, the name and the role.
     Here: RTL (copy on the right), ivory ground, forest and sage-
     grey tones, a gold star, the name signed in Ruqaa script, one
     action to what the teacher offers.
   ========================================================= */

.tp-page{ background:#FFFFFF; }            /* the opening keeps its cream; everything below is white */

.tp{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:130px 28px 110px;
  background:
    radial-gradient(45% 55% at 85% 35%, rgba(255,252,244,.95), transparent 70%),
    radial-gradient(40% 50% at 10% 90%, rgba(168,199,181,.16), transparent 70%),
    var(--cl-bg);
}
/* a faint eight-point star lattice behind the copy */
.tp::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23123C35' stroke-width='.8'%3E%3Crect x='20' y='20' width='24' height='24'/%3E%3Crect x='20' y='20' width='24' height='24' transform='rotate(45 32 32)'/%3E%3C/g%3E%3C/svg%3E");
  background-size:64px 64px;
  opacity:.03;
  -webkit-mask-image:radial-gradient(40% 50% at 75% 45%, #000, transparent 75%);
          mask-image:radial-gradient(40% 50% at 75% 45%, #000, transparent 75%);
  pointer-events:none;
}

.tp-wrap{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(300px, 460px);   /* RTL: copy right, portrait left */
  align-items:center;
  gap:72px;
  max-width:1240px;
  margin:0 auto;
}

/* ---- copy ---- */
.tp-label{
  display:inline-flex; align-items:center; gap:10px;
  margin:0;
  font-size:15px; font-weight:600;
  color:var(--cl-sub);
}
.tp-label svg{ width:18px; height:18px; fill:var(--gold); }

.tp-title{
  margin:22px 0 0;
  font-size:clamp(34px, 4.3vw, 62px);
  line-height:1.32;
  font-weight:700;
  letter-spacing:0;
  text-wrap:balance;
}
.tp-strong{ color:var(--cl-ink); }
.tp-soft{ color:#7C8A83; }                       /* sage-grey, the second tone */

.tp-text{
  max-width:560px;
  margin:22px 0 0;
  font-size:clamp(16px, 1.25vw, 18px);
  line-height:1.95;
  color:var(--cl-sub);
}

/* signature · name · role */
.tp-sign{ margin-top:34px; }
.tp-sig{
  display:block;
  font-family:'Aref Ruqaa', serif;
  font-size:clamp(34px, 3vw, 44px);
  line-height:1.2;
  color:var(--gold-deep);
  transform:rotate(-3deg);
  transform-origin:100% 50%;
}
.tp-name{ margin:10px 0 0; font-size:17px; font-weight:600; color:var(--cl-ink); }
.tp-role{ margin:4px 0 0; font-size:15px; color:var(--cl-muted); }

.tp-tags{ display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 0; padding:0; list-style:none; }
.tp-tags li{
  padding:6px 14px;
  border-radius:99px;
  font-size:13.5px; font-weight:600;
  color:var(--u-forest);
  background:rgba(168,199,181,.28);
  border:1px solid rgba(168,199,181,.6);
}


/* the facts: experience · languages · what they offer, in one quiet row */
.tp-facts{
  display:flex; flex-wrap:wrap; gap:10px 22px;
  margin:22px 0 0; padding:18px 0 0;
  list-style:none;
  border-top:1px solid rgba(18,60,53,.1);
}
.tp-facts li{ display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:600; color:var(--cl-ink); }
.tp-facts svg{ width:17px; height:17px; color:var(--gold-deep); }

/* ---- portrait ---- */
.tp-photo{
  --tilt:2deg; --rise:0px;
  position:relative;
  margin:0;
  aspect-ratio:3 / 4;
  padding:6px;
  border-radius:26px;
  background:#FFFDF8;
  box-shadow:0 30px 60px -30px rgba(18,60,53,.45), 0 0 0 1px rgba(176,143,62,.12);
  transform:translateY(var(--rise)) rotate(var(--tilt));
  transition:box-shadow .5s var(--cl-out);
}
.tp-photo img{
  width:100%; height:100%;
  display:block;
  border-radius:21px;
  object-fit:cover;
  object-position:50% 20%;
  filter:saturate(.9);
}
.tp-photo:hover{ box-shadow:0 40px 70px -30px rgba(18,60,53,.5), 0 0 0 1px rgba(176,143,62,.2); }

/* ---- entrance (teacher.js adds .tp-go) ---- */
.tp-w{ display:inline-block; }
.tp-go .tp-w, .tp-go .tp-up{ opacity:0; }
.tp-go .tp-w{ animation:tp-word .7s cubic-bezier(.2,.7,.2,1) var(--d) forwards; }
.tp-go .tp-up{ translate:0 14px; animation:tp-up .8s cubic-bezier(.16,1,.3,1) var(--d) forwards; }
.tp-go .tp-photo{ opacity:0; animation:tp-in 1.2s cubic-bezier(.16,1,.3,1) .1s forwards; }
@keyframes tp-word{ to{ opacity:1; } }
@keyframes tp-up{ to{ opacity:1; translate:0 0; } }
@keyframes tp-in{ from{ opacity:0; scale:.97; } to{ opacity:1; scale:1; } }

/* ---- responsive ---- */
@media (max-width:1024px){
  .tp-wrap{ grid-template-columns:minmax(0, 1fr) minmax(260px, 340px); gap:44px; }
}
@media (max-width:760px){
  .tp{ padding:110px 16px 72px; }
  /* phones: the portrait first, then the words */
  .tp-wrap{ grid-template-columns:1fr; gap:36px; }
  .tp-photo{ order:-1; width:min(78%, 340px); margin-inline:auto; }
}
@media (prefers-reduced-motion:reduce){
  .tp-photo{ transform:none; }
}


/* =========================================================
   BELOW THE OPENING — a clean white catalogue of what the
   teacher offers. No boxes around sections: a heading, a short
   line, the grid, generous space, a hair-thin rule, the next.
   Cards are the listings' own (circles.css, curricula.css,
   lectures.css), untouched.
   ========================================================= */

.tp-body{ background:#FFFFFF; }
.tb{ padding:88px 0; }
.tb + .tb .tb-wrap{ position:relative; }
.tb + .tb .tb-wrap::before{                      /* a hair-thin rule between sections */
  content:"";
  position:absolute;
  top:-88px; left:28px; right:28px;
  height:1px;
  background:rgba(18,60,53,.08);
}
.tb-wrap{ max-width:1240px; margin:0 auto; padding:0 28px; }

.tb-h{
  margin:0;
  font-size:clamp(26px, 2.6vw, 36px);
  font-weight:700;
  color:var(--cl-ink);
}
.tb-sub{ margin:8px 0 0; font-size:16px; color:#6B7671; }

/* circles · curricula · lectures */
.tb:first-child{ padding-top:100px; }
.tb-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:30px; }
.tb-more{
  flex:none;
  padding:6px 2px;
  border:0;
  border-bottom:1px solid rgba(176,143,62,.5);
  font:inherit; font-size:15px; font-weight:600;
  color:var(--cl-ink);
  background:none;
  cursor:pointer;
  transition:border-color .3s var(--cl-out);
}
.tb-more:hover{ border-color:var(--gold-deep); }
.tb-more:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.tb-grid{ margin:0; }
.tb-grid--lc{ gap:26px 18px; }                   /* the lectures listing's spacing */
.tb-grid--mc{ gap:24px; }                        /* the curricula listing's spacing */
.tb-list:not(.is-open) .is-extra{ display:none; }
/* it is the teacher's own page: their name on each circle card is redundant */
.tb-grid--cc .cc-teacher{ display:none; }
.tb-list:focus{ outline:none; }
.tb:last-child{ padding-bottom:130px; }          /* the last section leads straight into the footer */

/* fade up (teacher.js adds .is-in) */
.tp-go .tb-up{ opacity:0; translate:0 22px; }
.tp-go .tb-up.is-in{ opacity:1; translate:0 0; transition:opacity .9s cubic-bezier(.16,1,.3,1) var(--d, 0s), translate .9s cubic-bezier(.16,1,.3,1) var(--d, 0s); }

@media (max-width:720px){
  .tb{ padding:64px 0; }
  .tb-wrap{ padding:0 16px; }
  .tb + .tb .tb-wrap::before{ top:-64px; left:16px; right:16px; }
  .tb-head{ flex-wrap:wrap; align-items:flex-start; }
}

}