/**
 * SE7 Events — el vestit de les tres skins.
 *
 * Els noms de classe són els del MEC a propòsit (vegeu class-se7e-skins.php):
 * així els retocs de CSS que cada web ja tingui al tema segueixen aplicant-se.
 * Aquest full és nostre i està escrit des de zero; el del MEC no es copia.
 *
 * Tot va sota `.se7e` perquè, si un dia conviuen, no ens trepitgem amb ells.
 */

.se7e .mec-event-article {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 16px 0;
	border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.se7e .mec-event-article:last-child {
	border-bottom: 0;
}

/* La data, a l'esquerra. */
.se7e .mec-event-date {
	flex: 0 0 64px;
	text-align: center;
	line-height: 1.1;
}

.se7e .mec-start-date-label {
	display: block;
	font-size: 28px;
	font-weight: 700;
}

.se7e .mec-event-date-info,
.se7e .mec-event-month {
	display: block;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .04em;
	opacity: .75;
}

.se7e .mec-event-content {
	flex: 1 1 auto;
	min-width: 0;
}

.se7e .mec-event-title {
	margin: 0 0 4px;
	font-size: 18px;
	line-height: 1.3;
}

.se7e .mec-event-title a {
	text-decoration: none;
}

.se7e .mec-event-detail {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	font-size: 14px;
	opacity: .8;
}

.se7e .mec-category {
	display: inline-block;
	padding: 1px 8px;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 12px;
}

.se7e .mec-event-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
}

/* --- Tile: quadrícula --- */
.se7e .mec-skin-tile-events-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 24px;
}

.se7e .mec-skin-tile-events-container .mec-event-article {
	display: block;
	padding: 0;
	border-bottom: 0;
}

/*
 * LA CAPA DE LA FITXA. El marcatge posa un enllaç BUIT que ha de cobrir tota la
 * fitxa, com fa el MEC. Sense aquestes tres regles l'enllaç fa zero píxels
 * d'alt —un <a> en bloc sense contingut no forma cap caixa— i la vista es
 * quedava sense cap manera d'arribar a l'esdeveniment: ni clicant ni amb el
 * teclat. Emetre la capa i no vestir-la era pitjor que no posar-la.
 */
.se7e .mec-skin-tile-events-container .mec-event-content {
	position: relative;
}

.se7e .mec-tile-into-content-link {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	z-index: 1;
	text-decoration: none;
	color: inherit;
}

/*
 * El contingut va per damunt de la capa però la deixa passar: així es clica a
 * qualsevol punt de la fitxa i s'arriba a l'esdeveniment. (El text d'una fitxa
 * amb capa no es pot seleccionar; al MEC tampoc.)
 */
.se7e .mec-tile-event-content {
	position: relative;
	z-index: 2;
	pointer-events: none;
}

/* …tret del que ja és clicable de per si (el lloc, les categories), que sí. */
.se7e .mec-tile-event-content a {
	pointer-events: auto;
	position: relative;
	z-index: 3;
}

.se7e .mec-tile-into-content-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.se7e .mec-tile-event-content {
	padding: 12px 0;
}

/* --- Carousel: en fila, amb desplaçament --- */
.se7e .mec-skin-carousel-events-container {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 8px;
}

.se7e .mec-skin-carousel-events-container .mec-event-article {
	flex: 0 0 260px;
	scroll-snap-align: start;
	display: block;
	padding: 0;
	border-bottom: 0;
}

.se7e .mec-skin-carousel-events-container a {
	text-decoration: none;
	color: inherit;
}

.se7e .mec-event-carousel-content {
	padding: 12px 0;
}

.se7e .mec-event-date-carousel {
	display: flex;
	align-items: baseline;
	gap: 6px;
}

.se7e .mec-event-date-carousel .mec-start-date-label {
	font-size: 20px;
}

.se7e .mec-carousel-event-location {
	font-size: 13px;
	opacity: .75;
}

