/* ==========================================================================
   Blocks scale instead of stretching

   Each block below is drawn once at a design width. --u is 1px at that width
   and shrinks with the block, so padding, type, pictures and corners shrink
   together and the block keeps one shape. Body text and button text stop at
   14px, buttons stop at 44px tall. Before text reaches 14px the layout changes
   (the panel stacks, the cards turn upright). A block that runs out of room
   grows taller to fit its text rather than cut it off.

   Loads after every other theme stylesheet, so these rules win at equal
   specificity. Remove this file from inc/enqueue.php to undo the change.
   ========================================================================== */

/* ---------- "Ask us" closing panel ----------
   In a row (screens 981px and up): drawn at 1200 x 258.
   Text above the buttons (900 to 980px): drawn at 932 x 300.
   Up to 899px (phones and tablets upright) the panel stacks, centres and follows its text.
   The panel's own padding is in % of its width; the text inside uses --u.
   --u sits on the panel's children, not the panel. product-card.css
   registers --u as a length, so the browser works it out where it is set, and
   on the panel itself 100cqi reads the screen width, not the panel's. */
@media (min-width:981px){
  .ab-cta{container-type:inline-size;--art-w:18.333%;
    aspect-ratio:1200 / 258;padding:4% 16.167% 4% 4%;gap:2% 2.667%}
  .ab-cta > *{--u:calc(100cqi / 1200)}
  .ab-cta h2{font-size:calc(28 * var(--u))}
  .ab-cta h2[style]{margin-top:calc(10 * var(--u)) !important}
  .ab-cta p{margin-top:calc(8 * var(--u));font-size:max(var(--fs-sm), calc(16 * var(--u)))}
  .ab-cta .pg-actions{gap:calc(12 * var(--u))}
  .ab-cta .btn{--bh:44px;--bpx:calc(24 * var(--u));--bfs:max(var(--fs-sm), calc(15 * var(--u)))}
}
@media (max-width:980px) and (min-width:900px){
  .ab-cta{container-type:inline-size;--art-w:20.4%;
    aspect-ratio:932 / 300;padding:3.5% 17.6% 3.5% 3.5%;row-gap:2.6%}
  .ab-cta > *{--u:calc(100cqi / 932)}
  .ab-cta h2{font-size:calc(24 * var(--u))}
  .ab-cta h2[style]{margin-top:calc(10 * var(--u)) !important}
  .ab-cta p{margin-top:calc(8 * var(--u));font-size:max(var(--fs-sm), calc(16 * var(--u)))}
  .ab-cta .btn{--bh:max(44px, calc(48 * var(--u)));--bpx:calc(24 * var(--u));--bfs:max(var(--fs-sm), calc(16 * var(--u)))}
}

/* ---------- safety net ----------
   overflow:clip still rounds the corners like overflow:hidden, but lets a block
   grow taller to fit longer text (for example new copy from the Customizer)
   rather than cut it off. */
.ab-cta{overflow:clip}