/* ==========================================================================
   Textum Media — services.css
   Page-only layout for /services. Loaded after site.css.
   Everything else on this page uses shared components from site.css.
   ========================================================================== */


/* --- The three editorial service blocks ---------------------------------
   Three <article>s inside one .section, separated by a container-width
   hairline. site.css has no "sibling blocks divided by a rule" primitive
   (.rows and .steps are link/step lists, not full editorial blocks), so the
   separator and rhythm live here.
   ------------------------------------------------------------------------ */

.svc {
  /* The header is sticky; jump-links must not land under it. */
  scroll-margin-top: calc(var(--nav-h) + var(--space-4));
}

.svc + .svc {
  margin-top: var(--space-9);
  padding-top: var(--space-9);
  border-top: 1px solid var(--rule);
}

/* Tags read as one tight cluster, matching .rows__tags on the home page. */
.svc__tags {
  --cluster-space: var(--space-1);
}

/* --- A piece of the portfolio beside each service -----------------------
   The page is otherwise three long columns of type. Each block carries one
   screenshot from the concept sites, captioned so it reads as an example of
   the studio's work rather than as an illustration of the service itself.
   ------------------------------------------------------------------------ */

/* Beats .stack's own child spacing (two classes to one). */
.svc__head .svc__media {
  margin-top: var(--space-4);
}

.svc__media {
  position: relative;
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--rule);
  background-color: var(--accent-soft);
  transition: border-color var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

.svc__media:hover,
.svc__media:focus-within {
  border-color: var(--accent);
  transform: translateY(-3px);
}

/* The lift is decoration; the card must not move for anyone who asked it
   not to. Matches the .pf-card treatment in site.css. */
@media (prefers-reduced-motion: reduce) {
  .svc__media,
  .svc__media:hover,
  .svc__media:focus-within {
    transform: none;
    transition: none;
  }
}

.svc__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
}

/* Each screenshot links to the live demo it was taken from. An empty
   overlay anchor rather than wrapping the figure's contents: figcaption is
   only valid as the first or last child of a figure, so wrapping it inside
   an <a> would break that. Stretching the anchor over the whole figure
   (position: relative above) keeps one hit target without touching the
   figcaption's position in the DOM. The caption already names the site, so
   the link borrows that text as its accessible name via aria-labelledby
   instead of repeating it. */
.svc__media-link {
  position: absolute;
  inset: 0;
  z-index: var(--z-raised);
  cursor: pointer;
}

.svc__cap {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 10px var(--space-2);
  border-top: 1px solid var(--rule);
  background-color: var(--surface-card);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-mono);
  color: var(--fg-2);
}

/* The in-page jump list under the page title. */
.svc-jump {
  --cluster-space: var(--space-3);
  padding-top: var(--space-1);
}

@media (min-width: 901px) {
  /* Alternating asymmetry: every second block mirrors the grid, head on the
     right. Both children are pinned to row 1 so the heading can stay first
     in the DOM while sitting in a later column. */
  .svc--flip .svc__head,
  .svc--flip .svc__body {
    grid-row: 1;
  }

  .svc__head {
    align-self: start;
    position: sticky;
    top: calc(var(--nav-h) + var(--space-5));
  }
}