/* Sysman service pages: the template shared by transcription.html and the later service pages
   (captioning, survey-coding, ai-training, sales-marketing, medical-billing).
   Loaded after css/styles.css, which provides tokens, type classes, badge/glyph, link-arrow, navbar,
   logos, testimonial, CTA, services grid and footer.

   Colour: nothing here names a service colour. The page puts class="accent-…" on <main>, and the hero
   title, hero badge, eyebrows, check tiles and the highlighted word in the "Why choose" title follow
   --accent (link arrows use the matching assets/icons/arrow-<accent>.svg).

   Blocks (in page order):
     .service-hero  badge + h1, photo, one or two lead paragraphs and a link
                    (--tight-leads: 24px between the leads above 960)
     .why           "Why choose SYSMAN" photo + title + link, and a check list split by 2px rules
                    (--gap-40: 40/40 title-link-photo gaps on phones)
     .feature       eyebrow + title + paragraphs beside a photo; --media-right / --media-left
                    alternate the photo side on desktop. --text-first reproduces the Transcription phone
                    frame's first row (text above the photo); other rows put the photo between title and
                    text. --media-tall: 592x568.889 photo above 960. --crop-top / --crop-right: art-directed
                    photo crops.
     .cta--small    the "Call to Action - Small" 44px button above 640 (the CTA itself is in styles.css)
     .overlay-*     decorative drawings over a photo (Captioning): -captions, -player, -subtitle

   Modifiers that must stop at a breakpoint are written as a base rule that a later rule in a shared
   media query undoes; :where() keeps them at the specificity of the template rule they override.
   Per-page blocks at the end of the file hold the few rules only one page needs. */

/* ---------- Hero ---------- */

.service-hero {
  padding-top: 64px;
  background: var(--white);
}

/* Desktop: heading and body share the left column; the photo spans both rows on the right */
.service-hero__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  align-items: start;
  gap: 24px 32px;
}

.service-hero__heading {
  display: flex;
  grid-row: 1;
  grid-column: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
  padding-right: 88px;
}

.service-hero__title {
  color: var(--accent);
}

/* 1em = the glyph box, so a glyph pad written in em (the captioning glyph's 0px-tall line parts:
   inset: -0.025em -11.4%) keeps the stroke in scale with every badge size. .glyph holds no text. */
.service-page .glyph {
  font-size: 44.444px;
}

.service-page .badge--lg .glyph {
  font-size: 55.556px;
}

.service-hero__media {
  grid-row: 1 / span 2;
  grid-column: 2;
  aspect-ratio: 592 / 568.889;
  overflow: hidden;
  border-radius: var(--radius-card);
}

.service-hero__media img,
.why__media img,
.feature__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-hero__body {
  display: flex;
  grid-row: 2;
  grid-column: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  padding: 0 88px 64px 0;
}

.service-hero__lead {
  color: var(--grey);
}

.service-hero__body .link-arrow {
  margin-top: 16px;
}

/* Survey Coding, Sales, Medical Billing desktop: the leads sit 24 apart, the link stays 48 below the last one.
   The <=960 (gap 24, margin 0) and <=640 (gap 16) rules come later and still win. */
:where(.service-hero--tight-leads) .service-hero__body {
  gap: 24px;
}

:where(.service-hero--tight-leads) .service-hero__body .link-arrow {
  margin-top: 24px;
}

/* ---------- Why choose SYSMAN ---------- */

.why {
  padding-block: 40px;
  background: var(--white);
  scroll-margin-top: 24px;
}

.why__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 32px;
}

/* Desktop shows the photo first; the markup keeps the heading first for reading order */
.why__intro {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 64px 74px 64px 0;
}

.why__media {
  order: -1;
  aspect-ratio: 518 / 327;
  overflow: hidden;
  border-radius: var(--radius-card);
}

.why__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
}

.why__title span {
  color: var(--accent);
}

.why__list {
  display: flex;
  flex-direction: column;
  padding-block: 64px;
}

.why__item {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* The rule takes no layout space in Figma: it is painted in the 2px just above the midpoint
   of the 48 + 48 gap between items */
.why__item + .why__item {
  margin-top: 46px;
  padding-top: 48px;
  border-top: 2px solid var(--light-grey);
}

.why__item-head {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* 30px accent tile with a white tick */
.check {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--accent);
}

.check img {
  width: 21.1485px;
  height: 15.099px;
}

.why__item-title {
  color: var(--black);
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: -0.017em;
}

.why__item-text {
  color: var(--grey);
}

/* ---------- Feature rows ---------- */

.feature {
  padding-block: 40px;
  background: var(--white);
  scroll-margin-top: 24px;
}

.feature__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 32px;
}

