@charset "UTF-8";
@import url("ept/ept-slideshow.css");
@import url("ept/ept-accordion.css");
@import url("ept/ept-hero.css");
@import url("ept/ept.css");
:root,
[data-bs-theme=light] {
  --bs-link-color: #051922;
  --bs-link-color-rgb: 5, 25, 34;
  --bs-link-decoration: underline;
  --bs-link-hover-color: #00AD95;
  --bs-link-hover-color-rgb: 0, 173, 149;
  --ocbl-accent: rgb(18, 173, 149);
}

body,
h1, h2, h3, h4, h5, h6,
p, a, button, input, select, textarea {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

b, strong {
  font-weight: bold;
}

.ept-container {
  padding: 0;
  margin: 0;
  gap: 0;
}

a {
  text-decoration: none;
  padding: 0 2px;
}

a:hover {
  text-decoration: underline;
}

a.a-ccbl {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
}

.page-node-type-ocbl-contingut .ocbl-page-title {
  margin-bottom: 60px;
}

.page-node-type-ocbl-contingut .region-content a:not(.btn):not(.obl-btn) {
  color: rgb(18, 173, 149);
  text-decoration: none;
}

.page-node-type-ocbl-contingut .region-content a:not(.btn):not(.obl-btn):hover {
  background-color: rgba(18, 173, 149, 0.1);
  color: #333;
}

.page-node-type-ocbl-contingut .region-content img {
  margin: 0px 20px 20px 0;
  float: left;
}

.btn-primary {
  color: #fff;
  font-weight: 500;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  color: #fff;
  text-decoration: none;
}
.btn-primary:hover {
  background-color: rgb(0, 147.05, 126.65);
  border-color: rgb(0, 147.05, 126.65);
}

.background-color-light-green {
  background-color: #edfbf7;
  padding-block: 3rem;
}

.text-foto {
  color: #ababab;
  padding: 0 16px;
  width: 100%;
  position: absolute;
  font-weight: bold;
  top: 140px;
  font-size: 70%;
  background-color: rgba(252, 252, 252, 0.897);
}

#block-ocbl-observatorisecundari {
  margin-right: 0;
}

#block-ocbl-observatorisecundari a.nav-link,
#block-ocbl-observatorisecundari a.level-0 {
  color: #00AD95;
  font-size: 90%;
}

#block-ocbl-observatorisecundari a.level-0 {
  padding: 0 10px;
}

ul#block-ocbl-observatorisecundari .nav .navbar-nav li {
  display: inline !important;
}

.block-page-title-block {
  margin-top: 50px;
}

.margin0 {
  margin: 0;
}

a.text-reset {
  text-decoration: none;
}

#conjunt1 {
  width: 30%;
  background-color: #edfbf7;
  padding: 40px;
  float: right;
  margin: 20px 40px;
}

#conjunt1 .fieldset-legend {
  display: none;
}

#conjunt1 .fieldset-wrapper .field {
  margin-bottom: 15px;
}

.centrado {
  text-align: center;
  margin: auto;
  padding: auto;
}

h2 {
  font-size: 3rem;
  font-weight: bold;
}

h1 {
  font-size: 2.5rem;
  font-weight: bold;
}

h1, h2 {
  color: #3D3D3D;
}

.overflow-hidden {
  overflow: hidden;
}

.view-observatori-noticies {
  margin: 40px 0 40px 0;
}

button .slick-next .slick-arrow {
  color: #fff;
  background-color: #6610f2;
  width: 500px;
  height: 500px;
}

/* Footer region: light grey band; blocks laid out in a responsive grid —
   1 (mobile) / 2 (md) / 4 (lg+) per row. */
