/* Lavender Lotus Studio 8.9.8 — compact tools hero and full keyboard calculator support. */

/* Keep the Studio Tools introduction editorial, but never let a portrait image
   stretch the entire row into a large empty plum block. */
.tools-hero {
  min-height: 0;
  height: clamp(300px, 27vw, 390px);
  grid-template-columns: minmax(0, 1.16fr) minmax(320px, .84fr);
  grid-template-rows: minmax(0, 1fr);
}
.tools-hero > div {
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(30px, 4vw, 52px);
}
.tools-hero h2 {
  max-width: 760px;
  font-size: clamp(2.15rem, 3.45vw, 3.55rem);
}
.tools-hero > img {
  display: block;
  min-width: 0;
  min-height: 0;
  max-height: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}

/* A result card should read as a compact summary, not another oversized hero. */
.calculator-workspace {
  grid-template-columns: minmax(0, 1.48fr) minmax(280px, .52fr);
}
.calculator-result-card {
  padding: 20px;
}
.calculator-result-card > strong {
  margin: 8px 0 5px;
  font-size: clamp(2rem, 3vw, 3.25rem);
}
.calculator-result-card > p {
  margin: 0 0 16px;
}
.calculator-result-card .button-white {
  background: rgba(255,255,255,.96);
  border-color: rgba(255,255,255,.45);
  color: #2f2529;
}
.calculator-keyboard-hint {
  margin: 12px 2px 0 !important;
  color: rgba(255,255,255,.62) !important;
  font-size: .68rem;
  line-height: 1.45;
}

/* Make the floating tool feel like a utility instead of a second large panel. */
.floating-calculator-shell {
  width: min(320px, calc(100vw - 24px));
  border-radius: 18px;
}
.floating-calculator-header {
  padding: 10px 11px 10px 14px;
}
.floating-calculator-title {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.floating-calculator-title > span {
  color: rgba(255,255,255,.58);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.floating-calculator-body {
  padding: 10px;
}
.calculator-screen.compact {
  min-height: 72px;
  padding: 10px 12px;
}
.calculator-screen.compact strong {
  font-size: clamp(1.55rem, 4vw, 2.25rem);
}
.calculator-keys.compact {
  gap: 6px;
  margin-top: 8px;
}
.calculator-keys.compact .calc-key {
  min-height: 38px;
  border-radius: 10px;
  font-size: .92rem;
}

@media (max-width: 1180px) {
  .calculator-workspace { grid-template-columns: 1fr; }
  .calculator-workspace > .stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

@media (max-width: 900px) {
  .tools-hero {
    height: auto;
    grid-template-columns: 1fr;
  }
  .tools-hero > div { min-height: 250px; }
  .tools-hero > img {
    height: 240px;
    min-height: 240px;
    max-height: 240px;
  }
}

@media (max-width: 680px) {
  .tools-hero > div {
    min-height: 0;
    padding: 28px 24px;
  }
  .tools-hero h2 { font-size: clamp(2rem, 10vw, 2.75rem); }
  .tools-hero > img {
    height: 210px;
    min-height: 210px;
    max-height: 210px;
  }
  .calculator-workspace > .stack { grid-template-columns: 1fr; }
  .floating-calculator-title > span { display: none; }
}