/**
 * @file views-inimesed.css
 * Drupal core ships the Views "Grid" style with no CSS at all - it's left
 * for the theme to implement. This gives the Inimesed view (person cards,
 * grouped by Rahvamaja/Loodusselts) an actual grid layout and constrains
 * the source images, which otherwise render at their native pixel size.
 */

/*
 * Responsive, mirroring the page H1's own breakpoint progression
 * (text-4xl/md:text-5xl/lg:text-6xl = 40px/48px/60px) scaled to 75% at
 * each step, landing at 45px on desktop rather than matching H1 exactly -
 * prominent enough to draw the eye, without competing with the real page
 * title.
 */
.view-id-inimesed h3 {
  margin-block: 2rem 1rem;
  font-family: "Ephesis", cursive;
  font-size: 1.875rem;
  font-weight: 600;
  color: var(--foreground);
}

@media (min-width: 768px) {
  .view-id-inimesed h3 {
    font-size: 2.25rem;
  }
}

@media (min-width: 1024px) {
  .view-id-inimesed h3 {
    font-size: 2.8125rem;
  }
}

.view-id-inimesed .views-view-grid > div {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

@media (max-width: 900px) {
  .view-id-inimesed .views-view-grid > div {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .view-id-inimesed .views-view-grid > div {
    grid-template-columns: 1fr;
  }
}

.view-id-inimesed .views-view-grid > div > div {
  padding: 1rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, var(--radius));
}

.view-id-inimesed .views-field-field-pilt img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-md, var(--radius));
  margin-bottom: 0.75rem;
}

.view-id-inimesed .views-field-title {
  font-weight: 600;
  font-size: 1.0625rem;
  color: #4a5f44;
  margin-bottom: 0.25rem;
}

.view-id-inimesed .views-field-field-amet {
  font-size: 0.9rem;
  line-height: 1.4;
}

.view-id-inimesed .views-field-field-e-post,
.view-id-inimesed .views-field-field-telefon {
  font-size: 0.9rem;
  color: var(--muted-foreground);
}

.view-id-inimesed .views-field-field-e-post a,
.view-id-inimesed .views-field-field-telefon a {
  color: var(--primary);
  text-decoration: none;
}

.view-id-inimesed .views-field-field-e-post a:hover,
.view-id-inimesed .views-field-field-telefon a:hover {
  text-decoration: underline;
}