/* ==========================================================================
   KOVAIBUILD — Painting 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 Painting Work.
   ========================================================================== */

:root {
  /* >> CHANGE THIS PAGE'S BACKGROUND IMAGES HERE */
  --ssc-svc-img-why: url("../assets/painting/painting-02-exterior-ladder.webp");
  --ssc-svc-img-cta: url("../assets/hero/hero-03-painting-exterior.webp");
}


/* ==========================================================================
   COLOUR FEATURE (this page only)
   ========================================================================== */
.ssc-painting-colour {
  padding-block: var(--ssc-section-y, 96px);
  background: var(--ssc-paper, #f7f7f5);
}
.ssc-painting-colour__grid {
  display: grid;
  grid-template-columns: 52fr 48fr;
  gap: clamp(34px, 5vw, 72px);
  align-items: center;
}
.ssc-painting-colour__content { min-width: 0; }
.ssc-painting-colour__text {
  max-width: 50ch;
  margin: 0 0 30px;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.75;
  color: var(--ssc-text-muted, #5c6168);
}

/* Palette — neutral, warm, deliberately restrained */
.ssc-painting-palette {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}
.ssc-painting-palette li {
  display: flex; flex-direction: column; gap: 9px;
  min-width: 0;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--ssc-text-muted, #5c6168);
}
.ssc-painting-swatch {
  display: block;
  height: 62px;
  border-radius: 10px;
  background: var(--ssc-swatch, #ddd);
  border: 1px solid rgba(17,17,20,.08);
  box-shadow: inset 0 -18px 24px rgba(0,0,0,.06);
  transition: transform .24s var(--ssc-ease, ease), box-shadow .24s ease;
}
.ssc-painting-palette li:hover .ssc-painting-swatch {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(17,17,20,.14), inset 0 -18px 24px rgba(0,0,0,.06);
}

.ssc-painting-colour__note {
  margin: 0;
  max-width: 52ch;
  font-size: 14.5px; line-height: 1.7;
  color: var(--ssc-text-muted, #5c6168);
  padding-left: 16px;
  border-left: 2px solid var(--ssc-gold, #007f88);
}

.ssc-painting-colour__media { margin: 0; min-width: 0; }
.ssc-painting-colour__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: linear-gradient(150deg, #2c2e35, #14151a);
  border-radius: var(--ssc-radius-lg, 22px);
  box-shadow: var(--ssc-shadow-lg, 0 28px 70px rgba(17,17,20,.16));
}

/* --- Responsive --- */
@media (max-width: 1100px) {
  .ssc-painting-palette { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ssc-painting-colour__grid { grid-template-columns: 1fr; }
  .ssc-painting-colour__media { order: -1; }
  .ssc-painting-colour__media img { aspect-ratio: 16 / 9; }
  .ssc-reveal.ssc-svc-from-left,
  .ssc-reveal.ssc-svc-from-right { transform: translateY(26px); }
}
@media (max-width: 767px) {
  .ssc-painting-palette { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .ssc-painting-swatch { height: 50px; }
}
@media (max-width: 400px) {
  .ssc-painting-palette { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .ssc-painting-swatch { transition: none; }
}