/* Sense res a ensenyar. */
.se7e-buit .se7e-cap {
	margin: 0;
	padding: 16px 0;
	opacity: .7;
}

@media (max-width: 480px) {
	.se7e .mec-event-date {
		flex-basis: 52px;
	}

	.se7e .mec-start-date-label {
		font-size: 22px;
	}
}

/* --- La fitxa de l'esdeveniment: quan és i on --- */
.se7e-quan{display:flex;flex-wrap:wrap;gap:24px 48px;margin:0 0 24px;padding:16px 0;border-top:1px solid rgba(0,0,0,.08);border-bottom:1px solid rgba(0,0,0,.08)}
.se7e-quan .mec-single-title{margin:0 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;opacity:.7}
.se7e-quan__data{margin:0;font-size:17px;line-height:1.4}
.se7e-quan__data .mec-event-time{display:block;font-size:15px;opacity:.8}
.se7e-quan__mes{margin:10px 0 2px;font-size:13px;opacity:.7}
.se7e-quan__llista{margin:0;padding-left:18px;font-size:14px;opacity:.85}
.se7e-quan__llista li{margin:0 0 4px}
.se7e-quan__dia--anullat .se7e-quan__dia{text-decoration:line-through;opacity:.7}
.se7e-quan__hora{margin-left:6px;font-weight:600}
.se7e-quan__llista .se7e-anullat{margin-left:6px;font-size:11px;padding:1px 7px}
.se7e-quan__llista .se7e-anullat-motiu{margin-left:6px}

