/* =====================================================
   IEEE CS UNAP — COMO-CONTRIBUIR PAGE STYLES
   ===================================================== */

/* MINIMAL HERO */
.minimal-hero {
  background: var(--gradient-hero);
  color: var(--on-surface);
  padding: 4rem 0 3rem;
  text-align: center;
  border-bottom: 1px solid var(--outline-variant);
  position: relative;
  overflow: hidden;
}
.minimal-hero::before {
  content:''; position:absolute; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M 60 0 L 0 0 0 60' fill='none' stroke='rgba(56,189,248,0.05)' stroke-width='1'/%3E%3C/svg%3E");
  pointer-events:none;
}
.minimal-hero-container { max-width:var(--container-max-width); margin:0 auto; padding:0 var(--container-padding); position:relative; z-index:1; }
.minimal-title { font-size:clamp(1.8rem,4vw,2.8rem); font-weight:700; color:var(--on-surface); margin-bottom:var(--spacing-md); letter-spacing:-0.01em; }
.minimal-subtitle { color:var(--on-surface-variant); font-size:var(--text-lg); margin:0; }

/* METHODS GRID */
.minimal-methods { padding:var(--spacing-3xl) 0; background:var(--surface); }
.minimal-container { max-width:var(--container-max-width); margin:0 auto; padding:0 var(--container-padding); }
.minimal-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:var(--spacing-xl); }

.minimal-card {
  background:var(--surface-container); border:1px solid var(--glass-border);
  border-radius:var(--border-radius-large); padding:var(--spacing-2xl);
  display:flex; flex-direction:column; gap:var(--spacing-md);
  transition:var(--transition-slow); position:relative; overflow:hidden;
}
.minimal-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--gradient-primary); opacity:0.4; transition:var(--transition);
}
.minimal-card:hover { border-color:var(--glass-border-hover); box-shadow:var(--shadow-medium),0 0 24px rgba(56,189,248,0.1); transform:translateY(-4px); }
.minimal-card:hover::before { opacity:1; }
.minimal-card.recommended::before { opacity:1; }

.recommended-label {
  position:absolute; top:var(--spacing-md); right:var(--spacing-md);
  background:var(--gradient-primary); color:var(--on-primary);
  font-size:var(--text-xs); font-weight:700; font-family:var(--font-mono);
  padding:3px 10px; border-radius:var(--border-radius-full); letter-spacing:0.06em; text-transform:uppercase;
}

.minimal-header { display:flex; align-items:center; gap:var(--spacing-md); }
.minimal-header i { font-size:1.8rem; background:var(--gradient-primary); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.minimal-info h3 { color:var(--on-surface); font-size:var(--text-xl); margin:0; }
.minimal-badge { display:none; }

.minimal-desc { color:var(--on-surface-variant); font-size:var(--text-sm); line-height:1.6; margin:0; flex:1; }

.minimal-features { display:flex; flex-direction:column; gap:4px; }
.minimal-features span { color:var(--on-surface-variant); font-size:var(--text-xs); font-family:var(--font-mono); padding:4px 0; }
.minimal-features span::before { content:"▸ "; color:var(--secondary); }

.minimal-btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--spacing-sm); padding:12px 24px; border-radius:var(--border-radius);
  font-weight:600; font-size:var(--text-sm); font-family:var(--font-mono);
  text-decoration:none; cursor:pointer; transition:var(--transition);
  border:none; letter-spacing:0.02em; margin-top:auto;
}
.minimal-btn.primary { background:var(--gradient-primary); color:var(--on-primary); box-shadow:var(--glow-primary); }
.minimal-btn.primary:hover { filter:brightness(1.08); transform:translateY(-2px); box-shadow:0 0 32px rgba(56,189,248,0.5); text-decoration:none; }
.minimal-btn.secondary { background:transparent; color:var(--primary); border:1px solid var(--primary); }
.minimal-btn.secondary:hover { background:rgba(56,189,248,0.1); color:var(--secondary); border-color:var(--secondary); transform:translateY(-2px); text-decoration:none; }

