/* Front page: one sentence and a wall of big tiles. The tiles are the asked-for exception to "no card grids". */
.front { padding: 28px 0 44px; }
.front h1 {
  max-width: 19em;
  font-size: clamp(25px, 7.4vw, 30px);
  line-height: 1.14;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

/* What happens after a tap, in one quiet line under the promise. No figure (PRODUCT.md principle 5). */
.front-steps { max-width: 46em; margin-top: 10px; color: var(--muted); font-size: 15px; line-height: 1.4; text-wrap: pretty; }

.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.tile {
  --tile-pad: 14px;
  display: flex;
  flex-direction: column;
  aspect-ratio: 1 / 1;
  padding: var(--tile-pad);
  border-radius: 8px;
  overflow: hidden;
}
.tile-glyph {
  display: block;
  flex: none;
  align-self: flex-start;
  width: auto;
  height: 54%;
  aspect-ratio: 1 / 1;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tile-glyph * { vector-effect: non-scaling-stroke; }
.tile-text { display: block; margin-top: auto; }
.tile-name {
  display: block;
  font-size: clamp(14px, 4.05vw, 17px);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.012em;
}
.tile-state { display: block; margin-top: 3px; font-size: 13px; font-weight: 500; line-height: 16px; }

/* A tile that opens is dark, like the top of the page it opens. The name leads; the action word is quieter, so the
   tiles read as names and not as "Arvuta" over and over. The heat pump's air is the only colour on the page. */
.tile-live {
  background: var(--night);
  color: #f5f5f7;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.2s ease, transform 0.12s ease;
}
.tile-live .g-air { stroke: var(--cold); transition: transform 0.35s ease; }
.tile-live .tile-state { color: #a1a1a6; transition: color 0.2s ease; }
.tile-arrow { display: inline-block; margin-left: 4px; transition: transform 0.2s ease; }
.tile-live:focus-visible { outline: 3px solid var(--cold); outline-offset: 2px; }
.tile-live:active { transform: scale(0.985); background: #2c2c2e; }
.tile-live:active .tile-state { color: #f5f5f7; }
@media (hover: hover) {
  .tile-live:hover { background: #2c2c2e; }
  .tile-live:hover .tile-state { color: #f5f5f7; }
  .tile-live:hover .tile-arrow { transform: translateX(4px); }
  .tile-live:hover .g-air { transform: translateY(3px); }
}

/* Plainly not available: flat, quiet, no pointer and no reaction. */
.tile-soon { background: var(--soft); color: var(--muted); cursor: default; }
.tile-soon .tile-glyph { stroke: #86868b; }
.tile-soon .tile-name { color: #48484a; font-weight: 500; }

/* The name gets the room it needs at the smallest widths. */
@media (max-width: 360px) {
  :root { --gutter: 14px; }
  .tile { --tile-pad: 10px; }
  .tile-name { font-size: 14px; letter-spacing: -0.025em; } /* "Nõudepesumasinad" is one word and fits at 320. */
  .tile-glyph { height: 48%; }
}

@media (min-width: 768px) {
  .front { padding: 52px 0 88px; }
  .front h1 { font-size: 52px; line-height: 1.08; letter-spacing: -0.03em; }
  .front-steps { margin-top: 14px; font-size: 17px; }
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
  .tile { --tile-pad: clamp(14px, 2.05vw, 20px); border-radius: 10px; }
  .tile-glyph { height: 50%; stroke-width: 2.6; }
  .tile-name { font-size: clamp(16px, 2.05vw, 20px); line-height: 1.12; letter-spacing: -0.02em; }
  .tile-state { margin-top: 4px; font-size: clamp(13px, 1.55vw, 15px); line-height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .tile-live, .tile-arrow, .tile-live .g-air, .tile-live .tile-state { transition: none; }
  .tile-live:active { transform: none; }
  .tile-live:hover .tile-arrow, .tile-live:hover .g-air { transform: none; }
}