/* Ported from the prototype's details.css — kept in the 'legacy' cascade layer so Tailwind utilities can override it. */
@layer legacy {
/* =========================================================
   الأترجة — details page (lectures · circles · curricula)
   Loads after circles.css (page ground, tokens, circle card),
   lectures.css (lecture card) and curricula.css (curriculum card).
   ---------------------------------------------------------
   kidora.framer.website/programs/little-explorer-program, read at
   1280: a centred tag + 48px title + two-line intro over a loose
   hand-drawn line; then a 1fr / 260px row — a big photo (20px
   radius) beside a tinted info card of label / value rows split by
   thin rules, one pill action at the foot; a tinted full-width band
   with a narrow column of headings and paragraphs and a "Go back"
   pill; a "Related" title with a "View all" pill over two cards.
   Here: RTL (photo on the right), ivory and cream grounds, a gold
   thread, a numbered long read with a sticky index, the listing's
   own card for related items.
   ========================================================= */

.dt-page{ background:var(--cl-bg); }


/* =========================================================
   1 — HERO
   ========================================================= */

.dt-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:140px 24px 90px;
  background:
    radial-gradient(50% 40% at 50% 12%, rgba(255,252,244,.95), transparent 70%),
    radial-gradient(40% 40% at 90% 70%, rgba(168,199,181,.14), transparent 70%),
    var(--cl-bg);
}
.dt-thread{
  position:absolute; z-index:-1;
  left:0; top:150px;
  width:100%; height:300px;
  fill:none;
  stroke:var(--gold);
  stroke-width:2;
  stroke-linecap:round;
  opacity:.38;
  vector-effect:non-scaling-stroke;
}
.dt-thread path{
  stroke-dasharray:2600;
  stroke-dashoffset:2600;
  animation:dt-draw 2.6s cubic-bezier(.45,.1,.2,1) .3s forwards;
}
@keyframes dt-draw{ to{ stroke-dashoffset:0; } }

.dt-head{ max-width:820px; margin:0 auto; text-align:center; }

.dt-label{
  display:inline-flex; align-items:center; gap:8px;
  margin:0;
  font-size:14px; font-weight:600;
  color:var(--gold-deep);
}
.dt-label svg{ width:14px; height:14px; fill:var(--gold); }

.dt-title{
  margin:16px 0 0;
  font-size:clamp(34px, 4.4vw, 60px);
  line-height:1.2;
  font-weight:700;
  letter-spacing:0;
  color:var(--cl-ink);
  text-wrap:balance;
}
.dt-intro{
  max-width:620px;
  margin:18px auto 0;
  font-size:clamp(16px, 1.25vw, 18px);
  line-height:1.95;
  color:var(--cl-sub);
  text-wrap:pretty;
}

/* photo + info card */
.dt-top{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 320px;
  gap:20px;
  max-width:1200px;
  margin:56px auto 0;
}
.dt-cover{
  position:relative;
  margin:0;
  min-height:440px;
  border-radius:24px;
  overflow:hidden;
  background:var(--cl-sand);
  box-shadow:0 24px 50px -30px rgba(18,60,53,.4);
}
.dt-cover img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:saturate(.9);
  transform:scale(1.06);
  transition:transform 1.8s cubic-bezier(.16,1,.3,1);
}
.dt-cover.is-in img{ transform:scale(1); }
.dt-cover-tags{
  position:absolute;
  inset-inline-start:20px; top:20px;
  display:flex; flex-wrap:wrap; gap:8px;
}
.dt-cover-tags span{
  padding:7px 14px;
  border-radius:99px;
  font-size:13.5px; font-weight:600;
  color:var(--u-forest);
  background:rgba(255,253,248,.92);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.dt-cover-tags span + span{ color:var(--gold-deep); }

.dt-info{
  position:relative;
  display:flex; flex-direction:column;
  padding:26px 24px 22px;
  border-radius:24px;
  background:linear-gradient(170deg, #FFFDF8 0%, #FBF5E7 100%);
  border:1px solid rgba(176,143,62,.18);
  box-shadow:0 20px 44px -32px rgba(18,60,53,.35);
}
.dt-rows{ margin:0; }
.dt-row{
  padding:13px 0;
  border-bottom:1px solid var(--cl-line);
}
.dt-row:first-child{ padding-top:0; }
.dt-row dt{
  display:flex; align-items:center; gap:7px;
  font-size:13px; font-weight:600;
  color:var(--cl-muted);
}
.dt-row dt svg{ width:15px; height:15px; color:var(--gold-deep); }
.dt-row dd{
  display:flex; align-items:center; gap:8px;
  margin:6px 0 0;
  font-size:15.5px; font-weight:600;
  color:var(--cl-ink);
}
.dt-row dd img{ width:26px; height:26px; border-radius:50%; object-fit:cover; }
.dt-ok{ display:inline-flex; align-items:center; gap:7px; }
.dt-ok::before{ content:""; width:7px; height:7px; border-radius:50%; background:#5E9C78; box-shadow:0 0 0 3px rgba(94,156,120,.18); }

/* the one action */
.dt-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 26px;
  border-radius:99px;
  font-size:16px; font-weight:600;
  color:var(--u-ivory);
  background:var(--u-forest);
  box-shadow:0 14px 30px -14px rgba(18,60,53,.6);
  transition:transform .4s var(--cl-out), box-shadow .4s var(--cl-out), background-color .3s var(--cl-out);
}
.dt-cta svg{ width:18px; height:18px; color:var(--gold); transition:transform .4s var(--cl-out); }
.dt-cta:hover{
  transform:translateY(-2px);
  background:#174A41;
  box-shadow:0 18px 34px -14px rgba(18,60,53,.6), 0 0 0 4px rgba(212,175,90,.18);
}
.dt-cta:hover svg{ transform:translateX(-4px); }
.dt-cta:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }
.dt-info .dt-cta{ margin-top:auto; }
.dt-info .dt-rows{ margin-bottom:22px; }

.dt-cta-note{ margin:10px 0 0; font-size:13px; text-align:center; color:var(--cl-muted); }
.dt-cta-note[hidden]{ display:none; }

.dt-share{
  align-self:center;
  display:inline-flex; align-items:center; gap:7px;
  margin-top:12px;
  padding:6px 10px;
  border:0; border-radius:99px;
  font:inherit; font-size:14px; font-weight:500;
  color:var(--cl-sub);
  background:none;
  cursor:pointer;
  transition:color .3s var(--cl-out), background-color .3s var(--cl-out);
}
.dt-share svg{ width:16px; height:16px; }
.dt-share:hover{ color:var(--cl-ink); background:rgba(18,60,53,.05); }
.dt-share:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }


