/* ==========================================================================
   /open-source (templates/open_source.html): repo cards and model rows.
   Thumbnails come from each repo's README, so they keep its rounded corners.
   ========================================================================== */
.os-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: clamp(36px, 6vh, 64px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.os-stats li { padding: 22px 20px 0 0; }
.os-stats li + li { padding-left: 20px; border-left: 1px solid var(--line); }
.os-stats b { display: block; font-weight: 200; font-size: clamp(40px, 5vw, 80px); line-height: .9; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.os-stats span { display: block; margin-top: 12px; font-stretch: 62%; font-weight: 600; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ash); }
.os-sec { border-top: 1px solid var(--line); }

.os-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin: 0; padding: 0; list-style: none; }
.os-card {
  display: flex; flex-direction: column; height: 100%; text-decoration: none;
  border: 1px solid var(--line); border-radius: 4px; background: rgba(236, 233, 226, .02);
  transition: border-color .25s var(--ease), transform .35s var(--ease), background-color .25s var(--ease);
}
.os-card:hover, .os-card:focus-visible { border-color: var(--line-2); background: rgba(236, 233, 226, .045); transform: translateY(-3px); }
.os-card__media {
  position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden;
  border-bottom: 1px solid var(--line); background: radial-gradient(120% 90% at 50% 0%, rgba(236, 233, 226, .07), transparent 70%);
}
.os-card__media img { display: block; max-width: 86%; max-height: 84%; width: auto; height: auto; object-fit: contain; border-radius: 10px; filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .45)); transition: transform .5s var(--ease); }
.os-card:hover .os-card__media img { transform: scale(1.03); }
.os-card__mono { padding: 0 24px; text-align: center; font-stretch: 125%; font-weight: 800; font-size: clamp(22px, 2.2vw, 30px); line-height: 1; letter-spacing: -.01em; text-transform: uppercase; color: var(--ash-2); overflow-wrap: anywhere; }
.os-card__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 18px 20px 20px; }
.os-card__name { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; line-height: 1.25; }
.os-new {
  padding: 3px 7px; border-radius: 2px; background: var(--bone); color: var(--night); font-style: normal;
  font-stretch: 62%; font-weight: 700; font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
}
.os-card__desc { flex: 1; font-size: 15px; line-height: 1.5; color: var(--ash); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.os-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 13.5px; color: var(--ash); font-variant-numeric: tabular-nums; }
.os-lang::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 50%; background: var(--lang); vertical-align: 0; }

.os-group { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2.2fr); gap: clamp(20px, 4vw, 64px); padding: clamp(28px, 4vh, 44px) 0; border-top: 1px solid var(--line); }
.os-group__head h3 { margin: 0; color: var(--bone); }
.os-group__head h3 span { margin-left: 8px; color: var(--ash-2); }
.os-group__head p { margin: 10px 0 0; max-width: 30ch; font-size: 15px; line-height: 1.5; color: var(--ash); }
.os-rows { margin: 0; padding: 0; list-style: none; }
.os-rows li + li { border-top: 1px solid var(--line); }
.os-rows a {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.2fr) 168px 128px; align-items: baseline; gap: 6px 20px;
  padding: 13px 0; text-decoration: none; transition: padding .3s var(--ease), background-color .2s var(--ease);
}
.os-rows a:hover, .os-rows a:focus-visible { padding-left: 10px; background: rgba(236, 233, 226, .03); }
.os-row__name { font-weight: 650; font-size: 16px; overflow-wrap: anywhere; }
.os-row__from { font-size: 14px; color: var(--ash); overflow-wrap: anywhere; }
.os-row__tags { display: flex; gap: 6px; }
.os-row__tags i { padding: 2px 7px; border: 1px solid var(--line); border-radius: 2px; font-style: normal; font-stretch: 62%; font-weight: 600; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ash); white-space: nowrap; }
.os-row__n { text-align: right; font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.os-row__n small { font-weight: 400; font-size: 13px; color: var(--ash); }

.os-uses { border-top: 1px solid var(--line); }
.os-apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4vw, 64px); margin: 0; padding: 0; list-style: none; }
.os-apps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: start; }
.os-apps img { width: 64px; height: 64px; border-radius: 14px; }
.os-apps h3 { margin: 0; font-weight: 700; font-size: 24px; }
.os-apps p { margin: 10px 0 0; max-width: 46ch; color: var(--bone-2); }
.os-apps .mx-actions { margin-top: 22px; }

@media (max-width: 1080px) { .os-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .os-group { grid-template-columns: 1fr; }
  .os-apps { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .os-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .os-stats li:nth-child(3) { padding-left: 0; border-left: 0; }
  .os-rows a { grid-template-columns: minmax(0, 1fr) auto; }
  .os-row__from { grid-column: 1; }
  .os-row__tags { display: none; }
  .os-row__n { grid-row: 1; grid-column: 2; }
}
@media (max-width: 620px) {
  .os-grid { grid-template-columns: 1fr; }
  .os-apps li { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .os-card, .os-card__media img, .os-rows a { transition: none; } .os-card:hover { transform: none; } }