:root{ --gap:1rem; --max:1200px; --bgd: rgba(0,0,0,.5); --surface:#fff; --text:#111; --muted:#6b7280; --brand:#111; --ok:#10b981; --err:#ef4444; }
html,body{ height:100%; margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif; color:var(--text); }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 1rem; }

/* Topbar / Admin */
.topbar{ background:#f8fafc; border-bottom:1px solid #e5e7eb; }
.topbar .brand{ font-weight:700; text-decoration:none; color:var(--brand); margin-right:1rem; }
.topbar .nav a{ color:var(--text); text-decoration:none; margin-right:.8rem; }
.topbar .nav a.active{ font-weight:700; }
.footer{ border-top:1px solid #e5e7eb; color:var(--muted); padding:1rem 0; margin-top:2rem; }

/* Landing */
.background-image{ background-size:cover; background-position:center; min-height:100vh; position:relative; }
/* overlay: ocupa tot, fosc, i centra contingut verticalment */
.overlay{
  position:absolute; inset:0;
  background:var(--bgd);
  display:flex; flex-direction:column; /* ← apila verticalment */
  align-items:center; justify-content:center;
  text-align:center; padding:2.5rem 1rem;
  gap:.75rem; /* aire entre logo i cercador */
}
/* Text informatiu sota el cercador (sobre overlay fosc) */
.overlay .muted { color: rgba(255,255,255,.88); }
.logo img{ max-width:450px; height:auto; margin-bottom:1rem; }
.search-box{
  display:flex; flex-direction:column; align-items:center; gap:.75rem; width:100%;
}
.search-box h1{ color:#fff; font-weight:600; margin:0 0 .5rem; }
.search-box input{
  width:min(900px, 96%);
  padding:1rem 1.2rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.8);
  background:rgba(255,255,255,.95);
  font-size:1.05rem;
  box-shadow:0 12px 30px rgba(0,0,0,.15);
}

.search-group{ position:relative; width:min(900px,96%); margin:0 auto; overflow: visible;}
.search-group input{ width:100%; }

/* Llista d’autocomplete enganxada sota el camp */
.autocomplete {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background:#fff;
  border:1px solid #ddd;
  border-radius:8px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  list-style:none;
  margin:0;
  padding:6px 0;
  max-height:320px;
  overflow:auto;
  z-index: 20000;
  display: none; /* estat per defecte */
}
.autocomplete.open { display: block !important; } /* forcem aparèixer */

.autocomplete .ac-title {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #e6e6e6;       /* fons més fosc però llegible */
  color: #111;               /* negre quasi pur */
  font-size: .65em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 5px 7px;
  border-top: 1px solid #d0d0d0;
  border-bottom: 1px solid #c8c8c8;
}
.autocomplete .ac-title:first-child { border-top:none; }

.autocomplete .ac-item { padding:10px 12px; cursor:pointer; font-weight: 500; }
.autocomplete .ac-item:hover, .autocomplete .ac-item.is-active { background:#f5f5f5; }

/* Mòbil: augmenta contrast i espaiat */
@media (max-width: 576px) {
  .autocomplete .ac-title { 
    padding: 12px 14px; 
    letter-spacing: .04em;
  }
  .autocomplete .ac-item { 
    padding: 12px 14px; 
  }
}

/* RESULTATS (no sobrescriu Bootstrap .container) */
#results .container{ margin-top: 1rem; }

/* Grid “legacy” per si el necessites en altres pàgines */
.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:var(--gap); }
.container .grid{ display: contents; }

/* Targetes bàsiques (compatibles amb Bootstrap .card) */
.card{ background:var(--surface); border-radius:1rem; overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,.08); display:flex; flex-direction:column; }
.card img{ width:100%; height:180px; object-fit:cover; display:block; }
.card-body{ padding:1rem; }
.card h2{ margin:.2rem 0 .4rem; font-size:1.1rem; }
.card .links a{ display:inline-block; margin-right:.5rem; font-weight:600; text-decoration:none; }

.pager{ display:flex; gap:.5rem; justify-content:center; margin:1.5rem 0; }
.pager .btn.active, .pager button[aria-current]{ background:#111; color:#fff; }

/* Admin UI helpers */
.btn{ display:inline-block; border:1px solid #e5e7eb; background:#fff; padding:.5rem .8rem; border-radius:.5rem; cursor:pointer; text-decoration:none; color:inherit; }
.btn.primary{ background:#111; color:#fff; border-color:#111; }
.btn.small{ padding:.3rem .55rem; font-size:.9rem; }
.btn.danger{ border-color:var(--err); color:var(--err); }
.table{ width:100%; border-collapse:collapse; margin:1rem 0; }
.table th,.table td{ padding:.6rem .5rem; border-bottom:1px solid #e5e7eb; vertical-align:top; }
.table th{ text-align:left; font-weight:600; }
.right{ text-align:right; }
.inline{ display:inline-block; }
.flex-row{ display:flex; }
.between{ justify-content:space-between; }
.gap{ gap:1rem; }
.muted{ color:var(--muted); }
.alert{ padding:.7rem 1rem; border-radius:.5rem; margin:1rem 0; }
.alert.ok{ background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0; }
.alert.error{ background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }
.form.card{ padding:1rem; }
.grid2{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
label{ display:block; font-weight:600; margin:.5rem 0 .3rem; }
input, textarea{ width:100%; box-sizing:border-box; padding:.55rem .6rem; border:1px solid #e5e7eb; border-radius:.5rem; font:inherit; }

/* Targeta: adreça + accions */
.card .meta.addr{ margin:.4rem 0; color:var(--muted); }
.card .actions a{ display:inline-block; margin-right:.75rem; font-weight:600; text-decoration:none; }

/* Imatge preview admin */
.preview img{ display:block; max-height:180px; object-fit:cover; }

/* badge de temps (ETA) */
.card .eta{
  margin:.4rem 0 0;
  font-weight:600;
  font-size:.95rem;
  color:#111;
  background:#eef2ff;
  display:inline-block;
  padding:.25rem .5rem;
  border-radius:.4rem;
}

/* Categoria (públic) */
.badge.cat{
  display:inline-block; vertical-align:middle; margin-left:.4rem;
  font-size:.8rem; font-weight:600; line-height:1; padding:.28rem .5rem;
  background:#f1f5f9; border:1px solid #e5e7eb; border-radius:.5rem; color:#111;
}

/* Títol de resultats: “sticky” mentre fas scroll */
.results-heading{
  position: sticky;
  top: 0;                 /* queda enganxat a la part superior */
  z-index: 20;            /* per sobre de les targetes */
  background: rgba(255,255,255,.95);
  backdrop-filter: saturate(160%) blur(4px);
  padding: .6rem 0;
  margin: 0 0 1rem;       /* IMPORTANT: cap marge a dalt si és sticky */
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #6b7280;
  font-weight: 700;
  font-size: .95rem;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  scroll-margin-top: 10px; /* millora el punt on aterra scrollIntoView */
}

.results-heading .badge{
  font-weight:600; letter-spacing:.02em;
}

/* Ajust per a pantalles amb notch (iOS) */
@supports (top: env(safe-area-inset-top)){
  .results-heading{ top: calc(env(safe-area-inset-top) + 0px); }
}


/* Responsiu */
@media (max-width:720px){
  .grid2, .grid3{ grid-template-columns:1fr; }
  .card img{ height:140px; }
}
@media (max-width:480px){
  .logo img{ max-width:300px; }
  .search-box input{ font-size:1rem; }
}

/* Footer global */
.site-footer{
  border-top:1px solid #e5e7eb;
  background:#f8fafc;
  color:#6b7280;
  padding:1rem 0;
  margin-top:2rem;
}
.site-footer a{ color:inherit; text-decoration:underline; }
.site-footer .badge.beta{
  display:inline-block;
  background:#fff7ed;
  color:#9a3412;
  border:1px solid #fed7aa;
  padding:.25rem .5rem;
  border-radius:.5rem;
  font-weight:600;
  font-size:.8rem;
}

.table img.thumb{
  width:56px; height:42px; object-fit:cover; border-radius:.375rem;
  background:#f1f5f9; display:block;
}

/* Admin: separació de títols i taules */
h1 { margin-bottom: 1rem; }
.table img.thumb { width:56px; height:42px; object-fit:cover; border-radius:.375rem; background:#f1f5f9; }

/* "Llegir més / menys" — petit i en negreta */
.readmore {
  font-weight: 700;           /* negreta */
  font-size: .85em;           /* una mica més petit que el text de la descripció */
  line-height: 1;             /* compacte */
  padding: 0;                 /* sense farcit extra */
}

.card .border-top { border-color: rgba(0,0,0,.06) !important; }
.card .readmore { font-weight: 700; font-size: .875rem; }

/* Botonets d’icona per compartir */
.share-actions .btn-icon{
  --bs-btn-padding-y: .25rem;
  --bs-btn-padding-x: .25rem;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}
.share-actions .btn-wa { background:#25D366; border-color:#25D366; }
.share-actions .btn-tg { background:#2AABEE; border-color:#2AABEE; }
.share-actions .btn-mail { background:#fff; }
.share-actions .btn-icon i { font-size:1.05rem; line-height:1; }
.share-actions .section-label{ font-size:.8rem; font-weight:700; color:#6b7280; }

/* Quick chips */
.btn-chip{
  --tw: rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.25);
  color:#fff;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.10));
  padding:.45rem .9rem;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  transition: transform .06s ease, box-shadow .2s ease;
  text-decoration:none;
}
.btn-chip:hover{ transform: translateY(-1px); box-shadow:0 6px 20px rgba(0,0,0,.2); color:#fff; }
.quick-links .badge{ font-weight:600; }

/* --- Funders strip (logos) --- */
.funders-wrap { background:#fff; }

.funders-strip {
  display: flex;
  flex-wrap: wrap;         /* Permet saltar de línia en pantalles petites */
  align-items: center;
  justify-content: center; /* Centrat horitzontal */
  gap: 0;                  /* Sense espais entre logos */
}

.funders-item {
  line-height: 0;          /* Elimina espai blanc vertical al voltant d'img */
}

.funders-item img {
  display: block;          /* Elimina espai per “baseline” */
  height: 44px;            /* Alçada homogènia (ajusta si cal) */
  width: auto;             /* Manté proporcions */
}

/* En pantalles grans podem donar una mica d'espai lateral */
@media (min-width: 992px) {
  .funders-item img { margin: 0 .25rem; }
}

/* Opcional: fons lleu de separació visual respecte la resta del footer */
.site-footer { background:#fafafa; }

/* Botons de contacte: base coherent amb la resta i color només en hover/focus */
.btn-contact{
  background:#fff !important;
  border-color:#212529 !important;
  color:#212529 !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.btn-contact:hover,
.btn-contact:focus{
  color:#fff !important;
  transform: translateY(-1px);
  box-shadow:0 4px 12px rgba(0,0,0,.12);
}
.btn-contact-tel:hover,
.btn-contact-tel:focus{
  background:#198754 !important;
  border-color:#198754 !important;
}
.btn-contact-instagram:hover,
.btn-contact-instagram:focus{
  background:#E4405F !important;
  border-color:#E4405F !important;
}
.btn-contact-whatsapp:hover,
.btn-contact-whatsapp:focus{
  background:#25D366 !important;
  border-color:#25D366 !important;
}

/* Blog / guia de comerç local */
.home-blog-section{ border-top:1px solid #eef2f7; border-bottom:1px solid #eef2f7; }
.blog-card{ border:0; transition: transform .15s ease, box-shadow .15s ease; }
.blog-card:hover{ transform: translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.12) !important; }
.blog-card .card-img-top{ height:190px; object-fit:cover; }
.blog-card .card-title{ line-height:1.25; }
.blog-page .blog-card .card-img-top{ height:210px; }
.blog-article{ max-width: 920px; }
.blog-article-header{ max-width: 820px; }
.blog-article-hero img{ width:100%; max-height:520px; object-fit:cover; }
.blog-article-body{ line-height:1.75; }
.blog-article-body p{ margin-bottom:1.25rem; }
@media (max-width: 576px){
  .home-blog-section{ padding-top:2rem !important; padding-bottom:2rem !important; }
  .blog-card .card-img-top{ height:165px; }
  .blog-article-body{ font-size:1rem !important; }
}