/* CONTRIBUTE SECTION */
.contribute-section { padding:var(--spacing-3xl) 0; background:var(--surface); }
.contribute-hero {
  background:var(--gradient-hero); color:var(--on-surface);
  padding:var(--spacing-3xl) 0; position:relative; overflow:hidden;
  border-bottom:1px solid var(--outline-variant);
}
.contribute-hero::before {
  content:''; position:absolute; inset:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='20' cy='20' r='1' fill='rgba(68,226,205,0.1)'/%3E%3C/svg%3E");
}
.contribute-container { max-width:var(--container-max-width); margin:0 auto; padding:0 var(--container-padding); }

/* STEPS */
.steps-container { display:flex; flex-direction:column; gap:var(--spacing-xl); margin-top:var(--spacing-2xl); }

.step {
  display:flex; gap:var(--spacing-xl); align-items:flex-start;
  background:var(--surface-container); padding:var(--spacing-2xl);
  border-radius:var(--border-radius-large); border:1px solid var(--glass-border);
  transition:var(--transition-slow); position:relative; overflow:hidden;
}
.step::before {
  content:''; position:absolute; top:0; left:0;
  width:3px; height:100%;
  background:var(--gradient-primary);
}
.step:hover { border-color:var(--glass-border-hover); box-shadow:var(--shadow-medium),0 0 20px rgba(56,189,248,0.08); transform:translateX(4px); }

.step-number {
  background:var(--gradient-primary); color:var(--on-primary);
  width:52px; height:52px; border-radius:var(--border-radius-full);
  display:flex; align-items:center; justify-content:center;
  font-size:var(--text-xl); font-weight:700; flex-shrink:0;
  font-family:var(--font-mono); box-shadow:var(--glow-primary);
}

.step-content { flex:1; }
.step-content h3 { font-size:var(--text-xl); margin-bottom:var(--spacing-md); color:var(--on-surface); display:flex; align-items:center; gap:var(--spacing-sm); }
.step-content h3 i { color:var(--primary); }
.step-content p { color:var(--on-surface-variant); margin-bottom:var(--spacing-lg); line-height:1.7; }

/* Step images */
.step-image { margin:var(--spacing-lg) 0; position:relative; }
.guide-image { width:100%; border-radius:var(--border-radius); border:1px solid var(--outline-variant); transition:var(--transition); cursor:zoom-in; }
.guide-image:hover { border-color:var(--primary); box-shadow:0 0 20px rgba(56,189,248,0.2); }
.image-zoom-hint { text-align:center; margin-top:var(--spacing-sm); color:var(--on-surface-variant); font-size:var(--text-xs); font-family:var(--font-mono); }

/* Info/Warning/Tip boxes */
.info-box {
  background:rgba(56,189,248,0.05); border:1px solid rgba(56,189,248,0.2);
  border-left:3px solid var(--primary); border-radius:var(--border-radius); padding:var(--spacing-xl); margin-top:var(--spacing-lg);
}
.info-box h4 { margin-bottom:var(--spacing-md); color:var(--on-surface); font-size:var(--text-base); display:flex; align-items:center; gap:var(--spacing-sm); font-weight:600; }
.info-box h4 i { color:var(--primary); }
.info-box ul { list-style:none; margin:0; padding:0; }
.info-box li { margin-bottom:var(--spacing-sm); color:var(--on-surface-variant); font-size:var(--text-sm); display:flex; align-items:flex-start; gap:var(--spacing-sm); }
.info-box li::before { content:"›"; color:var(--secondary); font-weight:bold; font-size:var(--text-lg); line-height:1.2; }
.info-box strong { color:var(--on-surface); }
.info-box p { color:var(--on-surface-variant); margin:0; font-size:var(--text-sm); line-height:1.6; }

/* Image Modal */
.image-modal {
  display:none; position:fixed; inset:0; z-index:9998;
  background:rgba(6,14,32,0.92); backdrop-filter:blur(12px);
  align-items:center; justify-content:center; padding:var(--spacing-xl);
}
.image-modal.active { display:flex; }
.modal-close {
  position:absolute; top:20px; right:24px; color:var(--on-surface-variant);
  font-size:2rem; cursor:pointer; transition:var(--transition); line-height:1;
  background:var(--surface-container); border:1px solid var(--outline-variant);
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--border-radius-full);
}
.modal-close:hover { color:var(--error); border-color:var(--error); }
.modal-content { max-width:90vw; max-height:80vh; object-fit:contain; border-radius:var(--border-radius); border:1px solid var(--outline-variant); }
.modal-caption { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); color:var(--on-surface-variant); font-size:var(--text-sm); font-family:var(--font-mono); background:var(--surface-container); padding:8px 16px; border-radius:var(--border-radius-full); border:1px solid var(--outline-variant); }

