/* ==========================================================================
   Block: text-image — generic "Text and image" section (src/blocks/text-image.html)
   Figma "Social Media Advertising" 4506:165 at 1920 (page y), "Monitored reporting":
     media    x861  y7039  1044×834  → 85px past the 1820 gutter line (bleeds to x1905)
     eyebrow  x105  y7208  20px
     title    x105  y7259  48px Blauer Nue Regular, 603 box → 2 lines of 59px
     rule     x102  y7498  125 × 2 green                   → 120 under the title
     body     x108  y7553  699 wide, 20/25, blank line between paragraphs → 54 under the rule
   The text stack (7208→7703) is centred on the media (7039→7873): both centres sit at y≈7456. Client #40: the
   render's transparent bottom band (104px of the 834) is trimmed off (3-9-cropped.webp, 1044×731), so the
   section gap below starts at the laptop; the text centres on the trimmed box, 52px higher than the Figma.
   Grid: text column 761 (100→861) | media 1044 = 1805, i.e. the 1720 container plus the 85px bleed.
   Section spacing: 250 above (numbered-cards bottom 6789 → media 7039) and 350 below (media bottom →
   comparison eyebrow 8223; the comparison block pads 175), split half each side.
   Variants (src/blocks/text-image.html header): text-only split (Content Writing 5160:659), media_style
   "accent" (Content Writing ×2, Graphic Design 4696:1095 ×2, Videography 5050:499), media_size "wide"
   (Web Design 4816:2 pricing) — geometry with each rule block below.
   ========================================================================== */

.block-text-image {
  --ti-bleed: calc(var(--gutter) * 0.85);              /* 85px at 1920 */
  padding: min(6.51vw, 125px) 0 min(9.115vw, 175px);
}

.block-text-image__grid {
  display: grid;
  grid-template-columns: minmax(0, 761fr) minmax(0, 1044fr);
  /* rows 1 and 4 share the media's spare height, so the text stack is centred on it */
  grid-template-rows: 1fr auto auto 1fr;
  grid-template-areas:
    ".    media"
    "head media"
    "body media"
    ".    media";
  margin-right: calc(var(--ti-bleed) * -1);
}
.block-text-image--media-left .block-text-image__grid {
  grid-template-columns: minmax(0, 1044fr) minmax(0, 761fr);
  grid-template-areas:
    "media ."
    "media head"
    "media body"
    "media .";
  margin-right: 0;
  margin-left: calc(var(--ti-bleed) * -1);
}
.block-text-image--media-left .block-text-image__head,
.block-text-image--media-left .block-text-image__body { margin-left: min(4.43vw, 85px); }

/* ---- Text ------------------------------------------------------------------ */
.block-text-image__head { grid-area: head; padding-left: min(0.26vw, 5px); }
.block-text-image__eyebrow { margin: 0 0 min(1.354vw, 26px); }   /* eyebrow bottom 7233 → title 7259 */
.block-text-image__title {
  max-width: 12.5625em;                                  /* 603 / 48: keeps the 1920 line break as it scales */
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 2.5vw, 48px);
  line-height: 1.229;                                    /* 59px lines at 48px (Figma box 118 for 2 lines) */
  letter-spacing: 0;
}
.block-text-image__rule {
  display: block;
  width: 125px;
  height: 2px;
  margin: min(6.25vw, 120px) 0 0 -3px;                   /* x102 against the title's x105 */
  background: var(--accent);
}
.block-text-image__body {
  grid-area: body;
  max-width: calc(699px + min(0.42vw, 8px));
  padding: min(2.81vw, 54px) 0 0 min(0.42vw, 8px);
}
.block-text-image__body p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.25;                                     /* 25px lines (Figma body box 150 = 6 lines) */
}
.block-text-image__body p + p { margin-top: 1.25em; }    /* the Figma's blank line between paragraphs */
.block-text-image__cta { margin-top: min(2.08vw, 40px); }
.block-text-image__line { display: block; }              /* title_lines: the designer's desktop wrap */
.block-text-image__title.has-lines { max-width: none; }

