/* ============================================================
   Sturmlechner Lab — index.html page-specific styles
   (Hero, About, Research, News sections)
   Loaded in addition to assets/css/base.css
   ============================================================ */
    /* ══ HERO ═════════════════════════════════════════ */
    #hero {
      position: relative; min-height: 100vh;
      display: flex; align-items: center;
      background:
        radial-gradient(circle at 18% 28%, rgba(45,125,210,0.30) 0%, transparent 34%),
        radial-gradient(circle at 82% 18%, rgba(237,170,48,0.16) 0%, transparent 30%),
        radial-gradient(circle at 62% 72%, rgba(45,125,210,0.22) 0%, transparent 40%),
        radial-gradient(circle at 28% 86%, rgba(107,63,160,0.18) 0%, transparent 36%),
        linear-gradient(135deg, #0A1628 0%, #102844 55%, #16345C 100%);
      background-size: 200% 200%, 200% 200%, 200% 200%, 200% 200%, 100% 100%;
      animation: heroDrift 48s ease-in-out infinite alternate;
      overflow: hidden;
    }
    #hero::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(
        90deg,
        rgba(10,22,40,0.82) 0%,
        rgba(10,22,40,0.55) 45%,
        rgba(10,22,40,0.12) 75%,
        transparent 100%
      );
      pointer-events: none;
    }
    .hero-inner {
      position: relative; z-index: 2;
      padding: 0 3rem; max-width: 1000px;
    }
    .hero-eyebrow {
      display: inline-flex; align-items: center; gap: 0.6rem;
      font-size: 0.7rem; font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.16em;
      color: var(--amber-l); margin-bottom: 1.6rem;
    }
    .hero-eyebrow::before {
      content: ''; display: block;
      width: 1.8rem; height: 1.5px; background: var(--amber-l);
    }
    h1.hero-title {
      font-family: 'Playfair Display', serif;
      font-size: clamp(3rem, 6.5vw, 5.5rem);
      font-weight: 700; color: white;
      line-height: 1.08; letter-spacing: -0.01em;
      margin-bottom: 1.6rem;
    }
    h1.hero-title em { font-style: italic; color: var(--amber-l); }
    h1.hero-title .hero-plain { font-style: normal; color: white; }
    .hero-sub {
      font-size: 1.1rem; font-weight: 300;
      color: rgba(255,255,255,0.58);
      line-height: 1.75; max-width: 560px;
      margin-bottom: 2.8rem;
    }
    .hero-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; }
    .hero-tag {
      display: inline-flex; align-items: center; gap: 0.35rem;
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.13);
      color: rgba(255,255,255,0.72);
      padding: 0.38rem 0.85rem;
      border-radius: 2rem; font-size: 0.78rem; font-weight: 500;
    }
    .hero-tag.uw { border-color: rgba(197,5,12,0.5); color: #F08080; }
    .hero-scroll-hint {
      position: absolute; bottom: 2.5rem; left: 3rem;
      display: flex; align-items: center; gap: 0.5rem;
      color: rgba(255,255,255,0.3); font-size: 0.72rem;
      letter-spacing: 0.08em; text-transform: uppercase;
      animation: nudge 2s ease-in-out infinite;
    }
    .hero-scroll-hint svg { animation: bob 2s ease-in-out infinite; }
    @keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)} }


    /* ══ HERO SVG CELL BACKGROUND ═══════════════════════ */
    .hero-cells-svg {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      pointer-events: none; z-index: 0;
    }
    .hc-float {
      animation: hcFloat ease-in-out infinite;
    }
    .hc-drift {
      animation: hcDrift ease-in-out infinite;
    }
    .hc-macro {
      animation: hcMacro ease-in-out infinite, hcMorph ease-in-out infinite;
    }
    @keyframes hcFloat {
      0%,100% { transform: translate(0,0); }
      33%     { transform: translate(22px,-18px); }
      66%     { transform: translate(-14px,12px); }
    }
    @keyframes hcDrift {
      0%,100% { transform: translate(0,0) scale(1); }
      50%     { transform: translate(-28px,20px) scale(1.03); }
    }
    @keyframes hcMacro {
      0%,100% { transform: translate(0,0); }
      50%     { transform: translate(32px,-24px); }
    }
    @keyframes hcMorph {
      0%,100% { filter: blur(0.5px); }
      50%     { filter: blur(1px); }
    }
    @media (prefers-reduced-motion: reduce) {
      .hc-float, .hc-drift, .hc-macro { animation: none !important; }
    }



    /* ══ ABOUT ════════════════════════════════════════ */
    #about { background: var(--off); }
    .about-grid {
      display: grid; grid-template-columns: 1fr 420px;
      gap: 5rem; align-items: center;
    }
    .about-text .section-lead { max-width: 100%; margin-bottom: 2rem; }
    .pills { display: flex; flex-wrap: wrap; gap: 0.55rem; }
    .pill {
      padding: 0.38rem 0.85rem; border-radius: 2rem;
      font-size: 0.8rem; font-weight: 500;
      border: 1.5px solid var(--border); color: var(--mid);
      background: white;
    }
    .pill.hi { background: var(--teal); border-color: var(--teal); color: white; }

    /* SVG cell diagram */
    .cell-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
    .cell-wrap img {
      width: 100%; max-width: 400px; border-radius: 0.85rem;
      display: block; box-shadow: 0 8px 30px rgba(10,22,40,0.18);
    }
    .cell-wrap figcaption {
      max-width: 400px; font-size: 0.8rem; line-height: 1.6;
      color: var(--mid); text-align: center;
    }


    /* ══ RESEARCH ═════════════════════════════════════ */
    #research { background: var(--white); }
    .r-grid {
      display: grid; grid-template-columns: repeat(3,1fr);
      gap: 1.75rem;
    }
    .r-card {
      background: var(--off);
      border: 1px solid var(--border);
      border-radius: 1.1rem;
      padding: 2rem 1.85rem;
      position: relative; overflow: hidden;
      transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
    }
    .r-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 16px 48px rgba(21,101,192,0.1);
      border-color: var(--teal-l);
    }
    .r-card-bar {
      position: absolute; top: 0; left: 0; right: 0; height: 3px;
    }
    .r-card-bar.blue  { background: var(--teal); }
    .r-card-bar.amber { background: var(--amber); }
    .r-card-bar.plum  { background: #6B3FA0; }
    .r-icon {
      width: 46px; height: 46px; border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 1.2rem;
    }
    .r-icon.b { background: rgba(21,101,192,0.1); }
    .r-icon.a { background: rgba(200,136,14,0.1); }
    .r-icon.p { background: rgba(107,63,160,0.1); }
    .r-title {
      font-family: 'Playfair Display', serif;
      font-size: 1.18rem; font-weight: 700;
      color: var(--text); line-height: 1.25;
      margin-bottom: 0.75rem;
    }
    .r-body { font-size: 0.9rem; color: var(--mid); line-height: 1.75; }


    /* ══ RESEARCH ROWS (card outline) ═══════════════════ */
    #research { background: var(--white); }
    /* Research illustration */
    .knights-wrap {
      width: 100%;
      max-width: 860px;
      margin: 0.5rem auto 2rem;
      border-radius: 0.85rem;
      overflow: hidden;
    }
    .knights-wrap svg {
      width: 100%;
      height: auto;
      display: block;
    }

    /* Research rows: box fits content height, image column fixed width */
    .r-row {
      display: flex; align-items: stretch;
      border: 1px solid var(--border);
      border-radius: 1.1rem;
      overflow: hidden;
      margin-bottom: 2rem;
      position: relative;
      box-shadow: 0 2px 12px rgba(10,22,40,0.06);
      transition: box-shadow 0.2s;
    }
    .r-row:hover { box-shadow: 0 8px 32px rgba(21,101,192,0.10); }
    .r-row-accent {
      position: absolute; top: 0; left: 0; bottom: 0; width: 4px;
      z-index: 2;
    }
    .r-row-accent.blue  { background: var(--teal); }
    .r-row-accent.amber { background: var(--amber); }
    .r-row-accent.plum  { background: #6B3FA0; }
    /* Image figure: fixed width, stretches full row height */
    .r-row-fig {
      flex: 0 0 260px; width: 260px;
      margin: 0; padding: 0;
      display: flex; flex-direction: column;
      background: #0a0a0a;
    }
    .r-row-img {
      width: 100%; flex: 1 1 auto;
      object-fit: cover; display: block;
      min-height: 0;
    }
    .r-row-caption {
      font-size: 0.72rem; line-height: 1.45;
      color: rgba(255,255,255,0.70);
      background: rgba(0,0,0,0.60);
      padding: 0.5rem 0.75rem;
      flex-shrink: 0;
    }
    /* Text column grows to fill remaining space */
    .r-row-text {
      flex: 1 1 auto;
      padding: 1.8rem 1.8rem 1.8rem 2.2rem;
      display: flex; flex-direction: column; justify-content: flex-start;
    }
    /* For text-only rows (no image), give text full width with left accent padding */
    .r-row-text-only {
      flex: 1 1 auto;
      padding: 1.8rem 1.8rem 1.8rem 2.2rem;
    }
    .r-title {
      font-family: 'Playfair Display', serif;
      font-size: 1.4rem; font-weight: 700;
      color: var(--text); line-height: 1.3;
      margin-bottom: 0.85rem;
    }
    .r-body { font-size: 1rem; color: var(--mid); line-height: 1.78; margin: 0; }


    /* ══ NEWS ════════════════════════════════════════ */
    #news { background: var(--off); }
    .news-list { margin-top: 1rem; }
    .news-row {
      display: grid; grid-template-columns: 90px 1fr;
      gap: 1.5rem; padding: 1.5rem 0;
      border-bottom: 1px solid var(--border); align-items: start;
      transition: padding-left 0.25s;
    }
    .news-row:hover { padding-left: 0.4rem; }
    .news-row:first-child { border-top: 1px solid var(--border); }
    .n-date {
      font-family: 'DM Mono', monospace;
      font-size: 0.9rem; color: var(--light); padding-top: 0.15rem;
    }
    .n-tag {
      display: inline-block; font-size: 0.63rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.09em;
      padding: 0.12rem 0.45rem; border-radius: 0.22rem; margin-bottom: 0.4rem;
    }
    .n-tag.award { background: rgba(200,136,14,0.13); color: #7A5800; }
    .n-tag.paper { background: rgba(21,101,192,0.1); color: var(--teal); }
    .n-tag.grant { background: rgba(16,130,68,0.1); color: #0B6E38; }
    .n-tag.highlight { background: rgba(107,63,160,0.13); color: #6B3FA0; }
    .n-tag.publication { background: rgba(14,100,50,0.13); color: #0B6432; }
    .n-head { font-size: 1.2rem; font-weight: 600; color: var(--text); line-height: 1.4; }
    .n-body { font-size: 1rem; color: var(--light); line-height: 1.65; margin-top: 0.3rem; }
    .n-body a { color: var(--teal); text-decoration: underline; }