.homepage-introduction {
  max-width: 980px;
  margin: 0 auto 3rem;
  font-size: 1.15rem;
  line-height: 1.7;
}

.homepage-introduction p {
  max-width: 850px;
}

/* Complete content-exploration area */
.homepage-taxonomy {
  margin: 1rem 0 3rem;
}

/*
Desktop matrix:

| By editorial form | By format | 🇬🇧 | 🇮🇹 |
| editorial forms   | Longforms | Longforms | Longforms |
| Posts             | Posts     | Posts     | Posts     |
*/
.homepage-explore-grid {
  display: grid;
  grid-template-columns:
    minmax(360px, 2fr)
    repeat(3, minmax(145px, 1fr));

  grid-template-areas:
    "editorial-header     format-header     english-header     italian-header"
    "editorial-longforms  format-longforms  english-longforms  italian-longforms"
    "editorial-posts      format-posts      english-posts      italian-posts";

  gap: 1px;
  overflow: hidden;
  margin-bottom: 2rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.75rem;
  background: rgba(0, 0, 0, 0.1);
}

/* Explicit grid positions */
.editorial-header {
  grid-area: editorial-header;
}

.format-header {
  grid-area: format-header;
}

.english-header {
  grid-area: english-header;
}

.italian-header {
  grid-area: italian-header;
}

.editorial-longforms {
  grid-area: editorial-longforms;
}

.format-longforms {
  grid-area: format-longforms;
}

.english-longforms {
  grid-area: english-longforms;
}

.italian-longforms {
  grid-area: italian-longforms;
}

.editorial-posts {
  grid-area: editorial-posts;
}

.format-posts {
  grid-area: format-posts;
}

.english-posts {
  grid-area: english-posts;
}

.italian-posts {
  grid-area: italian-posts;
}

/* Individual matrix cells */
.homepage-explore-cell {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 74px;
  padding: 1rem 1.1rem;
  background: var(--bs-body-bg);
}

/* Header row */
.homepage-explore-header {
  min-height: 66px;
  background: rgba(var(--bs-secondary-rgb), 0.06);
}

.homepage-explore-header h3 {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.2;
}

.homepage-language-heading {
  font-size: 1.45rem !important;
}

/* Centre the three narrower columns */
.format-header,
.english-header,
.italian-header,
.format-longforms,
.english-longforms,
.italian-longforms,
.format-posts,
.english-posts,
.italian-posts {
  justify-content: center;
  text-align: center;
}

/* Shared button container */
.homepage-topic-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 0;
}

/* Pill-shaped buttons */
.homepage-topic-links .btn,
.homepage-explore-cell > .btn {
  border-radius: 999px;
  padding-left: 1rem;
  padding-right: 1rem;
  white-space: nowrap;
}

/* Full-width topic row below the matrix */
.homepage-filter-group {
  margin-bottom: 2rem;
}

.homepage-filter-group:last-child {
  margin-bottom: 0;
}

.homepage-filter-group > h3 {
  margin-top: 0;
  margin-bottom: 0.85rem;
  font-size: 1.15rem;
}

.homepage-topic-group {
  width: 100%;
  margin-bottom: 0;
}

/* Twemoji flags and other converted emoji */
img.emoji {
  width: 1em;
  height: 1em;
  margin: 0 0.08em;
  vertical-align: -0.12em;
}

/*
Medium screens:

| By editorial form | By format |
| forms              | Longforms |
| Posts              | Posts     |

| 🇬🇧                | 🇮🇹       |
| Longforms          | Longforms |
| Posts              | Posts     |
*/
@media (max-width: 950px) {
  .homepage-explore-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    grid-template-areas:
      "editorial-header     format-header"
      "editorial-longforms  format-longforms"
      "editorial-posts      format-posts"
      "english-header       italian-header"
      "english-longforms    italian-longforms"
      "english-posts        italian-posts";
  }
}

/*
Mobile: each classification becomes one vertical group.
*/
@media (max-width: 575px) {
  .homepage-introduction {
    margin-bottom: 2rem;
    font-size: 1.05rem;
  }

  .homepage-explore-grid {
    grid-template-columns: 1fr;

    grid-template-areas:
      "editorial-header"
      "editorial-longforms"
      "editorial-posts"
      "format-header"
      "format-longforms"
      "format-posts"
      "english-header"
      "english-longforms"
      "english-posts"
      "italian-header"
      "italian-longforms"
      "italian-posts";
  }

  .homepage-explore-cell {
    min-height: 64px;
    padding: 0.9rem 1rem;
  }

  .format-header,
  .english-header,
  .italian-header,
  .format-longforms,
  .english-longforms,
  .italian-longforms,
  .format-posts,
  .english-posts,
  .italian-posts {
    justify-content: flex-start;
    text-align: left;
  }

  .homepage-topic-links {
    gap: 0.5rem;
  }

  .homepage-topic-links .btn,
  .homepage-explore-cell > .btn {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }
}