footer[role=contentinfo] {
  background-color: #f5f5f5;
  padding-block: 3rem;
}
footer[role=contentinfo] .region-footer {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  footer[role=contentinfo] .region-footer {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  footer[role=contentinfo] .region-footer {
    grid-template-columns: 2.5fr 3.5fr 2fr 2fr;
  }
}

/* Decorative light-green gradient band at the top of the main content
   (Figma "Degradat-headers"). Applied on every page, including the front page. */
main[role=main] {
  padding-bottom: 30px;
  padding-top: var(--ocbl-fixed-header-height, 0px);
  position: relative;
}
main[role=main]::before {
  background: radial-gradient(88.74% 242.7% at 50% -180.38%, #12AD95 12.02%, rgba(18, 173, 149, 0) 100%);
  content: "";
  height: 180px;
  left: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 5;
}

/* Breadcrumb block: bottom spacing on every page except the front page —
   30px on mobile, 60px from md up. */
body:not(.path-frontpage) .block-system-breadcrumb-block {
  margin-bottom: 30px;
}
@media (min-width: 768px) {
  body:not(.path-frontpage) .block-system-breadcrumb-block {
    margin-bottom: 60px;
  }
}

/* Breadcrumb (custom ocbl_breadcrumb): whole trail in primary green — both
   linked and non-linked (nolink menu parents) items — except the current
   (last) page, which stays in the default ink. */
.breadcrumb {
  --bs-breadcrumb-divider-color: #00AD95;
  font-size: 13px;
}
.breadcrumb .breadcrumb-item,
.breadcrumb .breadcrumb-item a {
  color: #00AD95;
}
.breadcrumb .breadcrumb-item:last-child,
.breadcrumb .breadcrumb-item:last-child a {
  color: #1e1e1e;
}

.text90 {
  font-size: 90%;
}

.text80 {
  font-size: 80%;
}

.text70 {
  font-size: 70%;
}

.largest-font-size {
  font-size: 3rem;
}
@media (min-width: 768px) {
  .largest-font-size {
    font-size: 3.5rem;
  }
}
@media (min-width: 992px) {
  .largest-font-size {
    font-size: 4.5rem;
  }
}

.larger-font-size {
  font-size: 2.25rem;
}
@media (min-width: 768px) {
  .larger-font-size {
    font-size: 2.5rem;
  }
}
@media (min-width: 992px) {
  .larger-font-size {
    font-size: 3rem;
  }
}

.large-font-size {
  font-size: 1.5rem;
}
@media (min-width: 768px) {
  .large-font-size {
    font-size: 1.75rem;
  }
}
@media (min-width: 992px) {
  .large-font-size {
    font-size: 2rem;
  }
}

.fw-light {
  font-weight: 300 !important;
}

.fw-normal {
  font-weight: 400 !important;
}

.fw-bold {
  font-weight: 700 !important;
}

.fw-extrabold {
  font-weight: 800 !important;
}

.text-upper {
  text-transform: uppercase;
}

.text-orange {
  color: rgb(18, 173, 149);
}

.text-blau {
  color: rgb(12, 46, 69);
}

.text-blanc {
  color: #FFF;
}

.text-bold {
  font-weight: bold;
}

/* Equal height cards in Views listings (e.g. estudis cards). */
.view .views-row {
  height: 100%;
}

.view .views-row .card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.view .views-row .card .card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.view .views-row .card .card-footer,
.view .views-row .card .mt-auto {
  margin-top: auto;
}

/* ocbl_contingut_concret: separació inferior de la vista. */
.view-ocbl-contingut-concret {
  margin-bottom: 60px;
}

/* ocbl_contingut_concret: spacing above the results — 30px mobile, 60px md+. */
.view-ocbl-contingut-concret .view-content {
  margin-top: 30px;
}
@media (min-width: 768px) {
  .view-ocbl-contingut-concret .view-content {
    margin-top: 60px;
  }
}

/* Graella de cards (segons disseny): 12 columnes amb gap de 24px; cada card
   ocupa 4 columnes → 3 cards per fila a desktop, 2 a tauleta, 1 a mòbil. */
.view-ocbl-contingut-concret .views-view-responsive-grid,
.view-ocbl-contingut .views-view-responsive-grid {
  align-items: stretch;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .view-ocbl-contingut-concret .views-view-responsive-grid,
  .view-ocbl-contingut .views-view-responsive-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  .view-ocbl-contingut-concret .views-view-responsive-grid,
  .view-ocbl-contingut .views-view-responsive-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.view-ocbl-contingut-concret .views-view-responsive-grid__item,
.view-ocbl-contingut .views-view-responsive-grid__item,
.view-ocbl-contingut-concret .views-view-responsive-grid__item-inner,
.view-ocbl-contingut .views-view-responsive-grid__item-inner,
.view-ocbl-contingut-concret .views-field,
.view-ocbl-contingut .views-field,
.view-ocbl-contingut-concret .field-content,
.view-ocbl-contingut .field-content {
  height: 100%;
}

.view-ocbl-contingut-concret .field-content,
.view-ocbl-contingut .field-content {
  display: block;
}

.view-ocbl-contingut-concret .card,
.view-ocbl-contingut .card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.view-ocbl-contingut-concret .card .card-body,
.view-ocbl-contingut .card .card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.view-ocbl-contingut-concret .card .btn-group,
.view-ocbl-contingut .card .btn-group {
  margin-top: auto;
}

/* obcl_content view: responsive card grid — 1 / 2 / 3 cards per row. */
.view-obcl-content .view-content {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .view-obcl-content .view-content {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  .view-obcl-content .view-content {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Site header: bottom hairline separator. */
header {
  border-bottom: 1px solid #d9d9d9;
}

/* Bloc de marca (logo): pujat 30px a partir de md. */
@media (min-width: 768px) {
  #block-ocbl-branding {
    margin-top: -30px;
  }
}

/* Bloc de xarxes socials: marge dret a partir de lg. */
@media (min-width: 992px) {
  #block-ocbl-ocblxarxessocials {
    margin-right: 5px;
  }
}

/* Header top bar (moved from inline styles in page.html.twig). */
.ocbl-topbar {
  width: 100%;
  background-color: #efefef;
  border-bottom: 1px solid #ccc;
}

.ocbl-topbar-inner {
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ocbl-topbar-link {
  padding-top: 5px;
}

.ocbl-topbar-logo-link {
  margin-right: 8px;
}

.ocbl-topbar-logo-img {
  max-height: 30px;
}

.ocbl-nav-secondary-wrap {
  padding-bottom: 0;
  position: relative;
  z-index: 1000;
}

.ocbl-nav-secondary-inner {
  margin-bottom: 0.25rem;
}
@media (min-width: 992px) {
  .ocbl-nav-secondary-inner {
    margin-bottom: 0;
    margin-top: 0.25rem;
  }
}

.region-nav-secondary {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-left: 5px;
  padding-right: 5px;
}
@media (min-width: 768px) {
  .region-nav-secondary {
    gap: 30px;
    justify-content: flex-end;
  }
}

@media (max-width: 767.98px) {
  .ocbl-nav-secondary-wrap .nav {
    justify-content: flex-start !important;
  }
}
.ocbl-nav-secondary-wrap .block,
.ocbl-nav-secondary-wrap .nav,
.ocbl-nav-secondary-wrap ul,
.ocbl-nav-secondary-wrap p {
  margin-bottom: 0;
}

.ocbl-nav-secondary-wrap .nav {
  align-items: center;
  display: flex;
  gap: 0.35rem;
  justify-content: flex-end;
}

@media (max-width: 767.98px) {
  .ocbl-nav-secondary-wrap .nav-link {
    padding-left: 0;
    padding-right: 0;
  }
}
.home-destacats .views-view-responsive-grid__item {
  border: 1px solid #fff;
  padding: 1rem;
  box-shadow: var(--bs-box-shadow) !important;
}

.home-destacats {
  margin-bottom: 40px;
}

.home-destacats .views-view-responsive-grid__item img,
.home-destacats .views-view-responsive-grid__item h6 {
  margin-bottom: 20px;
}

/* OCBL skin for EPT Slick Slider paragraph. */
/*.ept-slick-slider {
  --ocbl-accent: #ff;
  --ocbl-ink: #0f1720;
  --ocbl-paper: #ffffff;
  --ocbl-soft: #fff7f0;
  background: transparent;
  padding: clamp(2rem, 4vw, 3.6rem) 0 clamp(2.2rem, 4.5vw, 4rem);
  position: relative;
}*/
.ept-slick-slider .slider-body > h2,
.ept-slick-slider .slider-body > h1,
.ept-slick-slider .slider-body > h3 {
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0 auto 1.25rem;
  max-width: 1100px;
  padding: 0 1rem;
  text-align: center;
}

.ept-slick-slider .slider-body > h2::after,
.ept-slick-slider .slider-body > h1::after,
.ept-slick-slider .slider-body > h3::after {
  background: var(--ocbl-accent);
  border-radius: 999px;
  content: "";
  display: block;
  height: 4px;
  margin: 0.85rem auto 0;
  width: 72px;
}

.ept-slick-slider .slick-slider {
  margin: 0 auto;
  max-width: 1240px;
  padding: 0 2.6rem 2.5rem;
}

.ept-slick-slider .slick-track {
  display: flex !important;
}

.ept-slick-slider .slick-slide {
  float: none;
  height: inherit !important;
  margin: 0 10px;
}

.ept-slick-slider .slick-slide > div {
  height: 100%;
}

.ept-slick-slider .slick-slide .paragraph {
  background: var(--ocbl-paper);
  border: 1px solid #f0e2d5;
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
  height: 100%;
  overflow: hidden;
}

.ept-slick-slider .slick-slide img {
  display: block;
  height: 230px;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}

.ept-slick-slider .slick-slide .field,
.ept-slick-slider .slick-slide .field--name-field-ept-slick-slider-text,
.ept-slick-slider .slick-slide .field--name-field-ept-text,
.ept-slick-slider .slick-slide .field--name-field-ept-title {
  padding-left: 1.15rem;
  padding-right: 1.15rem;
}

.ept-slick-slider .slick-slide .field--name-field-ept-title,
.ept-slick-slider .slick-slide h2,
.ept-slick-slider .slick-slide h3,
.ept-slick-slider .slick-slide h4 {
  color: var(--ocbl-ink);
  font-size: clamp(1.05rem, 1.3vw, 1.28rem);
  font-weight: 700;
  line-height: 1.3;
  margin-top: 1rem;
}

.ept-slick-slider .slick-slide p,
.ept-slick-slider .slick-slide .field--name-field-ept-slick-slider-text {
  color: #516173;
  font-size: 0.96rem;
  line-height: 1.65;
  margin-bottom: 1.2rem;
}

.ept-slick-slider .slick-slide a {
  color: var(--ocbl-accent);
  font-weight: 600;
  text-decoration: none;
}

.ept-slick-slider .slick-slide a:hover {
  color: #fff;
  text-decoration: none;
}

.ept-slick-slider.basic-styles .slick-prev::before,
.ept-slick-slider.basic-styles .slick-next::before {
  color: rgba(33, 37, 41, 0.75) !important;
}

.ept-slick-slider .slick-prev::before {
  margin-left: -22px;
}

/*.ept-slick-slider .slick-prev,
.ept-slick-slider .slick-next {
  align-items: center;
  background: var(--ocbl-accent);
  border-radius: 999px;
  display: inline-flex;
  height: 46px;
  justify-content: center;
  margin-top: -23px;
  width: 46px;
  z-index: 30;
}

.ept-slick-slider .slick-prev:hover,
.ept-slick-slider .slick-next:hover {
  background: #e8700f;
}

.ept-slick-slider .slick-prev:before,
.ept-slick-slider .slick-next:before {
  color: #fff;
  font-size: 18px;
  opacity: 1;
}

.ept-slick-slider .slick-dots {
  bottom: -6px;
}

.ept-slick-slider .slick-dots li button {
  background: rgba(255, 255, 255, 0.8);
  border: 0;
  border-radius: 999px;
  height: 10px;
  width: 10px;
}

.ept-slick-slider .slick-dots li.slick-active button {
  background: var(--ocbl-accent);
  transform: scale(1.15);
}*/
@media (max-width: 991px) {
  /*.ept-slick-slider .slick-slider {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }

  .ept-slick-slider .slick-prev,
  .ept-slick-slider .slick-next {
    height: 40px;
    margin-top: -20px;
    width: 40px;
  }*/
}
@media (max-width: 575px) {
  /*.ept-slick-slider .slick-slider {
    padding-left: 0.55rem;
    padding-right: 0.55rem;
  }

  .ept-slick-slider .slick-slide {
    margin: 0 6px;
  }

  .ept-slick-slider .slick-slide img {
    height: 190px;
  }*/
}
/* Normalize paragraph titles to h3 + OCBL split-color style. */
.paragraph .field--name-field-ept-title .ocbl-paragraph-title,
.paragraph .field--name-field-title .ocbl-paragraph-title {
  color: #051922;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 1rem;
}

h1.ocbl-page-title {
  color: #051922;
  font-size: 2.5rem;
  font-weight: bold;
}

.ocbl-title-first,
.paragraph .field--name-field-ept-title .ocbl-paragraph-title .ocbl-title-first,
.paragraph .field--name-field-title .ocbl-paragraph-title .ocbl-title-first,
h1.ocbl-page-title .ocbl-title-first,
h1.ocbl-page-title.ocbl-title-single {
  /*color: #f28123;*/
  color: rgb(18, 173, 149);
}

.ocbl-title-rest,
.paragraph .field--name-field-ept-title .ocbl-paragraph-title .ocbl-title-rest,
.paragraph .field--name-field-title .ocbl-paragraph-title .ocbl-title-rest,
.paragraph .field--name-field-ept-title .ocbl-paragraph-title.ocbl-title-single,
.paragraph .field--name-field-title .ocbl-paragraph-title.ocbl-title-single,
h1.ocbl-page-title .ocbl-title-rest {
  color: #051922;
}

/* Slide-item paragraph: image (left) + rich text (right) — only positioning,
   the image and text come pre-formatted from the editor. Mobile-first: stacked
   on small screens, two columns from lg up. */
.paragraph--type--slide-item {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media (min-width: 992px) {
  .paragraph--type--slide-item {
    flex-direction: row;
    gap: clamp(2rem, 5vw, 4rem);
  }
}
.paragraph--type--slide-item > .field--name-field-single-image {
  flex: 0 0 auto;
  max-width: 100%;
}
@media (min-width: 992px) {
  .paragraph--type--slide-item > .field--name-field-single-image {
    flex: 0 0 42%;
  }
}
@media (min-width: 992px) {
  .paragraph--type--slide-item > .field--name-field-single-rich-text {
    flex: 1 1 0;
  }
}

/* Slideshow (slick_paragraphs) navigation dots: grey, primary when active. */
.paragraph--type--slideshow .slick-dots {
  align-items: center;
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
}
.paragraph--type--slideshow .slick-dots li {
  line-height: 0;
  margin: 0;
}
.paragraph--type--slideshow .slick-dots button {
  background: #d9d9d9;
  border: 0;
  border-radius: 50%;
  color: transparent;
  cursor: pointer;
  font-size: 0;
  height: 12px;
  padding: 0;
  width: 12px;
}
.paragraph--type--slideshow .slick-dots button::before {
  display: none;
}
.paragraph--type--slideshow .slick-dots li.slick-active button {
  background: #00AD95;
}

/* Link box with icon: icon on the left, title + text stacked on the right.
   Box uses Figma tokens (padding 24, radius 8, subtle grey fill). */
.paragraph--type--link-box-with-icon {
  align-items: center;
  background: rgba(0, 173, 149, 0.06);
  background-blend-mode: multiply;
  border-radius: 8px;
  -moz-column-gap: 24px;
       column-gap: 24px;
  display: grid;
  grid-template-columns: auto 1fr;
  height: 100%;
  padding: 24px;
  row-gap: 4px;
}
.paragraph--type--link-box-with-icon > .field--name-field-single-image {
  align-self: start;
  grid-column: 1;
  grid-row: 1/span 2;
  margin-top: 5px;
}
.paragraph--type--link-box-with-icon > .field--name-field-single-image img {
  height: auto;
  max-width: 28px;
}
.paragraph--type--link-box-with-icon > .field--name-field-title {
  color: #051922;
  font-size: 1.1rem;
  font-weight: 700;
  grid-column: 2;
  grid-row: 1;
}
.paragraph--type--link-box-with-icon > .field--name-field-single-rich-text {
  grid-column: 2;
  grid-row: 2;
}

/* Paragraph width: the .container-width-* class lives on the paragraph, but it
   must size its wrapping field__item (the layout container). :has() lets the
   wrapper react to the class on its child paragraph. Requires a modern browser. */
.field--name-field-rel-paragraphs > .field__item:has(> .paragraph.container-width-narrow) {
  margin-inline: auto;
  max-width: 900px;
}
.field--name-field-rel-paragraphs > .field__item:has(> .paragraph.container-width-full) {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
}
.field--name-field-rel-paragraphs > .field__item:has(> .paragraph.margin-top-min) {
  margin-top: 1.5rem;
}
.field--name-field-rel-paragraphs > .field__item:has(> .paragraph.margin-top-medium) {
  margin-top: 3rem;
}
.field--name-field-rel-paragraphs > .field__item:has(> .paragraph.margin-top-max) {
  margin-top: 4.5rem;
}
.field--name-field-rel-paragraphs > .field__item:has(> .paragraph.margin-bottom-min) {
  margin-bottom: 1.5rem;
}
.field--name-field-rel-paragraphs > .field__item:has(> .paragraph.margin-bottom-medium) {
  margin-bottom: 3rem;
}
.field--name-field-rel-paragraphs > .field__item:has(> .paragraph.margin-bottom-max) {
  margin-bottom: 4.5rem;
}

.field--name-field-rel-paragraphs > .field__item:has(> .paragraph.container-width-full) > .paragraph > * {
  margin-inline: auto;
  padding-inline: 0.75rem;
  width: 100%;
}
@media (min-width: 576px) {
  .field--name-field-rel-paragraphs > .field__item:has(> .paragraph.container-width-full) > .paragraph > * {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .field--name-field-rel-paragraphs > .field__item:has(> .paragraph.container-width-full) > .paragraph > * {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .field--name-field-rel-paragraphs > .field__item:has(> .paragraph.container-width-full) > .paragraph > * {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .field--name-field-rel-paragraphs > .field__item:has(> .paragraph.container-width-full) > .paragraph > * {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .field--name-field-rel-paragraphs > .field__item:has(> .paragraph.container-width-full) > .paragraph > * {
    max-width: 1320px;
  }
}

/* Infografia card: stat tile with pre-title, big figure, description and an
   image pinned to the bottom. Figma tokens (fill #EDFBF7, border #D9D9D9,
   radius 8, padding 24, gaps 8/16). Text top-aligned, image bottom-aligned
   (space-between) so cards in a grid row stay visually balanced. */
.paragraph--type--infografia {
  background: #edfbf7;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 24px;
}
.paragraph--type--infografia > .field--name-field-pre-title > .field__label {
  display: none;
}
.paragraph--type--infografia > .field--name-field-pre-title {
  color: #00AD95;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
}
.paragraph--type--infografia > .field--name-field-title {
  color: #1e1e1e;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.4;
}
.paragraph--type--infografia > .field--name-field-single-rich-text {
  color: #757575;
  font-size: 16px;
  line-height: 1.4;
}
.paragraph--type--infografia > .field--name-field-single-rich-text p {
  margin: 0;
}
.paragraph--type--infografia > .field--name-field-single-image {
  margin-top: auto;
  padding-top: 8px;
}
.paragraph--type--infografia > .field--name-field-single-image img {
  display: block;
  height: auto;
  margin-inline: auto;
  max-width: 100%;
  mix-blend-mode: multiply;
}

/* Infografies grid container: responsive columns — 1 (mobile) / 2 (md) /
   3 (lg) / 4 (xl+). Cards centred within their track. */
.paragraph--type--graella-infografies > .field--name-field-paragraphs {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  justify-items: center;
}
@media (min-width: 768px) {
  .paragraph--type--graella-infografies > .field--name-field-paragraphs {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  .paragraph--type--graella-infografies > .field--name-field-paragraphs {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1200px) {
  .paragraph--type--graella-infografies > .field--name-field-paragraphs {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Links grid container: responsive columns driven by the .elements-per-row-N
   modifier. Mobile = 1/row always; md = 2/row max; lg = N/row (1–4). */
.paragraph--type--links-grid > .field--name-field-paragraphs {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .paragraph--type--links-grid.elements-per-row-2 > .field--name-field-paragraphs {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 768px) {
  .paragraph--type--links-grid.elements-per-row-3 > .field--name-field-paragraphs {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  .paragraph--type--links-grid.elements-per-row-3 > .field--name-field-paragraphs {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 768px) {
  .paragraph--type--links-grid.elements-per-row-4 > .field--name-field-paragraphs {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  .paragraph--type--links-grid.elements-per-row-4 > .field--name-field-paragraphs {
    grid-template-columns: repeat(4, 1fr);
  }
}
.paragraph--type--links-grid .field--name-field-title {
  font-size: 1.5rem;
  font-weight: 600;
}
.paragraph--type--links-grid .paragraph--type--link-box-with-icon {
  background: rgba(0, 0, 0, 0.06);
}

/* Media paragraph (imatge única): la imatge mai supera l'ample del contenidor
   i escala proporcionalment, ignorant els atributs width/height fixos. */
.paragraph--type--media .field--name-field-single-media img,
.paragraph--type--media .field--name-field-single-media video,
.paragraph--type--media .field--name-field-single-media iframe {
  display: block;
  height: auto;
  margin-inline: auto;
  max-width: 100%;
}

/* Search block dins d'un paràgraf "block": barra de cerca en forma de pill amb
   vora verda, lupa a l'esquerra i botó verd "Cercar" a la dreta (segons disseny). */
.paragraph--type--block .search-block-form {
  align-items: center;
  background: #fff;
  border: 1px solid var(--ocbl-accent);
  border-radius: 999px;
  display: flex;
  margin-inline: auto;
  max-width: 800px;
  padding: 6px 6px 6px 20px;
}
.paragraph--type--block .search-block-form #search-block-form {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  gap: 12px;
  margin: 0;
  width: 100%;
}
.paragraph--type--block .search-block-form .form-item-keys {
  flex: 1 1 auto;
  margin: 0;
  position: relative;
}
.paragraph--type--block .search-block-form .form-item-keys::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23051922' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat center/contain;
  content: "";
  height: 22px;
  left: 4px;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
}
.paragraph--type--block .search-block-form input[type=search] {
  background: transparent;
  border: 0;
  box-shadow: none;
  font-size: 1rem;
  height: auto;
  padding: 8px 8px 8px 38px;
  width: 100%;
}
.paragraph--type--block .search-block-form input[type=search]::-moz-placeholder {
  color: #9a9a9a;
}
.paragraph--type--block .search-block-form input[type=search]::placeholder {
  color: #9a9a9a;
}
.paragraph--type--block .search-block-form input[type=search]:focus {
  box-shadow: none;
  outline: 0;
}
.paragraph--type--block .search-block-form .form-actions {
  flex: 0 0 auto;
  margin: 0;
}
.paragraph--type--block .search-block-form input[type=submit] {
  background: var(--ocbl-accent);
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-weight: 600;
  padding: 10px 28px;
}
.paragraph--type--block .search-block-form input[type=submit]:hover, .paragraph--type--block .search-block-form input[type=submit]:focus {
  background: #0f9a85;
}

/* Header fix a totes les resolucions: tot el <header> queda enganxat a dalt
   durant tot l'scroll (no es pot fer amb position: sticky perquè el base theme
   posa d-flex flex-column h-100 al body → alçada limitada a 100vh).
   El JS posa --ocbl-fixed-header-height (= alçada del header) per compensar el
   contingut, i afegeix .ocbl-nav-is-fixed en fer scroll per a l'ombra. */
header[role=banner] {
  background-color: #ffffff;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1031;
}

body.ocbl-nav-is-fixed header[role=banner] {
  box-shadow: 0 8px 24px rgba(5, 25, 34, 0.12);
}

/* OCBL button style inspired by Fruitkha home CTA. */
.obl-btn,
a.obl-btn,
button.obl-btn,
input.obl-btn {
  /*background-color: #f28123;
  border: 2px solid #f28123;*/
  background-color: rgb(18, 173, 149);
  border: 2px solid rgb(18, 173, 149);
  border-radius: 999px;
  color: #ffffff;
  cursor: pointer;
  display: inline-block;
  font-weight: 700;
  line-height: 1.2;
  padding: 0.72rem 1.55rem;
  text-decoration: none;
  transition: all 0.25s ease;
}

.obl-btn:hover,
.obl-btn:focus,
a.obl-btn:hover,
a.obl-btn:focus,
button.obl-btn:hover,
button.obl-btn:focus,
input.obl-btn:hover,
input.obl-btn:focus {
  background-color: #051922;
  border-color: #051922;
  color: rgb(18, 173, 149);
  text-decoration: none;
}

.obl-btn:focus-visible,
a.obl-btn:focus-visible,
button.obl-btn:focus-visible,
input.obl-btn:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(18, 173, 149, 0.35);
  outline: 0;
}

/* Main navbar layout wrappers. */
.ocbl-main-navbar {
  --bs-navbar-padding-y: 0;
  padding-bottom: 5px;
}

.ocbl-main-navbar-inner {
  align-items: center;
  width: 100%;
}

.ocbl-main-menu-wrap {
  margin-left: auto;
}

.ocbl-main-additional-wrap {
  margin-left: 0.75rem;
}

@media (min-width: 992px) {
  .ocbl-nav-secondary-inner {
    display: flex;
    justify-content: flex-end;
    width: 100%;
  }
  .ocbl-main-navbar {
    position: relative;
  }
  .ocbl-main-menu-wrap {
    display: flex;
    flex: 1 1 auto;
    justify-content: flex-end;
    margin-bottom: 10px;
    margin-top: 10px;
    min-width: 0;
  }
  .ocbl-main-menu-wrap .region-nav-main,
  .ocbl-main-menu-wrap .tb-megamenu {
    display: flex;
    justify-content: flex-end;
    width: 100%;
  }
  #block-ocbl-observatori {
    border-top: 1px dashed #ccc;
    margin-right: 0;
    padding-right: 10px;
    padding-top: 10px;
  }
  #block-ocbl-formularidecerca {
    border-top: 1px dashed #ccc;
    margin-left: 0;
    padding-top: 10px;
  }
  .ocbl-main-navbar .tb-megamenu .nav-collapse {
    width: 100%;
  }
  .ocbl-main-navbar .tb-megamenu .nav {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    width: 100%;
  }
  .ocbl-main-navbar .tb-megamenu .nav > li {
    float: none;
  }
  .ocbl-main-navbar .tb-megamenu .nav > li > a,
  .ocbl-main-navbar .tb-megamenu .nav > li > span.tb-megamenu-no-link {
    margin: 0;
    padding-bottom: 8px;
    padding-top: 8px;
  }
  .ocbl-main-navbar .tb-megamenu .nav > li.dropdown > .dropdown-toggle .caret {
    display: none;
  }
  .ocbl-main-navbar .tb-megamenu li.dropdown,
  .ocbl-main-navbar .tb-megamenu li.dropdown-submenu {
    position: relative;
  }
  .ocbl-main-navbar .tb-megamenu .nav > li > .dropdown-menu,
  .ocbl-main-navbar .tb-megamenu .nav > li > .mega-dropdown-menu {
    box-sizing: border-box;
    max-width: 100%;
  }
  .ocbl-main-navbar .tb-megamenu li.dropdown.ocbl-submenu-align-right > .dropdown-menu,
  .ocbl-main-navbar .tb-megamenu li.dropdown.ocbl-submenu-align-right > .mega-dropdown-menu {
    left: auto;
    right: 0;
  }
  .ocbl-main-navbar .tb-megamenu li.dropdown-submenu.ocbl-submenu-open-left > .dropdown-menu,
  .ocbl-main-navbar .tb-megamenu li.dropdown-submenu.ocbl-submenu-open-left > .mega-dropdown-menu {
    left: auto;
    margin-left: 0;
    margin-right: -1px;
    right: 100%;
  }
}
/* Main navbar responsive fixes (TB Mega Menu as single mobile toggler). */
@media (max-width: 991.98px) {
  .ocbl-nav-secondary-wrap {
    top: 0;
  }
  .ocbl-main-navbar-inner {
    align-items: center;
    flex-wrap: nowrap !important;
    justify-content: space-between;
  }
  .ocbl-main-navbar-inner > .region-nav-branding {
    flex: 0 0 auto;
    margin-right: 0.75rem;
    width: auto;
  }
  .ocbl-main-navbar-inner > .region-nav-branding .block {
    margin-bottom: 0;
    width: auto;
  }
  .ocbl-main-menu-wrap {
    flex: 0 0 auto;
    margin-left: auto;
  }
  .ocbl-main-additional-wrap {
    margin-left: 0;
  }
  .ocbl-main-additional-wrap:empty {
    display: none;
  }
  .ocbl-main-menu-wrap .region-nav-main {
    display: flex;
    width: auto;
  }
  .ocbl-main-menu-wrap .tb-megamenu {
    display: flex;
    justify-content: flex-end;
    position: static !important;
  }
  .ocbl-main-navbar .container,
  .ocbl-main-navbar .container-fluid {
    align-items: center;
    flex-wrap: wrap;
  }
  .ocbl-main-navbar {
    position: relative;
  }
  .ocbl-main-navbar .tb-megamenu .tb-megamenu-button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: #00AD95;
    display: inline-flex;
    float: none;
    justify-content: center;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: 0;
    margin-top: 0;
    padding: 9px 12px;
    position: relative;
    right: 0;
  }
  .ocbl-main-navbar .tb-megamenu .tb-megamenu-button:hover,
  .ocbl-main-navbar .tb-megamenu .tb-megamenu-button:focus,
  .ocbl-main-navbar .tb-megamenu .tb-megamenu-button:focus-visible {
    background: transparent;
    box-shadow: none;
    color: #00AD95;
    outline: 0;
  }
  .ocbl-main-navbar .tb-megamenu .tb-megamenu-button .ocbl-burger line {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.25s ease, opacity 0.2s ease;
  }
  .ocbl-main-navbar .tb-megamenu .tb-megamenu-button.is-open .ocbl-burger line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .ocbl-main-navbar .tb-megamenu .tb-megamenu-button.is-open .ocbl-burger line:nth-child(2) {
    opacity: 0;
  }
  .ocbl-main-navbar .tb-megamenu .tb-megamenu-button.is-open .ocbl-burger line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
  .ocbl-main-navbar .tb-megamenu .nav-collapse {
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    display: block;
    height: 0;
    left: 0;
    margin-left: 0;
    margin-top: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    right: 0;
    top: 100%;
    transition: height 0.2s ease;
    width: 100%;
    z-index: 1200;
  }
  /* TB Megamenu toggles only height; keep collapse visible for that behavior. */
  .ocbl-main-navbar .tb-megamenu .nav-collapse.collapse {
    display: block;
  }
  .ocbl-main-navbar .tb-megamenu .nav-collapse[style*="height: auto"] {
    padding: 0.35rem 0.2rem 0.5rem;
    max-height: calc(100vh - var(--ocbl-fixed-header-height, 0px) - 1rem);
    overflow-y: auto;
  }
  .ocbl-main-navbar .tb-megamenu .nav {
    display: block;
    flex-direction: column;
    margin: 0;
    width: 100%;
  }
  .ocbl-main-navbar .tb-megamenu .nav > li {
    float: none;
    margin: 0;
    width: 100%;
  }
  .ocbl-main-navbar .tb-megamenu .nav > li > a,
  .ocbl-main-navbar .tb-megamenu .nav > li > span.tb-megamenu-no-link {
    border: 0;
    display: block;
    margin: 2px 6px;
    padding: 10px 12px;
    white-space: normal;
  }
  .ocbl-main-navbar .tb-megamenu .dropdown-menu,
  .ocbl-main-navbar .tb-megamenu .mega-dropdown-menu {
    border: 0;
    border-radius: 10px;
    box-shadow: none;
    float: none;
    left: auto !important;
    margin: 2px 10px 10px;
    max-width: 100%;
    padding: 6px;
    position: static !important;
    width: auto !important;
  }
  /* Mobile: keep child options collapsed until parent is tapped. */
  .ocbl-main-navbar .tb-megamenu .nav > li > .dropdown-menu,
  .ocbl-main-navbar .tb-megamenu .nav > li > .mega-dropdown-menu {
    display: none !important;
  }
  .ocbl-main-navbar .tb-megamenu .nav > li.open.ocbl-mobile-open > .dropdown-menu,
  .ocbl-main-navbar .tb-megamenu .nav > li.open.ocbl-mobile-open > .mega-dropdown-menu {
    display: block !important;
  }
  /* Prevent hover-open behavior on mobile: only click-controlled open is shown. */
  .ocbl-main-navbar .tb-megamenu .nav > li.open:not(.ocbl-mobile-open) > .dropdown-menu,
  .ocbl-main-navbar .tb-megamenu .nav > li.open:not(.ocbl-mobile-open) > .mega-dropdown-menu,
  .ocbl-main-navbar .tb-megamenu .nav > li:hover > .dropdown-menu,
  .ocbl-main-navbar .tb-megamenu .nav > li:hover > .mega-dropdown-menu {
    display: none !important;
  }
}
/* Grups de segon nivell dels desplegables: línia superior discontínua del
   color del text. */
.ocbl-main-navbar .tb-megamenu .tb-megamenu-item.level-2.mega.mega-group {
  border-top: 1px dashed currentColor;
  margin-bottom: 10px;
  padding-top: 10px;
}

/* Cerca de la navbar: només la lupa amb separador vertical; el formulari es
   desplega com a panell en clicar (vegeu el comportament "ocbl-search-toggle"
   a js/ocbl-theme.js). La classe .ocbl-search l'afegeix el JS, així que sense
   JS el formulari es mostra normalment (degradació correcta). */
#block-ocbl-formularidecerca.ocbl-search {
  align-items: center;
  display: flex;
  position: relative;
}

.ocbl-search-toggle {
  background: transparent;
  border: 0;
  border-left: 1px solid #d9d9d9;
  color: #051922;
  cursor: pointer;
  display: inline-flex;
  margin-left: 1rem;
  padding: 6px 6px 6px 2rem;
}
.ocbl-search-toggle svg {
  height: 22px;
  width: 22px;
}

@media (max-width: 991.98px) {
  .ocbl-search-toggle {
    padding: 6px 6px 6px 15px;
  }
}
#block-ocbl-formularidecerca.ocbl-search > form {
  align-items: center;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  display: none;
  gap: 8px;
  margin-top: 10px;
  max-width: calc(100vw - 2rem);
  padding: 6px 6px 6px 16px;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 1100;
}

#block-ocbl-formularidecerca.ocbl-search--open > form {
  display: flex;
}

#block-ocbl-formularidecerca.ocbl-search .form-item-keys {
  margin: 0;
}

#block-ocbl-formularidecerca.ocbl-search input[type=search] {
  background: transparent;
  border: 0;
  box-shadow: none;
  min-width: 220px;
  padding: 6px 8px;
}
#block-ocbl-formularidecerca.ocbl-search input[type=search]:focus {
  box-shadow: none;
  outline: 0;
}

#block-ocbl-formularidecerca.ocbl-search .form-actions {
  margin: 0;
}

#block-ocbl-formularidecerca.ocbl-search input[type=submit] {
  background: var(--ocbl-accent);
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-weight: 600;
  padding: 8px 20px;
}
#block-ocbl-formularidecerca.ocbl-search input[type=submit]:hover, #block-ocbl-formularidecerca.ocbl-search input[type=submit]:focus {
  background: #0f9a85;
}

/* EPT tiles item: replace the module's grey border + hover shadow with a
   bordered, rounded, padded card (no shadow). The styled box is the .inner. */
.paragraph--type--ept-tiles-item.paragraph--view-mode--default .inner {
  border: 1px solid var(--bs-border-color);
  border-radius: 8px;
  box-shadow: none;
  padding: 1.25rem;
}
.paragraph--type--ept-tiles-item.paragraph--view-mode--default .inner:hover {
  box-shadow: none;
}

.field--name-field-ept-tiles-image img {
  width: 100%;
  height: 200px;
  -o-object-fit: cover;
     object-fit: cover;
  padding-bottom: 10px;
}

.page-node-type-ocbl-contingut .field--name-field-document-adjunt {
  margin-bottom: 20px;
}

/* ocbl_contingut full node: top spacing — 30px, 60px from lg up. */
.node--type-ocbl-contingut.node--view-mode-full {
  margin-top: 30px;
}
@media (min-width: 992px) {
  .node--type-ocbl-contingut.node--view-mode-full {
    margin-top: 60px;
  }
}

/* landing_page full node: top spacing — 30px, 60px from lg up. */
.node--type-landing-page.node--view-mode-full {
  margin-top: 30px;
}
@media (min-width: 992px) {
  .node--type-landing-page.node--view-mode-full {
    margin-top: 60px;
  }
}

/* webform full node: top spacing — 30px, 60px from lg up. */
.node--type-webform.node--view-mode-full {
  margin-top: 30px;
}
@media (min-width: 992px) {
  .node--type-webform.node--view-mode-full {
    margin-top: 60px;
  }
}
.node--type-webform.node--view-mode-full .webform-submission-form {
  border: 1px solid var(--bs-border-color);
  border-radius: 8px;
  margin-top: 30px;
  padding: 1.25rem;
}

/* ocbl_contingut "card" view mode (Display Suite): category, title, body. */
.node--type-ocbl-contingut.node--view-mode-card {
  background: #fff;
  border: 1px solid var(--bs-border-color);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  padding: 1.5rem;
}
.node--type-ocbl-contingut.node--view-mode-card .field--name-field-ocbl-data {
  font-size: 14px;
}
.node--type-ocbl-contingut.node--view-mode-card .field--name-field-tax-ambit-tematic-general {
  color: #00AD95;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}
  .views-view-responsive-grid .field--name-field-tax-ambit-tematic-concret {
    color: #00AD95;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .field--name-node-post-date {
    color: #6c757d;
    font-size: 14px;
  }

.node--type-ocbl-contingut.node--view-mode-card .field--name-node-title h4 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}
.node--type-ocbl-contingut.node--view-mode-card .field--name-node-title a {
  color: #051922;
  text-decoration: none;
}
.node--type-ocbl-contingut.node--view-mode-card .field--name-node-title a:hover {
  color: #00AD95;
}
.node--type-ocbl-contingut.node--view-mode-card .field--name-body {
  color: #6c757d;
  font-size: 0.875rem;
  line-height: 1.5;
}
.node--type-ocbl-contingut.node--view-mode-card .field--name-node-link {
  margin-top: auto;
}
.node--type-ocbl-contingut.node--view-mode-card .field--name-node-link a {
  background: #e3e3e3;
  border: 1px solid #767676;
  border-radius: 8px;
  color: #051922;
  display: inline-block;
  font-size: 16px;
  font-weight: 300;
  line-height: 1;
  padding: 12px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.node--type-ocbl-contingut.node--view-mode-card .field--name-node-link a:hover, .node--type-ocbl-contingut.node--view-mode-card .field--name-node-link a:focus {
  background-color: #d9d9d9;
}

#block-ocbl-contacta h2,
#block-ocbl-estudis h2,
#block-ocbl-elsmesvisitats h2 {
  color: #1e1e1e;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
}
#block-ocbl-contacta ul,
#block-ocbl-estudis ul,
#block-ocbl-elsmesvisitats ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#block-ocbl-contacta .mail-icon::before,
#block-ocbl-contacta .phone-icon::before,
#block-ocbl-estudis .mail-icon::before,
#block-ocbl-estudis .phone-icon::before,
#block-ocbl-elsmesvisitats .mail-icon::before,
#block-ocbl-elsmesvisitats .phone-icon::before {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  display: inline-block;
  height: 20px;
  margin-right: 8px;
  vertical-align: middle;
  width: 20px;
}
#block-ocbl-contacta .mail-icon::before,
#block-ocbl-estudis .mail-icon::before,
#block-ocbl-elsmesvisitats .mail-icon::before {
  background-image: url("../images/mail.svg");
}
#block-ocbl-contacta .phone-icon::before,
#block-ocbl-estudis .phone-icon::before,
#block-ocbl-elsmesvisitats .phone-icon::before {
  background-image: url("../images/phone.svg");
}

