/* Custom overrides - no modificar template.css */

/* Fix 2026-05-18: en mòbil (vertical) el body es podia arrossegar
   horitzontalment i es veia el fons blanc (overflow lateral d'algun
   element full-bleed tipus .row-full amb 100vw). El tema NO usa
   position:sticky enlloc, així que clipar l'overflow-x a l'arrel és
   segur i no trenca el navbar-fixed-top. Reversible: backup a
   ~/backups/caminsdevent2_custom_2026-05-18_before-overflowfix.css */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Botó "Llegeix més" del blog: més visible però discret */
.blog .item .contingut .readmore .btn,
.blog_home .item .informacio .readmore .btn {
    font-size: 0.82rem;
    font-weight: 500;
    padding: 7px 18px;
    border: 1.5px solid #a08940;
    border-radius: 3px;
    color: #7a6530;
    background-color: transparent;
    letter-spacing: 0.02em;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.blog .item .contingut .readmore .btn:hover,
.blog .item .contingut .readmore .btn:focus,
.blog_home .item .informacio .readmore .btn:hover,
.blog_home .item .informacio .readmore .btn:focus {
    background-color: #a08940;
    border-color: #a08940;
    color: #fff;
    text-decoration: none;
}

/* Fix 2026-05-25: iPad Safari + Bootstrap 3 dropdowns. Els <span data-toggle="dropdown">
   del navbar (FAQ, idiomes, etc.) no es comporten com a tappables al primer toc perquè
   iOS només dispara el primer click event si l'element té cursor:pointer. Amb aquesta
   regla, un sol toc obre el dropdown. NO afecta selects natius (PILOT/GLOBUS) — això
   és comportament del picker d'iOS i no es pot evitar sense reemplaçar els <select>. */
.dropdown-toggle,
[data-toggle="dropdown"],
.dropdown > a,
.dropdown > span {
    cursor: pointer;
}

/* Fix 2026-05-25: RSForm checkboxGroup (ENVOLTURA, QUEMADOR, etc. del checklist
   de form 3) — tap target petit al tablet, el pilot havia de tocar la caixeta
   3×3px. Ampliem la zona tappable de les etiquetes al voltant del checkbox. */
.rsform-block input[type="checkbox"] + label,
.rsform-block .formCheckbox label,
.formCheckbox label {
    cursor: pointer;
    padding: 4px 4px 4px 2px;
    display: inline-block;
    min-height: 28px;
    line-height: 1.4;
}

/* Fix marge superior del banner al MÒBIL (SPPB tenia valors invàlids:
   padding-top:-80px, margin-top:-40 sense unitat, addon margin 4px). 2026-07 */
@media (max-width:767px){
    .sp-page-builder .page-content #section-id-1761637089335{
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    #column-id-1761637089336{ padding-top: 0 !important; }
    #sppb-addon-wrapper-1761637089337{ margin-top: 0 !important; }
}

/* ================================================================
   PREU D'OFERTA (2026-07-13): original tatxat + preu d'oferta destacat.
   El tatxat només apareix en productes amb oferta real; el vermell
   s'aplica NOMÉS al preu que va després d'un tatxat (adjacent sibling),
   així els productes normals no canvien de color.
   ================================================================ */
.product-price .price-crossed{
    text-decoration: line-through;
    color: #d0021b;
    font-weight: 700;
    font-size: .62em;
    margin-right: 9px;
    vertical-align: 2px;
    white-space: nowrap;
}
.product-price .price-crossed + .PricesalesPrice{
    color: #1d1d1d;
    font-weight: 800;
}

/* ================================================================
   LLISTAT DE PRODUCTES: alinear el preu entre tiles (2026-07-13).
   Al tile l'ordre és nom→preu→imatge; l'oferta d'estiu té el nom
   molt més llarg (51 car. vs 11-30) i empenyia el preu avall. Donem
   alçada mínima al bloc nom+desc perque tots els preus quedin a la
   mateixa alçada. Nomes a graella (>=768px, .vm-col = tile de llistat).
   ================================================================ */
@media (min-width:768px){
    /* Nom del producte: sempre 2 línies (independent de la mida de lletra) → tots els
       tiles tenen el bloc nom a la mateixa alçada → el preu i la IMATGE de sota queden
       alineats amb els altres productes. El nom sencer es manté a la fitxa i al title. */
    .product.vm-col .vm-product-descr-container-1{
        min-height: 0;
    }
    .product.vm-col .vm-product-descr-container-1 h2{
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 2.6em;   /* reserva 2 línies */
        margin-bottom: 4px;
    }
    .product.vm-col .vm-product-descr-container-1 p.product_s_desc{
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    /* Preu sempre en 1 línia perque no afegeixi variacio d'alçada */
    .product.vm-col .product-price{ white-space: nowrap; }
}

/* [J5] Joomla 5 usa la classe .visually-hidden (Bootstrap 5) alla on J3 usava
   .sr-only. El template.css antic nomes defineix .sr-only, aixi que el text
   "Seleccioni el seu idioma" del mod_languages sortia visible. El tornem a amagar. */
/* [J5] Imatges de producte a la botiga (Info i Reserva): a J3 VM servia miniatures
   400x300 uniformes; a J5 no les redimensiona i .image_responsive no te CSS, aixi que
   les fotos verticals sortien gegants i trencaven la graella. Les uniformem a 4:3. */
.browse-view .image_responsive,
.llista_productes .image_responsive,
.productdetails .image_responsive{
	width:100% !important;
	max-width:400px;
	aspect-ratio:4 / 3;
	height:auto !important;
	object-fit:cover;
	display:block;
	margin:0 auto;
}

.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Idioma actiu: sense requadre gris/blanc (semblava un hover encallat sobre el groc) */
.mod-languages .lang-active,
#idiomes .lang-active,
.lang-inline .lang-active{ background:transparent !important; background-color:transparent !important; }

/* Idiomes: menys espai entre els idiomes al header */
.lang-inline{ display:inline-flex; gap:3px; align-items:center; }
.lang-inline li{ margin:0 !important; padding:0 4px !important; }
.mod-languages__list.lang-inline li a{ padding:0 3px; }


/* ─── Home "El nostre Blog": 3 targetes petites amb fons groc de marca ───
   [2026-08-17] Substitueix mod_minitekwall (no va a J5). El mòdul (210-213) ha de
   tenir item_title=1 + link_titles=1 + show_introtext=0 + img_intro_full=intro:
   els noms de paràmetre de J3 (show_intro/image_settings) el tmpl de J5 NO els llegeix. */
.mod-articlesnews.newsflash{
  display:flex; flex-wrap:wrap; gap:20px; justify-content:center; align-items:stretch;
}
.mod-articlesnews.newsflash .mod-articlesnews__item{
  flex:0 1 300px; max-width:300px; margin:0; padding:0; text-align:left;
  background:#e6a800; border-radius:8px; overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.10);
  transition:box-shadow .2s ease, transform .2s ease;
  display:flex; flex-direction:column;
}
.mod-articlesnews.newsflash .mod-articlesnews__item:hover{
  box-shadow:0 8px 20px rgba(0,0,0,.18); transform:translateY(-3px);
}
/* portada */
.mod-articlesnews.newsflash .mod-articlesnews__item .newsflash-image{ margin:0; }
.mod-articlesnews.newsflash .mod-articlesnews__item img{
  width:100%!important; max-width:none!important; height:150px!important;
  object-fit:cover; display:block; margin:0!important; padding:0; border-radius:0; float:none!important;
}
/* títol: l'únic text de la targeta */
.mod-articlesnews.newsflash .mod-articlesnews__item .newsflash-title{
  font-size:15px; line-height:1.35; font-weight:600;
  margin:0; padding:12px 14px 14px;
}
.mod-articlesnews.newsflash .mod-articlesnews__item .newsflash-title a{
  color:#2f2a1c; text-decoration:none;
}
.mod-articlesnews.newsflash .mod-articlesnews__item:hover .newsflash-title a{ color:#000; }
@media (max-width:767px){
  .mod-articlesnews.newsflash .mod-articlesnews__item{ flex:1 1 100%; max-width:340px; }
}