/* =====================
   m_thinking — «Thinking about renovation?» (last Home section)
   Desktop: Figma 1:419 (1142×928) — head w808 (H 52 + intro + button
            «BUTTON» = designer's placeholder copy) top, photo collage
            bottom-right (367×241 + 497×419, gap 20, right/bottom-aligned),
            blue «pmo» signature absolute over the collage.
   Mobile:  Figma 1:688 — NO button; column collage (155×100 right-aligned,
            313×163, gap 7.5) + sig at left; big glass footer follows in flow.
===================== */

.m_thinking {
  min-height: calc(100svh - 40px); /* page_main pad-block 20×2 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 36px;
  padding-block: 16px;
}

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

.m_thinking_text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.m_thinking_title {
  font-size: var(--font-size--h1);
  line-height: var(--line-height--tight);
}

.m_thinking_intro {
  font-size: var(--font-size--body);
  line-height: var(--line-height--body);
}

/* collage pinned to the section bottom, right-aligned (Figma justify-between) */
.m_thinking_collage {
  margin-top: auto;
  position: relative;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 20px;
}

.m_thinking_img { flex-shrink: 0; }
.m_thinking_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.m_thinking_img.is-small { width: 367px; height: 241px; }
.m_thinking_img.is-big { width: 497px; height: 419px; }

/* signature: Figma abs 531/593 in section = right 470 / bottom 227 of the
   right-packed collage (invariant to fluid column width); svg 129.9×64.65
   centered in its 141×91.9 rotated bbox */
.m_thinking_sig {
  position: absolute;
  right: calc(470px + 5.5px);
  bottom: calc(227px + 13.6px);
  width: 129.9px;
  height: 64.65px;
  transform: rotate(-12.86deg);
  color: var(--swatch--blue);
  pointer-events: none;
}
.m_thinking_sig svg { display: block; width: 100%; height: 100%; overflow: visible; }

@media (max-width: 991px) {
  .m_thinking {
    min-height: 0;
    padding-block: 0;
    gap: 24px; /* Figma 1:688 gap 24 (collage→footer) */
  }

  .m_thinking_head { gap: 16px; }
  .m_thinking_text { gap: 10px; }
  .m_thinking_title { font-size: var(--font-size--h1-mob); }
  /* CTA now shows on mobile too — content parity with desktop */

  .m_thinking_collage {
    margin-top: 12px; /* head→collage reads 36 (24 section gap + 12) */
    width: 353px;
    max-width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 7.5px;
  }
  .m_thinking_img.is-small { width: 155px; height: 100px; align-self: flex-end; }
  .m_thinking_img.is-big { width: 313px; height: 163px; }

  /* Figma 1:697: bbox 84.6×55.2 at left 0 / top 83; svg 77.9×38.8 centered */
  .m_thinking_sig {
    right: auto;
    bottom: auto;
    left: 3px;
    top: 91px;
    width: 77.9px;
    height: 38.8px;
  }
}