/* =========================================================
   LAYOUT BUILDER - Base
   ========================================================= */

.layout-builder-block {
  max-width: 100%;
}

.layout-builder__section {
  margin: 0;
}

.layout,
.layout--onecol,
.layout--twocol-section,
.layout--threecol-section,
.layout--fourcol-section {
  width: 100%;
}

.layout__region {
  min-width: 0;
}

.views-element-container {
  min-width: 0;
}

/* =========================================================
   Contenidor real de seccions de contingut
   ========================================================= */

main .layout--onecol:not(:first-of-type),
main .layout--twocol-section,
main .layout--fourcol-section {
  width: min(100% - 2rem, var(--bisbat-container));
  margin-inline: auto;
  margin-top: var(--bisbat-space-7);
  position: relative;
  padding-top: 3rem;
}

/* Separador visual corporatiu */
main .layout--onecol:not(:first-of-type)::before,
main .layout--twocol-section::before,
main .layout--fourcol-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1%;
  right: 1%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(58, 159, 195, 0.22),
    rgba(58, 159, 195, 0.70),
    rgba(58, 159, 195, 0.22),
    transparent
  );
}

/* =========================================================
   4 columnes - Quick links
   ========================================================= */

.layout--fourcol-section {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

/* =========================================================
   HOME - Secció Actualitat + vídeo
   Aquesta secció és 67/33
   ========================================================= */

.path-frontpage .layout--twocol-section.layout--twocol-section--67-33 {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(340px, 1fr);
  column-gap: 2rem;
  row-gap: 2rem;
  align-items: start;
}

.path-frontpage .layout--twocol-section.layout--twocol-section--67-33 > .layout__region {
  min-width: 0;
}

.path-frontpage .layout--twocol-section.layout--twocol-section--67-33 > .layout__region--first {
  display: flex;
  flex-direction: column;
}

.path-frontpage .layout--twocol-section.layout--twocol-section--67-33 > .layout__region--first .views-element-container,
.path-frontpage .layout--twocol-section.layout--twocol-section--67-33 > .layout__region--first .news-cards {
  flex: 0 0 auto;
}

/* Grid de cards més compacte perquè no es vegin estirades */
.path-frontpage .layout--twocol-section.layout--twocol-section--67-33 > .layout__region--first .news-cards .views-view-grid {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.path-frontpage .layout--twocol-section.layout--twocol-section--67-33 > .layout__region--first .news-cards .views-view-grid > div,
.path-frontpage .layout--twocol-section.layout--twocol-section--67-33 > .layout__region--first .news-cards .views-row {
  display: flex;
  gap: 1rem;
}

/* Cards d'Actualitat una mica més estretes */
.path-frontpage .layout--twocol-section.layout--twocol-section--67-33 > .layout__region--first .news-cards .views-view-grid > div > div,
.path-frontpage .layout--twocol-section.layout--twocol-section--67-33 > .layout__region--first .news-cards .views-row .views-col {
  width: 200px !important;
  max-width: 200px;
  flex: 0 0 200px;
}

/* Vídeo: tocar el contenidor real */
.path-frontpage .layout--twocol-section.layout--twocol-section--67-33 > .layout__region--second {
  display: flex;
  align-items: stretch;
}

.path-frontpage .layout--twocol-section.layout--twocol-section--67-33 > .layout__region--second .home-video {
  width: 100%;
  height: 100%;
}

.path-frontpage .layout--twocol-section.layout--twocol-section--67-33 > .layout__region--second .home-video .container {
  width: 100%;
  max-width: none;
  padding: 0;
}

.path-frontpage .layout--twocol-section.layout--twocol-section--67-33 > .layout__region--second .home-video__card {
  width: 100%;
  height: 100%;
}

.path-frontpage .layout--twocol-section.layout--twocol-section--67-33 > .layout__region--second .home-video__thumbnail {
  width: 100%;
  min-height: 300px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* =========================================================
   HOME - Secció Bisbe + calendari
   Aquesta secció és 33/67
   ========================================================= */

.path-frontpage .layout--twocol-section.layout--twocol-section--33-67 {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.5fr);
  column-gap: 2rem;
  row-gap: 2rem;
  align-items: stretch;
}

.path-frontpage .layout--twocol-section.layout--twocol-section--33-67 > .layout__region {
  min-width: 0;
}

.path-frontpage .layout--twocol-section.layout--twocol-section--33-67 > .layout__region--first {
  padding-right: 0.5rem;
}

.path-frontpage .layout--twocol-section.layout--twocol-section--33-67 > .layout__region--second {
  padding-left: 0.5rem;
}

/* La card del bisbe ha d'omplir bé la columna */
.path-frontpage .layout--twocol-section.layout--twocol-section--33-67 > .layout__region--first .bishop-card {
  display: block;
  height: 100%;
}

.path-frontpage .layout--twocol-section.layout--twocol-section--33-67 > .layout__region--first .bishop-card__inner {
  height: 100%;
}

/* Ajust fi per fer el bloc una mica més compacte */
.path-frontpage .bishop-card__inner {
  padding: 1.5rem;
}

.path-frontpage .bishop-card__title {
  margin-bottom: 1.25rem;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
}

.path-frontpage .bishop-card__media {
  margin-bottom: 1.25rem;
}

.path-frontpage .bishop-card__text {
  font-size: 1.02rem;
  line-height: 1.5;
}

/* El hero slider no ha de tenir separador superior */
.path-frontpage .layout--onecol:has(.hero-slider) {
  margin-top: 0;
  padding-top: 0;
}

.path-frontpage .layout--onecol:has(.hero-slider)::before {
  display: none;
  content: none;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1000px) {
  .layout--fourcol-section {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .path-frontpage .layout--twocol-section.layout--twocol-section--67-33,
  .path-frontpage .layout--twocol-section.layout--twocol-section--33-67 {
    grid-template-columns: 1fr;
  }

  .path-frontpage .layout--twocol-section.layout--twocol-section--33-67 > .layout__region--first,
  .path-frontpage .layout--twocol-section.layout--twocol-section--33-67 > .layout__region--second {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 768px) {
  main .layout--twocol-section,
  main .layout--fourcol-section,
  main .layout--onecol:not(:first-of-type) {
    width: min(100% - 1.25rem, var(--bisbat-container));
  }
}

@media (max-width: 640px) {
  .layout--fourcol-section {
    grid-template-columns: 1fr;
  }

  .path-frontpage .layout--twocol-section.layout--twocol-section--67-33 > .layout__region--first .news-cards .views-view-grid > div > div,
  .path-frontpage .layout--twocol-section.layout--twocol-section--67-33 > .layout__region--first .news-cards .views-row .views-col {
    width: 100% !important;
    max-width: none;
    flex: 1 1 100%;
  }
}