/* Call card (Figma set 2331:10933; Prompt 22). Device=Desktop (desktop + tablet): radius 16, padding 24, gap 24, text left
   (title Desktop/10, description Desktop/12 secondary, meta Desktop/13 with 16px Lucide icons), Secondary Small "Apply" right.
   Device=Mobile (<600): padding 16, gap 12, title Mobile/09 (Storica), description Mobile/11, meta Mobile/12 wrapping,
   arrow-right 20 instead of the button; the whole card is the tap target (the Apply link is stretched over it). */
.call-card{--call-card-meta-gap-m:14px;   /* not a Figma token yet: phone meta column gap */
  position:relative;box-sizing:border-box;display:flex;align-items:center;gap:var(--space-24);padding:var(--space-24);background:var(--surface-default);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);transition:border-color .2s}
.call-card__text{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-8)}
.call-card__title{margin:0;font:var(--text-lg);color:var(--text-primary)}
.call-card__desc{margin:0;font:var(--text-sm);color:var(--text-secondary)}
.call-card__meta{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-20);font:var(--text-xs);color:var(--text-secondary)}
.call-card__meta li{display:inline-flex;align-items:center;gap:var(--space-6);white-space:nowrap}
.call-card__meta svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.call-card__apply{flex:none}
.call-card__arrow{display:none;flex:none;width:20px;height:20px;fill:none;stroke:var(--text-primary);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:599px){
  .call-card{gap:var(--space-12);padding:var(--space-16)}
  .call-card__text{gap:var(--space-6)}
  .call-card__title{font:var(--text-xl);text-transform:uppercase}
  .call-card__desc{font:var(--text-base)}
  .call-card__meta{font:var(--text-sm);gap:0 var(--call-card-meta-gap-m)}
  .call-card__arrow{display:block}
  /* the Apply link covers the whole card (one tap target, one focus stop) */
  .call-card__apply{position:absolute;inset:0;width:auto;height:auto;min-height:0;padding:0;border:0;border-radius:inherit;background:transparent;box-shadow:none;opacity:1}
  .call-card__apply .btn__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .call-card__apply:focus-visible{box-shadow:var(--shadow-focus-ring)}
  .call-card:has(.call-card__apply:active){border-color:var(--border-strong)}
}
@media (hover:hover){ .call-card:hover{border-color:var(--border-default)} }
/* device="mobile" (Figma Device=Mobile forced, e.g. the components page specimen): the same rules as under 600 */
.call-card--mobile{gap:var(--space-12);padding:var(--space-16)}
.call-card--mobile .call-card__text{gap:var(--space-6)}
.call-card--mobile .call-card__title{font:var(--text-xl);text-transform:uppercase}
.call-card--mobile .call-card__desc{font:var(--text-base)}
.call-card--mobile .call-card__meta{font:var(--text-sm);gap:0 var(--call-card-meta-gap-m)}
.call-card--mobile .call-card__arrow{display:block}
.call-card--mobile .call-card__apply{position:absolute;inset:0;width:auto;height:auto;min-height:0;padding:0;border:0;border-radius:inherit;background:transparent;box-shadow:none;opacity:1}
.call-card--mobile .call-card__apply .btn__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}