/* Pàgina de resultats del cercador del nucli (/search/node).
   Estil propi per al formulari (.search-form) i la llista de resultats
   (.search-results / .search-result__*), coherent amb la marca OCBL. */
.search-form {
  margin-bottom: 2.5rem;
}
.search-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.search-form .form-item-keys {
  margin: 0;
}
.search-form input[type=search] {
  border: 1px solid #d9d9d9;
  border-radius: 999px;
  max-width: 480px;
  padding: 10px 20px;
}
.search-form input[type=search]:focus {
  border-color: var(--ocbl-accent);
  box-shadow: 0 0 0 0.2rem rgba(18, 173, 149, 0.2);
}
.search-form input[type=submit] {
  background: var(--ocbl-accent);
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-weight: 600;
  margin-left: 0.5rem;
  padding: 10px 28px;
}
.search-form input[type=submit]:hover, .search-form input[type=submit]:focus {
  background: #0f9a85;
}

.search-help-link {
  display: none;
}

.search-results {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}
.search-results > li {
  border-bottom: 1px solid #e3e3e3;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
}
.search-results > li:last-child {
  border-bottom: 0;
}

.search-result__title {
  font-size: 1.35rem;
  margin: 0 0 0.5rem;
}
.search-result__title a {
  color: #051922;
  text-decoration: none;
}
.search-result__title a:hover {
  color: var(--ocbl-accent);
}

.search-result__snippet {
  color: #444;
  line-height: 1.6;
  margin: 0;
}
.search-result__snippet strong {
  color: var(--ocbl-accent);
  font-weight: 700;
}

.search-result__info:empty {
  display: none;
}

.pager .page-item.active .page-link,
.pager .page-item.is-active .page-link {
  background: var(--ocbl-accent);
  border-color: var(--ocbl-accent);
  color: #fff;
}

/*# sourceMappingURL=ocbl.css.map */