/* Service cards — rid-energy.uz
 *
 * Loaded after refinement.css, so it can retire the rules below without
 * editing that file.
 *
 * What was wrong, and why this is a rebuild rather than a tweak:
 *
 *   1. A permanent 2px rule sat under every card's title. It marked nothing —
 *      not a boundary, not a state, not a group — so it read as debris.
 *   2. The card was `bg-transparent` with a black title, sitting on a dark
 *      section. That contradiction was patched with four separate `!important`
 *      colour declarations in styles.css.
 *   3. Hover recoloured only the title block, so the card did not respond —
 *      a detached rectangle lit up underneath a photograph that ignored it.
 *
 * The fix is structural. The card becomes ONE photographic tile with its
 * caption inside, over a scrim. There is no separate light body to fight the
 * dark ground, so the !important chain has nothing left to correct, and hover
 * now applies to the whole surface.
 *
 * The rule survives, but earns its place: instead of decorating every card
 * permanently it wipes across the base of the card being pointed at. In a
 * business that builds switchgear, a rail lighting up is the right signal for
 * "this one is live", and it is the only moving part.
 */

.services-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 20px;
}

.svc {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 4px;
  background: #0b1218;
  text-decoration: none;
  isolation: isolate;
  transition: transform .28s cubic-bezier(.2, .7, .3, 1),
              box-shadow .28s ease;
}

.svc__shot {
  display: block;
  /* Fixed ratio: uploads arrive at whatever size the admin had to hand, and
     without this the row heights stagger — the same uniformity problem the
     partner logos have, solved the same way. */
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.svc__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.001);            /* kills the 1px edge crawl on scale */
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}

/* The scrim is functional, not decoration: it is what makes white type legible
   over an unpredictable photograph. Sized to the caption, not the whole tile,
   so the image is not needlessly dimmed. */
.svc__label {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: flex-end;
  min-height: 52%;
  padding: 22px 20px 20px;
  background: linear-gradient(to top,
              rgba(6, 11, 15, .92) 0%,
              rgba(6, 11, 15, .72) 38%,
              rgba(6, 11, 15, 0) 100%);
  transition: background .28s ease;
}

.svc__title {
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -.01em;
  text-wrap: balance;
}

/* The live rail. Zero width at rest — nothing is drawn until the card is
   actually being pointed at. */
.svc::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: #0066ff;
  transition: width .38s cubic-bezier(.2, .7, .3, 1);
  z-index: 2;
}

.svc:hover,
.svc:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px -12px rgba(0, 0, 0, .7);
  outline: none;
}
.svc:hover .svc__shot img,
.svc:focus-visible .svc__shot img { transform: scale(1.05); }

.svc:hover .svc__label,
.svc:focus-visible .svc__label {
  background: linear-gradient(to top,
              rgba(4, 9, 13, .95) 0%,
              rgba(4, 9, 13, .78) 42%,
              rgba(4, 9, 13, .08) 100%);
}

.svc:hover::after,
.svc:focus-visible::after { width: 100%; }

/* Keyboard users get a ring as well — the rail alone is a hover affordance
   and too subtle to serve as the only focus indicator. */
.svc:focus-visible { box-shadow: 0 0 0 3px #0066ff, 0 16px 34px -12px rgba(0, 0, 0, .7); }

@media (max-width: 575px) {
  .services-wall { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
  .svc__label { padding: 18px 16px 16px; min-height: 56%; }
  .svc__title { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .svc, .svc__shot img, .svc__label, .svc::after { transition: none; }
  .svc:hover { transform: none; }
}

/* ── retiring the old card ──────────────────────────────────────────────
   The orphan rule from refinement.css, and the transparent-body/black-text
   contradiction it sat on. Scoped to the two places service cards appear so
   nothing else that uses .card-style01 is disturbed. */
.services-wall .card-style01 .card-body,
#services-grid .card-style01 .card-body { border-bottom: 0; }