/* V41 · Task 16, publication 4: links to «Oficios» from Empleo's offers and the directory's categories. The home's
   block and Empleo's row reuse their own styles (hx-explore, lbe-jobs-occ-links). */
.lbe-job-trade { margin: 10px 0 0; font-size: var(--t-small, .875rem); }
.lbe-job-trade a { color: var(--c-teal-700, #105a63); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.lbe-job-trade a:hover { text-decoration-thickness: 2px; }

.lbe-of-dir { margin: var(--sp-6, 32px) 0 0; padding: clamp(18px, 2.4vw, 24px); border: 1px solid var(--c-line, #dce3e9); border-radius: 18px; background: var(--c-teal-50, #e7f2f3); }
.lbe-of-dir h2 { margin: 0 0 6px; color: var(--c-ink, #14243a); font-size: 1.25rem; line-height: 1.25; }
.lbe-of-dir p { margin: 0 0 14px; color: var(--c-text-2, #44566a); }
.lbe-of-dir ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lbe-of-dir a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--c-line, #dce3e9); border-radius: var(--r-pill, 999px); background: var(--c-white, #fff); color: var(--c-ink, #14243a); font-size: var(--t-small, .875rem); font-weight: 700; text-decoration: none; }
.lbe-of-dir a span { color: var(--c-text-2, #44566a); font-weight: 400; }
.lbe-of-dir a:hover { border-color: var(--c-teal-700, #105a63); }
@media (max-width: 560px) { .lbe-of-dir a { width: 100%; justify-content: space-between; } }

/* Home: «¿Necesita a alguien para su casa?» comes right after «Trabajo en Bélgica» (jobs/visibility.php), on the same
   grey: a white band and, on wide screens, the list before the text, so the two do not read as one long section. */
.lbe-of-home.hx-explore { background: var(--c-white, #fff); border-top: 1px solid var(--c-line, #dce3e9); border-bottom: 1px solid var(--c-line, #dce3e9); }
@media (min-width: 900px) {
  .lbe-of-home .hx-explore-layout { grid-template-columns: minmax(0, 1.5fr) minmax(0, .82fr); }
  .lbe-of-home .hx-explore-intro { order: 2; }
}
@media (min-width: 900px) and (max-width: 1100px) { .lbe-of-home .hx-explore-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }