/* CDTH Web · Activitats dirigides: cartell amb graella interactiva ([cdth_dirigides vista="cartell"]).
   Rèplica del cartell de Canva 2026-2027: columna blava amb el títol i graella blanca amb línies negres. */
@font-face { font-family: "CDTH Fredoka"; src: url("fonts/fredoka-600.woff") format("woff"); font-weight: 600; font-display: swap; }
@font-face { font-family: "CDTH Fredoka"; src: url("fonts/fredoka-700.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "CDTH Quicksand"; src: url("fonts/quicksand-700.woff") format("woff"); font-weight: 700; font-display: swap; }

.cdth-dgc {
	--blau: #266298; --blau-f: #17406A; --navy: #1D2B4F; --vermell: #CC0033; --linia: #1A1A1A;
	--tcol: 58px; --row: 26px;
	container-type: inline-size; container-name: dgc;
	margin: 0 0 32px; font-family: "CDTH Quicksand", Montserrat, "Helvetica Neue", Arial, sans-serif; color: #1A1A1A;
}
.cdth-dgc *, .cdth-dgc *::before, .cdth-dgc *::after { box-sizing: border-box; }
.cdth-dgc button { font-family: inherit; }
.cdth-dgc-in { display: grid; grid-template-columns: minmax(250px, 30%) minmax(0, 1fr); overflow: hidden; border-radius: 14px; background: var(--blau); }

/* ---------- Columna blava ---------- */
.cdth-dgc-side { container-type: inline-size; container-name: dgcside; position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: 28px 22px 26px; color: #fff; overflow: hidden;
	background: linear-gradient(160deg, #2C6CA8 0%, var(--blau) 45%, #1F5487 100%); }
.cdth-dgc-side::before { content: ""; position: absolute; inset: 0; z-index: -2; opacity: .12;
	background: repeating-linear-gradient(-55deg, transparent 0 26px, #fff 26px 28px); }
/* Foto en blau (duotò com al cartell): la foto en grisos, tenyida de blau mantenint-ne la llum. */
.cdth-dgc-side.has-foto { background: #1F5487; }
.cdth-dgc-side.has-foto::before { opacity: 1; background: var(--foto) center / cover no-repeat; filter: grayscale(1) contrast(.95) brightness(1.05); }
.cdth-dgc-side.has-foto::after { content: ""; position: absolute; inset: 0; z-index: -1; background: #2A6BB0; mix-blend-mode: color; }
.cdth-dgc-side.has-foto .cdth-dgc-side-top::before { content: ""; position: absolute; inset: 0 0 auto; height: 55%; z-index: -1; background: linear-gradient(180deg, rgba(23,64,106,.55), transparent); }
.cdth-dgc .cdth-dgc-title { display: flex; flex-direction: column; margin: 0 !important; padding: 0 !important; color: #fff !important;
	font: 700 clamp(28px, 17cqi, 64px)/.92 "CDTH Fredoka", "Fredoka", Montserrat, sans-serif !important; letter-spacing: .01em; text-transform: uppercase !important; }
.cdth-dgc-yearrow { display: flex; align-items: center; gap: 0; margin-top: 8px; }
.cdth-dgc .cdth-dgc-year { flex: 1; margin: 0 !important; padding: 2px 10px 1px; background: #fff; color: var(--navy); border-radius: 0 0 0 4px;
	font: 700 clamp(14px, 6.2cqi, 21px)/1.15 "CDTH Fredoka", sans-serif; letter-spacing: .04em; }
/* !important: Elementor posa a les imatges border-radius 0 i sense ombra (sortia un requadre blanc). */
.cdth-dgc .cdth-dgc-escut { flex: none; width: 62px !important; height: 62px !important; max-width: none !important; margin: 0 0 0 -6px !important; padding: 3px !important; border-radius: 50% !important; background: #fff !important; box-shadow: 0 3px 10px rgba(0,0,0,.25) !important; object-fit: contain; }
.cdth-dgc-side-bottom { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.cdth-dgc .cdth-dgc-badge { margin: 0 !important; padding: 10px 14px; background: var(--vermell); color: #fff; border-radius: 3px; box-shadow: 0 4px 14px rgba(0,0,0,.22);
	font: 600 clamp(15px, 6.4cqi, 22px)/1.25 "CDTH Fredoka", sans-serif; }
.cdth-dgc .cdth-dgc-nota { display: block; margin: 0 !important; padding: 8px 12px; background: #fff; color: var(--navy) !important; border-radius: 3px; text-decoration: none !important;
	font: 600 clamp(13px, 4.8cqi, 16px)/1.3 "CDTH Fredoka", sans-serif; }
a.cdth-dgc-nota:hover { box-shadow: inset 0 0 0 2px var(--vermell); }

/* ---------- Targeta blanca ---------- */
.cdth-dgc-card { position: relative; min-width: 0; margin: 14px 14px 14px 0; padding: 14px 16px 12px; border-radius: 6px; background: #fff; }
.cdth-dgc-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.cdth-dgc-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 11px; border: 1.5px solid #D5D8DD !important; border-radius: 999px !important;
	background: #fff !important; color: #1A1A1A !important; box-shadow: none !important; cursor: pointer; text-transform: none !important; letter-spacing: 0 !important;
	font: 700 12.5px/1 "CDTH Quicksand", Montserrat, sans-serif !important; transition: border-color .15s, background .15s; }
.cdth-dgc-chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.cdth-dgc-chip:hover { border-color: #9AA0A8 !important; }
.cdth-dgc-chip[aria-pressed="true"] { border-color: var(--c, #1A1A1A) !important; background: color-mix(in srgb, var(--c, #1A1A1A) 14%, #fff) !important; }
.cdth-dgc-chip.is-all[aria-pressed="true"] { background: #1A1A1A !important; border-color: #1A1A1A !important; color: #fff !important; }

/* Graella */
.cdth-dgc-grid { position: relative; display: grid; }
.cdth-dgc-day { display: flex; align-items: center; justify-content: center; border-left: 2px solid var(--linia); border-bottom: 2px solid var(--linia);
	font: 700 13px/1 "CDTH Quicksand", sans-serif; letter-spacing: .03em; text-transform: uppercase; }
.cdth-dgc-day span { padding: 5px 8px; border-radius: 4px; }
.cdth-dgc-day.is-today span { background: var(--vermell); color: #fff; }
.cdth-dgc-day.is-today span::after { content: " · avui"; text-transform: lowercase; font-weight: 700; }
.cdth-dgc-h { grid-column: 1; display: flex; align-items: center; justify-content: center; border-bottom: 1.5px solid var(--linia);
	font: 700 11.5px/1 "CDTH Quicksand", sans-serif; font-variant-numeric: tabular-nums; }
.cdth-dgc-c { border-bottom: 1.5px solid var(--linia); border-left: 1px solid #9EA3AA; }
.cdth-dgc-c.is-d0 { border-left: 2px solid var(--linia); }
.cdth-dgc-c.is-today { background: rgba(204, 0, 51, .045); }
.cdth-dgc-cut { height: 0; align-self: center; border-top: 2px solid var(--vermell); }

/* Blocs d'activitat: tapen les cel·les (sense deixar veure la graella) i
   conserven les línies negres del contorn, com al cartell. */
.cdth-dgc-b { container-type: inline-size; position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; margin: 0;
	padding: 6px 5px; border: 0 !important; border-radius: 0 !important; background: var(--c) !important; color: #fff !important; box-shadow: none !important; cursor: pointer; overflow: hidden;
	transition: transform .15s, box-shadow .15s, opacity .2s, filter .2s; text-transform: none !important; letter-spacing: 0 !important; }
.cdth-dgc-b::before { content: ""; position: absolute; inset: 0; z-index: 1; border-left: 2px solid var(--linia); border-bottom: 1.5px solid var(--linia); pointer-events: none; }
.cdth-dgc-b.is-lane::before { border-left: 1px solid rgba(0,0,0,.35); }
.cdth-dgc-b > * { position: relative; z-index: 2; }
.cdth-dgc-b:hover, .cdth-dgc-b:focus-visible { z-index: 3; transform: scale(1.035); box-shadow: 0 8px 20px rgba(0,0,0,.25) !important; outline: none; }
.cdth-dgc-b:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--linia) !important; }
.cdth-dgc .cdth-dgc-art { border-radius: 0 !important; box-shadow: none !important; display: block; width: auto !important; max-width: 92% !important; height: auto !important; max-height: 72%; min-height: 0; flex: 0 1 auto; object-fit: contain; pointer-events: none; }
.cdth-dgc-b.is-short .cdth-dgc-art { max-height: 58%; }
.cdth-dgc-nom { font: 700 15px/1.05 "CDTH Fredoka", sans-serif; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.2); }
.cdth-dgc-lloc { flex: none; max-width: 92%; padding: 2px 10px 1px; border-radius: 999px; background: #fff; color: var(--cf);
	font: 700 clamp(7.5px, 9.5cqi, 10.5px)/1.2 "CDTH Fredoka", sans-serif; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cdth-dgc-b.is-short .cdth-dgc-lloc { font-size: clamp(7px, 8.5cqi, 9px); padding: 1px 6px; }
.cdth-dgc-b.is-off { opacity: .14; filter: grayscale(.7); }
.cdth-dgc-b.is-now::after { content: "ARA"; position: absolute; top: 4px; right: 4px; padding: 2px 6px; border-radius: 999px; background: #fff; color: var(--vermell);
	font: 700 9.5px/1.2 "CDTH Fredoka", sans-serif; letter-spacing: .08em; animation: cdthDgcPulse 1.6s ease-in-out infinite; }
.cdth-dgc-b.is-sel { z-index: 4; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--linia), 0 10px 24px rgba(0,0,0,.25) !important; }
@keyframes cdthDgcPulse { 50% { opacity: .55; } }

/* Línia de l'hora actual */
.cdth-dgc-now { position: absolute; z-index: 5; height: 0; border-top: 2px solid var(--vermell); pointer-events: none; }
.cdth-dgc-now::before { content: ""; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--vermell); }
.cdth-dgc-now span { position: absolute; right: 0; top: -19px; padding: 1px 6px; border-radius: 4px; background: var(--vermell); color: #fff; font: 700 10px/1.4 "CDTH Fredoka", sans-serif; letter-spacing: .06em; text-transform: uppercase; }

/* Fitxa d'una sessió */
.cdth-dgc-pop { position: absolute; z-index: 20; width: 260px; padding: 0 16px 14px; border-radius: 10px; background: #fff; box-shadow: 0 16px 40px rgba(0,0,0,.28); overflow: hidden; }
.cdth-dgc-pop[hidden] { display: none; }
.cdth-dgc-pop-x { position: absolute; top: 6px; right: 6px; z-index: 2; width: 30px; height: 30px; border: 0 !important; border-radius: 50% !important; background: rgba(0,0,0,.25) !important; color: #fff !important;
	font: 700 20px/1 Arial, sans-serif !important; cursor: pointer; padding: 0 !important; box-shadow: none !important; }
.cdth-dgc-pop-art { display: flex; align-items: center; justify-content: center; height: 96px; margin: 0 -16px 12px; background: var(--c, var(--blau)); }
.cdth-dgc-pop-art img { max-width: 70%; max-height: 72px; }
.cdth-dgc-pop-art span { color: #fff; font: 700 24px/1 "CDTH Fredoka", sans-serif; }
.cdth-dgc .cdth-dgc-pop p { margin: 0 0 4px !important; line-height: 1.35; }
.cdth-dgc-pop-t { font: 700 19px/1.2 "CDTH Fredoka", sans-serif; color: #1A1A1A; }
.cdth-dgc-pop-w { font: 700 15px/1.3 "CDTH Quicksand", sans-serif; color: #1A1A1A; }
.cdth-dgc-pop-l { font-size: 13px; font-weight: 700; color: var(--cf, #555); text-transform: uppercase; letter-spacing: .05em; }
.cdth-dgc-pop-l:empty, .cdth-dgc-pop-s:empty { display: none; }
.cdth-dgc-pop-s { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--vermell); color: #fff; font: 700 11px/1.4 "CDTH Fredoka", sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.cdth-dgc-pop-n { margin-top: 10px !important; padding-top: 10px; border-top: 1px solid #E3E5E8; font-size: 13px; color: #4A4F57; }

.cdth-dgc .cdth-dgc-upd { margin: 10px 0 0 !important; font: 600 11.5px/1.4 "CDTH Quicksand", sans-serif; color: #6B6F76; text-align: right; }

/* ---------- Agenda (mòbil) ---------- */
.cdth-dgc-agenda { display: none; }
.cdth-dgc-tabs { display: flex; gap: 6px; margin: 0 0 12px; overflow-x: auto; scrollbar-width: none; }
.cdth-dgc-tab { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 50px; min-height: 48px; padding: 6px 8px;
	border: 2px solid var(--linia) !important; border-radius: 8px !important; background: #fff !important; color: var(--linia) !important; box-shadow: none !important; cursor: pointer;
	font: 700 15px/1 "CDTH Fredoka", sans-serif !important; text-transform: uppercase !important; letter-spacing: .02em !important; }
.cdth-dgc-tab small { display: none; }
.cdth-dgc-tab abbr { text-decoration: none; border: 0; text-transform: none; }
.cdth-dgc-tab.is-today { border-color: var(--vermell) !important; color: var(--vermell) !important; }
.cdth-dgc-tab[aria-selected="true"] { background: var(--linia) !important; color: #fff !important; }
.cdth-dgc-tab.is-today[aria-selected="true"] { background: var(--vermell) !important; color: #fff !important; }
.cdth-dgc .cdth-dgc-dname { margin: 0 0 10px !important; padding: 0 !important; font: 700 20px/1.2 "CDTH Fredoka", sans-serif !important; text-transform: uppercase !important; color: var(--linia) !important; }
.cdth-dgc-dlist { display: grid; gap: 8px; }
.cdth-dgc-dlist[hidden] { display: none; }
.cdth-dgc-empty { margin: 0; color: #6B6F76; font-weight: 700; }
.cdth-dgc-li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 78px; padding: 10px 14px; border: 0 !important; border-radius: 8px !important;
	background: var(--c) !important; color: #fff !important; box-shadow: none !important; cursor: pointer; text-align: left; text-transform: none !important; letter-spacing: 0 !important; }
.cdth-dgc-li.is-off { display: none; }
.cdth-dgc-li-art { display: flex; align-items: center; min-width: 0; }
.cdth-dgc-li-art .cdth-dgc-art { max-width: 100% !important; max-height: 58px; }
.cdth-dgc-li-t { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.cdth-dgc-li-t time { padding: 4px 9px; border-radius: 6px; background: #fff; color: var(--cf); font: 700 15px/1.1 "CDTH Fredoka", sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cdth-dgc-li-t small { padding: 1px 8px; border-radius: 999px; background: rgba(255,255,255,.9); color: var(--cf); font: 700 10px/1.4 "CDTH Fredoka", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.cdth-dgc-li.is-now .cdth-dgc-li-t time::before { content: "Ara · "; color: var(--vermell); }

/* ---------- Mides ---------- */
@container dgc (max-width: 1100px) {
	.cdth-dgc { --tcol: 50px; --row: 24px; }
	.cdth-dgc-day { font-size: 12px; }
}
@container dgc (max-width: 900px) {
	.cdth-dgc-in { grid-template-columns: 1fr; }
	.cdth-dgc-side { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 16px 24px; padding: 22px; }
	.cdth-dgc-side-top { flex: 1 1 300px; }
	.cdth-dgc-side-bottom { flex: 1 1 240px; align-items: flex-end; }
	.cdth-dgc-card { margin: 0 12px 12px; }
}
@container dgc (max-width: 680px) {
	.cdth-dgc-grid { display: none; }
	.cdth-dgc-agenda { display: block; }
	.cdth-dgc-side-bottom { align-items: flex-start; }
	.cdth-dgc-card { margin: 0 8px 8px; padding: 12px; }
	.cdth-dgc-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -12px; padding-right: 12px; }
	.cdth-dgc-chip { flex: none; }
	.cdth-dgc-pop { position: fixed; left: 12px !important; right: 12px; top: auto !important; bottom: 12px; width: auto; }
	.cdth-dgc .cdth-dgc-upd { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
	.cdth-dgc-b, .cdth-dgc-b:hover { transition: none; transform: none; }
	.cdth-dgc-b.is-now::after { animation: none; }
}