/* Раздел «Free Desktop Widgets»: страница раздела и страницы виджетов. Основа — css/margo-system.css. */
.wd-page { padding-block: clamp(32px, 5vw, 64px) clamp(48px, 7vw, 88px); }

/* ---------- страница виджета ---------- */
.wd-grid { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; margin-top: 18px; }
.wd-cover { margin: 0; }
/* Обложка квадратная и показывается целиком: без обрезки и растяжения. */
.wd-cover img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: var(--r-lg); box-shadow: var(--shadow-lift); }
.wd-text .ms-h1 { margin-top: 10px; }
.wd-text .ms-lead { margin-top: 18px; max-width: 32em; }

.wd-download { margin-top: 30px; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow); }
.wd-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.wd-dl { min-height: 52px; padding-inline: 24px; font-size: 16px; }
.wd-files { margin-top: 14px; }

.wd-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); margin-top: clamp(44px, 6vw, 72px); }
.wd-block .ms-h2 { margin: 0 0 16px; }
.wd-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.wd-list li { position: relative; padding-inline-start: 28px; color: var(--ink); line-height: 1.55; }
.wd-list li::before { content: ""; position: absolute; inset-inline-start: 4px; top: 0.55em; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); }
.wd-req { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 18px; }
.wd-req dt { font-weight: 600; color: var(--title); }
.wd-req dd { margin: 0; color: var(--ink); line-height: 1.55; }
.wd-how-h { margin-top: 30px !important; }
.wd-sha { margin-top: 18px; }
.wd-sha a { color: var(--ink-2); }

.wd-gallery-block { margin-top: clamp(44px, 6vw, 72px); }
.wd-gallery-block > .ms-meta { margin: -6px 0 18px; }
.wd-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.wd-shot { margin: 0; }
.wd-shot img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: var(--r-md); border: 1px solid var(--line); }
.wd-shot figcaption { margin-top: 8px; font-size: 14px; color: var(--ink-2); line-height: 1.4; }

/* ---------- страница раздела ---------- */
.wd-cat-head { max-width: 40em; }
.wd-cat-head .ms-lead { margin-top: 14px; }
.wd-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); margin-top: clamp(28px, 4vw, 44px); }
.wd-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow); overflow: hidden; }
.wd-card-media img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; }
.wd-card-body { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 26px; flex: 1; }
.wd-card-body .ms-h2 { margin: 0; }
.wd-card-body .ms-h2 a { color: inherit; text-decoration: none; }
.wd-card-body p { margin: 0; color: var(--ink); line-height: 1.55; }
.wd-card-body .ms-btn { align-self: flex-start; margin-top: auto; }

@media (max-width: 860px) {
  .wd-grid, .wd-cols { grid-template-columns: 1fr; }
  .wd-cover { max-width: 520px; }
  .wd-gallery { grid-template-columns: 1fr; max-width: 560px; }
}
@media (max-width: 640px) {
  .wd-cards { grid-template-columns: 1fr; }
  .wd-download { padding: 18px; }
  .wd-buttons .wd-dl { flex: 1 1 100%; justify-content: center; }
  .wd-req { grid-template-columns: 1fr; gap: 4px; }
  .wd-req dd { margin-bottom: 10px; }
}