/* =========================================
   MINIMALIST LAYOUT - Estilo JG Portfolio
   Layout vertical, espaçamento generoso, flat design
   ========================================= */

/* Container principal mais estreito para leitura */
.container {
  max-width: 1200px !important;
  padding: 0 2rem !important;
}

/* Seções com espaçamento vertical generoso */
section {
  padding: 8rem 0 !important;
  min-height: auto !important;
}

/* Hero section ainda mais espaçosa */
.hero-section, section:first-of-type {
  padding: 2rem 0 !important;
}

/* Cards flat - sem sombras, bordas sutis */
.card, .project-card, .interactive-card, 
[class*="p-6"], [class*="p-8"], 
.rounded-lg, .rounded-2xl {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0.5rem !important;
  box-shadow: none !important;
  transition: all 0.3s ease !important;
}

.card:hover, .project-card:hover, .interactive-card:hover {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-2px) !important;
}

/* Remover sombras de todos os elementos exceto navbar scrolled */
*:not(nav.scrolled):not(#navbar.scrolled):not(.navbar.scrolled) {
  box-shadow: none !important;
}

/* Remover bordas de divs e sections (exceto cards) */
div:not(.card):not(.project-card):not(.interactive-card):not([class*="p-6"]):not([class*="p-8"]):not(.rounded-lg):not(.rounded-2xl):not(.timeline-content):not(.project-card-simplified):not(.modal-content), 
section {
  border: none !important;
}

/* Adicionar linha divisória entre seções */
section {
  position: relative;
  border-bottom: none !important;
}

section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

section:last-of-type::after {
  display: none;
}

/* Remover bordas especificamente da section de projetos e seu container, mas não dos cards */
#projects {
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}

#projects > .max-w-7xl {
  border: none !important;
}

#projects .grid {
  border: none !important;
}

/* Navegação - Textos brancos visíveis */
nav a, .nav-link, nav .nav-link {
  color: #FFFFFF !important;
}

nav a:hover, .nav-link:hover {
  color: #CCCCCC !important;
}

/* Textos de descrição visíveis */
.text-gray-600, .text-gray-400, p {
  color: #CCCCCC !important;
}

h3, .font-semibold {
  color: #FFFFFF !important;
}

/* Tags de projeto visíveis */
.project-tag, .project-tag-gray, .project-tag-white {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Grid simplificado */
.grid {
  gap: 2rem !important;
}

/* Títulos de seção com espaçamento */
section > div > h2 {
  margin-bottom: 4rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  font-size: 2.5rem !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Parágrafos com espaçamento */
p {
  margin-bottom: 1.5rem !important;
  line-height: 1.8 !important;
}

/* Hero section simplificada */
.hero-section {
  padding: 8rem 0 !important;
  text-align: left !important;
}

/* Botões flat */
button, .btn, a[class*="px-6"] {
  background: #FFFFFF !important;
  color: #000000 !important;
  border: 1px solid #FFFFFF !important;
  border-radius: 0.25rem !important;
  padding: 0.75rem 1.5rem !important;
  font-size: 0.875rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  transition: all 0.3s ease !important;
}

button:hover, .btn:hover, a[class*="px-6"]:hover {
  background: transparent !important;
  color: #FFFFFF !important;
  border-color: #FFFFFF !important;
}

/* Links de navegação */
nav a {
  font-size: 0.875rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  transition: color 0.3s ease !important;
}

nav a:hover {
  color: #FFFFFF !important;
}

/* Footer minimalista */
footer {
  background: transparent !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 3rem 0 !important;
  font-size: 0.875rem !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Remover sombras de imagens */
img {
  box-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
}

.project-card img {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

.project-card:hover img {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

/* Overlay só aparece no hover */
.project-overlay {
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

.project-card:hover .project-overlay {
  opacity: 1 !important;
}

.rounded-full {
  box-shadow: none !important;
}

.profile-container img {
  box-shadow: none !important;
  border: none !important;
}