/* Clickable image styles */
.clickable-image { cursor:zoom-in; }

/* =====================================================
   VALIDATION SECTION
   ===================================================== */
.validation-section {
  padding: var(--spacing-3xl) 0;
  background: var(--surface-container-low);
  border-top: 1px solid var(--outline-variant);
}
.validation-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}
.section-title {
  text-align: center;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--on-surface);
  margin-bottom: var(--spacing-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
}
.section-title i {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.validation-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-xl);
}
.validation-item {
  background: var(--surface-container);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-large);
  padding: var(--spacing-2xl);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  transition: var(--transition-slow);
  position: relative;
  overflow: hidden;
}
.validation-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gradient-primary);
  opacity: 0.4;
  transition: var(--transition);
}
.validation-item:hover {
  border-color: var(--glass-border-hover);
  box-shadow: var(--shadow-medium), 0 0 20px rgba(56,189,248,0.1);
  transform: translateY(-4px);
}
.validation-item:hover::before { opacity: 1; }

.validation-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--border-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}
.validation-icon.success {
  background: rgba(68,226,205,0.12);
  color: var(--secondary);
  border: 1px solid rgba(68,226,205,0.3);
}
.validation-icon.info {
  background: rgba(56,189,248,0.12);
  color: var(--primary);
  border: 1px solid rgba(56,189,248,0.3);
}
.validation-icon.warning {
  background: rgba(251,191,36,0.12);
  color: #fbbf24;
  border: 1px solid rgba(251,191,36,0.3);
}
.validation-item h3 {
  color: var(--on-surface);
  font-size: var(--text-lg);
  font-weight: 600;
  margin: 0;
}
.validation-item p {
  color: var(--on-surface-variant);
  font-size: var(--text-sm);
  line-height: 1.6;
  margin: 0;
}

/* =====================================================
   EXAMPLES SECTION
   ===================================================== */
.examples-section {
  padding: var(--spacing-3xl) 0;
  background: var(--surface);
  border-top: 1px solid var(--outline-variant);
}
.examples-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}
.examples-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-xl);
}
.example-item {
  background: var(--surface-container);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-large);
  padding: var(--spacing-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  transition: var(--transition-slow);
}
.example-item:hover {
  border-color: var(--glass-border-hover);
  box-shadow: var(--shadow-medium), 0 0 20px rgba(56,189,248,0.08);
}
.example-item h3 {
  color: var(--on-surface);
  font-size: var(--text-lg);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin: 0;
}

/* Error list */
.error-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.error-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: rgba(239,68,68,0.06);
  border: 1px solid rgba(239,68,68,0.15);
  border-radius: var(--border-radius);
  color: var(--on-surface-variant);
  font-size: var(--text-sm);
}
.error-item i {
  color: #ef4444;
  flex-shrink: 0;
}

/* Code blocks */
.code-example {
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--border-radius);
  overflow: hidden;
}
.code-example pre {
  margin: 0;
  padding: var(--spacing-xl);
  overflow-x: auto;
}
.code-example code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--secondary);
  line-height: 1.7;
  white-space: pre;
}

/* info-box success variant */
.info-box.success {
  background: rgba(68,226,205,0.05);
  border-color: rgba(68,226,205,0.25);
  border-left-color: var(--secondary);
}
.info-box.success h4 i { color: var(--secondary); }

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width:768px) {
  .minimal-grid { grid-template-columns:1fr; }
  .step { flex-direction:column; gap:var(--spacing-md); padding:var(--spacing-lg); }
  .step::before { width:100%; height:3px; top:0; left:0; }
  .step-number { width:44px; height:44px; font-size:var(--text-lg); }
  .validation-grid { grid-template-columns: 1fr; }
  .examples-grid { grid-template-columns: 1fr; }
}