/**
 * Thematic essays listing (/essays/thematic) — minimal presentable pass.
 * Light prototype motif: white cards, pale-blue tints, navy/teal accents.
 *
 * Deliberately restrained: this restyles the existing Views output (title,
 * author, trimmed body) into a clean card grid. No grouping, filtering, or
 * theme organization — those are design decisions held for a later phase.
 * Editors keep full control via the Views UI (fields, sort, pager, header).
 */

.view-browse-essays.view-display-id-page_thematic {
  max-width: 1080px;
  margin: 0 auto;
}

/* ---- Intro / description (editable via the view Header) ---- */
.view-browse-essays.view-display-id-page_thematic .view-header {
  max-width: 720px; /* match the regional landing's dek width for consistency */
  margin: 0 auto 2rem; /* center it (no map here, but keep the two landings aligned) */
  color: #5a7480;
  font-size: 1.02rem;
  line-height: 1.6;
}

.view-browse-essays.view-display-id-page_thematic .view-header i,
.view-browse-essays.view-display-id-page_thematic .view-header em {
  font-style: italic;
}

/* ---- Card grid: override Views' 4-up responsive grid ---- */
.view-browse-essays.view-display-id-page_thematic .views-view-responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 1rem !important;
}

.view-browse-essays.view-display-id-page_thematic .views-view-responsive-grid__item {
  display: flex;
}

/* ---- Card ---- */
.view-browse-essays.view-display-id-page_thematic .views-view-responsive-grid__item-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 1.15rem 1.25rem 1.25rem;
  background: #fff;
  border: 1px solid #d7e6ee;
  border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.view-browse-essays.view-display-id-page_thematic .views-view-responsive-grid__item-inner:hover {
  border-color: #238fb5;
  box-shadow: 0 4px 14px rgba(1, 67, 96, 0.08);
  transform: translateY(-2px);
}

/* ---- Title ---- */
.view-browse-essays.view-display-id-page_thematic .views-field-title {
  margin-bottom: 0.4rem;
}

.view-browse-essays.view-display-id-page_thematic .views-field-title a {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 1.08rem;
  line-height: 1.3;
  color: #014360;
  text-decoration: none;
}

.view-browse-essays.view-display-id-page_thematic .views-field-title a:hover,
.view-browse-essays.view-display-id-page_thematic .views-field-title a:focus {
  color: #238fb5;
  text-decoration: underline;
}

/* ---- Author ---- */
.view-browse-essays.view-display-id-page_thematic .views-field-field-author {
  margin-bottom: 0.6rem;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: #6b8592;
}

/* ---- Body teaser: clamp to a few lines ---- */
.view-browse-essays.view-display-id-page_thematic .views-field-body {
  font-size: 0.9rem;
  line-height: 1.55;
  color: #4a6270;
}

.view-browse-essays.view-display-id-page_thematic .views-field-body .field-content {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.view-browse-essays.view-display-id-page_thematic .views-field-body p {
  margin: 0;
}

/* ---- Pager ---- */
.view-browse-essays.view-display-id-page_thematic .pager {
  margin-top: 2rem;
}

@media (max-width: 480px) {
  .view-browse-essays.view-display-id-page_thematic .views-view-responsive-grid {
    grid-template-columns: 1fr !important;
  }
}