.hidden{
	display:none;
}
.padding-tb-0{
	padding-bottom:0px!important;
	padding-top:0px!important;
}
.padding-b-0{
	padding-bottom:0px;
}
.padding-top-0{
	padding-top:0px!important;
}
.padding-top-50{
	padding-top:50px!important;
}
.padding-top-70{
	padding-top:70px!important;
}
.title-align-left .align-title{
	text-align: left;
    margin-left: 0px;
}
.title-align-right .align-title{
	text-align: right;
    margin-right: 0px;
}
/*.header-menu{
	width:100%;
}*/
.margin-top-100{
	margin-top:-100px;
}
.pager__item--next .page-link, .pager__item--last .page-link, .pager__item--previous .page-link, .pager__item--first .page-link{
	padding:0px 8px!important;
}
.sidebar-box .popular-post img{
	margin-top:9px;
}
.pager-text-align-center nav.pager{
	margin:0 auto;
	width:100%;
}
.img-align-center{
	margin:0 auto;
}
.color-white, .color-white *{
	color:#FFF
}
.pager{
	clear:both;
	width:100%;
}
.button.button--primary{
	margin-top:50px;
}
.margin-top--100{
	margin-top:-100px;
}
/* === Header Puput: bloc #block-marcatbllblanca === */
/* Reset comú (esborra vores/fons heretats del wrapper .block). */
.header .header-menu #block-marcatbllblanca {
  border: 0;
  box-shadow: none;
  background: transparent;
  outline: 0;
}
.header .header-menu #block-marcatbllblanca .container,
.header .header-menu #block-marcatbllblanca .row { padding: 0; margin: 0; display: block; }
.header .header-menu #block-marcatbllblanca p { margin: 0; }
.header .header-menu #block-marcatbllblanca a { border: 0; outline: 0; display: inline-block; }
.header .header-menu #block-marcatbllblanca img { height: auto; border: 0; outline: 0; }

/* Desktop (≥992px): menú horitzontal → bloc a la dreta del nav. */
@media (min-width: 992px) {
  .header .header-menu { display: flex; align-items: center; }
  .header .header-menu #block-marcatbllblanca { margin-left: auto; }
  .header .header-menu #block-marcatbllblanca img { width: 80px; display: block; }
}

/* Tablet i mòbil (<992px): menú drawer → bloc al fons, centrat. */
@media (max-width: 991.98px) {
  .header .header-menu #block-marcatbllblanca { margin-top: 1.5rem; text-align: center; }
  .header .header-menu #block-marcatbllblanca img { width: 110px; display: inline-block; }
  /* Header amb alçada reduïda (defecte ~120px → 90px). */
  .header { height: 90px !important; }
}

/* Tablet: header 75px i logo 50px. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .header { height: 75px !important; }
  .header .header-logo img { max-height: 50px !important; }
}

/* Mòbil: header més baix i logo més petit. */
@media (max-width: 767.98px) {
  .header { height: 60px !important; }
  .header .header-logo img { max-height: 40px !important; }
}

