/* ═══════════════════════════════════════════
   LOP-PA.DEV — downloads catalog + item pages
   ═══════════════════════════════════════════ */

.dl-hero {
  padding: clamp(7rem, 16vh, 10rem) clamp(1.2rem, 4vw, 3rem) clamp(1.6rem, 4vh, 2.6rem);
  position: relative;
}
.dl-hero__index {
  font-size: .78rem; font-weight: 700;
  letter-spacing: .3em;
  color: var(--lime);
  margin-bottom: 1.2rem;
  display: block;
}
.dl-hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 10vw, 8.5rem);
  line-height: .95;
  text-transform: uppercase;
}
.dl-hero__title em {
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 2.5px var(--lime);
}
.dl-hero__sub {
  max-width: 56ch;
  color: var(--grey);
  line-height: 1.6;
  margin-top: 1.4rem;
}

/* ── categories + filters ── */
.dl-controls {
  padding: 0 clamp(1.2rem, 4vw, 3rem);
  display: flex; flex-direction: column; gap: 1rem;
  margin-bottom: clamp(1.8rem, 4vh, 2.8rem);
}
.dl-cats { display: flex; flex-wrap: wrap; gap: .7rem; }
.dl-cat {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: .06em;
  color: var(--grey);
  background: transparent;
  border: 1.5px solid var(--black-3);
  border-radius: 999px;
  padding: .65rem 1.6rem;
  cursor: pointer;
  transition: color .3s, border-color .3s, background .3s, transform .3s;
}
.dl-cat:hover { border-color: var(--lime); color: var(--lime); transform: translateY(-2px); }
.dl-cat.is-on { background: var(--lime); border-color: var(--lime); color: var(--black); }
.dl-types { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.dl-types > span {
  font-size: .7rem; font-weight: 700;
  letter-spacing: .22em;
  color: var(--grey);
  margin-right: .4rem;
}
.dl-type {
  font-size: .74rem; font-weight: 700;
  letter-spacing: .1em;
  color: var(--grey);
  background: transparent;
  border: 1px dashed var(--black-3);
  border-radius: 999px;
  padding: .4rem 1rem;
  cursor: pointer;
  transition: color .3s, border-color .3s, background .3s;
  text-transform: uppercase;
}
.dl-type:hover { border-color: var(--lime); color: var(--lime); }
.dl-type.is-on { background: rgba(200,255,0,.14); border-color: var(--lime); color: var(--lime); }

/* ── grid ── */
.dl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
  gap: clamp(1.2rem, 2.6vw, 2rem);
  padding: 0 clamp(1.2rem, 4vw, 3rem) clamp(4rem, 9vh, 6rem);
}
.dl-card {
  position: relative;
  background: var(--black-2);
  border: 1px solid var(--black-3);
  border-radius: 12px;
  padding: 1.6rem 1.5rem 1.5rem;
  display: flex; flex-direction: column;
  transition: border-color .35s, transform .4s var(--ease), box-shadow .4s;
}
.dl-card:hover {
  border-color: var(--lime);
  transform: translateY(-6px) rotate(-.4deg);
  box-shadow: 0 24px 60px rgba(200,255,0,.1);
}
.dl-card.is-hidden { display: none; }
.dl-card__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.dl-card__icon {
  width: 62px; height: 62px;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.5));
  transform: rotate(-6deg);
  transition: transform .4s var(--ease);
}
.dl-card:hover .dl-card__icon { transform: rotate(6deg) scale(1.12); }
.dl-card__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  letter-spacing: .02em;
}
.dl-card__version {
  display: block;
  font-size: .72rem;
  color: var(--grey);
  letter-spacing: .1em;
  margin-top: .2rem;
}
.dl-card__desc { color: var(--grey); font-size: .93rem; line-height: 1.6; flex: 1; }
.dl-card__meta { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.1rem 0 1.2rem; }
.dl-card__meta span {
  font-size: .66rem; font-weight: 700;
  letter-spacing: .12em;
  border: 1px solid var(--black-3);
  color: var(--grey);
  border-radius: 999px;
  padding: .26rem .7rem;
  text-transform: uppercase;
}
.dl-card__meta .is-free { border-color: var(--lime); color: var(--lime); }
.dl-card__meta .is-pro { background: var(--lime); border-color: var(--lime); color: var(--black); }
.dl-card__actions { display: flex; gap: .7rem; }
.dl-btn {
  font-family: var(--font-display);
  font-size: .88rem;
  letter-spacing: .07em;
  border-radius: 999px;
  padding: .65rem 1.3rem;
  cursor: pointer;
  text-align: center;
  transition: background .3s, color .3s, transform .3s;
}
.dl-btn--get { background: var(--lime); color: var(--black); border: 2px solid var(--lime); flex: 1; }
.dl-btn--get:hover { background: transparent; color: var(--lime); }
.dl-btn--more { background: transparent; color: var(--white); border: 2px solid var(--black-3); }
.dl-btn--more:hover { border-color: var(--lime); color: var(--lime); }
.dl-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 1rem;
  font-family: var(--font-marker);
  color: var(--grey);
  font-size: 1.2rem;
  display: none;
}

