/* Projects mobile polish — scoped to the portfolio. Load after projects-v3.css
   and mobile-content-density.css. Preserve all five product demos. */
.projects-effects .project-preview-image-link {
  position: absolute;
  z-index: 7;
  inset: 0;
  display: block;
  cursor: zoom-in;
}
.projects-effects .project-preview-image-link::after {
  content: "↗";
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 9px;
  background: rgba(7,19,38,.85);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  font-size: 1.15rem;
  font-weight: 800;
  pointer-events: none;
}
.projects-effects .project-preview-image-link:hover::after {
  background: #1266a8;
}
.projects-effects .project-preview-image-link:focus-visible {
  outline: 3px solid #7ee7ff;
  outline-offset: -4px;
  border-radius: inherit;
}
.projects-effects .project-preview-image-link:focus-visible::after {
  background: #1266a8;
}
@media (max-width: 760px) {
  .projects-effects .project-v3-section,
  .projects-effects .project-v3-lab {
    scroll-margin-top: 78px;
  }
  .projects-effects .project-v3-copy,
  .projects-effects .project-v3-card-copy,
  .projects-effects .project-v3-card-copy > p,
  .projects-effects .project-v3-preview,
  .projects-effects .project-v3-lab-copy {
    min-width: 0;
    max-width: 100%;
  }
  .projects-effects .project-v3-card h2 {
    font-size: clamp(1.98rem, 7.6vw, 2.8rem) !important;
    line-height: 1.08 !important;
    overflow-wrap: anywhere;
    letter-spacing: -.045em;
  }
  .projects-effects .project-v3-card-copy > p {
    font-size: .91rem;
    line-height: 1.68;
  }
  .projects-effects .project-v3-card .project-v3-lead {
    font-size: .96rem;
    line-height: 1.55;
  }
  .projects-effects .project-v3-card-top {
    margin-bottom: 10px;
  }
  .projects-effects .project-v3-indexbar a {
    min-height: 48px;
    scroll-snap-align: start;
  }
  .projects-effects .project-v3-indexbar {
    scroll-padding-inline-start: 92px;
    -webkit-overflow-scrolling: touch;
  }
  .projects-effects .project-v3-specs small {
    overflow-wrap: break-word;
    line-height: 1.35;
    color: rgba(255,255,255,.68);
  }
  .projects-effects .project-v3-specs b {
    font-size: clamp(.79rem, 2.7vw, .96rem);
    overflow-wrap: anywhere;
  }
  /* Keep previews at natural width without clipping their entire parent column. */
  .projects-effects .speed-showcase,
  .projects-effects .taxi-product,
  .projects-effects .docs-product,
  .projects-effects .price-product-ui,
  .projects-effects .overdrive-console {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .projects-effects .project-preview-image-link::after {
    width: 27px;
    height: 27px;
    font-size: 1rem;
  }
}
@media (max-width: 520px) {
  .projects-effects .project-v3-hero h1 {
    font-size: clamp(2.05rem, 8.6vw, 2.55rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -.045em !important;
  }
  .projects-effects .project-v3-card h2 {
    font-size: clamp(1.78rem, 7.4vw, 2.28rem) !important;
  }
  .projects-effects .project-v3-docs h2,
  .projects-effects .project-v3-overdrive h2 {
    font-size: clamp(1.62rem, 6.7vw, 2.05rem) !important;
    letter-spacing: -.045em !important;
  }
  .projects-effects .project-v3-specs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-block: 12px 14px !important;
  }
  .projects-effects .project-v3-specs span {
    min-width: 0;
    padding: 10px 5px;
  }
  .projects-effects .project-v3-specs span:first-child {
    padding-left: 0;
  }
  .projects-effects .project-v3-specs span + span {
    padding-left: 8px;
    border-left: 1px solid rgba(255,255,255,.08);
    border-top: 0;
  }
  .projects-effects .project-v3-specs small {
    font-size: .62rem;
  }
  .projects-effects .compact-actions,
  .projects-effects .project-v3-hero .hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    width: 100%;
  }
  .projects-effects .compact-actions .button,
  .projects-effects .project-v3-hero .hero-actions .button {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 9px 8px;
    font-size: .82rem;
    line-height: 1.3;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .projects-effects .project-v3-hero-inner {
    padding-block: 32px 36px !important;
  }
  .projects-effects .project-v3-meta {
    margin-top: 16px;
  }
  .projects-effects .project-v3-indexbar {
    margin-top: 10px;
  }
}
@media (max-width: 379px) {
  .projects-effects .compact-actions,
  .projects-effects .project-v3-hero .hero-actions {
    grid-template-columns: minmax(0, 1fr);
  }
  .projects-effects .project-v3-specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .projects-effects .project-v3-specs span:nth-child(3) {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.08);
    padding-left: 0;
  }
}

@media (max-width: 760px) {
  /* These breadcrumbs were formerly injected only when the WebGL shader ran.
     Static-background users need identical navigation positioning. */
  .projects-effects .breadcrumbs {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 9px;
    margin-bottom: 24px;
    line-height: 1.15;
    white-space: nowrap;
  }
  .projects-effects .breadcrumbs > * {
    display: inline-flex;
    align-items: center;
    line-height: 1.15;
    white-space: nowrap;
  }
}
@media (max-width: 760px), (pointer: coarse) {
  /* Avoid expensive fixed CSS backgrounds on touch scrolling devices. */
  .projects-effects:not(.projects-colorful-fx-active) {
    background-attachment: scroll;
  }
}

/* Functional labels remain readable independently of decorative UI mockups. */
.projects-effects .speed-feature-line span,.projects-effects .overdrive-feature-line span,
.projects-effects .project-v3-meta span,.projects-effects .project-v3-specs small{
 font-size:.8125rem;line-height:1.6;color:#b9c5d5;letter-spacing:.01em;
}