/* =========================================================
   ARCA SCREENSHOT GALLERY
   Compact gallery designed to fit inside the stacked
   technology section layout.
   ========================================================= */

.arca-product-proof__intro {
  display: grid;
  grid-template-columns:
    minmax(16rem, 0.8fr)
    minmax(0, 1.2fr);

  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;

  margin-top: 2rem;
}

.arca-product-proof__intro h2 {
  max-width: 12ch;
  margin: 0;
}

.arca-product-proof__intro .lead {
  max-width: 44rem;
  margin: 0;
}


/* =========================================================
   HINT
   ========================================================= */

.arca-gallery-hint {
  margin:
    clamp(2rem, 4vw, 3rem)
    0
    1rem;

  color: var(--text-muted);

  font-size: 0.85rem;
  line-height: 1.5;
}


/* =========================================================
   5 SCREENSHOTS — ONE ROW
   ========================================================= */

.arca-thumb-grid {
  display: grid !important;

  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  gap: 0.9rem;

  width: 100%;
  margin: 0;

  overflow: visible;
}


/* =========================================================
   CARD
   ========================================================= */

.arca-thumb {
  display: block;

  min-width: 0;

  color: var(--text);
  text-decoration: none;

  border:
    1px solid
    var(--line);

  background:
    var(--bg);

  overflow: hidden;

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.arca-thumb:hover {
  transform:
    translateY(-3px);

  border-color:
    var(--accent);

  box-shadow:
    0 1rem 2rem
    rgba(0, 0, 0, 0.08);
}

.arca-thumb:focus-visible {
  outline:
    2px solid
    var(--accent);

  outline-offset:
    3px;
}


/* =========================================================
   SCREENSHOT
   ========================================================= */

.arca-thumb__image {
  display: block;

  width: 100%;

  overflow: hidden;

  border-bottom:
    1px solid
    var(--line);

  background:
    #f7f7f7;
}

.arca-thumb__image img {
  display: block;

  width: 100%;

  height: 105px;

  object-fit: cover;
  object-position: top center;

  transition:
    transform 220ms ease;
}

.arca-thumb:hover
.arca-thumb__image img {
  transform:
    scale(1.035);
}


/* =========================================================
   CAPTION
   ========================================================= */

.arca-thumb__meta {
  display: flex;

  gap: 0.55rem;

  align-items: baseline;

  padding:
    0.65rem
    0.7rem
    0.75rem;
}

.arca-thumb__number {
  flex: 0 0 auto;

  color:
    var(--accent);

  font-size:
    0.62rem;

  font-weight:
    700;

  letter-spacing:
    0.08em;
}

.arca-thumb__meta strong {
  min-width: 0;

  font-size:
    0.74rem;

  line-height:
    1.3;

  font-weight:
    600;
}


/* =========================================================
   CTA
   ========================================================= */

.arca-product-proof__action {
  margin-top:
    1.5rem;
}


/* =========================================================
   SMALLER DESKTOP / TABLET
   ========================================================= */

@media (max-width: 1100px) {

  .arca-thumb-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  .arca-thumb__image img {
    height: 100px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 800px) {

  .arca-product-proof__intro {
    grid-template-columns:
      1fr;

    gap:
      1.25rem;
  }

  .arca-thumb-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:
      0.8rem;
  }

  .arca-thumb__image img {
    height:
      120px;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 520px) {

  .arca-thumb-grid {
    grid-template-columns:
      1fr;
  }

  .arca-thumb__image img {
    height:
      160px;
  }

}


/* =========================================================
   DARK MODE
   ========================================================= */

html[data-theme="dark"]
.arca-thumb__image {
  background:
    #111;
}