/*
 Theme Name:   HCI Theme
 Template:     twentytwentyfour
 Version:      1.0.0
*/

/* --- Du kannst das später in dein Child style.css verschieben --- */
.si-wrap{max-width:1100px;margin:0 auto;padding:2rem 1rem}
.si-topbar{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem; margin-inline: 2rem;}
.si-pill{display:inline-flex;align-items:center;gap:.5rem;padding:.25rem .6rem;border-radius:0px;font-weight:600;font-size:.9rem; margin-left: 14rem;}

.si-pill.cat-publications{background:#7DE9FF;color:#80072D}
.si-pill.cat-activities{background:#3AFFB4;color:#0C217F}
.si-pill.cat-resources{background:#FFA5E9;color:#025131}

.si-title{font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.15;margin:0 0 1.5rem; margin-inline: 5rem; margin-left: 25rem}

.si-grid{display:grid;grid-template-columns:280px 1fr;gap:2rem; margin-inline: 5rem;}
@media (max-width: 900px){ .si-grid{grid-template-columns:1fr; } }

.si-side-card{background:#f7f7f7;border-radius:0px;padding:1rem}
.si-side-title{font-weight:700;margin-bottom:.75rem}
.si-link{display:flex;align-items:center;gap:.5rem;padding:.6rem .7rem;margin:.4rem 0;border-radius:0px;background:#fff;border:1px solid #e5e5e5;text-decoration:none}
.si-link:hover{background:#fafafa}

.si-infocard{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;background:#fff;border:1px solid #eee;border-radius:0px;padding:1.25rem;margin-bottom:1.5rem}
@media (max-width: 700px){ .si-infocard{grid-template-columns:1fr;} }
.si-info-col{display:grid;gap:1rem}
.si-label{font-size:.82rem;color:#666;margin-bottom:.1rem}
.si-value{font-weight:600}

.si-content{font-size:1.05rem;line-height:1.6}
.si-content p{margin:0 0 1rem}

.si-gallery{margin-top:1.25rem;display:grid;gap:1rem}
.si-gallery img{width:100%;height:auto;border-radius:0px;display:block}

.is-layout-flex.wp-container-core-group-is-layout-51bb193a.wp-block-group-is-layout-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sebi{margin-left: 2rem;
    margin-right: 2rem;}


    /* Default (falls keine der drei Kategorien) */
.header.changing-color { background: #f5f5f5; }
.header.changing-color .si-title,
.header.changing-color .wp-block-site-title a { color: #111; }

/* Publications */
body.cat-publications .wp-block-group.alignfull.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained{ background: #80072D; }
body.cat-publications .si-title,
body.cat-publications .wp-block-site-title a { color: #7DE9FF; }
body.cat-publications .wp-block-navigation-item__label { color: white; }
body.cat-publications .ines-color { background: #80072D; padding-bottom: 1rem; margin-bottom: 1rem;}
/* Activities */
body.cat-activities .wp-block-group.alignfull.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained{  background: #0C217F; }
body.cat-activities .si-title,
body.cat-activities .wp-block-site-title a { color: #3AFFB4; }
body.cat-activities .wp-block-navigation-item__label { color: white; }
body.cat-activities .ines-color { background: #0C217F; padding-bottom: 1rem; margin-bottom: 3rem;}

/* Resources */
body.cat-resources .wp-block-group.alignfull.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained{  background: #025131; }
body.cat-resources .si-title,
body.cat-resources .wp-block-site-title a { color: #FFA5E9; }
body.cat-resources .wp-block-navigation-item__label { color: white; }
body.cat-resources .ines-color { background: #025131; padding-bottom: 1rem; margin-bottom: 1rem;}

main#wp--skip-link--target{
    margin-top: 0px;
}

.sebi-card-grid { --cols:3; display:grid; grid-template-columns:repeat(var(--cols),minmax(0,1fr)); gap:2rem; }
.sebi-card-grid[data-columns="2"]{ --cols:2; } .sebi-card-grid[data-columns="4"]{ --cols:4; }
@media (max-width:1000px){ .sebi-card-grid{ --cols:2; } } @media (max-width:640px){ .sebi-card-grid{ --cols:1; } }

.sebi-card{ background:#fff; border-radius:0px; box-shadow:0 2px 10px rgba(0,0,0,.06); overflow:hidden; padding:0 1rem 1rem; }
.sebi-card-thumb{ display:block; margin:0 -1rem .5rem; }
.sebi-card-thumb img,.sebi-thumb-fallback{ width:100%; height: 270px ; object-fit:cover; display:block; }
.sebi-thumb-fallback{ background: radial-gradient(circle at 60% 40%, #ffb37a, #ff6a50, #9fb8d1); }

.sebi-meta-row{ display:flex; align-items:center; gap:1.2rem; font-size:.92rem; color:#333; margin:.4rem 0 .3rem; }
.sebi-meta{ display:inline-flex; align-items:center; gap:.4rem; opacity:.9; }
.sebi-card-title{ font-size:1.1rem; line-height:1.3; margin:.2rem 0 .4rem; font-weight:800; }
.sebi-card-title a{ color:#111; text-decoration:none; } .sebi-card-title a:hover{ text-decoration:underline; }
.sebi-card-text{ font-size:.96rem; color:#333; margin:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* make header a stable backdrop to overlap onto */
header.changing-color {
  position: relative;
  padding-bottom: clamp(1.5rem, 4vw, 3rem);
  z-index: 0;
}

/* the overlapping hero container */
.hero-overlap {
  position: relative;
  width: min(980px, 90vw);
  margin: clamp(-120px, -12vw, -80px) auto 2.5rem; /* pull up into header */
  z-index: 1;
}

/* the featured image */
.hero-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0px;
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  background: #eee; /* in case image is slow */
}

/* decorative SVG "asterisk" via pseudo-element */
.hero-overlap::after {
  content: "";
  position: absolute;
  right: clamp(-36px, -4vw, -24px);
  bottom: clamp(-28px, -3vw, -16px);
  width: clamp(90px, 18vw, 180px);
  aspect-ratio: 1;
  background: no-repeat center / contain var(--hero-burst-url, url('<?php echo get_stylesheet_directory_uri(); ?>/assets/burst.svg'));
  /* allow color-theming if the SVG uses currentColor */
  color: var(--hero-burst-color, #7DE9FF);
  pointer-events: none;
}

/* Optional: if your SVG uses currentColor, this will tint it per category */
body.cat-publications .hero-overlap { --hero-burst-color: #7DE9FF; }
body.cat-activities   .hero-overlap { --hero-burst-color: #3AFFB4; }
body.cat-resources    .hero-overlap { --hero-burst-color: #FFA5E9; }

/* If you want different SVGs per section, swap the URL per body class: */
/*
body.cat-publications .hero-overlap {
  --hero-burst-url: url('<?php echo get_stylesheet_directory_uri(); ?>/assets/burst-publications.svg');
}
*/

header.changing-color{padding-bottom: 0;}
 

/* Default */
/* body .changing-as-well { background:#f5f5f5; } */
body .changing-as-well h1 { color:#111; }
body .sebi-thumb-fallback { background:#ddd; } /* neutral */

/* Publications */
body.cat-publications .changing-as-well { background:#80072D; margin-top:0; }
body.cat-publications .changing-as-well h1 { color:#7DE9FF; }
body.cat-publications .sebi-thumb-fallback { 
  background: radial-gradient(circle at 60% 40%, #7DE9FF, #80072D); 
}

/* Activities */
body.cat-activities .changing-as-well { background:#0C217F; margin-top:0; }
body.cat-activities .changing-as-well h1 { color:#3AFFB4; }
body.cat-activities .sebi-thumb-fallback { 
  background: radial-gradient(circle at 60% 40%, #3AFFB4, #0C217F); 
}

/* Resources */
body.cat-resources .changing-as-well { background:#025131; margin-top:0; }
body.cat-resources .changing-as-well h1 { color:#FFA5E9; }
body.cat-resources .sebi-thumb-fallback { 
  background: radial-gradient(circle at 60% 40%, #FFA5E9, #025131); 
}


.partner-logos {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin: 3rem auto;
  max-width: 1200px;
}

.partner-block {
  flex: 1;
  min-width: 300px;
  text-align: center;
}

.partner-heading {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.partner-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
}

.partner-row a img {
  max-height: 60px;
  width: auto;
  display: block;
  filter: grayscale(100%);
  transition: filter 0.2s ease;
}

.partner-row a:hover img {
  filter: grayscale(0%);
}

/* container for all sections */
.ov-wrap { display: grid; gap: 3rem; }

/* one section = intro tile + row of cards */
.ov-section { display: grid; grid-template-columns: 1fr 3fr; gap: 1.5rem; align-items: start; }
@media (max-width: 1000px){ .ov-section { grid-template-columns: 1fr; } }

/* remove shadows globally */
.ov-intro,
.ov-card {
  box-shadow: none;
}

/* intro tile */
.ov-intro{
  display: grid; 
  place-content: center; 
  min-height: 220px;
  background: var(--ov-bg, #111);
  color: var(--ov-fg, #fff);
  text-decoration: none;
  border-radius: 4px;
  padding: 1.25rem 1.5rem;
  position: relative;
  overflow: hidden;
}
.ov-intro-title{
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  font-weight: 700;
}
.ov-intro-arrow{
  position: absolute; 
  right: 1.2rem; 
  bottom: 1.0rem;
  font-size: clamp(1.3rem, 2vw, 1.6rem); /* smaller, thinner */
  font-weight: 300; /* thin arrow */
  line-height: 1;
  color: var(--ov-fg, #fff);
  transform: translateX(0); 
  transition: transform .2s ease;
}
.ov-intro:hover .ov-intro-arrow{ transform: translateX(4px); }

/* row of cards (3 columns on desktop) */
.ov-row{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1.5rem;
}
@media (max-width: 1200px){ .ov-row { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .ov-row { grid-template-columns: 1fr; } }

/* card */
.ov-card{
  background:#fff; 
  border-radius:4px;
  padding: 0 1rem 1rem;
}
.ov-thumb{ display:block; margin:0 -1rem .6rem; }
.ov-thumb img{ width:100%; aspect-ratio: 1/1; object-fit:cover; display:block; }

.ov-meta{
  display:flex; align-items:center; gap:1rem; 
  font-size:.9rem; color:#333; 
  margin:.25rem 0 .1rem;
}
.ov-chip{ display:inline-flex; gap:.35rem; align-items:center; opacity:.9; }

.ov-title{ 
  font-size:1.05rem; 
  font-weight:700; 
  margin:.2rem 0 .4rem; 
  line-height:1.3; 
}
.ov-title a{ color:#111; text-decoration:none; }
.ov-title a:hover{ text-decoration:underline; }

.ov-text{
  font-size:.95rem; 
  color:#555; 
  margin:0;
  display:-webkit-box; 
  -webkit-line-clamp:3; 
  -webkit-box-orient:vertical; 
  overflow:hidden;
}

figure.svg-absolute.wp-block-post-featured-image {
  position: fixed;   /* or absolute inside a container */
  top: 120px;
  right: 20px;
  width: 300px;
  height: auto;
  z-index: 1;        /* lower than nav + cards */
}

.wp-block-navigation-item__label {
  position: relative; /* creates stacking context */
  z-index: 10;        /* sits above the SVG */
}

.sebi-card {
  position: relative;
  z-index: 10;        /* also above the SVG */
}

:where(.wp-site-blocks *:focus){
    outline-width: 0px;
    outline-style: none;
}

:root :where(.wp-block-navigation a:where(:not(.wp-element-button)):hover) {
  text-decoration: underline;
}

/* Publications */
body.cat-publications .wp-block-navigation a:hover {
  color: #7DE9FF; /* secondary color */
}

/* Activities */
body.cat-activities .wp-block-navigation a:hover {
  color: #3AFFB4;
}

/* Resources */
body.cat-resources .wp-block-navigation a:hover {
  color: #FFA5E9;
}

/* Default fallback */
body .wp-block-navigation a:hover {
  color: #111;
}

/* Grid */
.tm-grid { 
  display: grid; gap: 2rem; 
  grid-template-columns: repeat(var(--tm-cols,2), minmax(0,1fr));
}
.tm-grid[data-cols="1"]{ --tm-cols:1; }
.tm-grid[data-cols="2"]{ --tm-cols:2; }
.tm-grid[data-cols="3"]{ --tm-cols:3; }
@media (max-width: 900px){ .tm-grid{ --tm-cols:1; } }

/* Card layout */
.tm-card{
  display:grid; grid-template-columns: 160px 1fr;
  gap: 1.5rem; align-items: start;
  padding: 1rem;
  /* background: #f7f6f5; light sand like your mock */
  /* border-radius: 12px; padding: 1.2rem;
  border: 1px solid #e6e2da; */
}
@media (max-width: 640px){ .tm-card{ grid-template-columns: 1fr; } }

.tm-photo-wrap{ display:flex; align-items:center; justify-content:center; }
.tm-photo{ width: 170px; height:170px; border-radius: 999px; object-fit: cover; display:block; }
.tm-photo--ph{ background:#ddd; }

/* Headline with burst */
.tm-name{
  margin: .2rem 0 .3rem; font-size: clamp(1.2rem, 2.2vw, 1.6rem); font-weight: 800;
  display:flex; align-items:center; gap:.5rem;
}
.tm-burst{ 
  display:inline-block; width:18px; height:18px; 
  color:#0C217F; /* primary burst color */
  background: none; 
  position: relative; top:-1px;
}

/* Institution */
.tm-inst{ color:#595959; font-size: 1rem; margin-bottom: .8rem; }

/* Body text */
.tm-text{
  color:#323232; font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.6; margin-bottom: 1rem;
}

/* Buttons */
.tm-links{ display:flex; flex-direction:column; gap:.6rem; }
.tm-btn{
  display:inline-flex; align-items:center; gap:.6rem;
  text-decoration:none; color:#111; background:#fff;
  border:1px solid #e6e6e6; border-radius:12px;
  padding:.8rem 1rem; width: fit-content; min-width: 320px;
}
.tm-btn svg{ stroke:#111; fill:none; stroke-width:2; }
.tm-btn:hover{ background:#f7f7f7; }