/* Extend the existing project cards without changing their case pages. */
#projects .projects__item { display: flex; flex-direction: column; min-width: 0; }
#marketing .projects-info + .projects__button { margin-top: 24px; }
.projects__item--website { transition: border-color .25s ease; }
.projects__item--website:hover { border-color: #62685d; }
.projects__item--website .projects__image { height: auto; aspect-ratio: 1.44; overflow: hidden; background: var(--black); }
.projects__cover { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .5s ease; }
@media (hover: hover) and (pointer: fine) { .projects__item--website .projects__image:hover .projects__cover { transform: scale(1.035); } }
.projects .projects__label { overflow-wrap: anywhere; }
.projects .projects__type { align-self: flex-start; display: inline-flex; max-width: 100%; margin-top: 18px; padding: 8px 16px; border: 1px solid #36383a; border-radius: 999px; background: #151719; color: var(--green); font-size: 11px; font-weight: 600; line-height: 1.4; text-transform: uppercase; overflow-wrap: anywhere; }
.projects .projects__type + .projects__label { margin-top: 12px; }
.projects .projects__description { color: #adb0b5; margin-bottom: 24px; font-size: 15px; line-height: 1.6; }
.projects__actions { display: flex; gap: 10px; margin-top: auto; }
.projects .projects__actions .projects__button { flex: 1; min-width: 0; margin: 0; min-height: 52px; height: auto; padding: 16px 10px; font-size: 13px; }
.projects__actions .projects__button p { display: flex; align-items: center; justify-content: center; gap: 8px; }
.projects__actions a:focus-visible { outline: 2px solid var(--green); outline-offset: 5px; }
.projects__item--website a:focus-visible, .projects .btn-more:focus-visible { outline: 2px solid var(--green); outline-offset: 5px; }
.projects .btn-more { margin-inline: auto; }
@media (max-width: 1250px) { .projects .projects__item.hidden-mobile { display: none; } }
@media (max-width: 767px) { #marketing .projects__item.hidden-phone { display: none; } }
@media (min-width: 768px) { #marketing .marketing-more--phone { display: none; } }
@media (max-width: 767px) { .projects .projects__type { padding: 7px 12px; font-size: 10px; } }
@media (max-width: 420px) { .projects__actions { flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { .projects__cover, .projects__item--website { transition: none; } .projects__item--website .projects__image:hover .projects__cover { transform: none; } }

/* Independent image tilt leaves card text and neighbouring rows stable. */
#projects .projects__item { transition: border-color .25s ease, box-shadow .3s ease; }
#projects .projects__image { transition: transform .3s ease; }
#projects .projects__image::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at var(--portfolio-x, 50%) var(--portfolio-y, 50%), #ffffff26, transparent 62%); transition: opacity .3s ease; }
#projects .projects__item:focus-within { border-color: #bffb6373; }
#projects .portfolio-motion-wait { opacity: 0; transform: translateY(24px); }
#projects .portfolio-motion-wait:focus-within { opacity: 1; transform: none; }
#projects .portfolio-motion-entering { animation: portfolio-card-enter .65s cubic-bezier(.2,.7,.25,1) var(--portfolio-reveal-delay, 0ms) both; }
@keyframes portfolio-card-enter { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (hover: hover) and (pointer: fine) {
  #projects .portfolio-pointer-active { border-color: #bffb6380; box-shadow: 0 12px 32px #0003, 0 0 20px #bffb630c; }
  #projects .portfolio-pointer-active .projects__image { transform: perspective(900px) rotateX(var(--portfolio-rx, 0deg)) rotateY(var(--portfolio-ry, 0deg)); }
  #projects .portfolio-pointer-active .projects__image::after { opacity: 1; }
  #projects .projects__item.hover .projects__img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  #projects .projects__item, #projects .projects__image, #projects .projects__image::after { animation: none !important; transition: none; }
  #projects .portfolio-motion-wait { opacity: 1; transform: none; }
  #projects .projects__image, #projects .projects__item.hover .projects__img, #projects .projects__cover { transform: none !important; }
  #projects .projects__image::after { opacity: 0; }
}
@media (hover: none), (pointer: coarse) { #projects .projects__item.hover .projects__img { transform: none; } }