/* === Footer Puput === */
/* Fons clar (sobreescrivim la classe .bg-dark del template). */
footer .section-sm.bg-dark { background: #f1f1f1 !important; }
/* Text i links en negre sobre el nou fons clar. */
footer .section-sm.bg-dark,
footer .section-sm.bg-dark p,
footer .section-sm.bg-dark a,
footer .section-sm.bg-dark li,
footer .section-sm.bg-dark .nav-link { color: #000 !important; }
/* Social icons: cercles de 25px amb icona centrada, fons gris fort. */
footer #block-puputxxss .button-circle {
  background: #7C7C7C !important;
  color: #fff !important;
  border-color: #7C7C7C !important;
  width: 25px !important;
  height: 25px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.7rem !important;
  line-height: 1 !important;
}
/* Logo TBLL blanc al bloc principal del footer: 140px d'ample. */
footer #block-puputfooter img { width: 120px; height: auto; border: 0; outline: 0; }
/* Row 1: a tots els breakpoints, les columnes centrals (buides) s'amaguen. */
footer .row.col-spacing-20 > .col-lg-3:nth-child(2),
footer .row.col-spacing-20 > .col-lg-3:nth-child(3) { display: none; }
/* Tablet i desktop (≥768px): puputfooter i puputxxss al 50% cadascuna. */
@media (min-width: 768px) {
  footer .row.col-spacing-20 > .col-lg-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
/* Mòbil (<768px): puputfooter i puputxxss a tota l'amplada (col-12). */
@media (max-width: 767.98px) {
  footer .row.col-spacing-20 > .col-lg-3 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  /* Respir entre puputfooter i puputxxss quan apilen verticalment. */
  footer .row.col-spacing-20 > .col-lg-3:first-child { margin-bottom: 1.5rem !important; }
}
/* Row 2 del footer: una sola columna a tota l'amplada (s'oculta la
   col·lumna buida de la dreta). */
footer .row.col-spacing-10 > .col-md-6:first-child {
  flex: 0 0 100%;
  max-width: 100%;
}
footer .row.col-spacing-10 > .col-md-6:last-child { display: none; }
/* Logos oficials del Row 2: 3 imatges distribuïdes equitativament, max-h 60px. */
footer .official-logos {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
footer .official-logos .logo {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
footer .official-logos .logo img {
  max-height: 60px;
  width: auto;
}
@media (max-width: 767.98px) {
  footer .official-logos .logo img { max-height: 45px; }
}
/* Menú legal: items alineats a l'esquerra, text més petit. */
footer #block-peudepagina3-3 ul.drp_menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 1.5rem;
  padding: 0;
  margin: 0;
  font-size: 0.8rem;
}
footer #block-peudepagina3-3 ul.drp_menu li { list-style: none; }

/* Grids de manualitats (page--node--7930) i jocs (page--node--7092):
   títol H6 dins de la caixeta blanca centrat. */
.manualitat .hoverbox-8 .content,
.joc .hoverbox-8 .content { text-align: center; }

/* En tablet i mòbil, el contenidor del grid (manualitats/jocs) passa
   de 10% a 5% de padding lateral. */
@media (max-width: 991.98px) {
  #block-views-block-photographer-block-photographer2 {
    padding-left: 5% !important;
    padding-right: 5% !important;
  }
}

/* Grid de recomanacions (page--node--7931): equal-height a la caixa
   amb box-shadow. El contingut intern flueix al principi; el botó
   "Saber-ne més" s'ancora al fons amb margin-top: auto. */
.puput-recomanacions-grid > .col-12 { display: flex; }
.puput-recomanacions-grid > .col-12 > div {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.puput-recomanacions-grid > .col-12 > div > div {
  flex: 1;
  display: flex;
  flex-direction: column;
}
/* Botó al fons + 20px mínim de separació amb el text (mitjançant
   padding-bottom al paràgraf anterior; margin-top: auto manté l'ancoratge). */
.puput-recomanacions-grid > .col-12 > div > div p { padding-bottom: 20px; }
.puput-recomanacions-grid > .col-12 > div > div > a { margin-top: auto; }
/* Marge inferior de cada card reduït (de 70px → 30px) i line-height
   de h5 i p ajustats a 1.3. */
.puput-recomanacions-grid > .col-12 > div { margin-bottom: 30px !important; }
.puput-recomanacions-grid h5,
.puput-recomanacions-grid p { line-height: 1.3; }
/* En tablet i mòbil, treiem els 80px de padding lateral del grid
   (inline al template) perquè en aquests viewports queden excessius.
   I el layout de la card passa a horitzontal (imatge a l'esquerra,
   contingut a la dreta). */
@media (max-width: 991.98px) {
  .puput-recomanacions-grid {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  /* Cada card a tota l'amplada (anul·la col-md-4 que aplica a md+). */
  .puput-recomanacions-grid > .col-md-4 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .puput-recomanacions-grid > .col-12 > div {
    flex-direction: row;
    align-items: stretch;
  }
  .puput-recomanacions-grid > .col-12 > div > img {
    flex: 0 0 40%;
    width: 40%;
    height: auto;
    object-fit: cover;
    padding: 0 !important;
  }
  .puput-recomanacions-grid > .col-12 > div > div {
    flex: 1 1 60%;
    padding: 15px !important;
    text-align: left;
  }
  /* Botó no s'estira; queda alineat a l'esquerra amb la seva amplada natural. */
  .puput-recomanacions-grid > .col-12 > div > div > a { align-self: flex-start; }
  /* Reduïm la separació vertical entre cards en aquests viewports. */
  .puput-recomanacions-grid > .col-12 > div { margin-bottom: 15px !important; }
}
/* Només en mòbil: amaguem el body, compactem el botó i reduïm encara
   més la separació entre cards. Cal anul·lar també el margin-bottom
   30px que .row > .col-* hereta de theme.min.css. */
@media (max-width: 767.98px) {
  .puput-recomanacions-grid > .col-12 > div > div > p { display: none; }
  .puput-recomanacions-grid > .col-12 > div > div > a {
    font-size: 0.75em !important;
    padding: 6px 12px !important;
  }
  .puput-recomanacions-grid > .col-12 > div { margin-bottom: 0 !important; }
  .puput-recomanacions-grid > .col-12 { margin-bottom: 15px !important; }
  .puput-recomanacions-grid h5 { line-height: 1.1; }
  /* El row del grid hereta margin-bottom: -30px d'una regla
     .col-spacing-*. L'anul·lem i hi posem 10px. */
  .puput-recomanacions-grid { margin-bottom: 10px !important; }
}

/* Fitxa individual de recomanació (page--node--puput-recomanacions):
   a tablet i mòbil el wrapper amb padding-left/right 10% inline
   passa a 5%. */
@media (max-width: 991.98px) {
  body.node--type-puput-recomanacions div[style*="padding-left:10%"] {
    padding-left: 5% !important;
    padding-right: 5% !important;
  }
}
/* Video del camp field_puput_video_recomanacio: amplada 100% del
   contenidor, mantenint la proporció. El video el renderitza
   drupal_entity dins d'un div .media-<id>. */
body.node--type-puput-recomanacions .col-md-8 video {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}


/* Fitxa de manualitat (puput_manualitats): en tablet i mòbil reduïm
   tipografia de paràgrafs i H3. */
@media (max-width: 991.98px) {
  body.node--type-puput-manualitats p { font-size: 16px; line-height: 1.3; }
  body.node--type-puput-manualitats h3 { font-size: 24px; line-height: 1.3; }
}
/* En mòbil, el wrapper del cos de la manualitat ha de tenir 20px
   de padding lateral (en lloc dels 60px definits inline per a >mobile). */
@media (max-width: 767.98px) {
  .manualitat-body { padding-left: 20px !important; padding-right: 20px !important; }
}

/* === Filtres per dificultat (TOTES/SÚPER FÀCIL/FÀCIL/AVANÇADA) =====
   Comú a /puput-receptes (node 7788), /puput-manualitats (7930) i
   /puput-jocs (7092). En mòbil reduïm tipografia i espai. */
@media (max-width: 767.98px) {
  #a-totes, #a-super-facil, #a-facil, #a-avancat {
    font-size: 0.8em !important;
    padding: 0 5px !important;
  }
}

/* === Fitxa de recepta (page--node--puput-receptes) =====
   A tablet (md only), Ingredients i Preparació van un sota l'altre
   en lloc de compartir l'amplada. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .blanc .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
/* En mòbil: el row exterior va a sang (sense padding-left 10%) i
   és la primera columna (col-md-8) la que rep 10% a esquerra i dreta. */
@media (max-width: 767.98px) {
  .blanc .row { padding-left: 0 !important; }
  .blanc .row > .col-md-8 { padding-left: 5% !important; padding-right: 5% !important; }
  /* Carrusels de receptes i recomanacions destacades: més padding
     horitzontal a cada item perquè quedi un marge entre l'item i
     les fletxes. */
  body.node--type-puput-receptes .owl-carousel .item,
  body.node--type-puput-recomanacions .owl-carousel .item { padding-left: 30px !important; padding-right: 30px !important; }
}
/* Compacta la separació vertical del footer. */
footer .section-sm { padding-top: 2rem !important; padding-bottom: 1.5rem !important; }
footer hr { margin-top: 1.25rem !important; margin-bottom: 1.25rem !important; }
footer #block-puputfooter p { margin-bottom: 0.5rem; font-size: 0.8rem; line-height: 1.3; }
footer #block-puputxxss .margin-top-30 { margin-top: 0 !important; }
/* Anul·la la margin-bottom 20/30px que les classes col-spacing-* posen a
   cada col i la margin-bottom negativa del row. */
footer .col-spacing-20,
footer .col-spacing-10 { margin-bottom: 0 !important; }
footer .col-spacing-20 div[class^="col-"]:not(.row),
footer .col-spacing-10 div[class^="col-"]:not(.row) { margin-bottom: 0 !important; }

/* ---- Commutador de llengua (Puput) --------------------------------------
   Es pinta com un desplegable de Bootstrap amb el codi d'idioma (CA, ES, EN,
   FR). Cal pujar l'especificitat amb l'id del bloc perquè el tema ja porta
   les seves pròpies regles de .dropdown-menu, pensades per a fons clar. */

/* El bloc arrossega la classe .sidebar-box del tema, que li posa
   border:1px solid #e3e6e9, padding:30px i margin-bottom:20px. La vora es
   veia blanca sobre la barra fosca, i el margin-bottom el descentrava
   verticalment, perquè align-items:center centra la caixa amb el marge inclòs. */
#block-commutadordellengua {
  margin: 0;
  padding: 0;
  border: 0;
}
#block-commutadordellengua .container { width: auto; max-width: none; padding: 0; }
#block-commutadordellengua .row { display: block; margin: 0; }

.language-switcher-dropdown { position: relative; display: inline-block; }

/* El botó ha de semblar un ítem més del menú: sense caixa, sense vora i sense
   l'anell de focus blau que Bootstrap posa a tot .btn. Hereta tipografia i
   color del menú, així no cal repetir la paleta de cada capçalera. */
#block-commutadordellengua .language-switcher-dropdown__toggle {
  padding: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-transform: uppercase;
}
#block-commutadordellengua .language-switcher-dropdown__toggle:hover,
#block-commutadordellengua .language-switcher-dropdown__toggle:focus,
#block-commutadordellengua .language-switcher-dropdown__toggle:active {
  color: inherit;
  background: transparent;
  outline: 0;
  box-shadow: none;
}

