/* wellsdevops.ca — /domains
 *
 * Served as /wd-domains.css, linked only from the domains page and loaded after
 * wd-mobile-fixes.css. The page reuses the /work markup (.work-index /
 * .work-row) so it inherits the reveal wipe, the hover rail and the connector
 * animation for free; everything here is the delta a 16-row index needs:
 * smaller type, shorter rows, a descriptor line, and reveal delays past the
 * third row (the base stylesheet only staggers rows 1-3).
 *
 * Selectors are deliberately two classes deep (.domain-index .domain-row h2)
 * so they outrank .work-row h2 in wd-mobile-fixes.css regardless of media
 * query or source order.
 */

/* ---------------- intro / disclosure ---------------- */

.domains-intro {
  border-bottom: 1px solid var(--rule);
  margin-left: .65rem;
  margin-right: .65rem;
  padding: clamp(2.6rem, 5vw, 4.4rem) 3.8vw clamp(2.2rem, 4vw, 3.2rem);
  display: grid;
  gap: 1.15rem;
}

.domains-intro p {
  color: var(--muted);
  font-size: clamp(.95rem, 1.05vw, 1.1rem);
  line-height: 1.68;
  margin: 0;
  max-width: 48rem;
}

.domains-intro a {
  color: var(--signal);
  text-underline-offset: .25em;
  text-decoration-thickness: 1px;
}

.domains-meta {
  color: var(--quiet);
  display: flex;
  flex-wrap: wrap;
  font-size: .7rem;
  font-weight: 600;
  gap: .55rem 1.6rem;
  letter-spacing: .2em;
  list-style: none;
  margin: .6rem 0 0;
  padding: 0;
  text-transform: uppercase;
}

/* ---------------- the index ---------------- */

.domain-index .domain-row {
  gap: 1.5rem;
  min-height: clamp(92px, 10.5vw, 140px);
}

/* A capture of each published site sits beneath its own index row. Keeping
   the image in a separate layer leaves the text and existing hover rail crisp. */
.domain-index .domain-banner {
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background-image: var(--banner-image);
  background-position: center 32%;
  background-size: cover;
  opacity: .1;
  filter: blur(5px) saturate(.9);
  transform: scale(1.025);
}

.domain-index .domain-row h2 {
  font-size: clamp(1.1rem, 2.9vw, 2.3rem);
  letter-spacing: -.025em;
  line-height: 1.06;
  overflow-wrap: break-word;
  text-transform: none;
}

.domain-index .work-title-group {
  gap: .42rem;
}

.domain-index .domain-trade {
  color: var(--muted);
  font-size: clamp(.8rem, .95vw, .95rem);
  line-height: 1.45;
}

.domain-index .work-destination {
  font-size: .64rem;
}

.domain-index .work-connector i {
  height: 1.75rem;
}

/* ---------------- reveal stagger past row three ---------------- */
/* The base sheet delays rows 2 and 3 only; without these the remaining
   thirteen rows all wipe in at once. 58ms apart, capped so the tail of the
   list is not still arriving long after it is on screen. */

.motion-ready .domain-index .domain-row:nth-child(4)  { transition-delay: .232s }
.motion-ready .domain-index .domain-row:nth-child(5)  { transition-delay: .29s }
.motion-ready .domain-index .domain-row:nth-child(6)  { transition-delay: .348s }
.motion-ready .domain-index .domain-row:nth-child(7)  { transition-delay: .406s }
.motion-ready .domain-index .domain-row:nth-child(8)  { transition-delay: .464s }
.motion-ready .domain-index .domain-row:nth-child(9)  { transition-delay: .522s }
.motion-ready .domain-index .domain-row:nth-child(10) { transition-delay: .58s }
.motion-ready .domain-index .domain-row:nth-child(n+11) { transition-delay: .62s }

@media (prefers-reduced-motion: reduce) {
  .motion-ready .domain-index .domain-row { transition-delay: 0s !important }
}

/* ---------------- small screens ---------------- */

@media (max-width: 900px) {
  .domains-intro {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

@media (max-width: 560px) {
  .domain-index .domain-row {
    gap: 1rem;
    min-height: 84px;
  }
  .domain-index .domain-row h2 {
    /* 4.4vw keeps the longest name (bathroomrenovationsottawa.ca) on one line
       from 375 up; below that it breaks at the <wbr> before the TLD instead of
       mid-word. Measured at 320 / 360 / 375 / 414. */
    font-size: clamp(.95rem, 4.4vw, 1.5rem);
  }
  /* the connector strip is already hidden by the site's own small breakpoint */
  .domains-meta {
    gap: .4rem 1.1rem;
    font-size: .62rem;
    letter-spacing: .14em;
  }
}