.feature__body {
  display: flex;
  grid-row: 1;
  flex-direction: column;
  gap: 24px;
  padding-block: 64px;
}

.feature__media {
  grid-row: 1;
  aspect-ratio: 592 / 384;
  overflow: hidden;
  border-radius: var(--radius-card);
}

/* The tall desktop slot (the hero photo's size). <=960 restates 592/384 and <=640 sets 353/200, so it is
   desktop-only; without :where() this would beat the phone rule. */
:where(.feature--media-tall) .feature__media {
  aspect-ratio: 592 / 568.889;
}

/* Medical Billing desktop row 1: the designer's crop keeps the hand on the chart (<=960 is centred again) */
.feature--crop-right .feature__media img {
  object-position: 79.93% 50%;
}

/* Text on the left, photo on the right */
.feature--media-right .feature__body {
  grid-column: 1;
  padding-right: 74px;
}

.feature--media-right .feature__media {
  grid-column: 2;
}

/* Photo on the left, text on the right */
.feature--media-left .feature__body {
  grid-column: 2;
  padding-left: 74px;
}

.feature--media-left .feature__media {
  grid-column: 1;
}

.feature__head {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* "H5 - Subtitle": source strings are mixed case, shown in capitals */
.feature__eyebrow {
  color: var(--accent);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.014em;
  text-transform: uppercase;
}

.feature__title {
  color: var(--black);
}

.feature__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  color: var(--grey);
}

/* ---------- Service CTA ---------- */

/* "Call to Action - Small" (Captioning, Survey Coding, AI Training desktop frames): the 44px / 12px button,
   so the section is 568 instead of 580. Tablet keeps it; the <=640 rule restores the 56px button. */
.cta--small .button--light {
  height: 44px;
  padding-inline: 12px;
}

/* ---------- Photo overlays (Captioning; decorative, aria-hidden) ----------
   Any service photo box can anchor an overlay; isolation keeps mix-blend-mode inside the photo.
   Horizontal values are % of the photo (or of the overlay box), vertical ones px from the photo's
   bottom edge, so tablet (a 592px photo) uses the desktop values unchanged. */

.service-hero__media,
.why__media,
.feature__media {
  position: relative;
  isolation: isolate;
}

/* Hero caption bars: a multiplied grey box with a soft shadow (fitted to the render; the Figma export
   omits it) and two white bars. The box is the ::before, so the bars are painted over it unblended. */
.overlay-captions {
  position: absolute;
  right: 16.756%;               /* 99.196 / 592: a centred 393.608 box */
  bottom: 56.889px;
  left: 16.756%;
  height: 61px;
}

.overlay-captions::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: var(--grey);
  mix-blend-mode: multiply;
  box-shadow: 14px 14px 20px rgba(0, 0, 0, 0.23);
}

.overlay-captions span {
  position: absolute;
  left: 14.187%;                /* 55.84 / 393.608: the bars sit right of centre on desktop */
  height: 10px;
  border-radius: 24px;
  background: var(--white);
}

.overlay-captions span:first-child {
  top: 16px;
  width: 83.041%;               /* 326.856 */
}

.overlay-captions span:last-child {
  top: 36px;
  width: 69.569%;               /* 273.831 */
}

/* "Why choose" video player: white track, red played part (var(--red) in every frame, not the accent)
   and a white play disc */
.overlay-player {
  position: absolute;
  inset: 0;
}

.overlay-player__track,
.overlay-player__fill {
  position: absolute;
  bottom: 55.718px;             /* top 265.71 in the 327px photo */
  left: 19.86px;
  height: 5.572px;
}

.overlay-player__track {
  width: calc(100% - 37.857px); /* 480.143 at 518 */
  border-radius: 5px;
  background: var(--white);
}

.overlay-player__fill {
  width: min(249.358px, 100% - 37.857px); /* a fixed played length, never past the track's end */
  border-radius: 5px 0 0 5px;
  background: var(--red);
}

.overlay-player__button {
  position: absolute;
  bottom: 16.711px;             /* top 280.57 */
  left: 18px;
  width: 29.719px;
  height: 29.719px;
  border-radius: 50%;
  background: var(--white);
}

/* The Figma glyph is an upward triangle rotated 90deg; player-play.svg is drawn pointing right, placed where
   the rotated one lands. (0,2,1) beats the photo-box rule `.why__media img`. */
.overlay-player .overlay-player__button img {
  position: absolute;
  top: 9.63px;
  left: 11.84px;
  width: 9.055px;
  height: 10.456px;
}

