/* Hallmark · genre: modern-minimal · macrostructure: Diretório de aplicações (abertura só com texto e grade de cartões com foto) · design-system: design.md
 * Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4
 *
 * Página "Aplicações do laser na produção" (/reb/aplicacoes/). O HTML e os textos são os do protótipo original,
 * sem alteração. Este arquivo soma ao rb-site.css só a grade de aplicações.
 */

/* ---------- Grade de aplicações ---------- */

.application-directory {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-md);
  padding: var(--space-xl) var(--pad) var(--space-section);
  background: var(--color-paper-2);
}

.application-directory > section {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-bottom: var(--space-md);
  overflow: hidden;
  background: var(--color-paper);
  border-radius: var(--radius-md);
  transition:
    transform var(--dur-short) var(--ease-out),
    box-shadow var(--dur-short) var(--ease-out);
}

/* Fio laranja que se desenha no topo do cartão */
.application-directory > section::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 0.1875rem;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-med) var(--ease-out);
}

.application-card-photo > a {
  display: block;
  overflow: hidden;
  border-bottom: var(--rule) solid var(--color-rule);
}

.application-directory .pdf-visual img {
  border: 0;
  border-radius: 0;
  transition: scale var(--dur-long) var(--ease-out);
}

.application-directory .pdf-visual figcaption {
  margin-top: var(--space-xs);
  padding-inline: var(--space-md);
  font-size: var(--text-xs);
}

.application-directory h2 {
  margin-top: var(--space-sm);
  padding-inline: var(--space-md);
  font-size: var(--text-xl);
  line-height: 1.1;
}

.application-directory h2 a {
  text-decoration: none;
  transition: color var(--dur-short) var(--ease-out);
}

/* Materiais e variações: etiquetas em linha */
.application-directory ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin: var(--space-sm) 0 0;
  padding: 0 var(--space-md);
  list-style: none;
}

.application-directory li {
  padding: var(--space-3xs) var(--space-xs);
  border: var(--rule) solid var(--color-rule);
  border-radius: var(--radius-pill);
  color: var(--color-ink-2);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
}

.application-directory section > p {
  margin-top: var(--space-sm);
  padding-inline: var(--space-md);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  line-height: 1.5;
}

@media (hover: hover) {
  .application-directory > section:hover {
    box-shadow: var(--shadow-lift);
    transform: translateY(-0.25rem);
  }

  .application-directory > section:hover::after {
    transform: none;
  }

  .application-directory > section:hover img {
    scale: 1.045;
  }

  .application-directory h2 a:hover {
    color: var(--color-accent-deep);
  }
}

.application-directory > section:focus-within::after {
  transform: none;
}

/* ---------- Telas médias e celular ---------- */

@media (max-width: 1000px) {
  .application-directory {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .application-directory {
    grid-template-columns: minmax(0, 1fr);
    padding-top: var(--space-lg);
  }
}

/* O link que fecha a página é comprido: segue em uma linha só, com letra um pouco menor nos celulares estreitos */
.application-directory ~ .revision-section > .text-link {
  white-space: nowrap;
}

@media (max-width: 420px) {
  .application-directory ~ .revision-section > .text-link {
    font-size: min(var(--text-sm), 3.55vw);
  }
}