/* ══════════════════════════════════════════════════════════════
   Blocs del CMS (web/templates/blocs): mida, posició i proporció
   de les imatges. Les classes surten de les opcions de disseny
   validades a web/disseny_blocs.py (wb-<opció>-<valor>).
   ══════════════════════════════════════════════════════════════ */

.wb-titol { text-align: center; font-size: 1.8rem; font-weight: 700; margin: 0 0 24px; }

/* ── Marc d'imatge comú (proporció, enquadrament, vores) ───────── */
.wb-marc { position: relative; overflow: hidden; background: #f3f4f6; }
.wb-marc img { display: block; width: 100%; height: auto; }
.wb-prop-16-9 .wb-marc, .wb-marc.wb-prop-16-9 { aspect-ratio: 16 / 9; }
.wb-prop-4-3 .wb-marc,  .wb-marc.wb-prop-4-3  { aspect-ratio: 4 / 3; }
.wb-prop-1-1 .wb-marc,  .wb-marc.wb-prop-1-1  { aspect-ratio: 1 / 1; }
.wb-prop-3-4 .wb-marc,  .wb-marc.wb-prop-3-4  { aspect-ratio: 3 / 4; }
.wb-prop-16-9 .wb-marc img, .wb-prop-4-3 .wb-marc img,
.wb-prop-1-1 .wb-marc img, .wb-prop-3-4 .wb-marc img { height: 100%; object-fit: cover; }
.wb-prop-original .wb-marc { background: none; }

.wb-enq-centre .wb-marc img   { object-position: center center; }
.wb-enq-dalt .wb-marc img     { object-position: center top; }
.wb-enq-baix .wb-marc img     { object-position: center bottom; }
.wb-enq-esquerra .wb-marc img { object-position: left center; }
.wb-enq-dreta .wb-marc img    { object-position: right center; }

.wb-vores-arrodonides .wb-marc { border-radius: 14px; }
.wb-ombra-si .wb-marc { box-shadow: 0 10px 30px rgba(0, 0, 0, .14); }

/* ── Bloc Imatge ──────────────────────────────────────────────── */
.wb-imatge { margin: 48px auto; }
.wb-imatge + .wb-imatge { margin-top: -24px; }
.wb-mida-original { width: fit-content; max-width: 100%; }
.wb-mida-petita   { width: min(100%, 360px); }
.wb-mida-mitjana  { width: min(100%, 560px); }
.wb-mida-gran     { width: min(100%, 820px); }
.wb-mida-completa { width: 100%; }
.wb-mida-pantalla { width: 100vw; margin-left: calc(50% - 50vw) !important; margin-right: 0 !important; }
.wb-mida-pantalla .wb-marc { border-radius: 0 !important; }
.wb-alin-centre   { margin-left: auto; margin-right: auto; }
.wb-alin-esquerra { margin-left: 0; margin-right: auto; }
.wb-alin-dreta    { margin-left: auto; margin-right: 0; }
.wb-peu { margin: 8px 0 0; font-size: .9rem; color: #6b7280; text-align: center; }
.wb-alin-esquerra .wb-peu { text-align: left; }
.wb-alin-dreta .wb-peu { text-align: right; }
.wb-mida-pantalla .wb-peu { padding: 0 20px; }
a.wb-marc, button.wb-marc { display: block; }
button.wb-marc { padding: 0; border: 0; width: 100%; font: inherit; color: inherit; cursor: zoom-in; }
button.wb-marc:focus-visible, a.wb-marc:focus-visible { outline: 3px solid #2f6b4f; outline-offset: 2px; }

/* ── Bloc Galeria ─────────────────────────────────────────────── */
.wb-galeria { margin: 48px 0; }
.wb-graella { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--gap, 16px); }
.wb-cols-2 { --cols: 2; }
.wb-cols-3 { --cols: 3; }
.wb-cols-4 { --cols: 4; }
.wb-espai-petit { --gap: 6px; }
.wb-espai-mitja { --gap: 16px; }
.wb-espai-gran  { --gap: 28px; }
/* Proporció original: columnes tipus «mosaic» perquè no quedin forats */
.wb-prop-original.wb-graella { display: block; columns: var(--cols, 3); column-gap: var(--gap, 16px); }
.wb-prop-original.wb-graella .wb-marc { margin-bottom: var(--gap, 16px); break-inside: avoid; }
.wb-graella .wb-marc img { transition: transform .35s; }
.wb-graella button.wb-marc:hover img, .wb-graella button.wb-marc:focus-visible img { transform: scale(1.04); }
@media (max-width: 768px) { .wb-cols-3, .wb-cols-4 { --cols: 2; } }

/* Ampliació (lightbox) — web/static/web/blocs.js */
.wb-lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.wb-lightbox::backdrop { background: rgba(0, 0, 0, .9); }
.wb-lightbox-cos { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 56px 64px; box-sizing: border-box; }
.wb-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.wb-lightbox button { position: absolute; border: 0; background: rgba(255, 255, 255, .14); color: #fff; width: 44px; height: 44px;
  border-radius: 50%; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.wb-lightbox button:hover, .wb-lightbox button:focus-visible { background: rgba(255, 255, 255, .3); outline: none; }
.wb-lightbox .wb-lb-tancar { top: 12px; right: 12px; }
.wb-lightbox .wb-lb-ant { left: 12px; top: 50%; transform: translateY(-50%); }
.wb-lightbox .wb-lb-seg { right: 12px; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) { .wb-lightbox-cos { padding: 56px 8px; } }

/* ── Bloc Text i imatge ───────────────────────────────────────── */
.wb-ti { display: grid; gap: 40px; align-items: center; margin: 56px 0; grid-template-columns: var(--ti-a) var(--ti-b); }
.wb-mi-terc      { --ti-a: 1fr; --ti-b: 2fr; }
.wb-mi-meitat    { --ti-a: 1fr; --ti-b: 1fr; }
.wb-mi-dos-tercos { --ti-a: 2fr; --ti-b: 1fr; }
.wb-ti.wb-pos-dreta { grid-template-columns: var(--ti-b) var(--ti-a); }
.wb-ti.wb-pos-dreta .wb-ti-imatge { order: 2; }
.wb-ti.wb-av-dalt { align-items: start; }
.wb-ti.sense-imatge { grid-template-columns: 1fr; }
.wb-ti > * { min-width: 0; }
.wb-ti-text h2 { font-size: 1.7rem; font-weight: 700; margin: 0 0 14px; }
.wb-ti-text .ql-editor { padding: 0; line-height: 1.7; color: #374151; }
.wb-ti-text .wb-boto { margin-top: 20px; }
@media (max-width: 768px) {
  .wb-ti, .wb-ti.wb-pos-dreta { grid-template-columns: 1fr; gap: 20px; }
  .wb-ti.wb-pos-dreta .wb-ti-imatge { order: 0; }
}

.wb-boto { display: inline-block; background: #2f6b4f; color: #fff; padding: 12px 26px; border-radius: 10px;
  font-weight: 700; text-decoration: none; transition: transform .15s, filter .15s; }
.wb-boto:hover { color: #fff; filter: brightness(1.08); transform: translateY(-1px); }

/* ── Bloc Columnes ────────────────────────────────────────────── */
.wb-columnes { padding: 48px 0; }
.wb-columnes-graella { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 32px; }
.wb-columnes h3 { font-size: 1.1rem; font-weight: 600; margin: 0 0 8px; }
.wb-columnes .ql-editor { padding: 0; color: #4b5563; line-height: 1.7; font-size: .95rem; overflow: visible; }
@media (max-width: 768px) { .wb-columnes-graella { grid-template-columns: 1fr; } }

/* ── Bloc Portada (hero) i Banner amb imatge de fons ──────────── */
.wb-fons { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.wb-fons > .wb-fons-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wb-fons.wb-enq-dalt > .wb-fons-img     { object-position: center top; }
.wb-fons.wb-enq-baix > .wb-fons-img     { object-position: center bottom; }
.wb-fons.wb-enq-esquerra > .wb-fons-img { object-position: left center; }
.wb-fons.wb-enq-dreta > .wb-fons-img    { object-position: right center; }
.wb-fons.amb-imatge::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, calc(var(--foscor, 45) / 100)); }
.wb-fons > .wb-fons-cos { position: relative; z-index: 1; }

.wb-hero { margin: 48px 0; border-radius: 16px; color: #fff; text-align: center; padding: 48px 24px;
  background: linear-gradient(135deg, #1e4a35, #2f6b4f 55%, #4a8f6a); }
.wb-alcada-petita   { min-height: 260px; }
.wb-alcada-mitjana  { min-height: 380px; }
.wb-alcada-gran     { min-height: 520px; }
.wb-alcada-pantalla { min-height: 85vh; }
.wb-hero .wb-fons-cos { width: 100%; max-width: 900px; }
.wb-hero h2 { font-size: clamp(1.9rem, 4.5vw, 3rem); font-weight: 800; margin: 0 0 16px; text-shadow: 0 2px 14px rgba(0, 0, 0, .3); }
.wb-hero p { font-size: clamp(1rem, 2vw, 1.25rem); margin: 0 auto 28px; max-width: 640px; opacity: .95; }
.wb-hero.wb-txt-esquerra { justify-content: flex-start; text-align: left; }
.wb-hero.wb-txt-esquerra p { margin-left: 0; }
.wb-hero .wb-boto { background: #fff; color: #1f2937; }
.wb-hero .wb-boto:hover { color: #1f2937; }

.wb-banner { padding: 64px 20px; text-align: center; }
.wb-banner .wb-fons-cos { max-width: 800px; }
.wb-banner h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 700; margin: 0 0 12px; }
.wb-banner p { font-size: 1.1rem; opacity: .9; max-width: 600px; margin: 0 auto 24px; }
.wb-banner .wb-boto, .wb-banner .wb-boto:hover { background: #fff; }

/* ── Bloc Vídeo ───────────────────────────────────────────────── */
.wb-video { margin: 48px auto; }
.wb-video .wb-marc { aspect-ratio: 16 / 9; background: #000; }
.wb-video iframe, .wb-video video { display: block; width: 100%; height: 100%; border: 0; }

/* ── Bloc Separador ───────────────────────────────────────────── */
.wb-sep { display: flex; align-items: center; }
.wb-sep-petit { height: 24px; }
.wb-sep-mitja { height: 80px; }
.wb-sep-gran  { height: 120px; }
.wb-sep hr { width: 100%; border: 0; border-top: 1px solid #e5e7eb; margin: 0; }