/* Sysman homepage: hero, service rows and the captioning caption bar.
   Loaded after css/styles.css (tokens, type, navbar, CTA, testimonial, logos and footer live there).
   Desktop is the 1440 frame; <=640 is the 389 "Homepage - Mobile" frame; 641-960 is our own tablet layout,
   built on the phone structure. Two unframed adjustments close the file: proportional photos at 431-640 and a
   content-height hero on landscape phones. */

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

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 720px;
  padding-top: 64px;
  background:
    linear-gradient(to top, rgba(35, 80, 154, 0), rgba(35, 80, 154, 0.4)),
    linear-gradient(to top, var(--black) 1.389%, rgba(0, 0, 0, 0) 64.444%),
    url("../assets/img/hero-bg.webp") center / cover no-repeat;
  background-blend-mode: normal, multiply, normal;
  background-color: #0b1b3f;
  color: var(--white);
}

.hero__section {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 656px;
  padding-block: 64px;
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  max-width: 768px;
  margin-inline: auto;
  text-align: center;
}

.hero__text {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  align-items: center;
  gap: 24px;
}

/* On desktop this trial button lives in the navbar */
.hero__button {
  display: none;
}

/* ---------- Services ---------- */

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

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

.service__media {
  position: relative;
  isolation: isolate;
  height: 384px;
  overflow: hidden;
  border-radius: var(--radius-card);
}

.service__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

.service--media-left .service__body {
  padding-left: 80px;
}

.service--media-right .service__body {
  padding-right: 80px;
}

.service__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
}

.service__title {
  color: var(--accent);
}

.service__desc {
  color: var(--grey);
  /* Google Fonts' Inter runs ~0.3% wider than Figma's; this keeps Figma's line breaks */
  letter-spacing: -0.015em;
}

/* Caption bar drawn over the captioning photo */
.caption-bar {
  position: absolute;
  bottom: 28px;
  left: 16.76%;
  width: 66.48%;
  height: 61px;
  border-radius: 12px;
  background: var(--grey);
  mix-blend-mode: multiply;
  /* Measured from the Figma render; the MCP export omits this effect */
  box-shadow: 14px 14px 20px rgba(0, 0, 0, 0.23);
}

.caption-line {
  position: absolute;
  left: calc(16.76% + 66.48% * 0.1419);
  height: 10px;
  border-radius: 24px;
  background: var(--white);
}

.caption-line--1 {
  bottom: 63px;
  width: calc(66.48% * 0.8304);
}

.caption-line--2 {
  bottom: 43px;
  width: calc(66.48% * 0.6957);
}

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

@media (max-width: 1180px) {
  .service--media-left .service__body {
    padding-left: 40px;
  }

  .service--media-right .service__body {
    padding-right: 40px;
  }
}

@media (max-width: 960px) {
  /* Hero: the navbar's trial button is inside the collapsed menu, so the hero carries it */
  .hero {
    min-height: 600px;
  }

  .hero__section {
    min-height: 536px;
  }

  .hero__button {
    display: inline-flex;
    height: 56px;
    padding-inline: 16px;
  }

  /* Services: one column, the phone frame's order.
     [badge + title] -> photo -> description -> link. The body and text wrappers step aside
     (display: contents) so their children can be placed on the section's grid. */
  .service {
    --svc-link-gap: 32px;
  }

  .service__inner {
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-areas:
      "badge title"
      "media media"
      "desc  desc"
      "link  link";
    align-items: start;
    gap: 0 16px;
    min-height: 0;
  }

  .service__body,
  .service__text {
    display: contents;
  }

  .service .badge {
    grid-area: badge;
    align-self: center;
  }

  .service__title {
    grid-area: title;
    align-self: center;
  }

  .service__media {
    grid-area: media;
    height: auto;
    margin-top: 32px;
    aspect-ratio: 592 / 384;
  }

  .service__desc {
    grid-area: desc;
    margin-top: 32px;
  }

  .service .link-arrow {
    grid-area: link;
    justify-self: start;
    margin-top: var(--svc-link-gap);
  }
}

/* Tablet: the stacked column keeps the design's 592px photo width (so the caption bar keeps its desktop numbers) */
@media (min-width: 641px) and (max-width: 960px) {
  .service__inner {
    max-width: calc(592px + 2 * var(--gutter));
  }
}

/* ---------- Phone: the 389 "Homepage - Mobile" frame ---------- */

@media (max-width: 640px) {
  /* Hero: 800 tall, content anchored 34px above the bottom, unrotated photo under a black fade */
  .hero {
    min-height: 800px;
    padding-top: 0;
    background:
      linear-gradient(to bottom, rgba(0, 0, 0, 0) 32.5%, var(--black) 100%),
      url("../assets/img/hero-bg-mobile.webp") center / cover no-repeat;
    background-blend-mode: normal;
    background-color: #0b1b3f;
  }

  .hero__section {
    align-items: flex-end;
    min-height: 0;
    /* The top padding keeps the content clear of the overlaid navbar on short content */
    padding-block: 96px 34px;
  }

  .hero__text {
    padding-inline: 16px;
  }

  .hero__lead {
    font-size: 18px;
    line-height: 25px;
  }

  /* Services. The frame's spacing differs per section; built as drawn:
     padding 32 or 40, photo 240 or 200, description-to-link gap 16 / 24 / 32. */
  .service {
    --svc-pad: 40px;
    --svc-photo: 200px;
    padding-block: var(--svc-pad);
  }

  #transcription,
  #captioning {
    --svc-pad: 32px;
    --svc-photo: 240px;
    --svc-link-gap: 16px;
  }

  #ai-training {
    --svc-photo: 240px;
  }

  #medical-billing {
    --svc-link-gap: 24px;
  }

  .service__media {
    height: var(--svc-photo);
    aspect-ratio: auto;
  }

  .service__desc {
    line-height: 25px;
  }

  /* Survey Coding's text column is 273px at 389 (an 80px right inset in the frame); it gives way on narrower phones */
  #survey-coding .service__desc {
    padding-right: clamp(0px, 100% - 273px, 80px);
  }

  /* Caption bar, per the phone frame: a 296x47 bar 28px above the photo's bottom edge */
  .caption-bar {
    left: 8.07%;
    width: 83.86%;
    height: 47.003px;
    /* The desktop 14/14/20 shadow scaled by 47/61 */
    box-shadow: 11px 11px 16px rgba(0, 0, 0, 0.23);
  }

  .caption-line {
    left: calc(8.07% + 83.86% * 0.1419);
    height: 7.705px;
  }

  .caption-line--1 {
    bottom: 54.965px;
    width: calc(83.86% * 0.8304);
  }

  .caption-line--2 {
    bottom: 39.555px;
    width: calc(83.86% * 0.6957);
  }
}

/* Wide phones (431-640, no frame): the fixed 200/240 photo height would crop faces as the box widens,
   so the photo takes the tablet's 592:384 proportion instead (395x256 at 431, 604x392 at 640, then 592x384 at 641).
   Don't add a min-height here: it carries through the aspect ratio and widens the photo past the column. */
@media (min-width: 431px) and (max-width: 640px) {
  .service__media {
    height: auto;
    aspect-ratio: 592 / 384;
  }
}

/* Landscape phones (and 200% zoom on short desktop screens): the 800px bottom-anchored hero would push the
   headline below the first screen, so the hero sizes to its content with the text centred.
   Orientation rather than max-height, so short portrait phones (320x548) keep the designed frame. */
@media (max-width: 640px) and (orientation: landscape) {
  .hero {
    min-height: 0;
  }

  .hero__section {
    align-items: center;
    padding-block: 96px 48px;
  }
}