with
breaks,
so a CSS p:first-of-type{bold} would bold the ENTIRE block — do NOT add it). */
/* content area: white cards on #f5f5f5 grey page (original: white blocks, border 1px #d5d5d5) */
body.site { overflow-x:hidden; }
/* centre the whole site content at 1200px; full-width bgs stay via section padding */
/* explicit 3-track grid: About 1fr (~880px) | 20px gap | sidebar 300px (fits the 283px module).
Banner spans all tracks; both content cells stretch to equal height. Safe because every child's grid-column is set explicitly. */
/* align-items:start -> each box is its own content height (original: About 604 / Commonly 621, NOT equal), so no empty space below the last item */
/* align-items:stretch -> the two content boxes always share the same height, so their bottom edges line up regardless of how the text wraps (robust across browsers/fonts) */
.site-grid { max-width:1200px; margin:0 auto; padding:18px 0; align-items:stretch !important; }
/* the fixed About|gap|sidebar 3-column grid ONLY when a right sidebar exists (home). Subpages have no sidebar module -> Cassiopeia's single column = full-width content */
body.has-sidebar-right .site-grid { column-gap:0 !important; grid-template-columns:minmax(0,1fr) 20px 300px !important; }
body.has-sidebar-right .site-grid > .container-banner, body.has-sidebar-right .site-grid > .full-width { grid-column:1 / -1 !important; }
body.has-sidebar-right .grid-child.container-component { grid-column:1 / 2 !important; }
body.has-sidebar-right .grid-child.container-sidebar-right { grid-column:3 / 4 !important; }
/* original cards have NO border/shadow — just white bg on grey. A card border would create a "box in a box" around the sidebar module's own table. */
.grid-child.container-component, .grid-child.container-sidebar-right {
background:#fff !important; border:none !important; }
/* About: 15px side padding like the original (text margins were too small at 8px) */
/* About card: pad-top 0 so its title sits at the same height as the Commonly title (its card also has 0 top padding).
Bottom edges are aligned by align-items:stretch, so no compensating bottom padding is needed. About header keeps the same 15px pad-bottom as Commonly so the underlines line up. */
.grid-child.container-component { padding:0 15px 12px !important; }
/* sidebar: no padding so the labels+links table fills the whole card (no inset "box in a box") */
/* Commonly used: align-self:start so its box height = its own content (ends exactly at the OTHER label bottom), never stretched. The About box (default stretch) then grows to match the Commonly height. */
.grid-child.container-sidebar-right { padding:0 !important; align-self:start !important; }
/* module fills the card width; flow-root contains the floated label column so box height = content, without clipping the last link */
.container-sidebar-right [style*="width:283px"], .container-sidebar-right [style*="width: 283px"] { width:100% !important; display:flow-root; }
.container-sidebar-right .sidebar-right, .container-sidebar-right .moduletable:last-child { margin-bottom:0 !important; padding-bottom:0 !important; }
/* remove the trailing margin under the last About paragraph so the box ends just under "More Good Science" (#4) */
.container-component .mod-custom p { margin-bottom:0 !important; }
.container-sidebar-right .mod-custom > div, .container-sidebar-right .div-hover { margin-bottom:0 !important; }
.container-component .card-body, .container-component .mod-custom, .container-component .moduletable,
.container-sidebar-right .card-body, .container-sidebar-right .mod-custom, .container-sidebar-right .moduletable { padding:0 !important; margin:0 !important; }
/* highlight banner as a centred white card on grey */
.container-banner { background:#f5f5f5; }
/* banner full content width (1200) so its left edge aligns with About and its right edge with "Commonly used" */
.container-banner .gs-highlight { max-width:none; margin:0 auto; background:#fff; border:1px solid #d5d5d5; padding:12px 22px; }
/* NOTE: Cassiopeia's grid already centres every .grid-child at 1200px (max-width var).
Do NOT add extra side padding here — it double-indents and squishes/wraps content. */
/* "Commonly used" sidebar: link rows ~37px to align with fixed-height PROTEINS/RNA/OTHER labels (147+295+113=555px / 15 links) */
/* original: white link rows on the #eee div-hover (grey only as thin separators). Force white so links aren't on grey. */
/* keep the label column's float; widen the link column to fill the rest of the card (label ~88px incl. border) so links reach the right edge and the last row isn't clipped */
.container-sidebar-right .div-hover { background:#fff !important; float:left !important; width:calc(100% - 88px) !important; }
/* !important beats any inline line-height on individual links (some carry style="line-height:1.6em") so every row keeps its section height */
.container-sidebar-right .div-hover a { text-decoration:none; line-height:inherit !important; font-size:14px; }
/* indent link rows so link left margin matches the original (link @ box+177) */
.container-sidebar-right .div-hover > div { border-bottom:1px solid #e8e8e8; background:#fff; padding-left:19px; }
/* size each link group to exactly fill its label section (PROTEINS 147px / RNA 295px / OTHER 113px, each row +1px border),
so group bottoms line up with the label bottoms and every link (incl. Filtrest3D) is vertically centred */
.container-sidebar-right .div-hover > div:nth-child(-n+4) { line-height:35.75px; } /* PROTEINS: 4 rows x 36.75 = 147 */
.container-sidebar-right .div-hover > div:nth-child(n+5):nth-child(-n+12) { line-height:35.875px; } /* RNA: 8 rows x 36.875 = 295 */
.container-sidebar-right .div-hover > div:nth-child(n+13) { line-height:36.667px; } /* OTHER: 3 rows x 37.667 = 113 */
/* the last row (Filtrest3D) carries an inline height:23px from the old design -> reset so it fills like the other OTHER rows and reaches the OTHER label bottom */
.container-sidebar-right .div-hover > div:last-child { height:auto !important; }
/* footer module titles (original: h2.title 18px/400 #303030, border-bottom 1px #d1d1d1, pad/mb 15px) */
.container-footer .gs-foot-title { font-size:18px; font-weight:400; color:#303030; font-family:Helvetica,Arial,FreeSans,sans-serif;
border-bottom:1px solid #d1d1d1; padding-bottom:15px; margin:0 0 15px; }
/* footer: light grey, grey text, contact columns side by side */
.container-footer { background:#eeeeee !important; color:#6e6e6e; border-top:1px solid #afafaf; padding:12px 0; }
/* halve the footer's default vertical padding so the content sits closer to the top border line */
.container-footer .grid-child { display:flex; flex-wrap:wrap; gap:16px 40px; align-items:flex-start; padding-top:20px !important; padding-bottom:20px !important; }
.container-footer .moduletable { flex:1 1 240px; }
.container-footer, .container-footer p, .container-footer h3 { color:#6e6e6e; }
.container-footer a { color:var(--gs-accent); }
/* ===== article content tables (e.g. People 2-column layout) ===== */
/* wide layout tables hard-coded to 1200px / 550px must never exceed the content area */
.container-component table { max-width:100% !important; box-sizing:border-box; }
/* the 2-column wrapper tables (width:1200px, some with a stray negative padding) -> full content width, centered, symmetric */
.container-component table[style*="width: 1200px"], .container-component table[style*="width:1200px"],
.container-component table[align="center"][border="0"] {
width:100% !important; margin-left:auto !important; margin-right:auto !important; padding-left:0 !important; table-layout:fixed; }
/* each of the two layout columns takes exactly half -> the two side tables are symmetric */
.container-component table[align="center"][border="0"] > tbody > tr > td { width:50% !important; vertical-align:top; }
/* the inner data tables (width:550px) fill their half-column and stay centered */
.container-component table[align="center"][border="0"] td > table.table-bordered { width:100% !important; margin:0 auto !important; }
/* ===== LAB PHOTOS gallery (static reproduction of the {gallery} sige plugin) ===== */
.gs-gallery { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin:18px 0; }
.gs-gal-item { position:relative; display:block; overflow:hidden; border:1px solid #dcdcdc; text-decoration:none; line-height:0; }
.gs-gal-item img { width:100%; height:auto; display:block; transition:transform .35s ease; }
.gs-gal-item:hover img { transform:scale(1.06); }
.gs-gal-cap { position:absolute; left:0; right:0; bottom:0; background:rgba(0,0,0,.55); color:#fff; font-size:12px; line-height:1.4; padding:4px 8px; text-align:center; }
@media (max-width:640px){ .gs-gallery { grid-template-columns:repeat(2,1fr); } }
/* paginated carousel: pages slide horizontally (translateX) with a smooth transition */
.gs-gallery.gs-gal-paged { display:block; overflow:hidden; gap:0; }
.gs-gal-track { display:flex; will-change:transform; transition:transform .45s ease; }
.gs-gal-slide { flex:0 0 100%; min-width:100%; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:640px){ .gs-gal-slide { grid-template-columns:repeat(2,1fr); } }
/* lightbox overlay */
.gs-lb { display:none; position:fixed; inset:0; background:rgba(0,0,0,.9); z-index:99999; align-items:center; justify-content:center; }
.gs-lb.open { display:flex; }
.gs-lb img { max-width:92vw; max-height:86vh; box-shadow:0 4px 30px rgba(0,0,0,.6); }
.gs-lb-cap { position:absolute; bottom:18px; left:0; right:0; text-align:center; color:#fff; font-size:15px; }
.gs-lb-close, .gs-lb-prev, .gs-lb-next { position:absolute; color:#fff; font-size:38px; cursor:pointer; user-select:none; padding:8px 18px; opacity:.8; }
.gs-lb-close:hover, .gs-lb-prev:hover, .gs-lb-next:hover { opacity:1; }
.gs-lb-close { top:6px; right:16px; }
.gs-lb-prev { left:8px; top:50%; transform:translateY(-50%); }
.gs-lb-next { right:8px; top:50%; transform:translateY(-50%); }
/* Former members page: hide the big article title (original goes straight to "LAB PHOTOS") — scoped to the gallery page only */
.com-content-article:has(.gs-gallery) .page-header { display:none !important; }
/* gallery pagination (6 photos = 2 rows per page, like the original 1/3) */
.gs-gal-nav { display:flex; justify-content:center; align-items:center; gap:20px; margin:14px 0 2px; color:#555; font-size:14px; }
.gs-gal-nav .gs-gal-prev, .gs-gal-nav .gs-gal-next { cursor:pointer; font-size:22px; color:#2482c8; padding:0 8px; user-select:none; line-height:1; }
.gs-gal-nav .gs-gal-prev:hover, .gs-gal-nav .gs-gal-next:hover { color:#1a5f96; }
/* institute logo (circle, left ~130px of the combined logo) links to iimcb.gov.pl via a transparent overlay; the rest of the logo keeps the home link */
.navbar-brand { position:relative; }
.gs-inst-link { position:absolute; left:0; top:5px; width:130px; height:130px; z-index:20; }