/* «Apunta-t'ho»: el .ics, el Google Calendar i la subscripció. */
.se7e-apunta{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.se7e-apunta__boto{display:inline-block;padding:7px 14px;border:1px solid currentColor;border-radius:4px;font-size:14px;line-height:1.2;text-decoration:none}
.se7e-apunta__boto:hover,.se7e-apunta__boto:focus-visible{text-decoration:underline}
.se7e-apunta__nota{margin:8px 0 0;font-size:13px;opacity:.75}

/* --- Graella del mes (tile i vista mensual) --- */
.se7e .mec-calendar-table{margin:0 0 20px}
.se7e .mec-calendar-table-head,
.se7e .mec-calendar-row{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:rgba(0,0,0,.08)}
.se7e .mec-calendar-row{margin:0}
.se7e .mec-calendar-day-head{padding:6px 4px;text-align:center;font-size:11px;text-transform:uppercase;letter-spacing:.05em;opacity:.7;background:#fff}
.se7e .mec-calendar-day{min-height:48px;padding:6px;background:#fff;text-align:center;font-size:13px;margin:0}
.se7e .mec-table-nullday{background:rgba(0,0,0,.02)}
.se7e .mec-has-event-a{display:block;font-weight:700;text-decoration:none;border-radius:50%;padding:2px 0}
.se7e .mec-selected-day{background:rgba(0,0,0,.06)}
.se7e .mec-selected-day .mec-has-event-a{text-decoration:underline}
.se7e .mec-calendar-events-sec{margin-top:4px}

/* Vista mensual: graella a l'esquerra, dia triat a la dreta. En pantalla
   estreta, l'una sota l'altra. */
.se7e.mec-box-calendar{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px;align-items:start}
.se7e .mec-calendar-events-side .mec-event-article{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.08)}
.se7e .mec-calendar-events-side .mec-event-image{flex:0 0 72px}
.se7e .mec-calendar-events-side .mec-event-image img{width:100%;height:auto;border-radius:4px}
.se7e .mec-table-side-title{margin:0 0 8px;font-size:14px}
.se7e .mec-table-side-day{font-size:22px;font-weight:700;margin-right:6px}
@media (max-width:782px){.se7e.mec-box-calendar{grid-template-columns:1fr}}
.se7e .mec-calendar-header{margin:0;font-size:18px;text-align:center}
.se7e .mec-month-navigator{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
.se7e .mec-load-month-link{text-decoration:none;font-size:14px}

/* --- Pàgines de les vistes planes --- */
.se7e-pagines{display:flex;gap:10px;justify-content:center;margin:22px 0 0}
.se7e-pagines__boto{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:1px solid currentColor;border-radius:4px;font-size:14px;text-decoration:none}
.se7e-pagines__boto:hover,.se7e-pagines__boto:focus-visible{text-decoration:underline}

/* --- Horari, setmana i dia --- */
.se7e .mec-calendar-d-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}
.se7e .mec-current-week,.se7e .mec-current-day{margin:0;font-size:16px;text-align:center}
.se7e .mec-load-week a,.se7e .mec-table-d-prev,.se7e .mec-table-d-next{text-decoration:none;font-size:14px}
.se7e .mec-weekly-view-week{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;margin:0 0 18px;background:rgba(0,0,0,.08)}
.se7e .mec-weekly-view-week dt{margin:0;background:#fff;text-align:center}
.se7e .mec-weekly-view-week dt a{display:block;padding:8px 4px;text-decoration:none;color:inherit}
.se7e .mec-weekly-view-day-name{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;opacity:.7}
.se7e .mec-weekly-view-day-number{display:block;font-size:18px;line-height:1.2}
.se7e .mec-timetable-day.mec-has-event .mec-weekly-view-day-number{font-weight:700}
.se7e .mec-timetable-has-no-event .mec-weekly-view-day-number{opacity:.45}
.se7e .mec-timetable-day-active{background:rgba(0,0,0,.06)}
.se7e .mec-timetable-day-active .mec-weekly-view-day-number{text-decoration:underline}
.se7e .mec-timetable-event{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.08)}
.se7e .mec-timetable-event-time{flex:0 0 110px;font-weight:700;font-variant-numeric:tabular-nums}
.se7e .mec-timetable-event-title{flex:1 1 220px;font-size:16px}
.se7e .mec-timetable-event-title a{text-decoration:none}
.se7e .mec-timetable-event-location,.se7e .mec-timetable-event-organizer{font-size:13px;opacity:.75}
/* Vista de setmana: set columnes que passen a una sola en pantalla estreta. */
.se7e .mec-calendar-weekly:not(.mec-calendar-timetable) .mec-weeks-container{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}
.se7e .mec-weekly-view-day{margin:0 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;opacity:.7}
.se7e .mec-weekly-view-dates-events .mec-event-article{display:block;padding:8px 0;border-bottom:1px solid rgba(0,0,0,.06)}
.se7e .mec-weekly-view-dates-events .mec-event-title{font-size:14px;margin:2px 0}
.se7e .mec-weekly-view-dates-events .mec-event-time{font-size:12px;font-weight:700}
.se7e .mec-weekly-view-dates-events .mec-event-loc-place{font-size:12px;opacity:.75}
.se7e .mec-date-labels-container{display:flex;justify-content:space-between;gap:12px;margin:0 0 14px}
/* Vista de dia: la tira del mes, que es desplaça amb el dit. */
.se7e .mec-daily-view-date-labels{display:flex;gap:4px;overflow-x:auto;padding:0 0 8px;margin:0 0 16px;scroll-snap-type:x proximity}
.se7e .mec-daily-view-day{flex:0 0 38px;scroll-snap-align:center;padding:8px 0;text-align:center;text-decoration:none;color:inherit;border-radius:4px;font-size:14px;opacity:.55}
.se7e .mec-daily-view-day.mec-has-event{opacity:1;font-weight:700}
.se7e .mec-daily-view-day-active{background:rgba(0,0,0,.08);opacity:1}
.se7e .mec-daily-view-dates-events .mec-event-article{display:block;padding:14px 0;border-bottom:1px solid rgba(0,0,0,.08)}
.se7e .mec-weekly-contents-wrapper{display:flex;gap:16px;align-items:flex-start}
.se7e .mec-weekly-contents-wrapper .mec-event-image{flex:0 0 120px}
.se7e .mec-weekly-contents{flex:1 1 auto;min-width:0}
@media (max-width:782px){
	.se7e .mec-calendar-weekly:not(.mec-calendar-timetable) .mec-weeks-container{grid-template-columns:1fr}
	.se7e .mec-timetable-event-time{flex-basis:100%}
}

/* --- Graella i masonry --- */
.se7e .mec-skin-grid-events-container,.se7e .mec-events-masonry-wrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px}
.se7e .mec-skin-grid-events-container .mec-event-article,.se7e .mec-events-masonry-wrap .mec-event-article{display:block;padding:0;border-bottom:0}
.se7e .mec-events-masonry-cats{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 18px;font-size:14px}
.se7e .mec-events-masonry-cats a{text-decoration:none;opacity:.7}
.se7e .mec-masonry-cat-selected{font-weight:700;opacity:1}

/* --- Agenda --- */
.se7e .mec-events-agenda{display:flex;gap:18px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.06)}
.se7e .mec-agenda-date-wrap{flex:0 0 60px;text-align:center;line-height:1.1}
.se7e .mec-agenda-day{display:block;font-size:24px;font-weight:700}
.se7e .mec-agenda-date{display:block;font-size:12px;text-transform:uppercase;opacity:.7}
.se7e .mec-agenda-event{padding:2px 0}
.se7e .mec-agenda-time{font-size:13px;opacity:.75;margin-right:8px}

