/* r38 · sponsors calculator ("Seven places a brand can live in your app") on smaller screens.
   Loaded last. Nothing here changes copy or markup.
   ≥1200 px  three columns (list · whole phone · total), the phone sized to the window height so it fits whole.
   861–1199  two columns: list with the total under it · the whole phone on the right (it used to squeeze the list to 200–320 px,
             names broke word by word and the price ran over them).
   ≤860      one column (the kit's phone layout); the total card stops floating over the rows and the phone. */

/* ---------- ≥861: one phone size for the column and the phone itself ---------- */
@media (min-width: 861px) {
  .calc.kcalc { --cpw: clamp(220px, calc((100vh - 96px - 96px) * 390 / 844), 300px); }
  .calc .cprev-ph { --pw: var(--cpw); }
  .calc .cprev-cap { max-width: var(--cpw); }
}
@media (min-width: 1200px) {
  .calc.kcalc { grid-template-columns: minmax(0, 1.12fr) calc(var(--cpw) + 16px) minmax(260px, .78fr); }
}

/* ---------- 861–1199: list + total on the left, the phone on the right ---------- */
@media (min-width: 861px) and (max-width: 1199px) {
  .calc.kcalc {
    --cpw: clamp(220px, calc((100vh - 96px - 96px) * 390 / 844), 260px);
    grid-template-columns: minmax(0, 1fr) calc(var(--cpw) + 8px);
    grid-template-areas: "list phone" "sum phone";
    grid-template-rows: auto 1fr;
    column-gap: clamp(24px, 3.4vw, 48px); row-gap: 16px;
  }
  .calc .kcalc__list { grid-area: list; }
  .calc .cprev { grid-area: phone; }
  .calc .kcalc__sum { grid-area: sum; position: relative; top: auto; align-self: start;
    grid-template-columns: minmax(150px, 34%) minmax(0, 1fr); align-items: stretch; }
  .calc .kcalc__jar { height: auto; min-height: 150px; margin: 12px 0 12px 12px; }
  .calc .kcalc__totals { padding: 18px 22px; align-content: center; }
  .calc .kcalc__total { font-size: clamp(40px, 4.4vw, 52px); }
}

/* ---------- ≤860: the total sits after the list, it no longer floats over rows and the phone ---------- */
@media (max-width: 860px) {
  .calc .kcalc__sum { position: relative; bottom: auto; top: auto; margin-top: 8px;
    background: var(--kcalc-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* the chosen place, as a whole phone under its row: phone left, name right, nothing cut */
  .calc .cprev { padding: 12px 4px 16px 44px; }
}
@media (max-width: 420px) {
  .calc .cprev { padding-left: 8px; gap: 14px; }
  .calc .cprev-ph { --pw: 150px; }
}

/* touch: "How each place is measured" had a 40 px hit area; 44 px without moving the text */
@media (pointer: coarse), (max-width: 860px) {
  .calc-foot .textlink { position: relative; }
  .calc-foot .textlink::before { content: ""; position: absolute; inset: -10px -6px; }
}