/* ============================================
   css/states.css
   "Browse Spas by U.S. State" section
   ============================================ */

/* ── Section wrapper ── */
.states-section {
  padding: 36px var(--space-lg) 40px;
  max-width: var(--max-width);
  margin: 0 auto;
}

/* ── Section title ── */
.states-section .section-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-white);
  text-align: center;
  margin-bottom: 22px;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.states-section .section-title::before,
.states-section .section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(
    to var(--dir, right),
    transparent 0%,
    #3a3a3a 60%
  );
}

.states-section .section-title::before { --dir: right; }
.states-section .section-title::after  { --dir: left; }

/* ── Grid ── */
.states-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Desktop: 4 per row */
  gap: 10px;
}

/* ── Base button ── */
.state-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 7px 14px;
  border-radius: 7px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  letter-spacing: 0.2px;
  background: #1a1a1a;
  border: 1px solid #2e2e2e;
  color: #c8c8c8;
  transition:
    background  var(--transition),
    border-color var(--transition),
    color        var(--transition),
    transform    var(--transition),
    box-shadow   var(--transition);
}

.state-btn:hover {
  background:    #263326;
  border-color:  #3a6b3a;
  color:         #fff;
  transform:     translateY(-2px);
  box-shadow:    0 6px 20px rgba(0,0,0,0.45);
}

/* ── Active / selected state ── */
.state-btn--active {
  background:   #1b3d1b;
  border-color: #2e6b2e;
  color:        #d4f0d4;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 2px 10px rgba(0,0,0,0.4);
}

.state-btn--active:hover {
  background:   #20491f;
  border-color: #3a7a3a;
  color:        #e0f5e0;
}

/* ── View All States link ── */
.state-btn--link {
  background:    transparent;
  border:        1px solid #2e2e2e;
  color:         #ccc;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(200,200,200,0.4);
  justify-content: center;
}

.state-btn--link:hover {
  background:      #1b3d1b;
  border-color:    #2e6b2e;
  color:           #d4f0d4;
  text-decoration: none;
}

/* ============================================
   MOBILE / RESPONSIVE
   3 buttons per row on smaller screens
============================================ */

@media (max-width: 768px) {
  .states-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 480px) {
  .states-grid {
    grid-template-columns: repeat(3, 1fr); /* keep 3 per row on small phones */
  }
}

.states-section .section-title {
  font-size: 22px;
  font-weight: 700;
  color: #d4f0d4; /* light green color from your screenshot */
  text-align: center;
  margin-bottom: 22px;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  gap: 18px;
}