/* --- Línia de temps --- */
.se7e .mec-timeline-event{display:flex;gap:18px;padding:14px 0;border-left:2px solid rgba(0,0,0,.08);padding-left:18px;margin-left:8px}
.se7e .mec-timeline-event-date{flex:0 0 56px;font-weight:700}
.se7e .mec-timeline-month-divider{margin:18px 0 6px;font-size:14px;text-transform:uppercase;letter-spacing:.05em;opacity:.7}

/* --- Separador de mes (llista i agenda) --- */
.se7e .mec-month-divider{margin:20px 0 8px;font-size:14px;text-transform:uppercase;letter-spacing:.05em;opacity:.7}
.se7e .mec-month-divider:first-child{margin-top:0}
.se7e .mec-month-divider h5{margin:0;font-size:inherit;text-transform:inherit;letter-spacing:inherit;font-weight:600}
/* A la llista el separador plega el mes: ha de semblar un control. */
.se7e .mec-month-divider[data-toggle-divider]{cursor:pointer;user-select:none}
.se7e .mec-month-divider[data-toggle-divider]:focus-visible{outline:2px solid currentColor;outline-offset:3px}
/* La fletxa és seva de nom (mec-sl-arrow-down, de la seva tipografia d'icones),
   però la dibuixem nosaltres: si només hi poséssim la classe, sense el seu CSS
   quedaria un buit. */
.se7e .mec-sl-arrow-down{display:inline-block;width:.5em;height:.5em;margin-left:.5em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-.15em) rotate(45deg);transition:transform .15s ease}
.se7e .mec-month-divider.se7e-plegat .mec-sl-arrow-down{transform:translateY(.1em) rotate(-135deg)}

