/* service.css — task H7: /services (R13) and /services/<slug> (R14).
   The markup is the template's Careers page (jobs root) and Article detail page (article root),
   lifted verbatim; framer.css styles it. This file only holds the changes the brief asks for. */

/* ---- Service cards (/services and the "other services" block) ------------------------------
   The Careers card is a fixed 640px box sized for job meta (salary, type, requirements). With
   only a title + summary it becomes a tall empty box, so the height follows the content; the
   grid (framer-mmrfch: 3 / 2 / 1 columns, 12px gaps) still equalises each row, and the CTA stays
   pinned bottom-right as on Careers. */
.hwg-service-card.framer-1jvoi83 {
  height: auto;
  align-self: stretch;
  gap: 72px;
}
@media (max-width: 809.98px) {
  .hwg-service-card.framer-1jvoi83 { gap: 48px; }
}
/* The Careers link never wraps ("Apply for this job" is short). The longest service cta ("See what
   we build on Shopify Plus", 257px) is wider than a 1-column phone card's content box below ~340px
   (240px at 320), where it pushed into the card padding and, at 300, out of the card. The link's
   wrapper (.framer-2e1lo2-container) shrinks to fit the link, so the cap has to be on the wrapper
   too; the label then wraps inside the card. From 340px up every cta fits on one line, unchanged. */
.hwg-service-card .framer-2e1lo2-container {
  max-width: 100%;
  min-width: 0;
}
.hwg-service-card .framer-6KNax.framer-1rizp51 {
  width: max-content;
  max-width: 100%;
}
.hwg-service-card .framer-6KNax .framer-17par0r {
  white-space: normal;
  flex: 0 1 auto;
  min-width: 0;
}
.hwg-service-card .framer-6KNax p.framer-text {
  text-wrap: balance; /* no single-word second line when it does wrap */
}

/* The side paragraph is bottom-aligned in the header and both of its boxes clip, which cut the
   last device-pixel row of the descenders ("p" in "proud"). Nothing there needs clipping. */
[data-section="services-index"] :is(.framer-11geqx6, .framer-nr1imq) {
  overflow: visible;
}

/* ---- Service detail ----------------------------------------------------------------------
   The article's details content is a 3-column grid: text in column 1 (max 600px), a sticky
   image in columns 2–3. The image is removed (R14), so the text spans the full content width. */
[data-section="service-detail"] .framer-ts0pl2 {
  grid-column: 1 / -1;
  padding-right: 0; /* the 36px gutter separated the text from the image column */
}
[data-section="service-detail"] .framer-1foacoo {
  max-width: none;
}
/* With the image column gone the sub-service paragraphs would run the full content width (~170
   characters a line at 1440). The headings keep the full width; the body copy is capped to a
   readable measure. */
[data-section="service-detail"] .framer-1foacoo p.framer-text {
  max-width: 72ch;
}
/* Phone: the article h1 preset is 54px with word-break, and the longest word in the service titles
   ("Development", "Optimization)") measures 7.04em in Bingo Dilan uppercase — 380px, wider than a
   390px screen's 358px column, so it broke mid-word ("DEVELOPMEN / T"). Below ~420px the title
   scales so a 7.2em word still fits the column. A future title with a longer word needs a larger
   divisor here. */
@media (max-width: 809.98px) {
  [data-section="service-detail"] .framer-yyq50i h1.framer-text {
    font-size: min(54px, calc((100vw - 32px) / 7.2));
  }
}
/* The article's "other articles" row sat inside the same section, 48px (phone 72px) under the
   details content. The other services are their own section (contract), so the two paddings are
   joined to keep that spacing. */
[data-section="service-detail"].framer-1kx0mo6 {
  padding-bottom: 0;
}
[data-section="other-services"].framer-1kx0mo6 {
  padding-top: 48px;
}
@media (max-width: 809.98px) {
  [data-section="other-services"].framer-1kx0mo6 { padding-top: 72px; }
}

/* ---- Arrow-link hover (Back link + card CTAs) ----------------------------------------------
   Framer's runtime added a .hover class to these links; the rules for it are in framer.css
   (.framer-6KNax.framer-v-*.hover …). Measured on live (/jobs "Apply for this job"): the two arrows
   slide 21px in about 0.2s. Re-done with :hover / :focus-visible. Live also turns the label
   browser-blue on hover — a live bug (BUILD-CONTRACT addendum 2), not copied. */