/* Row photo subtitle: live white text over a multiplied grey box (::before, so the text isn't blended).
   min-height + flex centring: narrower photos (961-1180 desktops, phones under 389) wrap it to 2 lines
   inside a box that grows upwards, instead of overflowing. */
.overlay-subtitle {
  position: absolute;
  right: 18.412%;               /* 109 / 592: a centred 374 box */
  bottom: 45px;
  left: 18.412%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 61px;
  padding: 4px 16px;
  color: var(--white);
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.014em;
  text-align: center;
}

.overlay-subtitle::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: var(--grey);
  mix-blend-mode: multiply;
}

.overlay-subtitle span {
  position: relative;
  text-wrap: balance;           /* a 2-line wrap splits evenly instead of leaving one word */
}

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
  .service-hero__heading {
    padding-right: 32px;
  }

  .service-hero__body {
    padding-right: 32px;
  }

  .why__intro {
    padding-right: 40px;
  }

  .feature--media-right .feature__body {
    padding-right: 40px;
  }

  .feature--media-left .feature__body {
    padding-left: 40px;
  }
}

/* Widths with no frame (wide phones 431-640, narrow desktops 961-1279): even out heading wraps that would
   otherwise leave one word on a line ("Access to skilled / sales / professionals"). 389 and 1280+ keep the
   frames' own breaks, and 641-960 already balances .text-title (styles.css). The why title is only "pretty":
   balancing it gives "Why choose / SYSMAN / for Captioning". A COMPONENTS §3 exception. */
@media (min-width: 431px) and (max-width: 640px), (min-width: 961px) and (max-width: 1279px) {
  .feature__title,
  .feature__eyebrow {
    text-wrap: balance;
  }

  .why__title {
    text-wrap: pretty;
  }
}

/* Stacked: one column; feature rows read eyebrow, title, photo, text */
@media (max-width: 960px) {
  .service-hero {
    padding-block: 40px;
  }

  .service-hero__inner,
  .why__inner,
  .feature__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }

  .service-hero__heading {
    flex-direction: row;
    align-items: center;
    gap: 24px;
    padding: 0;
  }

  .service-hero__media {
    aspect-ratio: 592 / 400;
  }

  .service-hero__body {
    gap: 24px;
    padding: 0;
  }

  .service-hero__body .link-arrow {
    margin-top: 0;
  }

  .why__intro {
    gap: 40px;
    padding: 0;
  }

  .why__header {
    gap: 32px;
  }

  .why__media {
    order: 0;
  }

  .why__list {
    padding-block: 0;
  }

  .why__item + .why__item {
    margin-top: 32px;
    padding-top: 32px;
  }

  /* The head and text become items of the stacked row so the photo can sit between them */
  .feature__body {
    display: contents;
  }

  .feature__head {
    gap: 32px;
  }

  /* 592/384 restated so feature--media-tall is desktop-only (the phone rule below still wins) */
  .feature__media {
    order: 1;
    aspect-ratio: 592 / 384;
  }

  .feature__text {
    order: 2;
  }

  /* Stacked photos are centred again (the Medical Billing phone frame) */
  .feature--crop-right .feature__media img {
    object-position: 50% 50%;
  }

  /* Sales row A: the square photo is top-biased in the stacked slots so the face stays in frame
     (the phone frame's height 176.5% / top -5.25% placement); desktop stays centred */
  .feature--crop-top .feature__media img {
    object-position: 50% 6.86%;
  }
}

/* Tablet: keep the stacked blocks at the desktop column width (as the homepage service rows do) */
@media (min-width: 641px) and (max-width: 960px) {
  .service-hero__inner,
  .why__inner,
  .feature__inner {
    max-width: calc(592px + 2 * var(--gutter));
  }

  .feature__head {
    gap: 24px;
  }
}