/* --- Lliscador --- */
.se7e .mec-slider-t1{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
.se7e .mec-slider-t1 .mec-event-article{flex:0 0 300px;scroll-snap-align:start;display:block;padding:0;border-bottom:0}

/* --- Compte enrere --- */
.se7e[class*="mec-event-countdown-"]{text-align:center;padding:24px 0}
.se7e .mec-event-upcoming{font-size:12px;text-transform:uppercase;letter-spacing:.08em;opacity:.7}
.se7e .mec-event-countdown{display:flex;justify-content:center;gap:6px;align-items:baseline;margin-top:12px;font-size:24px;font-weight:700}
.se7e .mec-event-countdown span[class^="mec-timeRef"]{font-size:12px;font-weight:400;opacity:.7;margin-right:10px}

/* --- Excepcions: un dia anul·lat es veu, ratllat --- */
.se7e .se7e-anullat-fitxa .mec-event-title,
.se7e .se7e-anullat-fitxa.se7e-quan__data strong{text-decoration:line-through;opacity:.65}
.se7e .se7e-anullat{display:inline-block;padding:1px 8px;border-radius:999px;background:#f6e9e9;color:#8a2424;font-size:12px;font-weight:600}
.se7e .se7e-anullat-motiu{font-style:italic;opacity:.8}
.se7e .se7e-anullat-avis{margin:8px 0 0;padding:8px 12px;border-left:3px solid #8a2424;background:#f6e9e9;color:#8a2424;font-size:14px}
/* El dia anul�lat, a la graella del mes. Les dues regles que hi havia
   apuntaven a classes que el PHP va deixar d'emetre en refer la vista, o
   sigui que el dia sortia com un de normal i qui el mirava s'hi presentava. */
.se7e .mec-has-event-a.se7e-anullat-fitxa{text-decoration:line-through;opacity:.55}
.se7e .mec-past-event{opacity:.6}
.se7e .mec-event-footer{margin-top:6px;font-size:13px;opacity:.75}

/* --- L'arxiu /events/ (la data que el tema no sap posar) --- */
.se7e-arxiu-quan{margin:6px 0 10px;font-size:14px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.se7e-arxiu-quan .mec-start-date-label{font-weight:700}
.se7e-arxiu-quan .mec-event-time{opacity:.8}

/* --- Els ganxos de color del MEC, vestits ---
   Emetem mec-color, mec-color-hover, mec-bg-color i mec-sl-clock a catorze
   llocs i el nostre full no en definia cap: al MEC els pinta el color de
   marca del calendari i aquí no feien res. El color es pot canviar des del
   tema amb --se7e-color. */
.se7e{--se7e-color:currentColor}
.se7e .mec-color{color:var(--se7e-color)}
.se7e .mec-color-hover:hover,.se7e .mec-color-hover:focus-visible{color:var(--se7e-color)}
.se7e .mec-bg-color{background:var(--se7e-color);color:#fff;border-color:var(--se7e-color)}
.se7e .mec-bg-color:hover,.se7e .mec-bg-color:focus-visible{opacity:.88;color:#fff}
/* El rellotge: la seva classe, dibuixat aquí (no tenim la seva tipografia). */
.se7e .mec-sl-clock{display:inline-block;width:.85em;height:.85em;margin-right:.4em;border:1.5px solid currentColor;border-radius:50%;position:relative;vertical-align:-.08em}
.se7e .mec-sl-clock::before{content:"";position:absolute;top:.14em;left:calc(50% - .7px);width:1.4px;height:.28em;background:currentColor}
.se7e .mec-sl-clock::after{content:"";position:absolute;top:calc(50% - .7px);left:50%;width:.22em;height:1.4px;background:currentColor}

/* --- Caixa de cerca i filtres --- */
.se7e.mec-search-form{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 20px;padding:12px 14px;border:1px solid rgba(0,0,0,.12);border-radius:6px}
.se7e .mec-totalcal-label{font-size:12px;text-transform:uppercase;letter-spacing:.05em;opacity:.7}
.se7e.mec-search-form input[type=search],.se7e.mec-search-form select{padding:6px 10px;border:1px solid rgba(0,0,0,.2);border-radius:4px;font:inherit;font-size:14px;min-width:0}
.se7e.mec-search-form input[type=search]{flex:1 1 180px}
.se7e.mec-search-form button{padding:7px 16px;border:1px solid currentColor;border-radius:4px;font:inherit;font-size:14px;cursor:pointer}
.se7e-cerca__neteja{font-size:13px;opacity:.75}
/* Preu i adreça, allà on surtin. */
.se7e .mec-event-cost{font-weight:600}
.se7e .mec-event-address{display:block;font-size:14px;opacity:.8}