/* ?? PROJECTS ????????????????????????????????????????? */

#projects {
  padding-top: 60px;
  scroll-margin-top: 120px;
}

.alle-projects { padding: 0 0 80px; }

.projects-mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 260px 200px;
  gap: 3px;
  width: 100%;
  padding: 0 clamp(16px, 3vw, 48px); /* <- adicionar isso */
}

/* posicionamento de cada card no grid de 12 colunas */
.mc-featured { grid-column: 1 / 6;  grid-row: 1; }
.mc-b        { grid-column: 6 / 9;  grid-row: 1; }
.mc-c        { grid-column: 9 / 13; grid-row: 1; }
.mc-d        { grid-column: 1 / 4;  grid-row: 2; }
.mc-e        { grid-column: 4 / 8;  grid-row: 2; }
.mc-f        { grid-column: 8 / 11; grid-row: 2; }
.mc-g        { grid-column: 11/ 13; grid-row: 2; }

.mosaic-card {
  position: relative;
  overflow: hidden;
  display: block;
  background: var(--paper-dark);
  text-decoration: none;
}

.mosaic-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}

.mosaic-card:hover .mosaic-img { transform: scale(1.05); }

.mosaic-overlay {
  position: absolute; inset: 0;
  background: rgba(26,26,46,0.78);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex; flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
}

.mosaic-card:hover .mosaic-overlay { opacity: 1; }

.mosaic-title {
  color: var(--ink);
  font-size: 1rem;
  margin-bottom: 6px;
}

.mosaic-tags { display: flex; gap: 4px; flex-wrap: wrap; }

.tag {
  border: 1px solid var(--blue-light);
  color: var(--blue);
  padding: 2px 8px;
  font-size: 0.78rem;
  font-family: "Schoolbell", cursive;
}

.mosaic-badge {
  position: absolute; top: 10px; left: 10px;
  background: rgba(37,99,168,0.85);
  color: var(--paper);
  font-size: 0.65rem;
  padding: 2px 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  pointer-events: none;
}

/* placeholder quando n?o h? imagem */
.mosaic-card::before {
  content: attr(aria-label);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  text-transform: uppercase;
  pointer-events: none;
}

/* ?? RESPONSIVE ??????????????????????????????????????? */
@media (max-width: 767.98px) {
  .projects-mosaic {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(4, 160px);
  }

  .mc-featured { grid-column: 1 / 3; grid-row: 1; }
  .mc-b        { grid-column: 1 / 2; grid-row: 2; }
  .mc-c        { grid-column: 2 / 3; grid-row: 2; }
  .mc-d        { grid-column: 1 / 2; grid-row: 3; }
  .mc-e        { grid-column: 2 / 3; grid-row: 3; }
  .mc-f        { grid-column: 1 / 2; grid-row: 4; }
  .mc-g        { grid-column: 2 / 3; grid-row: 4; }
}


/* 
     ______                                                             __ 
   _/      \_                                                          |  \
  /   $$$$$$ \    _______  ________  __    __  ______   _______    ____| $$
 /  $$$____$$$\  /       \|        \|  \  /  \|      \ |       \  /      $$
|  $$/     \ $$\|  $$$$$$$ \$$$$$$$$ \$$\/  $$ \$$$$$$\| $$$$$$$\|  $$$$$$$
| $$|  $$$$$| $$ \$$    \   /    $$   >$$  $$ /      $$| $$  | $$| $$  | $$
| $$| $$| $$| $$ _\$$$$$$\ /  $$$$_  /  $$$$\|  $$$$$$$| $$  | $$| $$__| $$
| $$ \$$  $$| $$|       $$|  $$    \|  $$ \$$\\$$    $$| $$  | $$ \$$    $$
 \$$\ \$$$$$$$$  \$$$$$$$  \$$$$$$$$ \$$   \$$ \$$$$$$$ \$$   \$$  \$$$$$$$
  \$$\ __/   \                                                             
   \$$$    $$$                                                             
     \$$$$$$    */