/* ══ MEDIA LANDING — TAP TARGETS ═══════════════════════════════════════════
   Linked from brand-video-toronto.html and product-photography-toronto.html
   ONLY. A separate sheet because css/sell-media.css and css/sell-media-motion.css
   are shared with content-retainer.html, which is not this pass's to change.

   WHY IT EXISTS. Measured in Chrome at 390x844 with a touch pointer, reading
   offsetWidth/offsetHeight (the LAYOUT box, not getBoundingClientRect, which
   would report the transformed box while the reveal animation is mid-flight):
   the quote-builder presets and the reset button rendered 31px tall, the exit
   links and the portfolio link 21–22px. Both pages take cold paid traffic, and
   the presets are the control a buyer taps to price the job.

   The radio and quantity rows were NOT a failure — each input is wrapped in a
   <label class="qb__o"> that is the real hit area, and those measure well over
   44px. Measuring the 13px input inside the label is the false positive; it is
   recorded here so the next sweep does not "fix" it.

   THE FLOOR IS THE DEFAULT. 44px applies unless a fine pointer is present, and
   the relaxation lives inside @media (pointer: fine) — so a mouse gets exactly
   the geometry that shipped, and nothing about the desktop render moves.

   Two techniques, chosen per control:
     - the two BUTTONS grow (min-height), because a chip that is taller reads as
       deliberate and there is nothing tight above or below them;
     - the two LINK types keep their box and gain an invisible hit area, because
       their underline sits directly under the text and padding would detach it.
       Where that hit area could collide with the row above, the row gap grows to
       clear it rather than letting two targets overlap.
   ═══════════════════════════════════════════════════════════════════════════ */

.qb__preset,
.qb__reset {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* .exits: a wrapping row of small-caps links. 22px tall, 8px row gap — so the
   44px hit area is centred on the text and the gap opens to 24px to clear it. */
.exits { row-gap: 1.5rem; }
.exits a { position: relative; }
.exits a::after {
  content: "";
  position: absolute;
  left: -.35rem; right: -.35rem;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

/* .proof__link is the last thing in its card, so it can expand into its own
   margin without meeting another target. */
.proof__link { position: relative; }
.proof__link::after {
  content: "";
  position: absolute;
  left: -.35rem; right: -.35rem;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

@media (pointer: fine) {
  .qb__preset,
  .qb__reset { min-height: 0; }
  .exits { row-gap: .5rem; }
  .exits a::after,
  .proof__link::after { content: none; }
}