/* ==========================================================================
   Block: service-hero — first block of every service page (src/blocks/service-hero.html)
   Figma "Social Media Advertising" 4506:165 at 1920 (page y; the content starts at y=114 under the
   fixed header):
     title    x102  y288  1347 wide, 96px, 2 lines          → 174px below the content top
     CTA      x103  y526  557×76 green pill, 32px label       → 44px under the title
     photo    x1151 y570  653×480                             → 44px under the CTA top
     accent   x1499 y560  351×516 green block behind the photo (10px above, 46px past its right, 26px below)
     rule     y769  125px green line                          → 167px under the CTA
     intro    x106  y809  696 wide, 20px                      → 40px under the rule
   Grid: row 1 = title (spans both columns, it runs over the photo column); row 2 = CTA + intro | photo.
   Column split 1051 : 669 is the Figma's 100→1151 | 1151→1820 inside the 100px gutters.
   ========================================================================== */

.block-service-hero {
  --title-max: 1392px;                   /* the Figma title box (SMA 1347; 3-line titles 1392) */
  padding: min(9.06vw, 174px) 0 min(6.25vw, 120px);
}

.block-service-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1051fr) minmax(0, 669fr);
  grid-template-areas:
    "head  head"
    "intro media";
  align-items: start;
}

/* ---- Row 1: eyebrow + title + CTA ------------------------------------------ */
.block-service-hero__head { grid-area: head; }
.block-service-hero__eyebrow { margin: 0 0 min(1.77vw, 34px); }   /* eyebrow y264 (24.8 tall) → title y323 */
.block-service-hero--eyebrow { padding-top: min(7.8125vw, 150px); }   /* eyebrow 150 under the content top */
.block-service-hero__title {
  max-width: var(--title-max);
  margin: 0;
  font-size: clamp(40px, 5vw, 110px);   /* 96px at 1920 */
  line-height: 1.01;                     /* Figma box: 2 lines = 194px at 96px */
}
.block-service-hero__line { display: block; }   /* title_lines: the designer's desktop wrap */

/* Green filled pill (the Figma's Rectangle 173, 557×76). Hover = the reverse wipe shared by every
   filled button (css/base.css .btn--wipe): black fill in from the left, green outline + label. */
.block-service-hero__cta {
  --wipe-fill: var(--bg);
  --wipe-txt: var(--accent);
  gap: 22px;
  min-width: 0;                          /* the pill sizes to its label: SMA 557, Organic 582, Photography 332… (±4px with Blauer Nue) */
  max-width: 100%;
  height: 76px;
  margin-top: min(2.29vw, 44px);
  padding: 0 33px 0 25px;
  justify-content: space-between;
  font-size: 32px;                       /* label is Title Case in the Figma: .btn's text-transform: capitalize */
}
.block-service-hero__cta:hover,
.block-service-hero__cta:focus-visible { --wipe-edge: var(--accent); --wipe-edge-w: 3px; }
.block-service-hero__cta svg { flex: 0 0 auto; width: 26px; height: 15px; }

/* ---- Row 2 left: rule + intro ---------------------------------------------- */
/* The CTA sits in row 1, so the intro's top is measured from the CTA's bottom: 769 − 602 = 167. */
.block-service-hero__intro {
  grid-area: intro;
  max-width: 696px;
  padding-top: min(8.7vw, 167px);
}
.block-service-hero__rule {
  display: block;
  width: 125px;
  height: 2px;
  margin-bottom: min(2.08vw, 40px);
  background: var(--accent);
}
.block-service-hero__intro p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.block-service-hero__intro p + p { margin-top: calc(var(--lh-body) * 1em); }   /* the Figma separates paragraphs with one blank line */

/* ---- Row 2 right: photo over the green accent ------------------------------ */
/* Row 2 starts at the CTA's bottom (602); the photo's top is 570, i.e. 32px ABOVE that edge, so it is
   pulled up. Everything is % of the photo box so the composition scales with the column. */