/* list (Videography "Inclusions"): a blank line after the paragraphs, 25px rows, the Figma's UNORDERED_LIST
   indent — bullet centred 15 in (x121), text 31 in (x137) from the body's x106 */
.block-text-image__list { margin-top: 1.25em; }
.block-text-image__list li {
  position: relative;
  padding-left: 31px;
  font-size: var(--fs-body);
  line-height: 1.25;
}
.block-text-image__list li::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

/* ---- Media ----------------------------------------------------------------- */
.block-text-image__media {
  grid-area: media;
  align-self: center;
  margin: 0;
}
.block-text-image__media img,
.block-text-image__media video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ti-ratio, 1044 / 834);            /* the image's width/height fields (SMA's trimmed laptop 1044 / 731, #40) */
  object-fit: contain;
}

/* ---- Variants ------------------------------------------------------------------
   Desktop (≥1025) geometry is in the media query; ≤1024 every variant stacks like the default (head →
   media → body), keeping only the accent composition and the wide render's crop.
   Shared by every variant at desktop: the text on the standard gutter — eyebrow/title x103 (head +3),
   rule x100, body x106 (+6) — and a rule 54 above the body.
   text only (Content Writing 5160:659 y1505): eyebrow x95 y1505 · title y1556 (557 box, 2 lines) · rule
     y1719 (44 under the title) · body x970 y1568 — 12 under the title top, 63 under the eyebrow — in the
     right column of the .grid-2 split (860 | 11 | 849).
   accent (CW 5160:659 y4108 / y6681, GD 4696:1095 y3617 / y7245, VG 5050:499 y5855): photo 623 × 864 at
     x1074 → 1697, green block 703 × 462 from (+43, +432) → x1820, y+894. Columns 974 | 746 (1074 → 1820 =
     the photo + the block's 123 overhang); eyebrow 136 under the photo top; title → rule 47 (Figma 45–55,
     median 48), rule → body 54. The block's 30px below the photo is kept in the flow (margin-bottom).
   wide (Web Design 4816:2 y8824): media "3 11" 1268 × 881 at x652 → 1920 — 209 left of the 861 slot and
     15 past the grid's 1905 edge, so the frame edge; it runs under the text column (transparent there),
     so the text sits above it. Text centred on it 25 above its middle (eyebrow 9024 = media top + 200);
     title → rule 55, rule → body 54. */
.block-text-image--accent .block-text-image__media {
  position: relative;
  isolation: isolate;
  align-self: start;
  width: 83.51%;                                        /* 623 of the 746 column; at ≤1024 the block reaches the content edge */
  margin-bottom: 4.021%;                                /* the block's 30 below the photo (30/746) */
}
.block-text-image--accent .block-text-image__media img,
.block-text-image--accent .block-text-image__media video {
  aspect-ratio: 623 / 864;
  object-fit: cover;
}
.block-text-image__accent {
  position: absolute;
  z-index: -1;
  left: 6.902%;                                         /* 43 / 623 */
  top: 50%;                                             /* 432 / 864 */
  width: 112.84%;                                       /* 703 / 623 */
  height: 53.47%;                                       /* 462 / 864 */
  background: var(--accent);
}
.block-text-image--wide .block-text-image__media img,
.block-text-image--wide .block-text-image__media video { aspect-ratio: 1268 / 881; }

