/* ==========================================================================
   KOVAIBUILD — Tiles Work page
   --------------------------------------------------------------------------
   Loads after css/style.css and css/service-page.css. Everything the page
   shares with the other service pages lives in service-page.css; this file
   holds only what is specific to Tiles Work.
   ========================================================================== */

:root {
  /* >> CHANGE THIS PAGE'S BACKGROUND IMAGES HERE */
  --ssc-svc-img-why: url("../assets/tiles/tiles-06-outdoor-slate.webp");
  --ssc-svc-img-cta: url("../assets/tiles/tiles-06-outdoor-slate.webp");
}


/* ==========================================================================
   TILE TYPES / APPLICATIONS (this page only)
   ========================================================================== */
.ssc-tiles-spaces {
  padding-block: var(--ssc-section-y, 96px);
  background: var(--ssc-white, #fff);
}
.ssc-tiles-spaces__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 0; padding: 0; list-style: none;
}
.ssc-tiles-space {
  display: flex; flex-direction: column;
  border: 1px solid var(--ssc-border, #e3e3df);
  border-radius: var(--ssc-radius-lg, 22px);
  overflow: hidden;
  background: var(--ssc-paper, #f7f7f5);
  transition: transform .22s var(--ssc-ease, ease), box-shadow .22s var(--ssc-ease, ease),
              border-color .22s var(--ssc-ease, ease);
}
.ssc-tiles-space:hover {
  transform: translateY(-6px);
  border-color: rgba(0,127,136,.42);
  box-shadow: var(--ssc-shadow-md, 0 14px 34px rgba(17,17,20,.09));
}
.ssc-tiles-space__media { overflow: hidden; background: var(--ssc-paper-2, #eeeeec); }
.ssc-tiles-space__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .55s var(--ssc-ease, ease);
}
.ssc-tiles-space:hover .ssc-tiles-space__media img { transform: scale(1.06); }

.ssc-tiles-space__body { padding: 24px 24px 28px; }
.ssc-tiles-space__body h3 {
  margin: 0 0 8px;
  font-size: 19px;
}
.ssc-tiles-space__body p {
  margin: 0;
  font-size: 14.5px; line-height: 1.65;
  color: var(--ssc-text-muted, #5c6168);
}

/* --- Responsive --- */
@media (max-width: 1100px) { .ssc-tiles-spaces__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) {
  .ssc-tiles-spaces__grid { grid-template-columns: 1fr; }
  .ssc-tiles-space__body { padding: 20px 20px 24px; }
}
@media (prefers-reduced-motion: reduce) { .ssc-tiles-space__media img { transition: none; } }