/* ML Control Version 3.4 — managed identity links and responsive navigation */
.id-avatar-home{display:block;width:max-content;max-width:100%;margin-inline:auto;border-radius:inherit;text-decoration:none;outline:none}.id-avatar-home .id-avatar{transition:transform .22s ease,filter .22s ease,box-shadow .22s ease}.id-avatar-home:hover .id-avatar,.id-avatar-home:focus-visible .id-avatar{transform:translateY(-3px) scale(1.015);filter:brightness(1.06);box-shadow:0 18px 44px rgba(24,117,255,.2)}.id-avatar-home:focus-visible{outline:3px solid rgba(41,132,255,.7);outline-offset:7px}.social-grid-managed{display:grid;grid-template-columns:repeat(auto-fit,44px);justify-content:center;gap:14px 12px;width:100%;max-width:224px;margin:34px auto 0}.social-grid-managed .social-btn{margin:0!important;width:44px;height:44px;display:grid;place-items:center}.sidebar-nav .nav-item.active{background:#1877f2;color:#fff}.sidebar-nav .nav-item.hide-desktop{display:none!important}@media(max-width:1024px) and (min-width:681px){.sidebar-nav .nav-item.hide-desktop{display:flex!important}.sidebar-nav .nav-item.hide-tablet{display:none!important}}@media(max-width:680px){.sidebar-nav .nav-item.hide-desktop{display:flex!important}.sidebar-nav .nav-item.hide-mobile{display:none!important}.social-grid-managed{grid-template-columns:repeat(auto-fit,42px);max-width:216px;gap:12px}.social-grid-managed .social-btn{width:42px;height:42px}}@media(min-width:1025px){.sidebar-nav .nav-item.hide-desktop{display:none!important}}

/* ML Control 3.5.1 — global 27/73 desktop layout */
@media (min-width:1025px){
  .vx-demo-3 .vx-3-identity{
    width:27% !important;
    padding:clamp(32px,3.2vw,54px) !important;
  }
  .vx-demo-3 .vx-3-feed{
    flex:0 0 73% !important;
    width:73% !important;
    margin-left:27% !important;
    min-width:0;
    padding-left:clamp(44px,4.25vw,80px);
  }
  .vx-demo-3 .identity-inner{
    width:100%;
    min-width:0;
  }
  .vx-demo-3 .id-avatar{
    width:clamp(128px,12vw,190px);
    height:clamp(128px,12vw,190px);
  }
  .vx-demo-3 .id-name{
    font-size:clamp(42px,4.2vw,68px);
  }
}


/* ML Control 3.5.2 — dynamic public content must never depend on WOW initialization */
.social-grid-managed,
.id-avatar-home,
.blog-card-feed .blog-card-item{
  visibility:visible !important;
  opacity:1 !important;
}

/* Version 3.6: maintainable blog templates and direct Animate.css transitions. */
.blog-card-feed {
    display: grid;
    gap: 26px;
}

.blog-card-item {
    display: grid !important;
    grid-template-columns: minmax(220px, 34%) 84px minmax(0, 1fr);
    gap: 24px;
    align-items: center;
    padding: 20px !important;
    border: 1px solid rgba(120, 120, 150, .16);
    border-radius: 22px;
    background: rgba(255, 255, 255, .025);
    animation-duration: .55s;
    animation-fill-mode: both;
}

.blog-card-image {
    display: block;
    overflow: hidden;
    border-radius: 16px;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #1d2130, #41356b);
}

.blog-card-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .35s ease;
}

.blog-card-item:hover .blog-card-image img {
    transform: scale(1.035);
}

.blog-card-placeholder {
    height: 100%;
    display: grid;
    place-items: center;
    font-size: 34px;
    color: rgba(255, 255, 255, .35);
}

.blog-card-item .blog-date-panel {
    align-self: start;
    padding-top: 8px;
}

.blog-card-item .blog-log-content {
    min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
    .animate__animated {
        animation: none !important;
    }
}

@media (max-width: 900px) {
    .blog-card-item {
        grid-template-columns: 1fr;
    }

    .blog-card-item .blog-date-panel {
        display: flex;
        gap: 8px;
        align-items: baseline;
    }

    .blog-card-image {
        width: 100%;
    }
}