:root{font-family:Inter,Arial,sans-serif;color:#101828;background:#fff}*{box-sizing:border-box}body{margin:0}header{min-height:72px;padding:14px 3vw;display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid #e5e7eb}.brand{font-weight:800;color:#101828;text-decoration:none;letter-spacing:.08em}.brand b,header nav a{color:#246bfd}header nav{display:flex;gap:18px}header nav a,header>a{text-decoration:none}.toolbar{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:28px}.toolbar span,.card b,.detail>b{font-size:12px;letter-spacing:.1em;text-transform:uppercase}.toolbar form{padding:0;background:none}.toolbar select{min-width:180px}main{max-width:1500px;margin:auto;padding:38px 3vw}h1{font-size:clamp(28px,4vw,46px);margin:.2em 0}.layout{display:grid;grid-template-columns:minmax(430px,1fr) minmax(480px,1.15fr);gap:24px}.cards{display:flex;flex-direction:column;gap:14px}.card,.detail{background:#fff;border:1px solid #e1e5eb;border-radius:14px;color:inherit;text-decoration:none;overflow:hidden}.card{display:grid;grid-template-columns:42% 1fr;min-height:190px;transition:.15s}.card:hover,.card.active{border-color:#246bfd;box-shadow:0 8px 24px #10182812}.card img{width:100%;height:100%;min-height:190px;object-fit:cover}.card-text{padding:20px}.card h2{margin:8px 0;font-size:21px}.card p{color:#667085;margin:0 0 14px}.card time{font-size:12px;color:#7b8494}.detail{position:sticky;top:24px;height:max-content;padding:26px;box-shadow:0 14px 35px #10182818}.hero{width:100%;max-height:480px;object-fit:cover;border-radius:9px;margin-bottom:24px}.detail h2{font-size:clamp(28px,3vw,42px);margin:10px 0}.lead{font-size:18px;color:#475467}.content{line-height:1.75}.detail footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #eaecf0;margin-top:26px;padding-top:18px}.detail footer a{color:#246bfd}form.editor{display:grid;gap:16px;max-width:850px;background:#fff;padding:28px;border-radius:14px}label{display:grid;gap:6px}input,textarea,select,button{font:inherit;padding:12px;border:1px solid #ccd3dd;border-radius:8px}textarea{min-height:120px}button{background:#246bfd;color:#fff;border:0}fieldset{border:1px solid #ccd3dd;border-radius:8px;padding:14px}fieldset label{display:inline-flex;margin:8px 16px 8px 0}
@media(max-width:800px){header{gap:12px;flex-wrap:wrap}header nav{gap:12px}.toolbar{align-items:stretch;flex-direction:column}.toolbar form,.toolbar select{width:100%}main{padding:24px 16px}.mobile-mode .layout{display:block}.mobile-mode .cards{gap:20px}.mobile-mode .card{display:grid;grid-template-columns:42% minmax(0,1fr)}.mobile-mode .card img{height:100%;min-height:0}.mobile-mode .card-text{padding:18px}.mobile-mode .detail{display:none}h1{font-size:30px}}

/* Configurable news grid with a permanently visible desktop/display detail. */
main{max-width:2200px}
.desktop-mode main,.display-mode main{width:max-content;max-width:none}
.display-page,body.display-mode{width:100%;height:100%;overflow:hidden}
.display-page,.display-page body,.display-page body *{cursor:none!important}
.display-mode .brand,.display-mode .card,.display-mode .media-launcher{pointer-events:none;-webkit-tap-highlight-color:transparent}
.display-mode .card{transition:none}
.display-mode .card:hover:not(.active){border-color:var(--news-border)!important;box-shadow:none!important}
.display-mode :focus,.display-mode :focus-visible{outline:0!important;box-shadow:none}
.layout{grid-template-columns:max-content 550px;align-items:start;justify-content:center;gap:14px}
.cards{display:grid;width:max-content;grid-template-columns:repeat(var(--news-grid-columns,2),550px);grid-template-rows:repeat(var(--news-grid-rows,4),var(--news-card-height,220px));gap:var(--news-grid-gap,14px)}
.card[hidden]{display:none!important}
.card{grid-template-columns:42% minmax(0,1fr);grid-template-rows:minmax(0,1fr);height:var(--news-card-height,220px);min-height:0;min-width:0}
.card img{width:100%;height:var(--news-card-height,220px);min-height:0;object-fit:cover;object-position:center}
.fallback-picture{display:block;width:100%;height:100%;overflow:hidden;background:#fff}
.fallback-picture img{width:100%;height:100%;object-fit:contain;object-position:center}
.detail-fallback{height:360px}
.card-text{display:flex;min-width:0;min-height:0;padding:18px;overflow:hidden;flex-direction:column}
.card h2{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;line-clamp:2;-webkit-line-clamp:2}
.card p{display:-webkit-box;overflow:hidden;margin-bottom:10px;-webkit-box-orient:vertical;line-clamp:3;-webkit-line-clamp:3}
.card time{margin-top:auto}
.detail{height:var(--news-detail-height,922px);max-height:var(--news-detail-height,922px);overflow:auto}
.hero{width:100%;height:360px;max-height:none;object-fit:cover;object-position:center}
.pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:28px;flex-wrap:wrap}
.pagination[hidden]{display:none!important}
.pagination a{text-decoration:none}
.page-arrow,.page-number{display:grid;min-width:38px;height:38px;padding:0 9px;place-items:center;border:1px solid #d8dee8;border-radius:8px;background:#fff;color:#344054}
.page-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.page-number.active{border-color:#246bfd;background:#246bfd;color:#fff}
.page-arrow.disabled{opacity:.4}
.attachments{display:grid;gap:18px;margin-top:26px}
.attachment{overflow:hidden;border:1px solid #e1e5eb;border-radius:10px;background:#fff}
.attachment img,.attachment video,.attachment object,.attachment iframe{display:block;width:100%;max-height:520px;border:0;background:#101828;object-fit:contain}
.attachment object{height:520px;background:#fff}
.attachment-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:13px 15px}
.attachment-bar b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attachment-bar a{flex:none;color:#246bfd}
.detail-media{display:grid;gap:14px;margin-bottom:24px}
.detail-media .hero{margin-bottom:0}
.detail-media .attachment img,.detail-media .attachment video,.detail-media .attachment object,.detail-media .attachment iframe{height:360px;max-height:360px}
.detail-media .pdf-preview{width:100%;height:360px;max-height:360px;object-fit:cover;object-position:center top}
.card-media,.card-file{width:100%;height:var(--news-card-height,220px);min-height:0;background:#fff;object-fit:cover;pointer-events:none}
.card-file{display:grid;padding:18px;place-content:center;gap:8px;text-align:center;color:#475467}
.card-file b{color:#246bfd;font-size:22px}
.card-file span{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;line-clamp:3;-webkit-line-clamp:3}
.header-filter{padding:0;background:none}
.header-filter select,.nav-button{height:42px;border:1px solid #b9c2d0;border-radius:8px;background:#fff}
.header-filter select{min-width:180px;padding:0 36px 0 12px}
header nav{align-items:center;gap:10px}
header nav .nav-button{display:flex;align-items:center;padding:0 15px;color:#246bfd}
.page-number.active{border:2px solid #246bfd;background:#fff;color:#246bfd;font-weight:700}

@media(max-width:1190px){
 .mobile-mode .layout{display:flex;flex-direction:column}
 .mobile-mode .cards{order:2;width:100%;grid-template-columns:repeat(var(--news-grid-columns,2),minmax(0,1fr));grid-template-rows:repeat(var(--news-grid-rows,4),var(--news-card-height,240px))}
 .mobile-mode .card{display:grid;grid-template-columns:42% minmax(0,1fr);grid-template-rows:minmax(0,1fr);height:var(--news-card-height,240px)}
 .mobile-mode .card img{height:100%}
 .mobile-mode .card .fallback-picture{height:100%}
 .mobile-mode .card-text{height:100%;padding:11px 14px}
 .mobile-mode .card h2{font-size:17px;margin:6px 0}
 .mobile-mode .detail{display:block;position:static;order:1;width:100%;height:auto;max-height:none;scroll-margin-top:16px}
 .mobile-mode .card-media,.mobile-mode .card-file{height:100%}
}

@media(max-width:520px){
 header nav{width:100%;flex-wrap:wrap}
 .header-filter{width:100%}
 .header-filter select{width:100%}
 .mobile-mode .cards{grid-template-rows:repeat(var(--news-grid-rows,4),250px)}
 .mobile-mode .card{height:250px}
 .mobile-mode .card img{height:100%}
 .mobile-mode .card .fallback-picture{height:100%}
 .mobile-mode .card-text{height:100%}
 .hero{height:240px}
}

/* Fixed detail footer and distraction-free media dialog. */
.detail{display:flex;flex-direction:column}
.detail footer{position:sticky;bottom:-26px;margin-top:auto;padding:18px 0 0;background:#fff}
.detail-media,.detail-media .attachment,.detail-media .media-launcher{overflow:hidden}
.media-launcher{position:relative;cursor:default}
a.card,.card>summary,a.card .media-launcher,.card>summary .media-launcher{cursor:pointer}
.media-open{position:absolute;z-index:2;inset:0;width:100%;height:100%;padding:0;border:0;border-radius:0;background:transparent;cursor:pointer}
.edit-button{display:inline-flex;height:38px;padding:0 15px;align-items:center;border:1px solid #246bfd;border-radius:8px;background:#fff;text-decoration:none}
.media-modal{width:min(96vw,1600px);height:94vh;max-width:none;max-height:none;padding:0;border:0;border-radius:14px;background:#101828;overflow:hidden;box-shadow:none}
.media-modal::backdrop{background:#101828}
.media-modal-panel{display:flex;width:100%;height:100%;flex-direction:column}
.media-modal-tools{display:flex;z-index:2;justify-content:flex-end;gap:8px;padding:10px;background:#111827}
.media-modal-tools button{width:38px;min-width:38px;height:38px;padding:0;border:1px solid #667085;border-radius:7px;background:#1f2937;color:#fff}
.media-modal-open,.media-modal-open body{overflow:hidden;overscroll-behavior:none}
.media-modal-stage{display:block;min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;text-align:center;scrollbar-width:none}
.media-modal-stage::-webkit-scrollbar{display:none}
.media-modal-stage img,.media-modal-stage video{display:block;width:auto;height:auto;max-width:100%;max-height:100%;margin:0 auto;border:0;object-fit:contain}
.media-modal-stage iframe{display:block;width:100%;height:100%;margin:0 auto;border:0;transform-origin:center top}

@media(max-width:600px){
 .media-modal{width:100vw;height:100vh;height:100dvh;margin:0;max-width:100vw;max-height:100vh;max-height:100dvh;border-radius:0}
 .media-modal-tools{padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) 8px max(8px,env(safe-area-inset-left))}
 .media-modal-stage{width:100%;max-width:100vw}
}

/* Compact icon navigation and selectable color theme. */
.filter-control{position:relative}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.search-control{position:relative;display:flex;align-items:center;gap:0;padding:0;background:none}
.search-field{display:block;width:0;overflow:hidden;transition:width .22s ease}
.search-field input{display:block;width:100%;height:38px;min-width:0;padding:7px 11px;border:2px solid var(--ui-outline);border-radius:8px;background:var(--news-background);color:var(--news-text)}
.search-control.open{gap:8px}
.search-control.open .search-field{width:min(280px,28vw)}
.search-control .search-active{border-color:#079455;background:#12b76a;color:#fff}
.search-control .search-active:hover{border-color:#067647;background:#079455;color:#fff}
.icon-button{display:grid;width:38px;height:38px;min-width:38px;padding:0;place-items:center;border:1px solid #b9c2d0;border-radius:8px;background:#fff;color:#246bfd;text-decoration:none;cursor:pointer}
.icon-button:hover{border-color:#246bfd;background:#fff}
.icon-button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.filter-popover{display:none;position:absolute;z-index:20;top:calc(100% + 9px);right:0;width:auto;padding:10px;border:1px solid #d8dee8;border-radius:10px;background:#fff;box-shadow:0 12px 30px #10182824}
.filter-popover.open{display:block}
.filter-popover select{width:220px;min-width:220px;height:42px}
.theme-icon-sun{display:none}
.fallback-picture .fallback-dark{display:none}

html[data-theme=dark],html[data-theme=dark] body{background:#000;color:#e5e7eb;color-scheme:dark}
html[data-theme=dark] header{border-color:#334155;background:#000}
html[data-theme=dark] .brand{color:#f8fafc}
html[data-theme=dark] .card,html[data-theme=dark] .detail,html[data-theme=dark] .detail footer{border-color:#334155;background:#000;color:#e5e7eb}
html[data-theme=dark] .card p,html[data-theme=dark] .card time,html[data-theme=dark] .lead{color:#94a3b8}
html[data-theme=dark] .icon-button,html[data-theme=dark] .filter-popover,html[data-theme=dark] .filter-popover select{border-color:#475569;background:#000;color:#7da2ff}
html[data-theme=dark] .icon-button:hover{border-color:#7da2ff;background:#000}
html[data-theme=dark] .page-arrow,html[data-theme=dark] .page-number{border-color:#475569;background:#000;color:#cbd5e1}
html[data-theme=dark] .page-number.active{border-color:#7da2ff;color:#7da2ff}
html[data-theme=dark] .attachment,html[data-theme=dark] .card-file{border-color:#334155;background:#000;color:#cbd5e1}
html[data-theme=dark] form.editor{background:#000}
html[data-theme=dark] input,html[data-theme=dark] textarea,html[data-theme=dark] select,html[data-theme=dark] fieldset{border-color:#475569;background:#000;color:#e5e7eb}
html[data-theme=dark] .edit-button{background:#000}
html[data-theme=dark] .theme-icon-moon{display:none}
html[data-theme=dark] .theme-icon-sun{display:block}
html[data-theme=dark] .fallback-picture .fallback-light{display:none}
html[data-theme=dark] .fallback-picture .fallback-dark{display:block}
html[data-theme=dark] .fallback-picture{background:#000}

@media(max-width:520px){
 header nav{width:auto;margin-left:auto;flex-wrap:nowrap}
 .header-filter,.filter-popover{width:auto}
 .filter-popover select{width:220px}
}


/* Media follows the grid content box, excluding the card border. */
.card>img,.card>.card-media,.card>.card-file,.card>.fallback-picture{
 height:100%;
 max-height:100%;
 min-height:0;
 min-width:0;
 overflow:hidden;
 box-shadow:none;
}
.card>img,.card>video{display:block}
