/* main-page-block-3 meryosab electronics web devolper resume.meryosab.com */
/* Убирает стандартный вертикальный зазор Gutenberg между соседними HTML-блоками этой страницы. */
.wp-block-html:has(> .main-block-3[data-main-block-3-root="3"]){margin-block-start:0!important;margin-block-end:0!important}
/* Все стили изолированы внутри блока №3. */
.main-block-3[data-main-block-3-root="3"]{
  --main-block-3-bg:var(--tvr-bg,#f6f8fb);
  --main-block-3-surface:var(--tvr-surface,#fff);
  --main-block-3-surface-2:var(--tvr-surface-2,#edf2f7);
  --main-block-3-line:var(--tvr-line,rgba(16,38,65,.10));
  --main-block-3-line-strong:var(--tvr-line-strong,rgba(16,38,65,.18));
  --main-block-3-text:var(--tvr-text,#17263a);
  --main-block-3-muted:var(--tvr-muted,#52667e);
  --main-block-3-dim:var(--tvr-dim,#7b8da1);
  --main-block-3-accent:var(--tvr-accent,#087f87);
  --main-block-3-accent-soft:var(--tvr-accent-soft,rgba(8,127,135,.10));
  --main-block-3-cta:var(--tvr-cta,#f47a29);
  --main-block-3-cta-hover:var(--tvr-cta-hover,#ff8f48);
  --main-block-3-cta-text:var(--tvr-cta-text,#fff);
  --main-block-3-shadow:var(--tvr-shadow,0 24px 65px rgba(19,37,60,.16));
  --main-block-3-font:var(--tvr-font,Inter,"Segoe UI",Roboto,Arial,Helvetica,sans-serif);
  --main-block-3-container:var(--tvr-container,1540px);
  --main-block-3-card-title-size:20px;
  --main-block-3-card-text-size:13px;
  --main-block-3-card-meta-size:10px;
  --main-block-3-card-link-size:12px;
  position:relative;
  width:100vw;
  max-width:100vw!important;
  margin:0 calc(50% - 50vw)!important;
  overflow:hidden;
  background:var(--main-block-3-bg);
  color:var(--main-block-3-text);
  font:400 16px/1.6 var(--main-block-3-font);
  letter-spacing:normal;
  isolation:isolate;
}
.main-block-3[data-main-block-3-root="3"],
.main-block-3[data-main-block-3-root="3"] *,
.main-block-3[data-main-block-3-root="3"] *::before,
.main-block-3[data-main-block-3-root="3"] *::after{box-sizing:border-box}
.main-block-3[data-main-block-3-root="3"] img{display:block;max-width:100%}
.main-block-3[data-main-block-3-root="3"] a{color:inherit;text-decoration:none}
.main-block-3[data-main-block-3-root="3"] button{font:inherit}
.main-block-3[data-main-block-3-root="3"] h2,
.main-block-3[data-main-block-3-root="3"] h3,
.main-block-3[data-main-block-3-root="3"] p{margin-top:0}
.main-block-3[data-main-block-3-root="3"] h2,
.main-block-3[data-main-block-3-root="3"] h3{
  color:var(--main-block-3-text);
  font-family:var(--main-block-3-font);
  font-weight:850;
  letter-spacing:-.035em;
  line-height:1.08;
  text-wrap:balance;
}
.main-block-3[data-main-block-3-root="3"] svg{
  display:block;
  width:1.25em;
  height:1.25em;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.main-block-3__symbols{position:absolute;width:0;height:0;overflow:hidden}
.main-block-3__container{width:100%;max-width:var(--main-block-3-container);margin:0 auto;padding:0 24px}
.main-block-3__section{position:relative;padding:72px 0 80px}
.main-block-3__heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:36px;
  margin-bottom:34px;
}
.main-block-3__heading-copy{max-width:840px}
.main-block-3__kicker{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
  color:var(--main-block-3-accent);
  font-size:12px;
  font-weight:850;
  letter-spacing:.15em;
  line-height:1.3;
  text-transform:uppercase;
}
.main-block-3__kicker::before{width:26px;height:2px;background:currentColor}
.main-block-3__heading h2{max-width:760px;margin-bottom:14px;font-size:44px}
.main-block-3__heading p{max-width:760px;margin-bottom:0;color:var(--main-block-3-muted);font-size:17px;line-height:1.65}
.main-block-3__summary{
  flex:none;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border:1px solid var(--main-block-3-line);
  border-radius:999px;
  background:var(--main-block-3-surface);
  color:var(--main-block-3-muted);
  font-size:12px;
  font-weight:750;
  white-space:nowrap;
}
.main-block-3__summary i{width:7px;height:7px;border-radius:50%;background:var(--main-block-3-accent);box-shadow:0 0 0 5px var(--main-block-3-accent-soft)}
.main-block-3__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.main-block-3-card{
  position:relative;
  min-width:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--main-block-3-line);
  border-radius:18px;
  background:var(--main-block-3-surface);
  box-shadow:0 8px 28px rgba(19,37,60,.06);
  transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease;
}
.main-block-3-card[hidden]{display:none!important}
.main-block-3-card:hover{
  z-index:2;
  transform:translateY(-5px);
  border-color:color-mix(in srgb,var(--main-block-3-accent) 54%,var(--main-block-3-line));
  box-shadow:0 20px 46px rgba(15,36,59,.14);
}
.main-block-3-card__media{position:relative;height:190px;overflow:hidden;background:var(--main-block-3-surface-2)}
.main-block-3-card__media::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:44%;
  background:linear-gradient(to top,rgba(5,16,28,.62),transparent);
  pointer-events:none;
}
.main-block-3-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}
.main-block-3-card:hover .main-block-3-card__media img{transform:scale(1.045)}
.main-block-3-card__group{
  position:absolute;
  z-index:2;
  left:14px;
  bottom:13px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 9px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:999px;
  background:rgba(6,20,34,.68);
  color:#fff;
  font-size:10px;
  font-weight:800;
  letter-spacing:.07em;
  line-height:1;
  text-transform:uppercase;
  backdrop-filter:blur(8px);
}
.main-block-3-card__group::before{content:"";width:5px;height:5px;border-radius:50%;background:#5ee4dc}
.main-block-3-card__body{min-height:238px;display:flex;flex-direction:column;padding:20px 20px 18px}
.main-block-3-card__number{margin-bottom:8px;color:var(--main-block-3-dim);font-size:var(--main-block-3-card-meta-size);font-weight:850;letter-spacing:.16em;line-height:1}
.main-block-3-card h3{
  min-height:44px;
  margin-bottom:8px;
  overflow:hidden;
  font-size:var(--main-block-3-card-title-size);
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.main-block-3-card p{
  min-height:61px;
  margin-bottom:18px;
  overflow:hidden;
  color:var(--main-block-3-muted);
  font-size:var(--main-block-3-card-text-size);
  line-height:1.55;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
}
.main-block-3-card__link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid var(--main-block-3-line);
  color:var(--main-block-3-accent);
  font-size:var(--main-block-3-card-link-size);
  font-weight:850;
}
.main-block-3-card__link svg{width:17px;height:17px;transition:transform .2s ease}
.main-block-3-card:hover .main-block-3-card__link svg{transform:translateX(4px)}
.main-block-3__more-wrap{display:flex;flex-direction:column;align-items:center;gap:9px;margin-top:28px}
.main-block-3__more{
  min-width:210px;
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:11px 20px;
  border:1px solid var(--main-block-3-accent);
  border-radius:12px;
  background:var(--main-block-3-accent);
  color:#fff;
  cursor:pointer;
  font-size:14px;
  font-weight:850;
  transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.main-block-3__more:hover{transform:translateY(-2px);background:color-mix(in srgb,var(--main-block-3-accent) 84%,#07111f);box-shadow:0 12px 28px var(--main-block-3-accent-soft)}
.main-block-3__more svg{width:18px;height:18px;transition:transform .25s ease}
.main-block-3__more:hover svg{transform:translateY(3px)}
.main-block-3__more[hidden]{display:none!important}
.main-block-3__status{margin:0;color:var(--main-block-3-dim);font-size:11px;line-height:1.4}
.main-block-3[data-main-block-3-root="3"] a:focus-visible,
.main-block-3[data-main-block-3-root="3"] button:focus-visible{outline:3px solid color-mix(in srgb,var(--main-block-3-accent) 62%,transparent);outline-offset:3px}
/* Резервные цвета, если переключатель темы меняет только атрибут, но не CSS-переменные. */
:root[data-tvr-theme="dark"] .main-block-3[data-main-block-3-root="3"],
body[data-tvr-theme="dark"] .main-block-3[data-main-block-3-root="3"],
.tvr-dark .main-block-3[data-main-block-3-root="3"]{
  --main-block-3-bg:var(--tvr-bg,#09121d);
  --main-block-3-surface:var(--tvr-surface,#101d2b);
  --main-block-3-surface-2:var(--tvr-surface-2,#152638);
  --main-block-3-line:var(--tvr-line,rgba(220,238,255,.11));
  --main-block-3-text:var(--tvr-text,#f2f7fb);
  --main-block-3-muted:var(--tvr-muted,#9eb0c4);
  --main-block-3-dim:var(--tvr-dim,#71869d);
}
@media (prefers-reduced-motion:no-preference){
  .main-block-3[data-main-block-3-root="3"] [data-main-block-3-reveal]{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
  .main-block-3[data-main-block-3-root="3"] [data-main-block-3-reveal].main-block-3-is-visible{opacity:1;transform:none}
  .main-block-3-card.main-block-3-is-card-entering{animation:main-block-3-card-in .42s both}
  @keyframes main-block-3-card-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
}
@media (max-width:1180px){
  .main-block-3__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .main-block-3-card__media{height:220px}
}
@media (max-width:900px){
  .main-block-3__container{padding-inline:18px}
  .main-block-3__section{padding:58px 0 64px}
  .main-block-3__heading{align-items:flex-start;flex-direction:column;gap:18px;margin-bottom:28px}
  .main-block-3__heading h2{font-size:36px}
  .main-block-3__summary{align-self:flex-start}
}
@media (max-width:640px){
  .main-block-3[data-main-block-3-root="3"]{
    --main-block-3-card-title-size:17px;
    --main-block-3-card-text-size:11px;
    --main-block-3-card-meta-size:9px;
    --main-block-3-card-link-size:11px;
    font-size:15px;
  }
  .main-block-3__container{padding-inline:14px}
  .main-block-3__section{padding:44px 0 50px}
  .main-block-3__heading{gap:14px;margin-bottom:22px}
  .main-block-3__kicker{margin-bottom:10px;font-size:10px;letter-spacing:.12em}
  .main-block-3__heading h2{margin-bottom:10px;font-size:30px}
  .main-block-3__heading p{font-size:15px;line-height:1.55}
  .main-block-3__summary{padding:8px 11px;font-size:11px}
  .main-block-3__grid{grid-template-columns:1fr;gap:14px}
  .main-block-3-card{display:grid;grid-template-columns:42% minmax(0,1fr);min-height:204px;border-radius:15px}
  .main-block-3-card__media{height:100%;min-height:204px}
  .main-block-3-card__media::after{inset:0 0 0 auto;width:44%;height:100%;background:linear-gradient(to left,rgba(5,16,28,.52),transparent)}
  .main-block-3-card__group{left:10px;right:10px;bottom:10px;justify-content:center;padding:6px 7px;font-size:8px;letter-spacing:.04em}
  .main-block-3-card__body{min-height:204px;padding:15px 14px 13px}
  .main-block-3-card__number{margin-bottom:7px}
  .main-block-3-card h3{min-height:38px;margin-bottom:7px}
  .main-block-3-card p{min-height:48px;margin-bottom:12px;line-height:1.45}
  .main-block-3-card__link{padding-top:10px}
  .main-block-3__more-wrap{margin-top:22px}
  .main-block-3__more{width:100%;min-height:46px}
}
@media (max-width:380px){
  .main-block-3-card{grid-template-columns:39% minmax(0,1fr)}
  .main-block-3-card__group{font-size:7px}
  .main-block-3[data-main-block-3-root="3"]{--main-block-3-card-title-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .main-block-3[data-main-block-3-root="3"] *,
  .main-block-3[data-main-block-3-root="3"] *::before,
  .main-block-3[data-main-block-3-root="3"] *::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}