/* ===================================
   MAPS PAGE — ValorantPL
   =================================== */

.hero.hero-maps {
  position: relative;
  padding: var(--space-16) 0 var(--space-12);
  background: radial-gradient(1200px 600px at 80% -20%, rgba(0,217,255,0.08), transparent),
              radial-gradient(1000px 500px at 0% 100%, rgba(255,70,85,0.08), transparent);
}
.hero .hero-content {
  backdrop-filter: blur(6px);
}

.section {
  padding: var(--space-12) 0;
}

.section-header { margin-bottom: var(--space-6); }
.section-header.with-cta { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); }

.filters {
  display: grid;
  grid-template-columns: 1fr 240px 140px;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
@media (max-width: 768px) {
  .filters { grid-template-columns: 1fr; }
}

.maps-grid .map-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.map-media { border-radius: var(--radius-lg); overflow: hidden; }
.map-media img { width: 100%; height: 180px; object-fit: cover; filter: saturate(1.05) contrast(1.05); }
.map-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.map-facts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-2); font-size: var(--font-size-sm); color: var(--color-text-secondary); }

/* Callouts */
.callouts-controls { margin-bottom: var(--space-4); }
.callouts-layout { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-6); }
@media (max-width: 1024px) { .callouts-layout { grid-template-columns: 1fr; } }
.callout-items { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-3); margin-top: var(--space-4); }
@media (max-width: 640px){ .callout-items { grid-template-columns: 1fr; } }
.callout-items li { background: var(--color-bg-tertiary); border: 1px solid var(--color-gray-800); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }

/* Strategies */
.strat-content .strat-block { background: var(--color-bg-tertiary); border: 1px solid var(--color-gray-800); border-radius: var(--radius-lg); padding: var(--space-4); }
.strat-content .strat-block h4 { margin-bottom: var(--space-3); }
.strat-content ul { list-style: none; display: grid; gap: var(--space-2); }

/* Comparison table */
.table-scroll { overflow-x: auto; }
.comparison { width: 100%; border: 1px solid var(--color-gray-800); border-radius: var(--radius-lg); overflow: hidden; }
.comparison th, .comparison td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--color-gray-800); }
.comparison thead { background: var(--color-bg-tertiary); }

/* Videos */
.video-wrapper { position: relative; width: 100%; padding-bottom: 56.25%; border-radius: var(--radius-lg); overflow: hidden; }
.video-wrapper .video { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Rankings */
.ranking-list { display: grid; gap: var(--space-3); }
.ranking-item { display: grid; gap: var(--space-2); }
.rating-bar { height: 10px; border-radius: var(--radius-full); background: var(--color-gray-700); overflow: hidden; }
.rating-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--color-secondary), var(--color-primary)); box-shadow: var(--glow-secondary); }
.ranking-form { display: grid; grid-template-columns: 1fr 140px auto; gap: var(--space-3); align-items: center; }
@media (max-width: 768px){ .ranking-form { grid-template-columns: 1fr; } }

/* Feedback */
.feedback-form { display: grid; gap: var(--space-3); }
.feedback-list { display: grid; gap: var(--space-3); max-height: 420px; overflow: auto; padding-right: var(--space-2); }
.feedback-list li { background: var(--color-bg-tertiary); border: 1px solid var(--color-gray-800); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.feedback-meta { display: flex; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); font-size: var(--font-size-sm); color: var(--color-text-tertiary); }

/* CTA */
.cta-section .card { align-items: center; }