/* Showcase "Ukázky" (step 4.9): three concept websites. Barber Studio is the large card across the full width,
   the other two sit side by side below it. Every card is labelled as a concept. Since step 4.10e each card has one
   plain link to its demo (same tab, static screenshot, no live preview); the card itself has no hover effect. */
.showcase { padding-block: var(--space-section); overflow-wrap: break-word; }
.showcase :is(h2, h3) { overflow-wrap: anywhere; }

.showcase-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-12); }
.showcase-grid > * { min-width: 0; }

.project-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #ffffff0a, #ffffff03);
}
.project-card.is-featured { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; }

/* Screenshot of the approved demo in a small browser frame */
.project-preview { margin: var(--space-4) var(--space-4) 0; overflow: hidden; border: 1px solid var(--color-line-strong); border-radius: 14px; background: #1b1b26; }
.is-featured .project-preview { margin-bottom: var(--space-4); }
.project-bar { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px; }
.project-bar i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #ffffff38; }
.project-bar span { min-width: 0; margin-left: 8px; padding: 1px 10px; overflow: hidden; border-radius: 5px; background: #ffffff10; color: #ffffff80; font-size: 0.6875rem; white-space: nowrap; text-overflow: ellipsis; }
.project-preview img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }

.project-body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6) var(--space-8) var(--space-8); }
.project-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); color: var(--color-muted); font-size: var(--text-sm); }
.tag-concept { padding: 3px 10px; border: 1px solid #a3e63566; border-radius: var(--radius-pill); color: var(--color-lime); font-size: 0.75rem; font-weight: 600; }
.project-card h3 { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); }
.is-featured h3 { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); }
.project-card h3 + p { color: var(--color-muted); }
.project-features { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; list-style: none; }
.project-features li { padding: 4px 10px; border-radius: var(--radius-pill); background: #ffffff0d; font-size: 0.8125rem; }
/* Link to the demo, styled like the service links ("Zobrazit ceny →"), in the size of the former status line */
.project-link { align-self: flex-start; margin-top: var(--space-2); color: var(--color-text); font-size: var(--text-sm); font-weight: 600; text-decoration: none; }
.project-link [aria-hidden] { display: inline-block; transition: transform var(--duration-fast); }
.project-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.project-link:is(:hover, :focus-visible) [aria-hidden] { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .project-link:is(:hover, :focus-visible) [aria-hidden] { transform: none; }
}

@media (max-width: 960px) {
  .project-card.is-featured { display: flex; }
  /* The card keeps align-items: center from the grid layout. Without stretch the preview would take the width of
     its content, so before the image loaded it was only as wide as the browser bar and the page jumped after loading. */
  .is-featured .project-preview { align-self: stretch; margin-bottom: 0; }
}
@media (max-width: 640px) {
  .showcase-grid { grid-template-columns: 1fr; }
  .project-body { padding: var(--space-6); }
}