/* ========================================================= */
/* 📱 RESPONSIVE COMPLET PER MÒBIL I TAULETES (responsive.css) */
/* ========================================================= */

/* ========================================================= */
/* 1️⃣ Tauletes grans / pantalles mitjanes (≤860px) */
/* ========================================================= */
@media (max-width: 860px) {
  /* Secció recursos / opinions */
  .rc-container { 
    grid-template-columns: 1fr; 
  }
}


/* ========================================================= */
/* 2️⃣ Mòbil i tauletes petites (≤768px) */
/* ========================================================= */
@media (max-width: 768px) {

  /* ===================== */
  /* Capçalera i textos */
  /* ===================== */
  .titol-principal {
    font-size: 1.6rem;       /* lleugerament més suau per a mòbils petits */
    margin: 1.2rem 0 0.8rem; /* ajust fi de l'espaiat */
    line-height: 1.25;       /* millora la llegibilitat */
  }

  .site-header p {
    font-size: 1rem;
    padding: 0 12px;
    line-height: 1.4;
    color: #444;             /* reforça contrast per pantalles amb menys nitidesa */
  }

  .site-header .form-title {
    font-size: 1.6em;        /* lleugerament reduït per evitar que desquadri */
    margin-bottom: 0.8rem;
  }

  .site-header .form-underline {
    width: 50px;
    height: 2.5px;
  }

  /* ===================== */
  /* Layout d'ofertes */
  /* ===================== */
  .ofertes-layout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0 10px;
  }

  .ofertes-layout .filters {
    width: 100%;
    flex: unset;
    padding: 1rem;
  }

  .custom-select,
  .filters input[type="text"],
  .filters select {
    width: 100%;
  }

  .btn--filter {
    width: 100%;
  }

  /* ===================== */
  /* Llistat d’ofertes */
  /* ===================== */
  .ofertes-layout .job-listings {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .job-listings {
    grid-template-columns: 1fr;
    padding: 0 10px;
  }

  .job-item {
    padding: 1rem;
    font-size: 0.95rem;
  }

  .titol-oferta {
    font-size: 1rem;
  }
} /* 👈 clau final del bloc de 768px */


/* ========================================================= */
/* Toast (ajust general) */
/* ========================================================= */
#toast-container {
  top: 0.5rem;
  right: 0.5rem;
  left: 0.5rem;
  width: auto;
}


/* ========================================================= */
/* 3️⃣ Mòbil petit (≤480px) */
/* ========================================================= */
@media (max-width: 480px) {

  /* --- BASE TIPOGRAFIA (per a tots) --- */
  html { font-size: clamp(17px, 4.5vw, 18.5px); }

  /* --- CAPÇALERA --- */
  .titol-principal {
    font-size: clamp(1.4rem, 6vw + 0.5rem, 1.9rem);
    margin: 1rem 0 0.6rem;
    line-height: 1.25;
  }

  .site-header p {
    font-size: clamp(0.95rem, 3.8vw, 1.05rem);
    padding: 0 10px;
    line-height: 1.4;
  }

  .site-header .form-title {
    font-size: clamp(1.4rem, 5vw + 0.6rem, 2rem);
    margin-bottom: 0.8rem;
  }

  .site-header .form-underline {
    width: 45px;
    height: 2px;
  }

  /* --- TITOLS I BOTONS --- */
  .titol-oferta { 
    font-size: clamp(1.05rem, 3.5vw + 0.6rem, 1.2rem); 
  }

  .btn,
  .btn--primary,
  .btn--soft {
    padding: 9px 10px;
    font-size: clamp(0.9rem, 2.5vw, 1rem);
  }

  /* --- TEXTOS DE TARGETES --- */
  .job-item .meta,
  .job-item .icon-text,
  .job-item .icon-label,
  .job-item .data-limit-info {
    font-size: clamp(1rem, 3.4vw, 1.05rem);
  }

  /* --- ESPAIS GENERALS --- */
  body { padding: 12px; }

  /* --- LOGOS COL·LABORADORS --- */
  #mini-colaboradors .mini-colab__header h2 {
    font-size: 1.45rem;
  }

  #mini-colaboradors .mini-colab__subtitle {
    font-size: 0.9rem;
  }

  #mini-colaboradors .mini-colab__logos {
    padding: 8px;
    gap: 12px;
  }

  #mini-colaboradors .mini-colab__logos img {
    max-width: 100px;
    max-height: 28px;
  }

  #mini-colaboradors .mini-colab__logos a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 26px !important;
  }

  #mini-colaboradors .mini-colab__logos a img {
    height: 100% !important;
    width: auto !important;
    max-height: none !important;
    max-width: unset !important;
  }

  /* --- PATCH EXTRA PER A CHROME/GOOGLE ANDROID --- */
  html.ua-android-chrome {
    font-size: clamp(16px, 4.2vw, 17.5px);
  }

  .ua-android-chrome .site-header .form-title {
    font-size: clamp(1.3rem, 4.2vw + 0.5rem, 1.9rem);
    line-height: 1.25;
  }

  .ua-android-chrome .titol-principal {
    font-size: clamp(1.4rem, 5vw + 0.5rem, 1.85rem);
    line-height: 1.2;
  }

  .ua-android-chrome .titol-oferta {
    font-size: clamp(1rem, 3.2vw + 0.6rem, 1.15rem);
  }
}