/* ── item page ── */
.dli {
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(7rem, 15vh, 9.5rem) clamp(1.2rem, 4vw, 3rem) clamp(4rem, 8vh, 6rem);
}
.dli__crumbs {
  font-size: .76rem; font-weight: 700;
  letter-spacing: .18em;
  color: var(--grey);
  text-transform: uppercase;
  margin-bottom: 2rem;
  display: block;
}
.dli__crumbs a { color: var(--lime); }
.dli__head { display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 2.2rem); flex-wrap: wrap; }
.dli__icon {
  width: clamp(90px, 12vw, 140px);
  transform: rotate(-6deg);
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.55));
}
.dli__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: .95;
  text-transform: uppercase;
}
.dli__meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.dli__meta span {
  font-size: .7rem; font-weight: 700;
  letter-spacing: .12em;
  border: 1px solid var(--black-3);
  color: var(--grey);
  border-radius: 999px;
  padding: .3rem .8rem;
  text-transform: uppercase;
}
.dli__meta .is-free { border-color: var(--lime); color: var(--lime); }
.dli__meta .is-pro { background: var(--lime); border-color: var(--lime); color: var(--black); }
.dli__lead { font-size: clamp(1.05rem, 1.8vw, 1.3rem); line-height: 1.6; margin: 2rem 0 0; max-width: 62ch; }
.dli__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(1.6rem, 4vw, 3rem);
  margin-top: clamp(2rem, 5vh, 3rem);
}
@media (max-width: 800px) { .dli__grid { grid-template-columns: 1fr; } }
.dli__block h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  margin: 1.8rem 0 .8rem;
}
.dli__block h2 em { font-style: normal; color: var(--lime); }
.dli__block p, .dli__block li { color: var(--grey); line-height: 1.7; font-size: .97rem; }
.dli__block ul { margin: .4rem 0 0 1.1rem; }
.dli__block li { padding: .18rem 0; }
.dli__side {
  background: var(--black-2);
  border: 1.5px dashed rgba(200,255,0,.4);
  border-radius: 14px;
  padding: 1.8rem 1.6rem;
  height: fit-content;
  position: sticky;
  top: 6rem;
}
.dli__side h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  margin-bottom: 1rem;
}
.dli__facts { list-style: none; margin-bottom: 1.4rem; }
.dli__facts li {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: .85rem;
  color: var(--grey);
  padding: .42rem 0;
  border-bottom: 1px dashed var(--black-3);
}
.dli__facts b { color: var(--white); font-weight: 500; text-align: right; }
.dli__download {
  display: block;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: .06em;
  background: var(--lime); color: var(--black);
  border: 2px solid var(--lime);
  border-radius: 999px;
  padding: .95rem 1.4rem;
  transition: background .3s, color .3s;
}
.dli__download:hover { background: transparent; color: var(--lime); }
.dli__note {
  text-align: center;
  font-size: .74rem;
  color: var(--grey);
  margin-top: .7rem;
}
.dli__changelog { margin-top: 1.6rem; }
.dli__changelog li { border-bottom: 1px dashed var(--black-3); padding: .4rem 0; font-size: .88rem; }
.dli__changelog b { color: var(--lime); font-weight: 700; margin-right: .5rem; }
.dli__back {
  display: inline-block;
  margin-top: 2.4rem;
  font-size: .8rem; font-weight: 700;
  letter-spacing: .18em;
  color: var(--grey);
}
.dli__back:hover { color: var(--lime); }