/* ============================================================================
   Cercador de la formació del professorat. Tot penja de .fc, perquè el mateix
   full serveix a la pàgina pública i a la vista prèvia de l'editor sense
   trepitjar res. Els colors que es poden canviar a l'«Edició avançada» arriben
   com a variables (--fc-principal…), posades per formacions.js.

   Mida: amb container queries (no media queries), perquè la vista prèvia de
   «mòbil» de l'editor és una caixa estreta dins d'una pantalla ampla.
   ============================================================================ */

.fc {
  --fc-principal: #007bc0;
  --fc-sobre-principal: #fff;
  --fc-capcalera: #eef2f6;
  --fc-sobre-capcalera: #1b1f23;
  --fc-columnes: 3;
  --fc-text: #1b1f23;
  --fc-suau: #56606b;
  --fc-vora: #dde2e7;
  --fc-fons: #ffffff;
  --fc-fons-2: #f5f7f9;

  container-type: inline-size;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--fc-text);
  -webkit-font-smoothing: antialiased;
}
.fc *, .fc *::before, .fc *::after { box-sizing: border-box; }

/* La pàgina pública: sense cabecera dins de l'iframe (ver comun/iframe.js) */
body:has(> .fc) { margin: 0; background: #fff; }
.en-iframe .ice-cab { display: none !important; }
.fc-pagina { padding: 2rem clamp(16px, 3vw, 48px) 3.5rem; max-width: 1400px; margin: 0 auto; }
.en-iframe .fc-pagina { padding: 0; }

.fc-titol {
  margin: 0 0 1rem;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ─── Pestanyes ─────────────────────────────────────────────────────────── */

.fc-pestanyes {
  display: flex;
  box-shadow: inset 0 -1px var(--fc-vora);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.fc-pestanya {
  flex: 1 1 0;
  min-width: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.85rem 0.75rem 0.75rem;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fc-suau);
  cursor: pointer;
}
.fc-pestanya:hover { color: var(--fc-text); background: var(--fc-fons-2); }
.fc-pestanya[aria-selected="true"] { color: var(--fc-text); border-bottom-color: var(--fc-principal); font-weight: 600; }
.fc-pestanya:focus-visible { outline: 2px solid var(--fc-principal); outline-offset: -2px; }
.fc-pestanya-icona {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--fc-fons-2);
  color: var(--fc-text);
}
.fc-pestanya[aria-selected="true"] .fc-pestanya-icona { background: var(--fc-principal); color: var(--fc-sobre-principal); }
.fc-icona {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fc-pestanya-nom { text-align: center; line-height: 1.25; }
.fc-pestanya-n {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--fc-suau);
  font-variant-numeric: tabular-nums;
}

.fc-panell { padding-top: 1.25rem; }

/* ─── Filtres ───────────────────────────────────────────────────────────── */

.fc-filtres {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding: 0.9rem 1rem;
  background: var(--fc-fons-2);
  border: 1px solid var(--fc-vora);
  border-radius: 6px;
}
.fc-cerca {
  flex: 1 1 240px;
  min-width: 0;
  max-width: 360px;
  height: 36px;
  padding: 0 0.75rem;
  border: 1px solid #c9d1d9;
  border-radius: 4px;
  background: #fff;
  font: inherit;
  font-size: 0.875rem;
  color: var(--fc-text);
}
.fc-cerca:focus { outline: 2px solid var(--fc-principal); outline-offset: -1px; border-color: transparent; }
.fc-grup { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.fc-grup-nom {
  margin-right: 0.2rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fc-suau);
}
.fc-opcio {
  height: 30px;
  padding: 0 0.65rem;
  border: 1px solid #c9d1d9;
  border-radius: 4px;
  background: #fff;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--fc-text);
  cursor: pointer;
}
.fc-opcio:hover { border-color: var(--fc-principal); }
.fc-opcio[aria-pressed="true"] { background: var(--fc-principal); border-color: var(--fc-principal); color: var(--fc-sobre-principal); }
.fc-opcio:focus-visible, .fc-esborrar:focus-visible { outline: 2px solid var(--fc-principal); outline-offset: 2px; }
.fc-places { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; cursor: pointer; }
.fc-places input { width: 16px; height: 16px; margin: 0; accent-color: var(--fc-principal); }

.fc-resum {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin: 1rem 0 0.9rem;
  font-size: 0.8125rem;
  color: var(--fc-suau);
}
.fc-esborrar {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--fc-principal);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.fc-buit { margin: 1.5rem 0 2rem; color: var(--fc-suau); }

/* ─── Targetes ──────────────────────────────────────────────────────────── */

.fc-graella {
  display: grid;
  grid-template-columns: repeat(var(--fc-columnes), minmax(0, 1fr));
  gap: 1.25rem;
}
@container (max-width: 1100px) { .fc-graella { grid-template-columns: repeat(min(var(--fc-columnes), 3), minmax(0, 1fr)); } }
@container (max-width: 900px) { .fc-graella { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 580px) {
  .fc-graella { grid-template-columns: minmax(0, 1fr); }
  .fc-pestanyes { gap: 0.4rem; }
  .fc-pestanya { min-width: 76px; padding: 0.7rem 0.35rem 0.6rem; font-size: 0.75rem; }
  .fc-pestanya-icona { width: 36px; height: 36px; }
  .fc-filtres { padding: 0.75rem; gap: 0.6rem; }
  .fc-cerca { max-width: none; flex-basis: 100%; }
}

.fc-targeta {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--fc-fons);
  border: 1px solid var(--fc-vora);
  border-top: 3px solid var(--fc-principal);
  border-radius: 6px;
  overflow: hidden;
  transition: box-shadow 0.15s, transform 0.15s;
}
.fc-targeta:hover { box-shadow: 0 10px 28px -16px rgba(20, 30, 40, 0.45); transform: translateY(-1px); }
.fc-targeta:focus-within { box-shadow: 0 0 0 2px var(--fc-principal); }

.fc-targeta-cap {
  padding: 0.6rem 1rem;
  background: var(--fc-capcalera);
  color: var(--fc-sobre-capcalera);
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
}
.fc-targeta-estat {
  padding: 0.4rem 1rem;
  background: var(--fc-estat-fons);
  color: var(--fc-estat-text);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
}
.fc-targeta-cos { flex: 1; padding: 1rem 1rem 0.5rem; }

.fc-etiquetes { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.7rem; }
.fc-etiqueta {
  position: relative;
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: 3px;
  background: var(--fc-et-fons);
  color: var(--fc-et-text);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.45;
}
.fc-etiqueta--ajuda { z-index: 2; text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; }
.fc-ajuda {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  width: max-content;
  max-width: 240px;
  padding: 0.45rem 0.6rem;
  border-radius: 4px;
  background: #1b1f23;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s;
  pointer-events: none;
}
.fc-etiqueta--ajuda:hover .fc-ajuda, .fc-etiqueta--ajuda:focus .fc-ajuda { opacity: 1; visibility: visible; }

.fc-targeta-titol { margin: 0 0 0.8rem; font-size: 1.05rem; font-weight: 600; line-height: 1.35; color: var(--fc-principal); }
.fc-targeta-enllac { color: inherit; text-decoration: none; }
.fc-targeta-enllac::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* tota la targeta és l'enllaç */
.fc-targeta-enllac:hover { text-decoration: underline; text-underline-offset: 3px; }
.fc-targeta-enllac:focus-visible { outline: none; }

.fc-dades { margin: 0; font-size: 0.875rem; }
.fc-dada { display: flex; gap: 0.35rem; margin-bottom: 0.3rem; }
.fc-dada dt { flex-shrink: 0; font-weight: 600; }
.fc-dada dt::after { content: ":"; }
.fc-dada dd { margin: 0; color: #2f3740; }

.fc-targeta-peu { padding: 0.75rem 1rem 1rem; }
.fc-boto {
  display: block;
  padding: 0.55rem 1rem;
  border-radius: 4px;
  background: var(--fc-principal);
  color: var(--fc-sobre-principal);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}
.fc-targeta:hover .fc-boto { filter: brightness(0.92); }