/* Compact expandable service cards for RabotaLive24.
   The main card remains a normal link. On touch devices only the separate arrow
   button expands or collapses the description. */

.module-grid{
  align-items:start !important;
  gap:14px !important;
}

.module-card-shell{
  position:relative;
  min-width:0;
}

.module-card-shell > .module-card{
  width:100% !important;
}

.module-card{
  position:relative !important;
  z-index:1;
  display:block !important;
  height:auto !important;
  min-height:112px !important;
  max-height:none !important;
  overflow:hidden !important;
  border-radius:22px !important;
  transform:translateZ(0);
  transition:
    transform .30s ease,
    box-shadow .30s ease,
    min-height .38s cubic-bezier(.22,.61,.36,1) !important;
}

.module-card .module-content{
  position:relative !important;
  inset:auto !important;
  z-index:2 !important;
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;
  width:100% !important;
  min-height:112px !important;
  padding:17px 18px !important;
  transition:
    min-height .38s cubic-bezier(.22,.61,.36,1),
    padding .30s ease !important;
}

.module-card .module-content h3{
  position:relative;
  z-index:2;
  margin:0 !important;
  padding:0 !important;
  font-size:clamp(22px,2vw,27px) !important;
  line-height:1.12 !important;
  letter-spacing:-.025em !important;
  text-wrap:balance;
  transition:transform .30s ease !important;
}

/* Details stay in HTML and are only visually collapsed. */
.module-card .module-badge,
.module-card .module-content > p,
.module-card .module-button{
  box-sizing:border-box;
  overflow:hidden;
  opacity:0;
  max-height:0;
  margin-top:0 !important;
  margin-bottom:0 !important;
  transform:translateY(9px);
  pointer-events:none;
  transition:
    opacity .24s ease,
    transform .32s ease,
    max-height .40s cubic-bezier(.22,.61,.36,1),
    margin .32s ease !important;
}

.module-card .module-badge{
  align-self:flex-start;
}

.module-card.is-card-open,
.module-card:focus-visible{
  min-height:232px !important;
  transform:translateY(-3px);
}

.module-card.is-card-open .module-content,
.module-card:focus-visible .module-content{
  min-height:232px !important;
  padding:20px !important;
}

.module-card.is-card-open .module-badge,
.module-card:focus-visible .module-badge{
  opacity:1;
  max-height:46px;
  margin-bottom:10px !important;
  transform:translateY(0);
  pointer-events:auto;
}

.module-card.is-card-open .module-content > p,
.module-card:focus-visible .module-content > p{
  opacity:1;
  max-height:190px;
  margin-top:11px !important;
  transform:translateY(0);
  pointer-events:auto;
  font-size:16px !important;
  line-height:1.48 !important;
}

.module-card.is-card-open .module-button,
.module-card:focus-visible .module-button{
  opacity:1;
  max-height:64px;
  margin-top:15px !important;
  transform:translateY(0);
  pointer-events:auto;
  font-size:15px !important;
  line-height:1.2 !important;
}

.module-card-toggle{
  display:none;
}

@media (hover:hover) and (pointer:fine){
  .module-card:hover{
    min-height:232px !important;
    transform:translateY(-3px);
  }

  .module-card:hover .module-content{
    min-height:232px !important;
    padding:20px !important;
  }

  .module-card:hover .module-badge{
    opacity:1;
    max-height:46px;
    margin-bottom:10px !important;
    transform:translateY(0);
    pointer-events:auto;
  }

  .module-card:hover .module-content > p{
    opacity:1;
    max-height:190px;
    margin-top:11px !important;
    transform:translateY(0);
    pointer-events:auto;
    font-size:16px !important;
    line-height:1.48 !important;
  }

  .module-card:hover .module-button{
    opacity:1;
    max-height:64px;
    margin-top:15px !important;
    transform:translateY(0);
    pointer-events:auto;
    font-size:15px !important;
    line-height:1.2 !important;
  }
}

@media (max-width:900px){
  .module-grid{
    gap:10px !important;
  }

  .module-card-shell{
    border-radius:18px;
  }

  .module-card{
    min-height:84px !important;
    border-radius:18px !important;
    -webkit-tap-highlight-color:transparent;
  }

  .module-card .module-content{
    min-height:84px !important;
    padding:14px 58px 14px 15px !important;
  }

  .module-card .module-content h3{
    padding:0 !important;
    font-size:22px !important;
    line-height:1.12 !important;
  }

  .module-card-toggle{
    position:absolute;
    z-index:5;
    top:50%;
    right:12px;
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    padding:0;
    border:1px solid rgba(15,23,42,.10);
    border-radius:50%;
    color:#16385f;
    background:rgba(255,255,255,.92);
    box-shadow:0 7px 20px rgba(15,23,42,.16);
    font:900 24px/1 Arial,sans-serif;
    cursor:pointer;
    transform:translateY(-50%);
    transition:
      transform .32s ease,
      top .32s ease,
      background .20s ease,
      box-shadow .20s ease;
    -webkit-tap-highlight-color:transparent;
  }

  .module-card-toggle span{
    display:block;
    transform:translateY(-2px) rotate(0deg);
    transition:transform .32s ease;
  }

  .module-card-toggle:focus-visible{
    outline:3px solid rgba(37,99,235,.34);
    outline-offset:2px;
  }

  .module-card-toggle:active{
    background:#fff;
    box-shadow:0 4px 12px rgba(15,23,42,.18);
  }

  .module-card.is-card-open{
    min-height:216px !important;
  }

  .module-card.is-card-open .module-content{
    min-height:216px !important;
    padding:18px 58px 18px 16px !important;
  }

  .module-card.is-card-open + .module-card-toggle,
  .module-card-shell:has(.module-card.is-card-open) .module-card-toggle{
    top:28px;
    transform:translateY(0);
  }

  .module-card.is-card-open + .module-card-toggle span,
  .module-card-shell:has(.module-card.is-card-open) .module-card-toggle span{
    transform:translateY(2px) rotate(180deg);
  }

  .module-card.is-card-open .module-content > p{
    max-height:220px;
    font-size:16px !important;
    line-height:1.5 !important;
  }

  .module-card.is-card-open .module-button{
    padding-right:0;
  }
}

@media (max-width:760px){
  .module-grid{
    grid-template-columns:1fr !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .module-card,
  .module-card .module-content,
  .module-card .module-badge,
  .module-card .module-content > p,
  .module-card .module-button,
  .module-card-toggle,
  .module-card-toggle span{
    transition:none !important;
  }
}