/* Actual project screens, with four cards visible on desktop. */
html body.home-design .xf-case { --case-image-height: 240px; --home-case-columns: 4; --home-case-gap: 20px; scroll-margin-top: 80px; }
.xf-case .xf-case-grid { grid-template-columns: repeat(var(--home-case-columns), minmax(0, 1fr)); gap: var(--home-case-gap); }
.xf-case .xf-case-showcase { margin-top: 30px; }
.xf-case .xf-case-card { border: 1px solid #ffffff12; border-radius: 10px; box-shadow: none; }
.xf-case .xf-case-link { display: block; height: 100%; color: inherit; }
.xf-case .xf-case-cover { height: var(--case-image-height); overflow: hidden; background: radial-gradient(ellipse at 50% 10%, #ffffff70, transparent 80%), var(--cover-bg, #e8dcd0); }
.xf-case .theme-sand { --cover-bg: #e8dcd0; }
.xf-case .theme-sage { --cover-bg: #dce4db; }
.xf-case .theme-clay { --cover-bg: #e5bca5; }
.xf-case .theme-slate { --cover-bg: #3c4b50; }
.xf-case .theme-lilac { --cover-bg: #e1dce8; }
.xf-case .theme-peach { --cover-bg: #f0d9c4; }
.xf-case-cover .case-composition { display: flex; justify-content: center; width: 100%; height: 100%; overflow: hidden; transition: transform .25s ease; }
.xf-case-cover .case-composition--desktop { align-items: center; padding: 22px 16px; }
.xf-case-cover .case-browser { width: 100%; max-height: 100%; overflow: hidden; border-radius: 6px; background: #fff; box-shadow: 0 12px 24px #1c252c30; transform: rotate(-3deg); }
.xf-case-cover .case-browser-bar { display: flex; align-items: center; gap: 3px; height: 12px; padding-left: 6px; background: #f4f2ef; }
.xf-case-cover .case-browser-bar i { width: 3px; height: 3px; border-radius: 50%; background: #b1aaa2; }
.xf-case-cover .case-composition--mobile { align-items: flex-start; gap: 10px; padding: 24px 18px 0; }
.xf-case-cover .case-phone { flex: 0 0 44%; min-width: 0; overflow: hidden; border: 3px solid #fff; border-radius: 12px; background: #fff; box-shadow: 0 12px 22px #29201a26; transform: rotate(-5deg); }
.xf-case-cover .case-phone + .case-phone { margin-top: 30px; transform: rotate(5deg); }
.xf-case-cover .case-composition--single .case-phone { flex-basis: 50%; }
.xf-case .xf-case-cover img { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }
.xf-case .xf-case-caption { padding: 18px 16px 20px; }
.xf-case .xf-case-category { display: block; margin-bottom: 8px; color: #e6b28f; font-size: 12px; line-height: 1.5; }
.xf-case .xf-case-title { display: flex; align-items: flex-start; gap: 8px; }
html body.home-design .xf-case .xf-case-title h3 { flex: 1; min-width: 0; min-height: 2.9em; margin: 0; font-size: 17px; line-height: 1.45; }
.xf-case .xf-case-title > span { flex: 0 0 auto; margin-top: 2px; color: #e6b28f; font-size: 18px; }
html body.home-design .xf-case .xf-case-caption p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 3.4em; margin: 10px 0 0; font-size: 14px; line-height: 1.7; }
.xf-case .xf-case-link:hover .case-composition { transform: translateY(-3px); }
.xf-case .xf-case-link:hover h3 { color: #ffd0ab; }
.xf-case .xf-case-link:focus-visible { outline: 2px solid #ffc59d; outline-offset: -3px; border-radius: 10px; }
.xf-case .xf-case-grid:focus-visible { outline: 2px solid #ffc59d; outline-offset: 4px; }
.xf-case .xf-case-showcase.is-scrollable .xf-case-grid { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--home-case-columns) - 1) * var(--home-case-gap)) / var(--home-case-columns)); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.xf-case .xf-case-showcase.is-scrollable .xf-case-grid::-webkit-scrollbar { display: none; }
.xf-case .xf-case-card { scroll-snap-align: start; }
.xf-case .xf-case-controls { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 18px; }
.xf-case .xf-case-progress { color: #c1c3c7; font-size: 13px; font-variant-numeric: tabular-nums; }
.xf-case .xf-arrow { display: grid; width: 44px; height: 44px; top: calc(var(--case-image-height) / 2); }
.xf-case .xf-arrow-left { left: -64px; }
.xf-case .xf-arrow-right { right: -64px; }
.xf-case .xf-arrow[aria-disabled="true"] { opacity: .3; cursor: default; }
.xf-case .xf-arrow:focus-visible { outline: 2px solid #ffc59d; outline-offset: 4px; }
.xf-case [hidden] { display: none !important; }
@media (max-width: 1199px) {
  html body.home-design .xf-case { --home-case-columns: 2; --case-image-height: 260px; }
  .xf-case .xf-arrow { position: static; transform: none; }
  .xf-case .xf-case-progress { margin-right: auto; }
}
@media (max-width: 760px) {
  html body.home-design .xf-case { --home-case-columns: 1; --case-image-height: 280px; --home-case-gap: 16px; }
  html body.home-design .xf-case .xf-case-title h3 { min-height: 0; font-size: 18px; }
  .xf-case-cover .case-composition--mobile { padding-inline: 30px; }
  .xf-case-cover .case-composition--desktop { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) { .xf-case-cover .case-composition { transition: none; } }