/**
 * INDEX.CSS - Estilos específicos da página inicial
 */

/* ============================================
   GRID SYSTEM 12-COLUMN (Index specific)
   ============================================ */
.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(12, 1fr);
}

.col-12 { grid-column: span 12; }
.col-8 { grid-column: span 8; }
.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }

/* ============================================
   FAQ SECTION
   ============================================ */
.faq {
  margin: 0 auto;
  max-width: 980px;
}

.faq h2 {
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.faq details {
  background: linear-gradient(180deg, var(--card), var(--bg-soft));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.7rem;
}

.faq summary {
  cursor: pointer;
  font-weight: 600;
  outline: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq details[open] {
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.faq p {
  margin: 0.6rem 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.faq a {
  color: var(--primary);
  text-decoration: underline;
}

#faq {
  scroll-margin-top: 4rem;
}

/* ============================================
   AD CONTAINERS
   ============================================ */
.ad-slot,
.ad-container {
  margin: 32px 0;
  border: 2px dashed var(--border);
  border-radius: 16px;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  background: rgba(15, 19, 32, 0.5);
  font-weight: 500;
  transition: border-color 0.2s ease;
  display: none;
}

.ad-container:hover {
  border-color: var(--primary);
}

/* ============================================
   RESPONSIVE - INDEX
   ============================================ */
@media (max-width: 1024px) {
  .col-8 { grid-column: span 12; }
  .col-3 { grid-column: span 6; }
}

@media (max-width: 690px) {
  .col-6, .col-4, .col-3 { grid-column: span 12; }
}