/* Case listing and detail alignment patch. Load after the existing site styles. */

/* The listing script toggles the native hidden attribute. The live card rule
   sets display:block, so explicitly keep non-current-page cards out of layout. */
.case-demo-main .case-showcase-card[hidden] {
  display: none !important;
}

/* Match the supplied four-column project-card reference. */
.case-demo-main .case-showcase-grid {
  gap: clamp(18px, 2vw, 34px);
}

.case-demo-main .case-showcase-photo {
  height: auto;
  aspect-ratio: 4 / 3;
}

.case-demo-main .case-showcase-body {
  min-height: 250px;
  padding: 20px 24px 22px;
}

.case-demo-main .case-showcase-body > small {
  font-size: 15px;
}

.case-demo-main .case-showcase-body > strong {
  font-size: clamp(17px, 1.4vw, 21px);
}

.case-demo-main .case-showcase-body > span {
  font-size: 14px;
}

.case-demo-main .case-showcase-body i {
  font-size: 34px;
}

/* Give every detail photo the same centered frame without cropping the source. */
.case-detail-gallery {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.case-detail-gallery figure {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.case-detail-gallery figure:first-child {
  grid-column: auto;
}

.case-detail-gallery img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Match the large pagination controls in the supplied reference. */
.case-demo-pagination {
  gap: clamp(8px, 1.2vw, 18px);
}

.case-demo-pagination button {
  width: clamp(48px, 4.4vw, 76px);
  height: clamp(48px, 4.4vw, 76px);
  flex: 0 0 clamp(48px, 4.4vw, 76px);
  font-size: clamp(19px, 1.75vw, 30px);
}

.case-demo-pagination button.is-arrow {
  font-size: clamp(23px, 1.9vw, 32px);
}

.case-demo-pagination span {
  font-size: clamp(17px, 1.4vw, 24px);
}

@media (max-width: 767px) {
  .case-demo-main .case-showcase-body {
    min-height: 180px;
    padding: 16px 17px 18px;
  }

  .case-detail-gallery {
    gap: 10px;
  }

  .case-detail-gallery figure {
    padding: 6px;
  }
}

@media (max-width: 420px) {
  .case-demo-pagination {
    gap: 3px;
    white-space: nowrap;
  }

  .case-demo-pagination button {
    width: 34px;
    height: 44px;
    flex-basis: 34px;
    font-size: 16px;
  }

  .case-demo-pagination button.is-arrow {
    font-size: 22px;
  }
}