.block-service-hero__media {
  grid-area: media;
  position: relative;
  width: 97.6%;                          /* 653 of the 669px column */
  margin: calc(min(1.67vw, 32px) * -1) 0 0;
  isolation: isolate;
}
.block-service-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 653 / 480;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);   /* image.focus from the data (the Figma crop) */
}
.block-service-hero__accent {
  position: absolute;
  z-index: -1;
  left: 53.29%;                          /* 348 / 653 */
  top: -2.08%;                           /* −10 / 480 */
  width: 53.75%;                         /* 351 / 653 */
  height: 107.5%;                        /* 516 / 480 */
  background: var(--accent);
}

/* ---- Accent variants (accent field) ------------------------------------------
   Both put the photo's top level with the CTA's top (margin −76 = the pill's height, the start of row 2)
   and shift it right of the SMA position; the intro's rule sits 286 under the photo top (210 under the CTA). */
.block-service-hero--accent-low .block-service-hero__media,
.block-service-hero--accent-above .block-service-hero__media { margin-top: -76px; }
.block-service-hero--accent-low .block-service-hero__intro,
.block-service-hero--accent-above .block-service-hero__intro { padding-top: min(10.94vw, 210px); }
/* low (Organic Social, SEO): photo x1223 → 72 of the 669 column; block x1555 y+34, 30 right, 70 below */
.block-service-hero--accent-low .block-service-hero__media { margin-left: 10.76%; }
.block-service-hero--accent-low .block-service-hero__accent { left: 50.84%; top: 7.08%; }
/* above (the other seven): photo x1228 → 77 of 669; block x1555 55 above the photo, 25 right, ends 19 above its bottom */
.block-service-hero--accent-above .block-service-hero__media { margin-left: 11.51%; }
.block-service-hero--accent-above .block-service-hero__accent { left: 50.08%; top: -11.46%; }

/* ---- Tablet ---------------------------------------------------------------- */
@media (max-width: 1024px) {
  .block-service-hero__grid {
    grid-template-columns: minmax(0, 1fr);   /* minmax(0,…) so the track ignores the CTA/eyebrow min-content and never exceeds the viewport (≤375) */
    grid-template-areas: "head" "media" "intro";
  }
  .block-service-hero__media,
  .block-service-hero[class*="--accent-"] .block-service-hero__media { width: calc(100% - 40px); margin: 48px 0 0; }
  .block-service-hero[class*="--accent-"] .block-service-hero__intro { padding-top: 48px; }
  .block-service-hero__intro { padding-top: 48px; }
}

/* ---- Mobile (Figma "Mobile Category" 4148:2776, 402 wide) -----------------
   The mobile design is its own composition: NO photo; title 46px in a 313px box (x22 y156 — 58px under
   the 98px header), an OUTLINED pill 358×47 (2px green ring, green label x37) 46px under the title, a 64px
   green rule 55px under the pill, the intro 44px under the rule (x23, 361 wide). */
@media (max-width: 640px) {
  .block-service-hero__line { display: inline; }   /* lines flow as one sentence, wrapping like Mobile Category */
  .block-service-hero { padding: 58px 0 56px; }    /* 56 + the next block's 10 = the frame's 66px to its eyebrow */
  .block-service-hero__eyebrow { margin-bottom: 24px; }
  .block-service-hero[class*="--accent-"] .block-service-hero__intro { padding-top: 55px; }
  .block-service-hero__grid { grid-template-areas: "head" "intro"; }
  .block-service-hero__media { display: none; }
  .block-service-hero__title { max-width: min(313px, 100%); font-size: 46px; line-height: 1; }
  .block-service-hero__cta {
    --wipe-fill: var(--accent);
    --wipe-edge: var(--accent);
    --wipe-edge-w: 2px;
    --wipe-txt: var(--black);
    min-width: 0;
    width: min(358px, 100%);
    min-height: 47px;
    height: auto;                      /* a long label (Paid Search, Organic) wraps to 2 lines instead of forcing overflow */
    margin-top: 46px;
    padding: 11px 18px 11px 16px;
    gap: 14px;
    background: transparent;
    color: var(--accent);
    font-size: 20px;
    text-align: left;
    white-space: normal;               /* below the 402 design width the long label wraps rather than pushing the arrow past the pill */
  }
  .block-service-hero__cta svg { flex: 0 0 auto; }
  .block-service-hero__intro { max-width: min(361px, 100%); padding-top: 55px; }
  .block-service-hero__rule { width: 64px; margin-bottom: 44px; }
}