/* Section 1 */

/* Base styles for the 4-point list */
section[data-section-id="17908000005346216"] ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 0;
  list-style: none;
}

/* Tile styling + hover effects */
section[data-section-id="17908000005346216"] li {
  flex: 1 1 200px;
  background: white;
  border: 1px solid #eee;
  padding: 1.5rem;
  border-radius: 8px;
  transition: 
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
  position: relative;
  overflow: hidden; /* Keeps the underglow contained */
}

/* Underglow effect (hidden by default) */
section[data-section-id="17908000005346216"] li::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 10px;
  background: linear-gradient(
    to top,
    rgba(235, 10, 30, 0.2) 0%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Hover state: Lift tile + underglow + shadow */
section[data-section-id="17908000005346216"] li:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
  border-color: rgba(235, 10, 30, 0.3); /* Soft red border accent */
}

/* Reveal underglow on hover */
section[data-section-id="17908000005346216"] li:hover::after {
  opacity: 1;
}

/* Keep red accent for keywords */
section[data-section-id="17908000005346216"] li strong {
  color: #eb0a1e;
}

/* Section 2 */
/* Target ONLY the 4-point list in this specific section */
section[data-section-id="17908000005367453"] ul {
  list-style: none;
  padding: 0;
  margin: 0; /* Removes default margin */
  text-align: left; /* Forces left alignment */
}

section[data-section-id="17908000005367453"] li {
  padding: 1rem 0 1rem 1rem; /* Extra left padding for visual balance */
  border-bottom: 1px solid #eee;
  margin-bottom: 1rem;
  position: relative;
  text-align: left; /* Ensures text is left-aligned */
}

/* Animated underline for keywords (left-aligned) */
section[data-section-id="17908000005367453"] li strong {
  color: #eb0a1e;
  position: relative;
  display: inline-block;
  padding-right: 0; /* Reset any spacing */
}

section[data-section-id="17908000005367453"] li strong::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0; /* Anchor to left edge */
  width: 0;
  height: 2px;
  background: #eb0a1e;
  transition: width 0.3s ease-out;
}

/* Draw the underline from left to right */
section[data-section-id="17908000005367453"] li:hover strong::after {
  width: 100%;
}

/* Left-align all text */
section[data-section-id="17908000005367453"] li span {
  display: inline-block;
  width: 100%;
  text-align: left;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

/* Section 3 */
/* ===== Contained Tech Badge Grid ===== */
section[data-section-id="17908000005367399"] .markdown-contain {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  padding: 2rem 0;
}

/* Fixed height container */
section[data-section-id="17908000005367399"] .markdown-contain p {
  margin: 0;
  position: relative;
  height: 180px; /* Fixed height prevents layout shift */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* Badge styling */
section[data-section-id="17908000005367399"] .markdown-contain p::before {
  content: "";
  width: 80px;
  height: 80px;
  background: #f9f9f9;
  border: 2px solid #EB0A1E;
  border-radius: 50%;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

/* Icons */
section[data-section-id="17908000005367399"] .markdown-contain p:nth-child(1)::before { content: "🚗"; }
section[data-section-id="17908000005367399"] .markdown-contain p:nth-child(2)::before { content: "🏙️"; }
section[data-section-id="17908000005367399"] .markdown-contain p:nth-child(3)::before { content: "👥"; }
section[data-section-id="17908000005367399"] .markdown-contain p:nth-child(4)::before { content: "💡"; }

/* Keyword styling */
section[data-section-id="17908000005367399"] .markdown-contain strong {
  display: block;
  color: #EB0A1E;
  font-size: 1.1rem;
  text-align: center;
  transition: transform 0.3s ease;
  margin-bottom: 0.5rem;
}

/* Description - positioned absolutely within container */
section[data-section-id="17908000005367399"] .markdown-contain span {
  position: absolute;
  top: 110px; /* Below badge + keyword */
  text-align: center;
  font-size: 0.95rem;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
  width: 100%;
  padding: 0 0.5rem;
}

/* Hover effects */
section[data-section-id="17908000005367399"] .markdown-contain p:hover::before {
  transform: scale(1.1);
  background: #EB0A1E;
  color: white;
}

section[data-section-id="17908000005367399"] .markdown-contain p:hover strong {
  transform: translateY(-3px);
}

section[data-section-id="17908000005367399"] .markdown-contain p:hover span {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  section[data-section-id="17908000005367399"] .markdown-contain {
    grid-template-columns: repeat(2, 1fr);
  }
  section[data-section-id="17908000005367399"] .markdown-contain p {
    height: 160px; /* Slightly shorter on tablet */
  }
}

@media (max-width: 480px) {
  section[data-section-id="17908000005367399"] .markdown-contain {
    grid-template-columns: 1fr;
  }
  section[data-section-id="17908000005367399"] .markdown-contain p {
    height: 140px; /* Compact on mobile */
  }
  section[data-section-id="17908000005367399"] .markdown-contain span {
    top: 100px;
  }
}