/* =========================================================
   2 — THE LONG READ
   ========================================================= */

.dt-read{
  position:relative;
  isolation:isolate;
  padding:100px 24px 110px;
  background:linear-gradient(180deg, #F3EBDA 0%, #F6F0E3 100%);
}
/* a faint eight-point star lattice */
.dt-read::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:.04;
  -webkit-mask-image:linear-gradient(180deg, #000, transparent 60%);
          mask-image:linear-gradient(180deg, #000, transparent 60%);
  pointer-events:none;
}

.dt-read-wrap{
  display:grid;
  grid-template-columns:220px minmax(0, 760px);
  justify-content:center;
  gap:72px;
  max-width:1200px;
  margin:0 auto;
}

/* sticky index (RTL: on the right, beside the start of the lines) */
.dt-toc{ position:sticky; top:120px; align-self:start; }
.dt-toc-title{ margin:0 0 14px; font-size:13px; font-weight:600; color:var(--cl-muted); }
.dt-toc ol{ margin:0; padding:0; list-style:none; border-inline-start:1px solid rgba(18,60,53,.14); }
.dt-toc a{
  display:block;
  margin-inline-start:-1px;
  padding:8px 16px;
  border-inline-start:2px solid transparent;
  font-size:14.5px;
  color:var(--cl-sub);
  transition:color .3s var(--cl-out), border-color .3s var(--cl-out);
}
.dt-toc a:hover{ color:var(--cl-ink); }
.dt-toc a.is-on{ color:var(--cl-ink); font-weight:600; border-color:var(--gold); }

.dt-read-title{
  margin:0 0 8px;
  font-size:clamp(28px, 2.6vw, 38px);
  font-weight:700;
  color:var(--cl-ink);
}
.dt-block{ scroll-margin-top:110px; padding:30px 0; border-bottom:1px solid rgba(18,60,53,.09); }
.dt-block:last-child{ border-bottom:0; }
.dt-block h3{
  display:flex; align-items:baseline; gap:12px;
  margin:0 0 12px;
  font-size:21px; font-weight:700;
  color:var(--cl-ink);
}
.dt-block h3 span{ font-size:13px; font-weight:600; color:var(--gold-deep); letter-spacing:.04em; }
.dt-block p{ margin:0 0 12px; font-size:16.5px; line-height:2; color:var(--cl-sub); }

.dt-list{ display:grid; gap:10px; margin:6px 0 0; padding:0; list-style:none; }
.dt-list li{
  position:relative;
  padding-inline-start:24px;
  font-size:16px; line-height:1.85;
  color:var(--cl-ink);
}
.dt-list li::before{
  content:"";
  position:absolute;
  inset-inline-start:2px; top:.72em;
  width:8px; height:8px;
  border-radius:2px;
  background:var(--gold);
  transform:rotate(45deg);
}

.dt-steps{ counter-reset:s; display:grid; gap:10px; margin:6px 0 0; padding:0; list-style:none; }
.dt-steps li{
  counter-increment:s;
  position:relative;
  padding:14px 16px;
  padding-inline-start:54px;
  border-radius:14px;
  font-size:16px; line-height:1.8;
  color:var(--cl-ink);
  background:rgba(255,253,248,.7);
  border:1px solid rgba(18,60,53,.07);
}
.dt-steps li::before{
  content:counter(s);
  position:absolute;
  inset-inline-start:16px; top:15px;
  display:grid; place-items:center;
  width:26px; height:26px;
  border-radius:50%;
  font-size:13px; font-weight:700;
  color:var(--u-forest);
  background:var(--u-sage);
}

.dt-person{
  display:flex; align-items:flex-start; gap:16px;
  padding:18px;
  border-radius:18px;
  background:rgba(255,253,248,.75);
  border:1px solid rgba(18,60,53,.07);
}
.dt-person img{ width:64px; height:64px; flex:none; border-radius:50%; object-fit:cover; border:3px solid #FFFDF8; box-shadow:0 0 0 1px rgba(176,143,62,.25); }
.dt-person b{ display:block; font-size:17px; color:var(--cl-ink); }
.dt-person-link{ color:inherit; border-bottom:1px solid rgba(176,143,62,.45); transition:border-color .3s var(--cl-out); }
.dt-person-link:hover{ border-color:var(--gold-deep); }
.dt-person p{ margin:6px 0 0; font-size:15.5px; }

.dt-back{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:26px;
  padding:11px 20px;
  border-radius:99px;
  font-size:15px; font-weight:600;
  color:var(--cl-ink);
  background:#FFFDF8;
  border:1px solid rgba(18,60,53,.12);
  transition:border-color .3s var(--cl-out), transform .4s var(--cl-out);
}
.dt-back svg{ width:16px; height:16px; color:var(--gold-deep); transform:scaleX(-1); }
.dt-back:hover{ border-color:var(--gold); transform:translateY(-2px); }


/* =========================================================
   3 — RELATED
   ========================================================= */

.dt-rel{ padding:100px 24px 120px; }
.dt-rel-wrap{ max-width:1200px; margin:0 auto; }
.dt-rel-head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-bottom:30px;
}
.dt-rel-head h2{ margin:0; font-size:clamp(26px, 2.6vw, 38px); font-weight:700; color:var(--cl-ink); }
.dt-rel-all{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px;
  border-radius:99px;
  font-size:14.5px; font-weight:600;
  color:var(--cl-ink);
  border:1px solid rgba(18,60,53,.14);
  background:#FFFDF8;
  transition:border-color .3s var(--cl-out), gap .3s var(--cl-out);
}
.dt-rel-all svg{ width:16px; height:16px; color:var(--gold-deep); }
.dt-rel-all:hover{ border-color:var(--gold); gap:12px; }

/* the listing grids already do 3 / 2 / 1 columns; keep its spacing */
.dt-rel-grid{ margin:0; }


/* missing item */
.dt-missing{ padding:200px 24px 160px; text-align:center; }
.dt-missing h1{ margin:0; font-size:36px; color:var(--cl-ink); }
.dt-missing p{ margin:12px 0 28px; color:var(--cl-sub); }


/* =========================================================
   MOTION — fade-up on scroll (details.js adds .is-in)
   ========================================================= */
.dt-js .dt-up{ opacity:0; translate:0 24px; }
.dt-js .dt-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);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  .dt-top{ grid-template-columns:1fr; max-width:760px; }
  .dt-cover{ min-height:0; aspect-ratio:16 / 10; }
  /* the info card turns into two columns of rows under the photo */
  .dt-rows{ display:grid; grid-template-columns:1fr 1fr; column-gap:28px; }
  .dt-row:first-child{ padding-top:13px; }
  .dt-info .dt-cta{ align-self:stretch; }
  .dt-read-wrap{ grid-template-columns:minmax(0, 760px); }
  .dt-toc{ display:none; }
}

@media (max-width:640px){
  .dt-hero{ padding:116px 16px 64px; }
  .dt-thread{ top:110px; height:220px; }
  .dt-head{ text-align:right; }
  .dt-intro{ margin-inline:0; }
  .dt-top{ margin-top:32px; gap:14px; }
  .dt-cover{ border-radius:18px; aspect-ratio:4 / 3; }
  .dt-cover-tags{ inset-inline-start:12px; top:12px; }
  .dt-info{ padding:20px 18px 16px; border-radius:18px; }
  .dt-rows{ grid-template-columns:1fr; }

  .dt-read{ padding:64px 16px 72px; }
  .dt-block{ padding:24px 0; }
  .dt-block p{ font-size:16px; }
  .dt-person{ flex-direction:column; }

  .dt-rel{ padding:64px 16px 80px; }
  .dt-rel-head{ flex-wrap:wrap; }
}

@media (prefers-reduced-motion:reduce){
  .dt-thread path{ animation:none; stroke-dashoffset:0; }
  .dt-cover img{ transform:none; transition:none; }
}

}