/* "Ukázky prací" — portfolio cards (4 regular in row 1, 1 wide centered in row 2) */

.works { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }

.work {
  grid-column: span 3;
  background: var(--surface); border: 1px solid var(--line); border-radius: 22px; overflow: hidden;
  display: flex; flex-direction: column; text-decoration: none;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.work:hover {
  transform: translateY(-4px); border-color: rgba(12,154,104,.5);
  box-shadow: var(--shadow), 0 0 40px -22px var(--glow);
}
.work.wide { grid-column: 4 / span 6; }

.work-preview {
  aspect-ratio: 16 / 9; max-width: 100%; position: relative; display: grid; place-items: center;
  background:
    linear-gradient(rgba(99,241,183,.08) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(99,241,183,.08) 1px, transparent 1px) 0 0 / 28px 28px,
    radial-gradient(80% 90% at 80% 10%, rgba(99,241,183,.35), transparent 60%),
    var(--panel);
  color: var(--accent); font-size: 52px; border-bottom: 1px solid var(--line);
}
.work.wide .work-preview { aspect-ratio: 21 / 9; }
.work-preview .url {
  position: absolute; left: 14px; bottom: 12px; font: 500 12px/1 var(--mono);
  color: #9fbfb2; background: rgba(7,16,13,.7); border: 1px solid rgba(99,241,183,.2);
  padding: 6px 9px; border-radius: 8px;
}

.work-body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.work-body .kind { font: 500 12px/1 var(--mono); color: var(--accent-text); text-transform: uppercase; letter-spacing: .06em; }
.work-body h3 { font-size: 24px; margin: 10px 0 8px; }
.work-body p { color: var(--ink-2); font-size: 15px; margin: 0 0 20px; }
.work-body .more { margin-top: 16px; font-weight: 600; font-size: 15px; color: var(--accent-text); }

@media (max-width: 1000px) {
  .works { grid-template-columns: 1fr 1fr; }
  .work, .work.wide { grid-column: span 1; }
  .work.wide .work-preview { aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  .works { grid-template-columns: 1fr; }
}