@layer components;

:root {
  --terms-blue: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

/* Compact Terms - 4x2 Desktop */
.terms-section {
  background: var(--terms-blue);
  padding: clamp(2.75rem, 8vw, 3.75rem) clamp(1rem, 4vw, 2rem);
}

.terms-header {
  text-align: center;
  margin-bottom: clamp(2.25rem, 6vw, 3rem);
}

.terms-header h2 {
  font-size: clamp(2rem, 6.5vw, 2.5rem);
  margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem);
}

.terms-header p {
  font-size: clamp(0.975rem, 2.8vw, 1.125rem);
}

/* 2x2 Mobile, 4x2 Desktop Grid */
.terms-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 4vw, 1.75rem);
  max-width: min(95vw, 1000px);
  margin: clamp(2rem, 6vw, 3rem) auto;
}

@media (max-width: 480px) {
  .terms-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1rem, 3vw, 1.5rem);
  }
}

@media (min-width: 768px) {
  .terms-grid {
    grid-template-columns: repeat(4, minmax(14rem, 1fr));
    gap: clamp(1.5rem, 3vw, 2rem);
  }
}

@media (min-width: 1024px) {
  .terms-grid {
    grid-template-columns: repeat(4, minmax(15rem, 1fr));
  }
}

/* Compact Terms Cards */
.terms-card {
  background: hsla(0,0%,100%,0.85);
  backdrop-filter: blur(15px);
  border-radius: clamp(1rem, 3vw, 1.25rem);
  padding: clamp(1.5rem, 4vw, 1.875rem);
  border: 1px solid hsla(0,0%,100%,0.6);
  box-shadow: var(--terms-shadow);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
}

.terms-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  opacity: 0.85;
}

/* Compact Icon */
.terms-icon {
  font-size: clamp(2.25rem, 7vw, 2.75rem);
  margin-bottom: clamp(1rem, 3vw, 1.25rem);
}

/* Compact Text */
.terms-card h3 {
  font-size: clamp(1rem, 3vw, 1.25rem);
  margin-bottom: clamp(0.625rem, 1.8vw, 0.875rem);
}

.terms-card p {
  font-size: clamp(0.875rem, 2.6vw, 1rem);
  line-height: 1.55;
}

/* Compact Footer */
.terms-footer {
  margin-top: clamp(2rem, 6vw, 2.75rem);
  padding-top: clamp(1.5rem, 4vw, 2rem);
  border-top: 1px solid hsla(0,0%,80%,0.6);
}

.terms-footer p {
  font-size: clamp(0.875rem, 2.5vw, 1rem);
}

.terms-footer a {
  color: #fbbf24;
  font-weight: 800;
}

/* Subtle Hover */
.terms-card:hover {
  transform: translateY(-0.75rem);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

/* Responsive */
@media (min-width: 1024px) {
  .terms-grid {
    grid-template-columns: repeat(4, minmax(16rem, 1fr));
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .terms-card {
    transition: none;
  }
}