/* =========================================================================
   practice — "תחומי הייצוג", Figma 74:6912. 6 navy cards (546.67×294), 3-up,
   gaps 30 × 32. Hover = Figma variant "Variant2": icon shrinks 95→76 and rises
   to the top, title follows, the description fades in. On touch screens (no
   hover) and from tablet down the cards show that open state from the start.
   ========================================================================= */
.practice{padding-top:77px}
.practice__sub{font-size:24px;line-height:30px;color:var(--black);margin-top:9px}
.practice__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 30px;margin-top:41px}

.area-card{position:relative;height:294px;overflow:hidden;background:var(--navy);color:var(--white);outline-offset:-3px}
.area-card .num{position:absolute;top:25px;right:19px;transition:opacity .3s}
.area-card__body{position:absolute;top:126px;right:18px;left:33px;transition:top .35s ease}
.area-card__icon{width:95px;height:95px;transition:width .35s ease,height .35s ease}
.area-card__title{font-family:var(--font-display);font-weight:400;font-size:28px;line-height:1.21;margin-top:12px;transition:margin .35s ease}
.area-card__desc{font-size:21px;line-height:28px;margin-top:5px;opacity:0;transform:translateY(12px);transition:opacity .3s ease .05s,transform .35s ease}

.area-card:hover .num,.area-card:focus-visible .num,.area-card:focus-within .num{opacity:0}
.area-card:hover .area-card__body,.area-card:focus-visible .area-card__body,.area-card:focus-within .area-card__body{top:17px}
.area-card:hover .area-card__icon,.area-card:focus-visible .area-card__icon,.area-card:focus-within .area-card__icon{width:76px;height:76px}
.area-card:hover .area-card__title,.area-card:focus-visible .area-card__title,.area-card:focus-within .area-card__title{margin-top:24px}
.area-card:hover .area-card__desc,.area-card:focus-visible .area-card__desc,.area-card:focus-within .area-card__desc{opacity:1;transform:none}

@media (max-width:1480px){
  .practice{padding-top:64px}
  .practice__sub{font-size:21px;line-height:28px}
  .practice__grid{gap:24px;margin-top:34px}
  .area-card{height:300px}
  .area-card__title{font-size:25px}
  .area-card__desc{font-size:18px;line-height:25px}
}

/* open state from the start — touch screens, tablet, mobile */
@media (hover:none),(max-width:1100px){
  .area-card{height:auto;min-height:0;padding:20px 19px 26px 24px}
  .area-card .num{top:20px;right:auto;left:20px}
  .area-card__body{position:static}
  .area-card__icon{width:76px;height:76px}
  .area-card__title{margin-top:20px}
  .area-card__desc{opacity:1;transform:none}
  .area-card:hover .num,.area-card:focus-within .num{opacity:1}
}
@media (max-width:1100px){
  .practice{padding-top:56px}
  .practice__sub{font-size:18px;line-height:26px}
  .practice__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:30px}
  .area-card__title{font-size:24px}
  .area-card__desc{font-size:17px;line-height:24px}
}
@media (max-width:640px){
  .practice{padding-top:44px}
  .practice__sub{font-size:16px;line-height:24px}
  .practice__grid{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:24px}
  .area-card{padding:18px 18px 22px}
  .area-card__icon{width:64px;height:64px}
  .area-card__title{font-size:22px;margin-top:14px}
  .area-card .num{height:32px;min-width:0;padding:0 14px;font-size:16px;left:18px;top:18px}
}