/* Desplegable fosc a joc amb la barra: el .dropdown-menu del tema és blanc
   amb text fosc, i aquí els enllaços quedaven blancs sobre blanc. */
#block-commutadordellengua .language-switcher-dropdown__menu {
  min-width: 0;
  padding: 0.4rem 0;
  background: #131517;
  border: 0;
  border-radius: 4px;
  z-index: 1030;
}
#block-commutadordellengua .language-switcher-dropdown__menu .dropdown-item {
  margin: 0;
  padding: 0.35rem 1.1rem;
  color: #fff;
  font: inherit;
  text-align: center;
  text-transform: uppercase;
}
#block-commutadordellengua .language-switcher-dropdown__menu .dropdown-item:hover,
#block-commutadordellengua .language-switcher-dropdown__menu .dropdown-item:focus,
#block-commutadordellengua .language-switcher-dropdown__menu .dropdown-item:active {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

/* Escriptori: l'idioma actiu no es repeteix dins del desplegable perquè ja
   surt al botó. L'alineació vertical en fila ja la dona el
   `.header .header-menu { display: flex; align-items: center; }` de la secció
   del bloc del logo, més amunt, així que aquí no cal repetir-la. */
@media (min-width: 992px) {
  #block-commutadordellengua { display: inline-flex; align-items: center; margin-left: 1.25rem; }
  #block-commutadordellengua .language-switcher-dropdown__menu .is-current-language { display: none; }
}

