/* ==========================================================================
   OERL Media & Insights — newsroom index and the strips that reuse it.
   Scoped .mi-* ; uses shared theme tokens from oerl-enhance.css.

   Lifted verbatim from the <style> block in dev-files/html/web/media-insights.html.
   The static templates carried their page CSS inline; the conversion to Django
   moved most of it into these files and missed this one, so the page has been
   rendering unstyled. Nothing here is new — only the file it lives in.
   ========================================================================== */
.mi-eyebrow{display:inline-block;font-size:15px;font-weight:600;text-transform:uppercase;color:var(--tg-theme-secondary-500);margin-bottom:12px;}
.mi-hero{position:relative;overflow:hidden;color:#fff;padding:88px 0;background:linear-gradient(135deg,#0a1830,#0f2b46 55%,#1c6a97);}
.mi-hero::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:26px 26px;opacity:.5;}
.mi-hero .container{position:relative;z-index:2;}
.mi-crumb{font-size:13.5px;color:rgba(255,255,255,.72);margin-bottom:18px;}
.mi-crumb a{color:rgba(255,255,255,.72);}.mi-crumb a:hover{color:#fff;}.mi-crumb .sep{opacity:.5;margin:0 7px;}
.mi-hero h1{font-size:46px;font-weight:800;margin:0 0 14px;color:#fff;}
.mi-hero p{font-size:16.5px;color:rgba(255,255,255,.85);max-width:600px;margin:0;}
.mi-sec{padding:100px 0;}
.mi-head{margin-bottom:34px;}
.mi-head h2{font-size:30px;font-weight:800;color:var(--tg-heading-color);margin:0 0 8px;}
.mi-head p{font-size:15.5px;color:var(--tg-body-color);margin:0;}
[data-bs-theme="dark"] .mi-head p{color:var(--oerl-text);}
.mi-catnav{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:34px;}
.mi-cat{border:1px solid var(--oerl-border-soft);background:transparent;color:var(--tg-body-color);font-size:13.5px;font-weight:600;padding:9px 18px;border-radius:30px;cursor:pointer;transition:all .2s ease;}
.mi-cat:hover{border-color:var(--tg-theme-primary-400);color:var(--tg-theme-primary-500);}
.mi-cat.active{background:var(--tg-theme-primary-500);border-color:var(--tg-theme-primary-500);color:#fff;}
.mi-feature{display:grid;grid-template-columns:1.05fr .95fr;gap:0;border:1px solid var(--oerl-border-soft);border-radius:20px;overflow:hidden;background:var(--oerl-surface);box-shadow:0 24px 60px -38px rgba(20,24,60,.28);}
[data-bs-theme="dark"] .mi-feature{box-shadow:0 24px 60px -32px rgba(0,0,0,.8);}
.mi-feature-img{position:relative;min-height:360px;background-size:cover;background-position:center;}
.mi-feature-img .tag{position:absolute;top:20px;left:20px;font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;background:var(--tg-theme-secondary-500);color:#fff;padding:6px 13px;border-radius:30px;}
.mi-feature-body{padding:46px;display:flex;flex-direction:column;justify-content:center;}
.mi-feature-meta{display:flex;gap:16px;font-size:13px;color:var(--tg-body-color);margin-bottom:14px;}
.mi-feature-meta span{display:inline-flex;align-items:center;gap:6px;}.mi-feature-meta i{width:15px;height:15px;color:var(--tg-theme-primary-500);}
.mi-feature-title{font-size:30px;line-height:1.25;font-weight:800;margin:0 0 14px;color:var(--tg-heading-color);}
.mi-feature-title a{color:inherit;}.mi-feature-title a:hover{color:var(--tg-theme-primary-500);}
.mi-feature-body p{font-size:15.5px;line-height:1.7;color:var(--tg-body-color);margin:0 0 22px;}
[data-bs-theme="dark"] .mi-feature-body p{color:var(--oerl-text);}
.mi-readmore{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14.5px;color:var(--tg-theme-primary-500);}
.mi-readmore i{width:17px;height:17px;transition:transform .25s ease;}
.mi-readmore:hover i{transform:translateX(4px);}
@media(max-width:991px){.mi-feature{grid-template-columns:1fr;}.mi-feature-img{min-height:250px;}.mi-feature-body{padding:32px;}}
.mi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.mi-card{border:1px solid var(--oerl-border-soft);border-radius:16px;overflow:hidden;height:100%;background:var(--oerl-surface);transition:.3s;display:flex;flex-direction:column;}
.mi-card:hover{box-shadow:0 26px 54px -32px rgba(20,24,60,.32);transform:translateY(-5px);border-color:var(--tg-theme-primary-300);}
[data-bs-theme="dark"] .mi-card:hover{box-shadow:0 26px 54px -28px rgba(0,0,0,.85);}
.mi-thumb{height:210px;overflow:hidden;position:relative;}
.mi-thumb img{width:100%;height:100%;object-fit:cover;transition:.5s;}
.mi-card:hover .mi-thumb img{transform:scale(1.06);}
.mi-thumb .tag{position:absolute;top:14px;left:14px;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;background:rgba(255,255,255,.92);color:#0a1830;padding:5px 11px;border-radius:20px;}
.mi-body{padding:24px;display:flex;flex-direction:column;flex:1;}
.mi-meta{display:flex;gap:14px;font-size:12.5px;color:var(--tg-body-color);margin-bottom:10px;}
.mi-meta span{display:inline-flex;align-items:center;gap:5px;}.mi-meta i{width:13px;height:13px;color:var(--tg-theme-primary-500);}
.mi-title{font-size:19px;line-height:1.4;font-weight:700;margin:0 0 10px;color:var(--tg-heading-color);}
.mi-title a{color:inherit;}.mi-title a:hover{color:var(--tg-theme-primary-500);}
.mi-excerpt{color:var(--tg-body-color);font-size:14.5px;line-height:1.65;margin:0 0 16px;flex:1;}
[data-bs-theme="dark"] .mi-excerpt{color:var(--oerl-text);}
.mi-video{position:relative;border-radius:16px;overflow:hidden;display:block;height:240px;}
.mi-video img{width:100%;height:100%;object-fit:cover;transition:.5s;}
.mi-video:hover img{transform:scale(1.05);}
.mi-video::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,24,48,.1),rgba(10,24,48,.6));}
.mi-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:#fff;color:var(--tg-theme-primary-500);display:flex;align-items:center;justify-content:center;z-index:2;transition:.3s;}
.mi-play i{width:26px;height:26px;}
.mi-video:hover .mi-play{background:var(--tg-theme-secondary-500);color:#fff;transform:translate(-50%,-50%) scale(1.08);}
.mi-vcap{position:absolute;left:20px;right:20px;bottom:18px;color:#fff;font-weight:700;font-size:16px;z-index:2;}
.mi-band{position:relative;overflow:hidden;background:linear-gradient(135deg,#0a1830,#123a52 55%,#1c6a97);border-radius:22px;padding:56px 50px;color:#fff;}
.mi-band h2{font-size:32px;font-weight:800;color:#fff;margin:0 0 10px;}
.mi-band p{color:rgba(255,255,255,.85);margin:0;font-size:15.5px;}
.mi-band form{position:relative;max-width:520px;}
.mi-band input{width:100%;border:0;border-radius:40px;padding:16px 150px 16px 22px;font-size:14.5px;color:#0a1830;}
.mi-band button{position:absolute;right:6px;top:6px;bottom:6px;border:0;border-radius:40px;padding:0 26px;background:var(--tg-theme-secondary-500);color:#fff;font-weight:700;cursor:pointer;}
.mi-empty{display:none;text-align:center;padding:50px 20px;color:var(--tg-body-color);}
.mi-empty.show{display:block;}
@media(max-width:991px){.mi-grid{grid-template-columns:1fr 1fr;}.mi-hero h1{font-size:36px;}}
@media(max-width:575px){.mi-grid{grid-template-columns:1fr;}.mi-hero h1{font-size:28px;}.mi-sec{padding:56px 0;}.mi-band{padding:40px 26px;}.mi-band input{padding:16px 22px;}.mi-band button{position:static;width:100%;margin-top:12px;padding:14px;}}

/* ==========================================================================
   FILTER TOOLBAR — added, not redesigned.

   The design gave this page one filter row: the News / Insights / Press chips,
   which hid cards with JavaScript. CLAUDE.md additionally asks for category
   filtering, tag filtering, search and pagination, none of which the static
   page had anywhere to put. So there is one new row above the chips.

   It is built from the page's own vocabulary rather than a new one — the same
   pill radius, border token, weight and hover colour as `.mi-cat` — so it
   reads as part of the design instead of a control panel bolted to it.
   ========================================================================== */
.mi-toolbar { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; margin-bottom:20px; }
.mi-search { position:relative; flex:1 1 280px; min-width:0; }
.mi-search iconify-icon { position:absolute; left:16px; top:50%; transform:translateY(-50%); font-size:18px; color:var(--tg-body-color); }
.mi-search input { width:100%; background:var(--oerl-surface-2); border:1px solid var(--oerl-border-soft); border-radius:30px;
  height:44px; padding:0 18px 0 44px; font-size:14px; color:var(--tg-heading-color); }
.mi-search input:focus { outline:none; border-color:var(--tg-theme-primary-500); box-shadow:0 0 0 3px rgba(63,163,215,.16); }
.mi-fg { flex:0 1 190px; min-width:0; }
.mi-fg label { display:block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--tg-body-color); margin-bottom:6px; }
.mi-fg select { width:100%; height:44px; background:var(--oerl-surface-2); border:1px solid var(--oerl-border-soft);
  border-radius:30px; padding:0 38px 0 18px; font-size:14px; font-weight:600; color:var(--tg-heading-color); cursor:pointer;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6f8c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:15px; }
.mi-fg select:focus { outline:none; border-color:var(--tg-theme-primary-500); box-shadow:0 0 0 3px rgba(63,163,215,.16); }
.mi-clear { display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 20px; border-radius:30px;
  border:1px solid var(--oerl-border-soft); background:transparent; color:var(--tg-theme-secondary-500);
  font-size:13.5px; font-weight:700; cursor:pointer; transition:all .2s ease; }
.mi-clear:hover { border-color:var(--tg-theme-secondary-500); background:rgba(250,108,32,.08); }
.mi-clear iconify-icon { font-size:16px; }
.mi-count { font-size:14.5px; color:var(--tg-body-color); margin-bottom:22px; }
.mi-count b { color:var(--tg-heading-color); }
[data-bs-theme="dark"] .mi-search input, [data-bs-theme="dark"] .mi-fg select { border-color:var(--oerl-border-strong); color:var(--oerl-heading); }
[data-bs-theme="dark"] .mi-count { color:var(--oerl-text); }
[data-bs-theme="dark"] .mi-empty { color:var(--oerl-text); }
/* The chip row scrolls rather than wraps on phones, as the publications one
   does — four category chips plus four types is a lot of stacked pills. */
@media (max-width:575px){
  .mi-catnav { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .mi-catnav::-webkit-scrollbar { display:none; }
  .mi-cat { flex:0 0 auto; }
  .mi-fg { flex:1 1 100%; }
}

/* The chips are links now rather than buttons — each filtered view is a page
   in its own right and should be shareable — so they need the box behaviour a
   <button> had by default. */
   `line-height:normal` rather than a number: it is what a <button> uses, and
   anything else makes the chip a pixel shorter than the design's. */
a.mi-cat { display:inline-block; text-decoration:none; line-height:normal; }