/* Visual Blog 1.0.49 — PUBLIC SHELL CONTRACT.
 * Owns header, navigation, statistics, filters, view chooser and optional footer modules.
 * Do not redefine these selectors in public-entry/public-media/public-density.
 */
.visual-blog-public-header{
    display:grid;
    grid-template-columns:minmax(390px,.8fr) minmax(620px,1.2fr);
    gap:14px 24px;
    align-items:start;
    margin:0 0 18px;
    padding:26px 28px;
    border:1px solid #e5e9f2;
    border-radius:28px;
    background:linear-gradient(135deg,#fff,#f7f8ff);
    box-shadow:0 18px 50px rgba(25,35,70,.07);
}
.visual-blog-public-header-copy{min-width:0}
.visual-blog-public-kicker{margin:0 0 6px;color:var(--dp-public-accent);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.visual-blog-public-header h1{margin:0;font-size:clamp(30px,5vw,56px);line-height:1.04}
.visual-blog-public-header-copy>p:last-child{max-width:620px;margin:12px 0 0;color:#667085;font-size:17px;line-height:1.45}
.visual-blog-public-header-actions{justify-self:end;width:100%;min-width:0;max-width:720px}
.visual-blog-public-header-actions-top{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:nowrap;width:100%;min-width:0}
.visual-blog-public-topnav{display:flex;align-items:center;justify-content:flex-end;gap:6px 12px;flex:0 0 auto;flex-wrap:nowrap;margin:0;padding:0;border:0;background:transparent;white-space:nowrap}
.visual-blog-public-topnav a,.visual-blog-public-topnav a.is-home{display:inline;min-height:0;padding:0;border:0;border-radius:0;background:transparent;color:var(--dp-public-accent);font-weight:700;line-height:1.2;text-decoration:none;white-space:nowrap}
.visual-blog-public-topnav a:hover,.visual-blog-public-topnav a:focus-visible{text-decoration:underline;text-underline-offset:3px}
.visual-blog-public-header-actions-top .visual-blog-language-switcher{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex:0 0 auto;flex-wrap:nowrap;white-space:nowrap}
.visual-blog-public-header-stats{margin-top:7px}
.visual-blog-public-header-stats .visual-blog-public-stats-strip{display:grid;grid-template-columns:repeat(6,minmax(74px,1fr));gap:7px;margin:0;padding:0}
.visual-blog-public-stats-strip{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap;margin:0;padding:0}
.visual-blog-public-stat{min-width:0;padding:9px 11px;border:1px solid #e1e7f0;border-radius:12px;background:#fff;box-shadow:0 5px 14px rgba(15,23,42,.035)}
.visual-blog-public-stat strong{display:block;color:#172033;font-size:18px;line-height:1.05}
.visual-blog-public-stat span{display:block;margin-top:3px;color:#64748b;font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}

.visual-blog-public-controls-row{position:relative;display:block;width:100%;min-height:40px;margin:0 0 18px}
.visual-blog-public-filter-shell{display:block;margin:0 auto;border:1px solid #dfe5ef;border-radius:12px;background:#fff;box-shadow:0 5px 16px rgba(15,23,42,.035);transition:width .15s ease}
.visual-blog-public-filter-shell.is-collapsible:not(.is-open){width:min(520px,calc(100% - 28px))}
.visual-blog-public-filter-shell.is-collapsible.is-open,.visual-blog-public-filter-shell.is-open:not(.is-collapsible),.visual-blog-public-filter-shell:not(.is-collapsible){width:min(800px,calc(100% - 28px))}
.visual-blog-public-filter-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:40px;padding:0 14px;border:0;border-radius:11px;background:#fff;color:#334155;font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.visual-blog-public-filter-chevron{font-size:15px;line-height:1;transition:transform .15s ease}
.visual-blog-public-filter-shell.is-open .visual-blog-public-filter-chevron{transform:rotate(180deg)}
.visual-blog-public-filter-panel[hidden]{display:none!important}
.visual-blog-public-filter-panel{padding:10px;border-top:1px solid #edf0f5}
.visual-blog-public-filters{display:grid;grid-template-columns:repeat(4,minmax(112px,1fr)) auto;gap:10px;align-items:end;margin:0;padding:0;border:0;background:transparent}
.visual-blog-public-filters label{display:grid;gap:5px;min-width:0}
.visual-blog-public-filters label span{color:#667085;font-size:11px;font-weight:700}
.visual-blog-public-filters select,.visual-blog-public-filters button{width:100%;min-height:40px;padding:0 11px;border:1px solid #d8deeb;border-radius:10px;background:#fff;font:inherit}
.visual-blog-public-filters button{width:auto;border-color:var(--dp-public-accent);background:var(--dp-public-accent);color:#fff;font-weight:800;cursor:pointer}

.visual-blog-density-control{position:absolute;top:0;right:0;z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:6px;width:max-content}
.visual-blog-density-current{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 13px;border:1px solid #cbd5e1;border-radius:11px;background:#fff;color:#475569;font:inherit;font-size:12px;font-weight:800;white-space:nowrap;box-shadow:0 5px 16px rgba(15,23,42,.035);cursor:pointer}
.visual-blog-density-menu[hidden]{display:none!important}
.visual-blog-density-menu{position:absolute;top:calc(100% + 6px);right:0;display:grid;gap:6px;min-width:210px;padding:9px;border:1px solid #d8deeb;border-radius:14px;background:#fff;box-shadow:0 18px 36px rgba(15,23,42,.14)}
.visual-blog-density-option{display:flex;align-items:center;justify-content:flex-start;width:100%;min-height:38px;padding:0 11px;border:1px solid #d8deeb;border-radius:10px;background:#fff;color:#475569;font:inherit;font-size:12px;font-weight:750;text-align:left;cursor:pointer}
.visual-blog-density-option.is-active,.visual-blog-density-option[aria-pressed="true"]{border-color:var(--dp-public-accent);background:#f7f7ff;color:var(--dp-public-accent)}

.visual-blog-stats-drawer{position:fixed;left:12px;bottom:18px;z-index:9994}
.visual-blog-stats-drawer>button{min-height:38px;padding:0 12px;border:1px solid color-mix(in srgb,var(--dp-public-accent) 45%,#dbe2ef);border-radius:10px;background:#fff;color:var(--dp-public-accent);font-weight:800;box-shadow:0 8px 24px rgba(15,23,42,.10);cursor:pointer}
.visual-blog-stats-drawer-panel[hidden]{display:none!important}
.visual-blog-stats-drawer-panel{position:absolute;left:0;bottom:48px;width:min(300px,calc(100vw - 28px));padding:10px;border:1px solid #dfe5ef;border-radius:15px;background:#fff;box-shadow:0 18px 50px rgba(15,23,42,.16)}
.visual-blog-stats-drawer-panel .visual-blog-public-stats-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:0}
.visual-blog-back-to-top{position:fixed;right:180px;bottom:20px;z-index:9993;display:none;align-items:center;gap:5px;padding:6px 10px;border:1px solid #d7deea;border-radius:9px;background:rgba(255,255,255,.94);color:var(--dp-public-accent);font-size:12px;font-weight:800;text-decoration:none;box-shadow:0 7px 20px rgba(15,23,42,.08);backdrop-filter:blur(8px)}
.visual-blog-back-to-top.is-visible{display:inline-flex}

.visual-blog-public-pinned{display:inline-flex;align-items:center;gap:4px;padding:5px 9px;border:1px solid rgba(79,70,229,.24);border-radius:999px;background:rgba(79,70,229,.07);color:#4338ca;font-size:12px;font-weight:800;white-space:nowrap}
.visual-blog-public-about{display:flex;align-items:center;gap:16px;margin:22px 0 16px;padding:18px;border:1px solid #e1e7f0;border-radius:18px;background:#fff}
.visual-blog-public-about img{flex:0 0 74px;width:74px;height:74px;object-fit:cover;border-radius:16px}
.visual-blog-public-about h3{margin:0 0 4px;font-size:18px}.visual-blog-public-about p{margin:0;color:#64748b}
.visual-blog-public-subscribe{display:flex;align-items:center;justify-content:space-between;gap:22px;margin:28px 0 16px;padding:22px 24px;border-radius:20px;background:linear-gradient(135deg,#20233f,#354c75);color:#fff;box-shadow:0 14px 34px rgba(25,32,62,.16)}
.visual-blog-public-subscribe h3{margin:0 0 4px;color:#fff;font-size:20px}.visual-blog-public-subscribe p{margin:0;color:rgba(255,255,255,.76)}
.visual-blog-public-subscribe form{display:flex;align-items:center;gap:8px;flex:0 1 470px}.visual-blog-public-subscribe label{flex:1 1 auto}
.visual-blog-public-subscribe input{width:100%;min-height:44px;padding:0 14px;border:1px solid rgba(255,255,255,.24);border-radius:11px;background:rgba(255,255,255,.12);color:#fff;outline:none}
.visual-blog-public-subscribe input::placeholder{color:rgba(255,255,255,.62)}
.visual-blog-public-subscribe button{min-height:44px;padding:0 18px;border:0;border-radius:11px;background:#fff;color:#273155;font-weight:800;cursor:pointer}
.visual-blog-public-subscribe-success{padding:10px 14px;border-radius:11px;background:rgba(255,255,255,.14);font-weight:800}
.visual-blog-public-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:16px 0 0;padding:18px 4px 6px;border-top:1px solid #e4e8f0;color:#64748b;font-size:13px}
.visual-blog-public-footer nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.visual-blog-public-footer a{color:var(--dp-public-accent);font-weight:750;text-decoration:none}.visual-blog-public-footer a:hover{text-decoration:underline}

@media(max-width:1100px){
    .visual-blog-public-header{grid-template-columns:1fr;gap:12px;padding:24px 26px}
    .visual-blog-public-header-actions{justify-self:stretch;max-width:none}
    .visual-blog-public-header-actions-top{justify-content:flex-start}
    .visual-blog-public-topnav{justify-content:flex-start;flex-wrap:wrap}
    .visual-blog-public-header-actions-top .visual-blog-language-switcher{justify-content:flex-start;flex-wrap:wrap}
    .visual-blog-public-header-stats .visual-blog-public-stats-strip{grid-template-columns:repeat(6,minmax(70px,1fr))}
}
@media(max-width:1040px){
    .visual-blog-public-controls-row{display:flex;flex-direction:column;align-items:center;gap:8px}
    .visual-blog-density-control{position:relative;top:auto;right:auto;align-items:stretch;width:auto;max-width:100%}
    .visual-blog-density-menu{right:50%;transform:translateX(50%)}
}
@media(max-width:820px){
    .visual-blog-public-header-stats .visual-blog-public-stats-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
    .visual-blog-public-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
    .visual-blog-public-header{padding:20px 18px;border-radius:20px}
    .visual-blog-public-header-copy>p:last-child{font-size:16px}
    .visual-blog-public-header h1{font-size:clamp(30px,10vw,44px)}
    .visual-blog-public-header-stats .visual-blog-public-stats-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
    .visual-blog-public-filter-shell.is-collapsible:not(.is-open),.visual-blog-public-filter-shell.is-collapsible.is-open,.visual-blog-public-filter-shell:not(.is-collapsible){width:100%}
    .visual-blog-public-filters{grid-template-columns:1fr}
    .visual-blog-density-control,.visual-blog-density-current{width:100%}
    .visual-blog-density-menu{right:0;width:100%;min-width:0;transform:none}
    .visual-blog-stats-drawer{left:10px;bottom:14px}
    .visual-blog-back-to-top{right:92px;bottom:14px}
    .visual-blog-public-about{align-items:flex-start}.visual-blog-public-about img{width:58px;height:58px;flex-basis:58px}
    .visual-blog-public-subscribe{align-items:stretch;flex-direction:column;padding:18px}.visual-blog-public-subscribe form{width:100%;flex:1 1 auto}
}
@media(max-width:480px){.visual-blog-public-subscribe form{flex-direction:column;align-items:stretch}.visual-blog-public-subscribe button{width:100%}}