/*
  explore.css
  A row of links to the main sections (Jobs, Property, Courses...), under a
  heavy rule. Plain text on purpose, no boxes.
  Needs css/base.css.
*/

.fm-explore { padding-bottom: var(--fm-section); }

/* Phones: two across. Tablet and up: all five in one row (see bottom). */
.fm-explore ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--fm-gap); border-top: 2px solid var(--fm-ink); }
.fm-explore li { position: relative; padding-block: 1.25rem 1.5rem; border-bottom: 1px solid var(--fm-rule); }
.fm-explore h2 { font-size: var(--fm-t-lg); letter-spacing: -0.01em; }
.fm-explore h2 a::after { content: " \2192"; color: var(--fm-blue); }    /* the → arrow, added here so editors don't have to type it */
.fm-explore p { margin-top: 0.15rem; font-size: var(--fm-t-sm); color: var(--fm-muted); }

/* Makes the whole item clickable, same trick as the story cards in base.css */
.fm-explore li a::before { content: ""; position: absolute; inset: 0; }
.fm-explore li:hover h2 a { color: var(--fm-blue); }

@media (min-width: 48rem) {
  .fm-explore ul { grid-template-columns: repeat(5, 1fr); }
  .fm-explore li { border-bottom: 0; }
}