/* Phone: the 389px service frames (Transcription and the five later pages) */
@media (max-width: 640px) {
  .service-hero {
    padding-block: 32px;
  }

  .service-hero__heading {
    gap: 16px;
  }

  .service-hero .badge {
    width: 64px;
    height: 64px;
  }

  .service-hero .badge .glyph {
    width: 44.138px;
    height: 44.138px;
    font-size: 44.138px;
  }

  /* 32/38, as Figma lays it out (it rounds 32 x 1.2 to a 38px line): a two-line H1 (Sales) is 76 tall like
     frame 204:4832, not 76.8. One-line H1s are centred in the 64px title row, so they don't move. */
  .service-hero__title {
    font-size: 32px;
    line-height: 38px;
  }

  .service-hero__media {
    aspect-ratio: 353 / 240;
  }

  .service-hero__body {
    gap: 16px;
  }

  .why__intro {
    gap: 48px;
  }

  .why__header {
    gap: 28.8px;
  }

  /* The other five service phone frames: title → 40 → link → 40 → photo */
  .why--gap-40 .why__intro,
  .why--gap-40 .why__header {
    gap: 40px;
  }

  .why__media {
    aspect-ratio: 353 / 327;
  }

  .why__item + .why__item {
    margin-top: 30px;
  }

  .feature__media {
    aspect-ratio: 353 / 200;
  }

  /* The frame's first feature row: text block (24px gaps, 54px title box) above the photo */
  .feature--text-first .feature__body {
    display: flex;
    gap: 24px;
    padding: 0;
  }

  .feature--text-first .feature__head {
    gap: 24px;
  }

  /* The frame sets this title at 32/54. Keep the normal 38px leading and add
     (54 - 38) / 2 = 8px above and below: a one-line title is the same 54px box with
     the glyphs in the same place, and a title that wraps keeps tight 38px lines. */
  .feature--text-first .feature__title {
    line-height: 38px;
    padding-block: 8px;
  }

  /* The phone frames use the standard 56px CTA button */
  .cta--small .button--light {
    height: 56px;
    padding-inline: 16px;
  }

  /* Overlays, per the Captioning phone frame (not a scaled desktop: the boxes are wider, the bars centred) */
  .overlay-captions {
    right: 9.816%;              /* 34.75 / 354: a centred 80.367% box */
    bottom: 24.454px;
    left: 9.816%;
    height: 44.091px;
  }

  .overlay-captions::before {
    box-shadow: none;           /* the phone hero draws no shadow */
  }

  .overlay-captions span {
    left: 8.479%;               /* 24.124 / 284.5 */
    height: 7.228px;
  }

  .overlay-captions span:first-child {
    top: 11.565px;
  }

  .overlay-captions span:last-child {
    top: 26.021px;
  }

  .overlay-player__track {
    width: calc(100% - 44.857px); /* 308.143 at 353 */
  }

  /* The frame's fixed 249.358 played length at 389 and up; narrower, 81% of the track (249.358 / 308.143, the
     share the 389 frame shows), so the red never covers the track's rounded right end */
  .overlay-player__fill {
    width: min(249.358px, (100% - 44.857px) * 0.81);
  }

  .overlay-subtitle {
    right: 11.898%;             /* 42 / 353: a centred 269 box */
    bottom: 23px;
    left: 11.898%;
    min-height: 44px;
    font-size: 12.96px;
    line-height: 17.28px;
  }

  .overlay-subtitle::before {
    border-radius: 8.64px;
  }
}

/* ---------- Per-page rules ----------
   One block per service page, owned by that page's builder. Only rules no other page needs, scoped under
   .service-page--<slug> on <main>, with their own shared media queries inside. Prefer none. */

/* ==== page: captioning (owned by the captioning builder) ==== */
/* ==== /page: captioning ==== */

/* ==== page: survey-coding (owned by the survey-coding builder) ==== */

/* CTA titles: keep the two-word name together when it fits on a line of its own ("Try our / Survey Coding /
   services for / free today" at 320 and 430) instead of splitting it after "Try our Survey". Where even the name
   alone is wider than the column (48px type in the 325px column at 360-389: 328px), it still wraps inside
   the box, centred as before. */
.service-page--survey-coding .cta__title span {
  display: inline-block;
}
/* ==== /page: survey-coding ==== */

/* ==== page: ai-training (owned by the ai-training builder) ==== */
/* ==== /page: ai-training ==== */

/* ==== page: sales-marketing (owned by the sales-marketing builder) ==== */
/* ==== /page: sales-marketing ==== */

/* ==== page: medical-billing (owned by the medical-billing builder) ==== */

/* Desktop frame 79:3092, row 2 ("Cost efficiency") first paragraph: Google Fonts' Inter sets "needs to SYSMAN.
   Managing an in-house billing team involves" at 519.2px, 1.2px wider than the 518 column (Figma fits it), so
   "involves" would drop a line. 2px into the gutter (the column is flush with the container's right edge) keeps
   the frame's breaks without moving any glyph. The COMPONENTS §4 -0.015em tracking saves only ~1.06px here.
   ≤960 restores the template (the phone wraps follow frame 222:3179). */
.service-page--medical-billing #cost-efficiency .feature__text {
  margin-right: -2px;
}

@media (max-width: 960px) {
  .service-page--medical-billing #cost-efficiency .feature__text {
    margin-right: 0;
  }
}
/* ==== /page: medical-billing ==== */