/* pithart — landing page: full-viewport project mosaic */

.mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: clamp(160px, 28vh, 320px);
  grid-auto-flow: dense;
  gap: 10px;
  padding: 10px;
}

.tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 1.1rem;
  overflow: hidden;
  border-radius: 10px;
}

/* black bottom gradient so the white name stays readable on any gradient */
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 55%);
  pointer-events: none;
}

.tile-name {
  position: relative;
  z-index: 1;
  color: #fff;
  font-weight: 800;
  font-size: clamp(1.1rem, 1.6vw, 1.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* image tiles (real projects) — cover photo, yellow fallback while loading */
.tile--citrus {
  text-decoration: none;
  background: var(--yellow);
}

.tile--buta {
  text-decoration: none;
  background: var(--red);
}

.tile--betzone90 {
  text-decoration: none;
  background: #0d443f;
}

.tile--golden90 {
  text-decoration: none;
  background: #ffc838;
}

.tile--keyten {
  text-decoration: none;
  background: #00e6c8;
}

.tile--bnp {
  text-decoration: none;
  background: #0d3b3b;
}

.tile--lezzetli {
  text-decoration: none;
  background: #b71c1c;
}

.tile--freqat {
  text-decoration: none;
  background: #14264c;
}

.tile--eticket {
  text-decoration: none;
  background: #f5c518;
}

.tile--redclaw {
  text-decoration: none;
  background: #c62828;
}

.tile--citrus img,
.tile--buta img,
.tile--betzone90 img,
.tile--golden90 img,
.tile--keyten img,
.tile--bnp img,
.tile--lezzetli img,
.tile--freqat img,
.tile--eticket img,
.tile--redclaw img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Tile sizes on the 6-col grid — one hand-composed arrangement where column
   edges almost never align between rows (artlebedev-style irregularity).
   cN = span N columns, r2 = span 2 rows. */

.tile--c2 { grid-column: span 2; }
.tile--c3 { grid-column: span 3; }
.tile--c4 { grid-column: span 4; }
.tile--c6 { grid-column: span 6; }
.tile--r2 { grid-row: span 2; }

/* one gradient per project, drawn from the accent palette plus deeper tones */

.tile--rodina {
  background:
    radial-gradient(circle at 30% 20%, var(--orange), transparent 60%),
    linear-gradient(135deg, var(--red) 0%, #6e1f2a 100%);
}

.tile--smirnov {
  background:
    radial-gradient(circle at 70% 30%, var(--periwinkle), transparent 55%),
    linear-gradient(160deg, #4a5390 0%, #1c2140 100%);
}

.tile--nordwind {
  background: linear-gradient(120deg, var(--periwinkle) 0%, var(--purple) 55%, #2f2450 100%);
}

.tile--kaffeewerk {
  background:
    radial-gradient(circle at 80% 15%, var(--yellow), transparent 50%),
    linear-gradient(150deg, var(--orange) 0%, #8a4a1f 100%);
}

.tile--betabank {
  background:
    radial-gradient(circle at 20% 80%, rgba(242, 201, 76, 0.7), transparent 50%),
    linear-gradient(140deg, var(--olive) 0%, #3f4711 100%);
}

.tile--volga {
  background: linear-gradient(160deg, var(--gray) 0%, #2b2b2b 100%);
}

.tile--strelka {
  background:
    radial-gradient(circle at 80% 20%, rgba(242, 201, 76, 0.55), transparent 55%),
    linear-gradient(135deg, var(--purple) 0%, #241a3d 100%);
}

.tile--mesto {
  background: linear-gradient(135deg, var(--yellow) 0%, var(--orange) 45%, var(--red) 100%);
}

.tile--dobro {
  background:
    radial-gradient(circle at 25% 25%, rgba(224, 138, 76, 0.5), transparent 60%),
    linear-gradient(160deg, var(--olive) 0%, #55601c 100%);
}

.tile--kvartal {
  background: linear-gradient(135deg, var(--red) 0%, var(--purple) 100%);
}

@media (max-width: 900px) {
  .mosaic {
    grid-template-columns: repeat(2, 1fr);
  }

  /* the two banners go full-width, everything else falls back to one cell */
  .tile--c4,
  .tile--c6 {
    grid-column: span 2;
  }

  .tile--c2,
  .tile--c3,
  .tile--r2 {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 560px) {
  .mosaic {
    grid-template-columns: 1fr;
  }

  .tile--c2,
  .tile--c3,
  .tile--c4,
  .tile--c6,
  .tile--r2 {
    grid-column: auto;
    grid-row: auto;
  }
}