/* ===========================================================================
 * Hauptstadt-Entsorger — Leistungen overview (page-services.php)
 *
 * Requires ui.css (tokens, .hp-section, .hp-container, .hp-head, .hp-btn) and
 * home.css (.hp-inline-cta), both declared as dependencies in functions.php.
 *
 * Contents
 *   1. Category nav
 *   2. Groups
 *   3. Cards
 *   4. Responsive
 * ========================================================================= */

/* The cards are white. .hp-section is white too, so without tinting the band
   the whole grid would read as a faint set of hairlines on nothing. */
.hp-svcs { background-color: var(--hp-tint); }

.hp-svcs__empty {
  max-width: 620px;
  margin: 0 auto;
  padding: 32px 24px;
  border: 1px dashed var(--hp-line);
  border-radius: var(--hp-radius);
  text-align: center;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--hp-body);
}

/* The sticky category bar that used to live here is gone. It floated over the
   grid on a translucent panel, and with the categories wrapping to two rows it
   was a large piece of furniture standing between the reader and the thing
   they came for. The group headings do the same job in place, and the ids on
   them still work as deep links.
   -------------------------------------------------------------------------- */

/* ------------------------------------------------------------- 2. Groups */
.hp-svcs__group + .hp-svcs__group { margin-top: clamp(40px, 4.4vw, 68px); }

/* Just the sticky site header to clear now. */
.hp-svcs__group { scroll-margin-top: 100px; }

.hp-svcs__group-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 clamp(18px, 2vw, 26px);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hp-line);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(20px, 2.2vw, 27px);
  line-height: 1.25;
  color: var(--hp-ink);
}

.hp-svcs__group-count {
  flex-shrink: 0;
  padding: 3px 11px;
  border-radius: 999px;
  background-color: var(--hp-green-tint);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.5;
  color: var(--hp-green);
}

/* -------------------------------------------------------------- 3. Tiles
 * One line each, four to a row. Same shape as the location tiles on Standorte
 * (.hp-loc-card), so the two index pages read as a pair.
 *
 * auto-fill with a 260px floor: the grid reflows on its own at every width
 * instead of needing a breakpoint per column count, and never strands a single
 * tile alone on the last row of a category. */
.hp-svcs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.hp-svcs__card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  overflow: hidden;
  border-radius: var(--hp-radius-sm);
  background-color: var(--hp-surface);
  border: 1px solid var(--hp-line);
  text-decoration: none;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

/* Green wash sliding in from the left on hover — the tile has no picture to
   react, so the surface itself does. */
.hp-svcs__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--hp-green-tint), transparent 72%);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.hp-svcs__card:hover {
  border-color: var(--hp-green);
  transform: translateY(-3px);
  box-shadow: var(--hp-shadow);
}

.hp-svcs__card:hover::before { opacity: 1; }

.hp-svcs__card:focus-visible {
  outline: 3px solid var(--hp-orange);
  outline-offset: 3px;
}

.hp-svcs__card-mark {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background-color: var(--hp-green-tint);
  color: var(--hp-green);
  transition: background-color 0.25s ease, color 0.25s ease;
}

.hp-svcs__card:hover .hp-svcs__card-mark {
  background-color: var(--hp-green);
  color: #fff;
}

/* Break at spaces and hyphens only. "Küche ausbauen und entsorgen" should wrap
   between words; "Sperrmüllentsorgung" must never be split mid-word. */
.hp-svcs__card-title {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--hp-ink);
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: manual;
  transition: color 0.25s ease;
}

.hp-svcs__card:hover .hp-svcs__card-title { color: var(--hp-green); }

.hp-svcs__card-arrow {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  color: var(--hp-orange);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.hp-svcs__card:hover .hp-svcs__card-arrow { opacity: 1; transform: none; }

/* --------------------------------------------------------- 4. Responsive */
@media (max-width: 1024px) {
  /* The desktop header is hidden below this width; the fixed mobile logo bar
     takes its place. */
  .hp-svcs__group { scroll-margin-top: calc(var(--he-mobile-header, 61px) + 20px); }
}

@media (max-width: 680px) {
  .hp-svcs__grid { grid-template-columns: minmax(0, 1fr); }

  /* Touch has no hover, so the arrow would never appear — show it always. */
  .hp-svcs__card-arrow { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hp-svcs__card { transition: none; }
  .hp-svcs__card:hover { transform: none; }
}