/*
 * VarshaKrishi — css/pages/legal.css
 * Legal document hub page styles. No hardcoded values — all tokens.
 *
 * Sections:
 *   1. Page hero
 *   2. Document section wrapper
 *   3. Document grid
 *   4. Document card
 *   5. Contact note
 *   6. Responsive overrides
 */

/* ═══════════════════════════════════════════════════════════════
 * 1. PAGE HERO
 * ═══════════════════════════════════════════════════════════════ */

.legal-hero {
  padding-top:    calc(var(--nav-height) + var(--space-12));
  padding-bottom: var(--space-10);
  background:
    radial-gradient(ellipse 70% 50% at 50% -10%, rgba(45, 84, 56, 0.12) 0%, transparent 60%),
    var(--color-bg-base);
  border-bottom: 1px solid var(--color-border-default);
}

.legal-hero__inner {
  max-width:      var(--grid-max);
  margin-inline:  auto;
  padding-inline: var(--grid-padding);
}

.legal-hero__kicker {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-1);
  font-family:     var(--font-mono);
  font-size:       var(--text-xs);
  font-weight:     var(--weight-medium);
  letter-spacing:  var(--tracking-widest);
  text-transform:  uppercase;
  color:           var(--color-text-muted);
  margin-bottom:   var(--space-3);
}

.legal-hero__title {
  font-family:    var(--font-display);
  font-size:      var(--text-5xl);
  font-weight:    var(--weight-regular);
  color:          var(--color-text-primary);
  line-height:    var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-bottom:  var(--space-3);
}

.legal-hero__sub {
  font-size:    var(--text-lg);
  color:        var(--color-text-secondary);
  max-width:    var(--measure-narrow);
  line-height:  var(--leading-relaxed);
}

/* ═══════════════════════════════════════════════════════════════
 * 2. DOCUMENT SECTION WRAPPER
 * ═══════════════════════════════════════════════════════════════ */

.legal-section {
  padding-block: var(--space-section);
  background:    var(--color-bg-base);
}

.legal-section__inner {
  max-width:      var(--grid-max);
  margin-inline:  auto;
  padding-inline: var(--grid-padding);
}

/* ═══════════════════════════════════════════════════════════════
 * 3. DOCUMENT GRID
 * ═══════════════════════════════════════════════════════════════ */

.legal-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap:                   var(--space-3);
}

/* ═══════════════════════════════════════════════════════════════
 * 4. DOCUMENT CARD
 * ═══════════════════════════════════════════════════════════════ */

.legal-card {
  display:          flex;
  flex-direction:   column;
  background:       var(--color-bg-surface);
  border:           1px solid var(--color-border-default);
  border-radius:    var(--radius-lg);
  padding:          var(--space-5);
  transition:
    border-color var(--duration-fast) var(--ease-out),
    background   var(--duration-fast) var(--ease-out);
}

.legal-card:hover {
  border-color: var(--color-brand-muted);
  background:   var(--color-bg-elevated);
}

.legal-card__icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           40px;
  height:          40px;
  border-radius:   var(--radius-md);
  background:      rgba(200, 131, 10, 0.08);
  border:          1px solid rgba(200, 131, 10, 0.18);
  color:           var(--color-brand-primary);
  flex-shrink:     0;
  margin-bottom:   var(--space-3);
}

.legal-card__title {
  font-family:    var(--font-body);
  font-size:      var(--text-base);
  font-weight:    var(--weight-semibold);
  color:          var(--color-text-primary);
  line-height:    var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  margin-bottom:  var(--space-1);
}

.legal-card__desc {
  font-size:   var(--text-sm);
  color:       var(--color-text-muted);
  line-height: var(--leading-relaxed);
  flex:        1;
  margin-bottom: var(--space-4);
}

.legal-card__btn {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-1);
  align-self:      flex-start;
  font-family:     var(--font-mono);
  font-size:       var(--text-xs);
  font-weight:     var(--weight-medium);
  letter-spacing:  var(--tracking-wide);
  text-transform:  uppercase;
  color:           var(--color-brand-primary);
  text-decoration: none;
  padding:         0.375rem var(--space-2);
  border:          1px solid var(--color-brand-muted);
  border-radius:   var(--radius-sm);
  transition:
    background    var(--duration-fast) var(--ease-out),
    border-color  var(--duration-fast) var(--ease-out),
    color         var(--duration-fast) var(--ease-out);
}

.legal-card__btn:hover {
  background:   rgba(200, 131, 10, 0.1);
  border-color: var(--color-brand-primary);
  color:        var(--color-brand-hover);
}

.legal-card__btn svg {
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
 * 5. CONTACT NOTE
 * ═══════════════════════════════════════════════════════════════ */

.legal-contact {
  margin-top:  var(--space-10);
  padding-top: var(--space-8);
  border-top:  1px solid var(--color-border-default);
  text-align:  center;
}

.legal-contact p {
  font-size:  var(--text-sm);
  color:      var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

.legal-contact a {
  color:           var(--color-brand-primary);
  text-decoration: none;
}

.legal-contact a:hover {
  color:           var(--color-brand-hover);
  text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════
 * 6. RESPONSIVE OVERRIDES
 * ═══════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .legal-grid {
    grid-template-columns: 1fr;
  }

  .legal-hero__title {
    font-size: var(--text-4xl);
  }
}