/* ========================================
   Page: Use Case Archive
   ======================================== */

/* ----------------------------------------
   Section: Technologies Filter
   First section on page — includes header clearance.
   ---------------------------------------- */

.section-usecase-technologies {
  background-color: var(--color-bg-dark);
  padding-top: 0;
  padding-bottom: 0;
}

/* Header clearance for first section */
.section-usecase-technologies .bg-hide-grid {
  padding-left: var(--container-gutter);
  padding-right: 0px;
  padding-top: var(--container-gutter);
  padding-bottom: 50px;
}

.section-usecase-technologies::after {
  background-image:
    repeating-linear-gradient(to bottom, var(--color-grid-line-dark) 0px, var(--color-grid-line-dark) 10px, transparent 10px, transparent 20px),
    repeating-linear-gradient(to bottom, var(--color-grid-line-dark) 0px, var(--color-grid-line-dark) 10px, transparent 10px, transparent 20px);
  background-size: 1px 20px, 1px 20px;
  background-position: 0% 0, 100% 0;
  background-repeat: repeat-y, repeat-y;
}

.usecase-tech-label {
  display: block;
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  font-size: var(--fs-subtitle);
  line-height: 1;
  color: var(--color-gray-text);
  margin-bottom: 38px;
}

.usecase-tech-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.usecase-tech-scroll::-webkit-scrollbar {
  display: none;
}

.usecase-tech-pills {
  display: flex;
  gap: 10px;
}

.usecase-tech-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 20px;
  border-radius: 100px;
  background-color: var(--color-gray-text);
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  font-size: var(--fs-tag);
  line-height: 1;
  color: var(--color-pure-black);
  white-space: nowrap;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
  flex-shrink: 0;
}

.usecase-tech-pill:hover {
  background-color: var(--color-gray-light);
}

.usecase-tech-pill.is-active {
  background-color: var(--color-white);
  color: var(--color-pure-black);
}

/* ----------------------------------------
   Section: Use Case Grid
   2-column layout with grid lines.
   ---------------------------------------- */

.section-usecase-grid {
  background-color: var(--color-bg-dark);
  padding-top: 0;
  padding-bottom: 80px;
  margin-bottom: 20px;
  overflow-x: clip;
  position: relative;
}

/* Left and right outer vertical lines */
.section-usecase-grid::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--container-max);
  pointer-events: none;
  z-index: 1;
  background-image:
    linear-gradient(to bottom, var(--color-grid-line-dark), var(--color-grid-line-dark)),
    linear-gradient(to bottom, var(--color-grid-line-dark), var(--color-grid-line-dark));
  background-size: 1px calc(100% - 80px), 1px calc(100% - 80px);
  background-position: 0% 0, 100% 0;
  background-repeat: no-repeat;
}

/* Closing line below grid 
.section-usecase-grid::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  border-bottom: 1px solid var(--color-grid-line-dark);
  pointer-events: none;
  z-index: 1;
}
*/

.section-usecase-grid .usecase-grid-wrap {
  position: relative;
  z-index: 1;
}

.usecase-grid-wrap {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

/* ----------------------------------------
   Card
   ---------------------------------------- */

.usecase-grid-card {
  position: relative;
  transition: opacity 0.35s ease, transform 0.35s ease;
  will-change: opacity, transform;
}

/* Horizontal line above each card — full viewport width */
.usecase-grid-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background-color: var(--color-grid-line-dark);
}

/* Center vertical divider */
.usecase-grid-card:nth-child(odd) {
  border-right: 1px solid var(--color-grid-line-dark);
}

/* Bottom line on last row */
.usecase-grid-card:nth-last-child(-n+2)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background-color: var(--color-grid-line-dark);
}

/* Filter animation states */
.usecase-grid-card.is-hiding {
  opacity: 0;
  transform: translateY(10px) scale(0.98);
}

.usecase-grid-card.is-hidden {
  display: none;
}

/* Title — max 2 righe con ellissi */
.usecase-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card inner — flex column, logo top, case-study-content margin-top:auto pushes to bottom */
.usecase-grid-card-inner {
  padding: var(--padding-card);
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 480px;
}
.usecase-grid-card-inner:hover {
  background-color: #141414;
}
/* CTA mobile — visibile solo su ≤768px */
.case-study-cta--mobile {
  display: none;
}

/* ----------------------------------------
   Responsive
   ---------------------------------------- */

@media (max-width: 768px) {
  .section-usecase-grid::after {
    left: var(--container-gutter);
    right: var(--container-gutter);
    transform: none;
    width: auto;
    max-width: none;
  }
  #usecase-technologies .usecase-tech-wrap {
    padding-left: calc(var(--container-gutter) * 2);
  }

  .usecase-grid-wrap {
    grid-template-columns: 1fr;
  }
.section-project-hero .project-hero-wrap::after {
  content:none;
}
  .usecase-grid-card-inner:hover {
    background-color: #141414;
  }
  .usecase-grid-card {
    padding-left: var(--container-gutter);
    padding-right: var(--container-gutter);
  }
  #usecase-technologies .grid-boundary, .usecase-tech-wrap.bg-hide-grid::before {
    display: none;
  }
  .usecase-grid-card:nth-child(odd) {
    border-right: none;
  }

  .usecase-grid-card-inner {
    padding: 40px var(--container-gutter);
    min-height: 300px;
  }

  .case-study-cta--mobile {
    display: flex;
    margin-top: 24px;
  }
}