/* Ported from the prototype's materials.css — kept in the 'legacy' cascade layer so Tailwind utilities can override it. */
@layer legacy {
/* =========================================================
   الأترجة — المكتبة · عرض كل المواد (materials.html?type=…)
   Loads after circles.css (the shared catalogue: toolbar, quick
   dropdowns, drawer / bottom sheet, chips, sort, empty, more) and
   library.css (the library's own cards). This file only lays out
   the archive around them: a compact hero with a small visual of
   the type, a white toolbar band, the grid on warm white, and the
   other types on sage.
   ========================================================= */

.mt-page{ background:#FCFBF7; }
.mt-wrap{ max-width:1240px; margin:0 auto; padding:0 28px; }

/* ---- 1 — compact hero ---- */
.mt-hero{
  padding:128px 0 56px;
  background:
    radial-gradient(50% 80% at 85% 0%, rgba(255,252,244,.95), transparent 70%),
    radial-gradient(40% 60% at 10% 100%, rgba(168,199,181,.14), transparent 70%),
    #F8F5ED;
  border-bottom:1px solid rgba(18,60,53,.07);
}
.mt-hero-in{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(220px, 380px); align-items:center; gap:48px; }
.mt-crumbs{ display:flex; align-items:center; gap:8px; margin:0 0 18px; font-size:14px; color:var(--lx-muted); }
.mt-crumbs a{ color:var(--lx-sub); border-bottom:1px solid transparent; transition:border-color .3s var(--lx-quick); }
.mt-crumbs a:hover{ border-color:var(--gold); }
.mt-title{ margin:0; font-size:clamp(32px, 4vw, 54px); line-height:1.25; font-weight:700; letter-spacing:0; color:var(--lx-ink); }
.mt-intro{ max-width:620px; margin:14px 0 0; font-size:clamp(16px, 1.25vw, 18px); line-height:1.95; color:var(--lx-sub); }
.mt-total{ display:inline-flex; align-items:center; gap:10px; margin:20px 0 0; font-size:14.5px; font-weight:600; color:var(--lx-ink); }
.mt-total span:first-child{ width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(212,175,90,.18); }

/* the small visual: three overlapping pictures, a waveform, or three mini cards */
.mt-art{ position:relative; height:200px; }
.mt-art-pic{
  position:absolute; top:50%;
  width:150px; aspect-ratio:4 / 5;
  border-radius:20px;
  overflow:hidden;
  border:5px solid #FFFDF8;
  box-shadow:0 20px 40px -26px rgba(18,60,53,.55);
  translate:0 -50%;
  inset-inline-end:calc(var(--k) * 95px);
  rotate:calc((var(--k) - 1) * 6deg);
  z-index:calc(3 - var(--k));
}
.mt-art-pic img{ width:100%; height:100%; object-fit:cover; filter:saturate(.88); }
.mt-art-pic .nb-play{ width:40px; height:40px; box-shadow:0 0 0 5px rgba(255,253,248,.18); }
.mt-art-pic .nb-play svg{ width:16px; height:16px; }
body[data-type="video"] .mt-art-pic, body[data-type="podcast"] .mt-art-pic{ width:190px; aspect-ratio:16 / 10; }
body[data-type="book"] .mt-art-pic{ width:120px; aspect-ratio:3 / 4.3; border-radius:6px 14px 14px 6px; border-width:0; box-shadow:inset 6px 0 10px -4px rgba(0,0,0,.4), 0 22px 40px -24px rgba(18,60,53,.6); }
.mt-art-wave{ position:absolute; inset:0; display:flex; align-items:center; gap:5px; }
.mt-art-wave i{ flex:1; border-radius:3px; background:rgba(18,60,53,.16); height:30%; }
.mt-art-wave i:nth-child(3n){ height:72%; } .mt-art-wave i:nth-child(4n+1){ height:52%; } .mt-art-wave i:nth-child(5n+2){ height:92%; }
.mt-art-wave i:nth-child(-n+12){ background:var(--gold); }
.mt-art-kc{
  position:absolute; top:50%;
  width:210px; padding:16px 18px;
  border-radius:20px;
  font-size:14.5px; line-height:1.8; font-weight:600;
  color:var(--lx-ink);
  background:#F5EFE3;
  border:1px solid rgba(176,143,62,.22);
  box-shadow:0 18px 36px -26px rgba(18,60,53,.5);
  translate:0 -50%;
  inset-inline-end:calc(var(--k) * 70px);
  rotate:calc((var(--k) - 1) * -5deg);
  z-index:calc(3 - var(--k));
}
.mt-art-kc em{ display:block; margin-bottom:6px; font-style:normal; font-size:12px; color:var(--lx-gold); }

/* ---- 2 — the toolbar on white, the grid on warm white ---- */
.mt-cat{ padding:0 0 100px; background:linear-gradient(180deg, #FFFFFF 0, #FFFFFF 150px, #FCFBF7 150px); }
.mt-cat .cat-wrap{ padding-top:34px; }
.mt-cat .cr-head{ margin-top:8px; }
.mt-cat .cg{ gap:56px 40px; }
.mt-cat .cg-more-btn{ min-width:180px; }

/* the library's cards inside the catalogue grid: stagger in, lift on hover */
.mt-cat .cg > .nb-card, .mt-cat .cg > .nb-kc{ animation:cc-in .6s var(--lx-quick) both; animation-delay:calc(var(--i, 0) * 60ms); }
.mt-cat .nb-card:hover, .mt-cat .nb-kc:hover{ transform:translateY(-4px); }
.mt-cat .nb-card.is-skel{ gap:12px; pointer-events:none; }
.mt-cat .nb-card.is-skel .nb-img{ display:block; }

/* ---- 3 — the other types ---- */
.mt-types{ padding:72px 0 96px; background:#EDF3EC; }
.mt-types h2{ margin:0 0 22px; font-size:clamp(22px, 2vw, 28px); font-weight:700; color:var(--lx-ink); }
.mt-type-list{ display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none; }
.mt-type{
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 20px;
  border-radius:999px;
  font-size:15.5px; font-weight:600;
  color:var(--lx-ink);
  background:#FFFFFF;
  border:1px solid rgba(18,60,53,.1);
  transition:border-color .3s var(--lx-quick), transform .3s var(--lx-quick);
}
.mt-type svg{ width:15px; height:15px; color:var(--gold-deep); transition:transform .3s var(--lx-quick); }
a.mt-type:hover{ border-color:rgba(176,143,62,.5); transform:translateY(-2px); }
a.mt-type:hover svg{ transform:translateX(-3px); }
a.mt-type:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.mt-type.is-on{ color:#F8F5ED; background:var(--lx-ink); border-color:var(--lx-ink); }

/* ---- the hero and the toolbar arrive softly (materials.js adds .mt-go) ---- */
.mt-go .mt-hero-copy > *, .mt-go .mt-art, .mt-go .mt-cat .cf-bar{ animation:mt-up .8s var(--lx-quick) both; }
.mt-go .mt-hero-copy > :nth-child(2){ animation-delay:.06s; }
.mt-go .mt-hero-copy > :nth-child(3){ animation-delay:.12s; }
.mt-go .mt-hero-copy > :nth-child(4){ animation-delay:.18s; }
.mt-go .mt-art{ animation-delay:.2s; }
.mt-go .mt-cat .cf-bar{ animation-delay:.26s; }
@keyframes mt-up{ from{ opacity:0; transform:translateY(16px); } }

/* ---- responsive ---- */
@media (max-width:1080px){
  .mt-hero-in{ grid-template-columns:1fr; }
  .mt-art{ display:none; }
  .mt-cat .cg{ gap:44px 28px; }
}
@media (max-width:720px){
  .mt-wrap{ padding:0 16px; }
  .mt-hero{ padding:108px 0 36px; }
  .mt-cat{ background:#FCFBF7; }
  .mt-cat .cat-wrap{ padding-top:22px; }
  .mt-cat .cg{ gap:36px; }
  .mt-types{ padding:56px 0 72px; }
  .mt-type-list{ flex-wrap:nowrap; overflow-x:auto; margin-inline:-16px; padding:2px 16px 8px; scrollbar-width:none; }
  .mt-type-list::-webkit-scrollbar{ display:none; }
  .mt-type{ white-space:nowrap; }
}
@media (prefers-reduced-motion:reduce){
  .mt-cat .cg > .nb-card, .mt-cat .cg > .nb-kc{ animation:none; }
}

}