/* Mòbil: la capçalera és un panell blanc de 300px que entra per l'esquerra.
   Aquí el desplegable no té sentit, així que s'amaga el botó i es mostren els
   quatre idiomes en una fila separats per barres. */
@media (max-width: 991.98px) {
  #block-commutadordellengua { display: block; margin: 0; padding: 1.25rem 0 0; }
  #block-commutadordellengua .language-switcher-dropdown { display: block; }
  #block-commutadordellengua .language-switcher-dropdown__toggle { display: none; }

  /* Bootstrap amaga el .dropdown-menu i, quan s'obre, li posa position i
     transform inline via Popper. Cal guanyar-los per deixar-lo estàtic. */
  #block-commutadordellengua .language-switcher-dropdown__menu {
    display: flex !important;
    position: static !important;
    transform: none !important;
    float: none;
    justify-content: center;
    padding: 1rem 0 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  #block-commutadordellengua .language-switcher-dropdown__menu .dropdown-item {
    width: auto;
    padding: 0 0.65rem;
    color: #131517;
    background: transparent;
  }
  #block-commutadordellengua .language-switcher-dropdown__menu .dropdown-item + .dropdown-item {
    border-left: 1px solid rgba(19, 21, 23, 0.25);
  }
  #block-commutadordellengua .language-switcher-dropdown__menu .dropdown-item:hover,
  #block-commutadordellengua .language-switcher-dropdown__menu .dropdown-item:focus {
    color: #7C7C7C;
    background: transparent;
  }
  #block-commutadordellengua .language-switcher-dropdown__menu .is-current-language {
    font-weight: 700;
    text-decoration: underline;
  }
}