:is([data-section="services-index"], [data-section="service-detail"], [data-section="other-services"]) .framer-6KNax :is(.framer-2c0l-container, .framer-1q045v2-container) {
  transition: left 0.2s ease, right 0.2s ease;
}
/* Forward (card CTA): the hidden arrow slides in from the left, the visible one leaves right. */
:is([data-section="services-index"], [data-section="other-services"]) .framer-6KNax.framer-v-cuoefl:is(:hover, :focus-visible) .framer-2c0l-container {
  left: 2px;
}
:is([data-section="services-index"], [data-section="other-services"]) .framer-6KNax.framer-v-cuoefl:is(:hover, :focus-visible) .framer-1q045v2-container {
  right: -19px;
}
/* Back: the visible arrow leaves left, the hidden one slides in from the right. */
[data-section="service-detail"] .framer-6KNax.framer-v-trivrn:is(:hover, :focus-visible) .framer-2c0l-container {
  left: -19px;
}
[data-section="service-detail"] .framer-6KNax.framer-v-trivrn:is(:hover, :focus-visible) .framer-1q045v2-container {
  right: 2px;
}
:is([data-section="services-index"], [data-section="service-detail"], [data-section="other-services"]) .framer-6KNax:is(:hover, :focus-visible) p.framer-text {
  color: var(--token-8a650152-2d6e-46ea-8610-9e6ba7a473d7, rgb(26, 26, 26));
}
/* Keyboard focus: the same ring as the nav/footer/CTA links (nav.css) instead of the browser's
   blue one. The Back row (framer-lag1bx) clips its overflow and the link sits on its left edge,
   which would cut the ring; nothing in that row needs clipping (the title wraps), so it is
   released. */
:is([data-section="services-index"], [data-section="service-detail"], [data-section="other-services"]) a:focus-visible {
  outline: 2px solid var(--token-8a650152-2d6e-46ea-8610-9e6ba7a473d7, rgb(26, 26, 26)); /* the <a> itself has no text colour (the label's <p> carries it), so currentColor would be link-blue */
  outline-offset: 4px;
}
[data-section="service-detail"] .framer-lag1bx {
  overflow: visible;
}
/* Touch targets (ux-laws R5, >=44x44): the arrow links are 22.4px tall. On phone/tablet the hit box
   grows to 44.4px with padding, and an equal negative margin keeps the layout pixel-identical.
   The Back link sits right under the fixed 96px nav band, which takes pointer events, so it grows
   downward only (48px free before the h1). */
@media (max-width: 809.98px) {
  :is([data-section="services-index"], [data-section="service-detail"], [data-section="other-services"]) a.framer-6KNax {
    padding-block: 11px;
    margin-block: -11px;
  }
  [data-section="service-detail"] .framer-lag1bx a.framer-6KNax {
    padding-block: 0 22px;
    margin-block: 0 -22px;
  }
  /* The focus ring would now wrap the 44px box (the Back link's label sat at the top of an empty
     box). The link's wrapper still has the label's size (the negative margins cancel the padding),
     so the ring moves to the wrapper and hugs the label exactly as at desktop. Only where :has()
     works; elsewhere the link keeps its own ring. */
  @supports selector(:has(*)) {
    :is([data-section="services-index"], [data-section="service-detail"], [data-section="other-services"]) :is(.framer-1bi5swt-container, .framer-2e1lo2-container):has(> a.framer-6KNax:focus-visible) {
      outline: 2px solid var(--token-8a650152-2d6e-46ea-8610-9e6ba7a473d7, rgb(26, 26, 26));
      outline-offset: 4px;
    }
    :is([data-section="services-index"], [data-section="service-detail"], [data-section="other-services"]) :is(.framer-1bi5swt-container, .framer-2e1lo2-container) > a.framer-6KNax:focus-visible {
      outline: none;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  :is([data-section="services-index"], [data-section="service-detail"], [data-section="other-services"]) .framer-6KNax :is(.framer-2c0l-container, .framer-1q045v2-container) {
    transition: none;
  }
}