/******* Do not edit this file *******/
/*
My Custom CSS - by Salvatore Noschese
aka L'AltroWeb - https://laltroweb.it/
/*
Saved: Nov 20 2025 | 09:15:57 (pm)
/*
/******* Do not edit this file *******/

/* ICBS Lab � METU Theme Skin
   Reference vibe: METU EEE site (white + strong red accents).
   Drop-in override loaded AFTER styles.css
*/

/* --- Palette tweaks (keep your previous variable names) --- */


/* --- Global link accents --- */
a{ color: var(--ink); }
a:hover{ color: var(--metu-red-700); }

/* --- Top �METU red� ribbon and header emphasis --- */
.header{
  border-top: 6px solid var(--metu-red);
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.logo-badge{
  border-color: var(--metu-red);
  color: var(--metu-red);
  background: #fff;
  font-weight: 800;
}

/* --- Navbar underline indicator in METU red --- */
.nav a{
  position: relative;
  font-weight: 600;
}
.nav a[aria-current="page"]::after,
.nav a:hover::after,
.nav a:focus::after{
  content:"";
  position:absolute; left:10px; right:10px; bottom:2px;
  height:3px; background: var(--metu-red); border-radius: 3px;
}

/* --- Hero with subtle red tint --- */
.hero{
  background: linear-gradient(135deg, #fff 0%, var(--metu-red-50) 60%, #fff 100%);
}
.button{
  background: var(--metu-red); border-color: var(--metu-red);
}
.button:hover{ background: var(--metu-red-700); border-color: var(--metu-red-700); }
.button.secondary{
  background:#fff; color: var(--metu-red); border-color: var(--metu-red);
}
.button.secondary:hover{
  background: var(--metu-red-50); color: var(--metu-red-700); border-color: var(--metu-red-700);
}

/* --- Section headers: METU-style left bar accent --- */
.section h2{
  padding-left: 12px;
  border-left: 6px solid var(--metu-red);
}

/* --- Cards with red top edge (subtle) --- */
.card{
  border-top: 3px solid var(--metu-red);
}

/* --- News slider dots & controls in red --- */
.slider-dots button.active{ background: var(--metu-red); }
.slider button:hover{ border-color: var(--metu-red); color: var(--metu-red); }

/* --- Members: icon buttons already inherit red on hover --- */
.link-row a.icon-btn:hover,
.link-row a.icon-btn:focus{
  background: var(--metu-red-50);
  border-color: var(--metu-red);
  color: var(--metu-red);
}

/* Optional: tint monochrome SVG files on hover (if your icons are black) */
.link-row a.icon-btn:hover img,
.link-row a.icon-btn:focus img{
  filter: brightness(0) saturate(100%) invert(17%) sepia(96%) saturate(2262%)
          hue-rotate(346deg) brightness(92%) contrast(101%);
}

/* --- Projects: storyboard rails in METU red --- */
.storyboard .sb{ border-left: 4px solid var(--metu-red); padding-left: 12px; }

/* --- Publications: accent buttons and filter --- */
#year-filter{
  border:1px solid var(--metu-red);
  border-radius: 10px;
  padding: 6px 10px;
}
.pub-title{ color: var(--ink); }
.pub-item .button.secondary{ border-color: var(--metu-red); color: var(--metu-red); }
.pub-item .button.secondary:hover{ border-color: var(--metu-red-700); color: var(--metu-red-700); }

/* --- Footer: red divider line --- */
/*
.footer{ border-top: 6px solid var(--metu-red); }
.footer a{ color: var(--metu-red); }
*/
.footer{ background: var(--metu-red); color:#fff; border-top: none; }
.footer a{ color:#fff; text-decoration: underline; }


/* ICBS Lab Static Site — styles.css
   Theme: METU-inspired (red & white), clean academic
   Notes: No external fonts for portability. Uses CSS variables.
*/

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Inter,Helvetica,Arial,sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
}

/* Header / Navbar */
.header{
  position: sticky; top:0; z-index: 50;
  background: #fff; border-bottom:1px solid var(--border);
}
.nav{
  max-width: 1100px; margin: 0 auto;
  display:flex; align-items:center; gap:24px;
  padding: 12px 16px;
}
.logo{
  display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit;
}
.logo-badge{
  width:40px; height:40px; border-radius:50%;
  border:2px solid var(--metu-red);
  display:grid; place-items:center; font-weight:700; color:var(--metu-red);
  background: var(--metu-red-50);
  font-size: .8rem;
}
.logo-note{ font-size:.8rem; color:var(--muted) }
.nav ul{ list-style:none; display:flex; gap:14px; margin:0 0 0 auto; padding:0}
.nav a{
  text-decoration:none; color:#111827; padding:8px 10px; border-radius:10px;
}
.nav a:hover,.nav a:focus{ background: var(--metu-red-50); outline: none;}

/* Hero */
.hero{
  background: linear-gradient(135deg, #fff 0%, #fff 60%, var(--metu-red-50) 100%);
  border-bottom:1px solid var(--border);
}
.hero-inner{
  max-width:1100px; margin:0 auto; padding:40px 16px 28px;
  display:grid; grid-template-columns: 1.2fr .8fr; gap:24px;
}
.hero h1{ margin:0 0 8px; font-size: clamp(28px, 4vw, 40px); }
.hero p.lead{ margin:0 0 16px; color: var(--muted) }
.hero .cta{ display:flex; gap:10px; flex-wrap:wrap }
.button{
  display:inline-block; border-radius:999px; padding:10px 16px;
  text-decoration:none; border:1px solid var(--metu-red);
  color: #fff; background: var(--metu-red);
}
.button.secondary{ background:#fff; color: var(--metu-red); }
.button:hover{ filter: brightness(0.96) }

.image-placeholder{
  border:2px dashed var(--border); border-radius: var(--radius);
  min-height: 220px; display:grid; place-items:center; color: var(--muted);
  background:#fff; box-shadow: var(--shadow);
}

/* Sections */
.section{ max-width:1100px; margin: 0 auto; padding: 28px 16px; }
.section h2{ margin:0 0 8px; font-size: clamp(22px, 3vw, 28px); }
.section p.section-sub{ margin:0 0 16px; color: var(--muted); }

.grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
}
.card{
  background: var(--card); border:1px solid var(--border);
  border-radius: var(--radius); padding:16px; box-shadow: var(--shadow);
}
.card h3{ margin:0 0 6px; font-size: 1.1rem }
.badge{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:.75rem;
  color:#fff; background: var(--metu-red);}

/* Slider (News) */
.slider{
  position:relative; overflow:hidden; border-radius: var(--radius);
  border:1px solid var(--border); background:#fff; box-shadow: var(--shadow);
}
.slides{ display:flex; transition: transform .45s ease; }
.slide{ min-width:100%; padding:18px; }
.slide h3{ margin:0 0 4px }
.slider-controls{
  position:absolute; inset:auto 8px 8px auto; display:flex; gap:8px;
}
.slider button{
  border:1px solid var(--border); background:#fff; padding:8px 10px; border-radius:10px; cursor:pointer;
}
.slider-dots{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:10px; display:flex; gap:6px;
}
.slider-dots button{ width:8px; height:8px; border-radius:50%; border:none; background:#ddd; }
.slider-dots button.active{ background: var(--metu-red); }

/* Members */
.member-sections{ display:flex; flex-direction:column; gap:26px; }
.member-section h3{ margin:0 0 8px }
.member-grid{ display:grid; gap:14px; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); }
.member-card{
  border:1px solid var(--border); border-radius: var(--radius); background:#fff; box-shadow: var(--shadow);
  overflow:hidden;
}
.member-card .photo{
  width:100%; aspect-ratio:1/1; display:block; object-fit:cover; background:#fafafa;
}
.member-card .body{ padding:12px 12px 14px }
.member-card .name{ font-weight:700; margin:0 0 6px }
.link-row{ display:flex; gap:10px; flex-wrap:wrap }
.link-row a{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 8px; border-radius:10px; text-decoration:none;
  border:1px solid var(--border); color:#111827;
}
.link-row a:hover{ background: var(--metu-red-50); }

/* Projects */
.project-card header{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.project-card .summary{ color: var(--muted) }
.project-card details{
  margin-top:10px; border-top:1px dashed var(--border); padding-top:10px;
}
.storyboard{ display:grid; gap:10px }
.storyboard .sb{ border-left:3px solid var(--metu-red); padding-left:10px; }

/* Publications */
.filter-row{ display:flex; gap:12px; align-items:center; margin:10px 0 12px }
.pub-list{ border:1px solid var(--border); border-radius: var(--radius); overflow:hidden }
.pub-item{ padding:12px 14px; border-bottom:1px solid var(--border); background:#fff }
.pub-item:last-child{ border-bottom:none }
.pub-title{ font-weight:600 }
.pub-meta{ color: var(--muted); font-size:.92rem }

/* Footer */
.footer{ border-top:1px solid var(--border); margin-top:28px; background:#fff }
.footer-inner{ max-width:1100px; margin:0 auto; padding:18px 16px; color: var(--muted) }
.footer a{ color: var(--metu-red) }

/* Utilities */
.container{ max-width:1100px; margin:0 auto; padding: 0 16px }
.mt-8{ margin-top: 8px } .mt-12{ margin-top:12px } .mt-16{ margin-top:16px }
.small{ font-size:.9rem; color: var(--muted) }
.hidden{ display:none }

/* ADDITIONS */
/* Icon-only link buttons for member cards */
.link-row a.icon-btn{
  width: 36px; height: 36px;
  padding: 0;
  border-radius: 999px;
  display: inline-grid; place-items: center;
  border: 1px solid var(--border);
  background: #fff;
  color: #111827;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .08s ease;
}
.link-row a.icon-btn:hover,
.link-row a.icon-btn:focus{
  background: var(--metu-red-50);
  border-color: var(--metu-red);
  color: var(--metu-red);
  outline: none;
}
.link-row a.icon-btn:active{ transform: translateY(1px); }

/* Ensure external SVG files fit nicely */
.link-row a.icon-btn img{
  width: 18px; height: 18px; display: block;
}

/* Show newline characters in bios as real line breaks */
.bio-text { white-space: pre-line; }

/* ===== General container padding on small screens ===== */
@media (max-width: 768px) {
  .icbs-members,
  .icbs-pubs {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}



/* ===== Members tables: turn 4-column grid into vertical cards on phones ===== */
@media (max-width: 768px) {
  .icbs-members table {
    width: 100%;
  }

  .icbs-members tr {
    display: block;
    margin-bottom: 1.5rem;
  }

  .icbs-members td {
    display: block;
    width: 100% !important;
    border: none !important;
    text-align: center;
    padding: 10px 0 !important;
  }
}