@media (min-width: 1025px) {
  .block-text-image--text-only,
  .block-text-image--accent,
  .block-text-image--wide { --ti-gut: min(0.1563vw, 3px); }
  .block-text-image--text-only .block-text-image__head,
  .block-text-image--accent .block-text-image__head,
  .block-text-image--wide .block-text-image__head { padding-left: var(--ti-gut); }
  .block-text-image--accent .block-text-image__body,
  .block-text-image--wide .block-text-image__body {
    max-width: calc(699px + var(--ti-gut) * 2);
    padding-left: calc(var(--ti-gut) * 2);
  }

  .block-text-image--text-only .block-text-image__grid {
    grid-template-columns: minmax(0, 860fr) minmax(0, 849fr);
    grid-template-rows: auto;
    grid-template-areas: "head body";
    column-gap: var(--col-gap);
    align-items: start;
    margin: 0;
  }
  .block-text-image--text-only .block-text-image__rule { margin-top: min(2.29vw, 44px); }
  .block-text-image--text-only .block-text-image__body { max-width: 699px; padding: min(3.28vw, 63px) 0 0; }

  .block-text-image--accent .block-text-image__grid {
    grid-template-columns: minmax(0, 974fr) minmax(0, 746fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "head media"
      "body media";
    margin: 0;
  }
  .block-text-image--accent .block-text-image__head { padding-top: min(7.083vw, 136px); }
  .block-text-image--accent .block-text-image__rule { margin-top: min(2.448vw, 47px); }

  .block-text-image--wide { overflow-x: clip; }
  .block-text-image--wide .block-text-image__head,
  .block-text-image--wide .block-text-image__body { position: relative; z-index: 1; }
  .block-text-image--wide .block-text-image__rule { margin-top: min(2.865vw, 55px); }
  .block-text-image--wide .block-text-image__body { margin-bottom: min(2.656vw, 51px); }
  .block-text-image--wide .block-text-image__media {
    width: calc(100% * 1268 / 1044);
    margin-left: calc(100% * -209 / 1044);
  }
}

/* ---- Tablet: one column (head → media → body, the Mobile Category order) --- */
@media (max-width: 1024px) {
  .block-text-image { padding: 88px 0 96px; }
  .block-text-image__grid,
  .block-text-image--media-left .block-text-image__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "head" "media" "body";
    margin: 0;
  }
  .block-text-image--media-left .block-text-image__head,
  .block-text-image--media-left .block-text-image__body { margin-left: 0; }
  .block-text-image__title { font-size: 40px; }
  .block-text-image__rule { margin-top: 40px; }
  .block-text-image__media { width: min(100%, 760px); margin: 24px auto 0; }
  .block-text-image__body { padding-top: 40px; }
  .block-text-image__line { display: inline; }            /* title_lines flow as one sentence */
  .block-text-image--accent .block-text-image__media {   /* same proportions: the block reaches the right edge */
    width: min(83.51%, 520px);
    margin: 32px 0 min(4.021%, 25px);
  }
  .block-text-image--wide .block-text-image__media img,
  .block-text-image--wide .block-text-image__media video {   /* the phone's window: x 200 → 1160 of 1268 */
    aspect-ratio: 960 / 881;
    object-fit: cover;
    object-position: 65% 50%;
  }
}

/* ---- Mobile (Figma "Mobile Category" 4148:2776, 402 wide) ------------------ *
   eyebrow 5717 (16px) → title 5749 (36px, 44px lines) → 64px rule 5870 → media 5897 385×308 at x8 →
   body 6253. Spacing: (eyebrow 5717 − numbered-cards bottom 5621) / 2 = 48 above; (comparison eyebrow
   6539 − body bottom 6428) / 2 = 56 below (the comparison block pads the other 55). */
@media (max-width: 640px) {
  .block-text-image { padding: 48px 0 56px; }
  .block-text-image__head { padding-left: 0; }
  .block-text-image__eyebrow { margin-bottom: 12px; }
  .block-text-image__title { font-size: 36px; line-height: 44px; max-width: none; }
  .block-text-image__rule { width: 64px; margin: 33px 0 0 -2px; }
  .block-text-image__media {
    width: calc(100% + 24px);                            /* 385 at 402: x8 → 393 */
    max-width: none;
    margin: 27px -12px 0;
  }
  .block-text-image__body { max-width: none; padding: 48px 0 0; }
  .block-text-image--text-only .block-text-image__body { padding-top: 40px; }
  .block-text-image--accent .block-text-image__media { width: 83.51%; margin: 32px 0 4.021%; }
}