/* ==========================================================================
   OERL General Information — the long-form article layout with a sidebar.
   Scoped .gi-* ; uses shared theme tokens from oerl-enhance.css.

   Lifted verbatim from the <style> block in dev-files/html/web/general-information.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.
   ========================================================================== */
.gi-tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:#3fa3d7;padding:6px 14px;border-radius:30px;margin-bottom:16px;}
.gi-lead{font-size:19px;line-height:1.7;color:#14152e;font-weight:500;margin:0 0 22px;}
.gi-body p{color:#6b6f8c;font-size:16px;line-height:1.8;margin:0 0 18px;}
.gi-body h3{font-size:26px;font-weight:700;color:#14152e;margin:32px 0 14px;}
.gi-feature-img{border-radius:16px;overflow:hidden;margin:8px 0 28px;}
.gi-feature-img img{width:100%;height:auto;display:block;}
.gi-list{list-style:none;padding:0;margin:0 0 20px;}
.gi-list li{position:relative;padding-left:34px;margin-bottom:14px;color:#6b6f8c;font-size:16px;line-height:1.6;}
.gi-list li::before{content:"\f00c";font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;left:0;top:3px;width:22px;height:22px;border-radius:50%;background:rgba(63,163,215,.12);color:#3fa3d7;font-size:11px;display:flex;align-items:center;justify-content:center;}
.gi-side{position:sticky;top:120px;}
.gi-card{border:1px solid var(--tg-border-1);border-radius:16px;padding:26px;margin-bottom:24px;background:var(--tg-color-white-default);}
.gi-card h4{font-size:18px;font-weight:700;color:#14152e;margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--tg-border-1);}
.gi-fact{display:flex;justify-content:space-between;gap:12px;padding:9px 0;font-size:15px;}
.gi-fact span{color:#8a8fb0;}
.gi-fact strong{color:#14152e;text-align:right;}
.gi-contact-row{display:flex;gap:12px;align-items:center;margin-bottom:12px;font-size:15px;color:#6b6f8c;}
.gi-contact-row i{flex:0 0 38px;width:38px;height:38px;border-radius:10px;background:rgba(63,163,215,.12);color:#3fa3d7;display:flex;align-items:center;justify-content:center;}
.gi-contact-row a{color:#3fa3d7;font-weight:600;}
.gi-stat{text-align:center;padding:30px 16px;border:1px solid var(--tg-border-1);border-radius:16px;height:100%;background:var(--tg-color-white-default);transition:.3s;}
.gi-stat:hover{box-shadow:0 18px 40px rgba(20,24,60,.08);transform:translateY(-4px);}
.gi-stat .gi-stat-num{font-size:42px;font-weight:800;color:#3fa3d7;line-height:1;margin-bottom:8px;}
.gi-stat .gi-stat-label{color:#6b6f8c;font-weight:600;font-size:15px;}
.gi-gallery-item{display:block;border-radius:12px;overflow:hidden;border:1px solid var(--tg-border-1);height:210px;}
.gi-gallery-item img{width:100%;height:100%;object-fit:cover;transition:.5s;}
.gi-gallery-item:hover img{transform:scale(1.08);}
.gi-related{display:block;border:1px solid var(--tg-border-1);border-radius:14px;overflow:hidden;height:100%;background:var(--tg-color-white-default);transition:.3s;}
.gi-related:hover{box-shadow:0 18px 40px rgba(20,24,60,.10);transform:translateY(-4px);}
.gi-related .gi-related-thumb{height:170px;overflow:hidden;}
.gi-related .gi-related-thumb img{width:100%;height:100%;object-fit:cover;transition:.5s;}
.gi-related:hover .gi-related-thumb img{transform:scale(1.06);}
.gi-related .gi-related-body{padding:22px;}
.gi-related h4{font-size:19px;font-weight:700;color:#14152e;margin:0 0 8px;}
.gi-related:hover h4{color:#3fa3d7;}
.gi-related p{color:#6b6f8c;font-size:14px;margin:0;}
.gi-tmpl-note{background:rgba(250,108,32,.08);border:1px solid rgba(250,108,32,.25);border-radius:12px;padding:14px 18px;color:#b4530f;font-size:14px;margin-bottom:36px;}
@media(max-width:991px){.gi-side{position:static;margin-top:8px;}}
/* Dark mode: this page's palette was hardcoded light; map text to light
   and cards to real dark surfaces so nothing goes navy-on-navy. */
[data-bs-theme="dark"] .gi-lead,
[data-bs-theme="dark"] .gi-body h3,
[data-bs-theme="dark"] .gi-card h4,
[data-bs-theme="dark"] .gi-related h4,
[data-bs-theme="dark"] .gi-fact strong{color:var(--oerl-heading);}
[data-bs-theme="dark"] .gi-body p,
[data-bs-theme="dark"] .gi-list li,
[data-bs-theme="dark"] .gi-fact span,
[data-bs-theme="dark"] .gi-contact-row,
[data-bs-theme="dark"] .gi-stat .gi-stat-label,
[data-bs-theme="dark"] .gi-related p{color:var(--oerl-text);}
[data-bs-theme="dark"] .gi-card,
[data-bs-theme="dark"] .gi-stat,
[data-bs-theme="dark"] .gi-related{background:var(--oerl-surface);border-color:var(--oerl-border-soft);}
[data-bs-theme="dark"] .gi-card h4{border-bottom-color:var(--oerl-border-soft);}