/* ============================================
   tilling.io — homelab.css
   ============================================ */

/* === PAGE HERO === */
.lab-hero {
  position: relative;
  padding: 80px 0 64px;
  overflow: hidden;
}

.lab-hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #f0faf4 0%, var(--warm-white) 60%);
  z-index: 0;
}

.lab-hero-bg::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 440px; height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--luna-light), transparent 70%);
  opacity: 0.5;
}

/* Subtle scanline texture — nod to CRT without going full terminal */
.lab-scanline {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 3px,
    rgba(0,0,0,0.012) 3px,
    rgba(0,0,0,0.012) 4px
  );
  pointer-events: none;
}

.lab-hero .container { position: relative; z-index: 1; text-align: center; }
.lab-hero .section-subtitle { margin: 12px auto 0; }

.lab-title { color: var(--ink); }

/* Status indicator */
.lab-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 6px 14px;
  background: #fff;
  border: 1.5px solid var(--luna-light);
  border-radius: 99px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--luna);
}

.status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--luna);
  box-shadow: 0 0 6px var(--luna);
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(0.85); }
}

/* Section label green tint for lab pages */
.lab-hero .section-label { color: var(--luna); }

/* === GEAR CARDS === */
.stack-section { padding: 72px 0 64px; }

.gear-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 32px;
}

.gear-card { height: 100%; transition: transform 0.2s, box-shadow 0.2s; }
.gear-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.gear-card--special {
  border-color: #fde68a;
  box-shadow: 0 4px 16px rgba(245,158,11,0.12);
}
.gear-card--special .panel-titlebar {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
}

.gear-card-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}

.gear-card-icon { font-size: 1.8rem; line-height: 1; flex-shrink: 0; }

.gear-card-name {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--ink);
  margin-bottom: 2px;
}

.gear-card-sub {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.gear-led-wrap { margin-left: auto; flex-shrink: 0; padding-top: 4px; }

.gear-card-desc {
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.65;
  margin-bottom: 16px;
}

.gear-card-highlight { color: var(--sky-dark); }
.gear-card--special .gear-card-highlight { color: #92400e; }

.gear-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.gear-card-tags .chip {
  background: #f0faf4;
  color: #1a6b3c;
  border-color: var(--luna-light);
}

.conference-chip {
  background: #fffbeb !important;
  color: #92400e !important;
  border-color: #fde68a !important;
}

/* === TOPOLOGY === */
.topology-section { padding: 0 0 64px; }

/* Match the gear cards grid width exactly */
.topo-wrap { max-width: 100%; }

.topo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.topo-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 14px 24px;
  border-radius: var(--radius-lg);
  border: 2px solid var(--warm-border);
  background: var(--warm-off);
  min-width: 160px;
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.topo-node:hover { border-color: var(--sky-light); box-shadow: var(--shadow-md); }

.topo-node--internet { background: var(--sky-pale);  border-color: var(--sky-light); min-width: 140px; }
.topo-node--router   { background: #eaf7f0; border-color: var(--luna-light); min-width: 220px; }
.topo-node--switch   { background: #fffbeb; border-color: #fde68a; min-width: 180px; }
.topo-node--device   { min-width: 130px; background: #fff; }
.topo-node--wireless { border-color: var(--sky-mid); background: var(--sky-pale); border-style: dashed; }

.topo-node-name { font-weight: 900; font-size: 0.95rem; color: var(--ink); }
.topo-node-sub  { font-size: 0.75rem; color: var(--ink-soft); font-weight: 600; }

/* Vertical connectors */
.topo-connector {
  width: 2px;
  height: 28px;
  background: var(--warm-border);
  position: relative;
  flex-shrink: 0;
}
.topo-connector::before, .topo-connector::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sky-light);
}
.topo-connector::before { top: -3px; }
.topo-connector::after  { bottom: -3px; }

/* Wireless dashed connector — border-left trick so it actually renders visibly */
.topo-connector--wireless {
  width: 2px;
  height: 28px;
  background: repeating-linear-gradient(
    to bottom,
    var(--sky-mid) 0px,
    var(--sky-mid) 5px,
    transparent 5px,
    transparent 9px
  );
}
.topo-connector--wireless::before,
.topo-connector--wireless::after { display: none; }

/* Branch rows */
.topo-branches {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  position: relative;
}
.topo-branches::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 2px;
  background: var(--warm-border);
}

/* Router level — spans all three branches including wireless */
.topo-branches--router { gap: 48px; }
.topo-branches--router::before { width: 72%; }

/* Switch level */
.topo-branches--switch { gap: 16px; }
.topo-branches--switch::before { width: 82%; }

.topo-branch { display: flex; flex-direction: column; align-items: center; }
.topo-connector--branch { height: 28px; }

/* === NOTES === */
.lab-notes { padding: 16px 0 96px; }

.notes-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 32px;
  max-width: 720px;
}

.note-card { transition: transform 0.2s, box-shadow 0.2s; }
.note-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.note-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

/* Green chip for notes */
.note-meta .chip {
  background: #f0faf4;
  color: #1a6b3c;
  border-color: var(--luna-light);
}

.note-date {
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-weight: 600;
}

.note-title {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--ink);
  margin-bottom: 6px;
}

.note-excerpt {
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* === RESPONSIVE === */
@media (max-width: 640px) {
  .gear-cards { grid-template-columns: 1fr; }
  .topo-wrap  { max-width: 100%; }
  .topo-branches { gap: 10px; }
  .topo-node { min-width: 120px; padding: 10px 14px; }
  .topology-section { display: none; }
}