.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; }