/* ==========================================================================
   MMKT Card Event — Bloc Gutenberg v1.0.0
   Disseny: targeta tipus póster d'emplenat manual
   Idèntic al look & feel de mmkt-eventos
   ========================================================================== */

/* ── Wrapper del bloc ────────────────────────────────────────────────────── */
.mmkt-ce-wrap {
	--ce-primary:      var(--global-palette1, #2563EB);
	--ce-primary-dark: var(--global-palette2, #1D4ED8);
	--ce-radius:       10px;
	/* Amplada per defecte: omple la columna del seu context */
	width:       100%;
	max-width:   380px;
	font-family: inherit;
	color:       inherit;
}

/* Alineació esquerra/dreta (Gutenberg float) */
.mmkt-ce-wrap.alignleft  { margin-right: 2em; }
.mmkt-ce-wrap.alignright { margin-left:  2em; }

/* Amplada wide: deixa que el tema gestioni el contenidor */
.mmkt-ce-wrap.alignwide {
	max-width: 100%;
}

/* ── Targeta ─────────────────────────────────────────────────────────────── */
.mmkt-ce-item {
	position:      relative;
	aspect-ratio:  3 / 4;
	border-radius: var(--ce-radius);
	overflow:      hidden;
	cursor:        default;
	background:    #c8cdd4;
	border:        2px solid #fff;
	transform:     translateY(0);
	transition:    transform 0.3s ease, box-shadow 0.3s ease;
	display:       block;
}

.mmkt-ce-item.mmkt-ce-linkable {
	cursor: pointer;
}

/* ── Imatge de fons ──────────────────────────────────────────────────────── */
.mmkt-ce-imatge {
	position: absolute;
	inset:    0;
}

.mmkt-ce-imatge img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform 0.5s ease;
}

.mmkt-ce-item:hover .mmkt-ce-imatge img {
	transform: scale(1.07);
}

.mmkt-ce-sin-imagen {
	background: linear-gradient(135deg, #c8cdd4 0%, #9aa0ab 100%);
}

/* ── Badge de data (cantonada superior esquerra) ─────────────────────────── */
.mmkt-ce-badge-fecha {
	position:        absolute;
	top:             10px;
	left:            10px;
	background:      rgba(0, 0, 0, 0.72);
	border-radius:   8px;
	padding:         6px 10px;
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	line-height:     1;
	z-index:         2;
	backdrop-filter: blur(4px);
}

.mmkt-ce-badge-dia {
	font-size:   22px;
	font-weight: 700;
	color:       #fff;
}

.mmkt-ce-badge-mes {
	font-size:      11px;
	font-weight:    600;
	color:          rgba(255, 255, 255, 0.8);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-top:     1px;
}

/* ── Overlay de gradient ─────────────────────────────────────────────────── */
.mmkt-ce-overlay {
	position:   absolute;
	inset:      0;
	padding:    10px;
	display:    flex;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0)    30%,
		rgba(0, 0, 0, 0.55) 62%,
		rgba(0, 0, 0, 0.82) 100%
	);
	transition: background 0.35s ease;
}

.mmkt-ce-item:hover .mmkt-ce-overlay {
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.05) 20%,
		rgba(0, 0, 0, 0.62) 58%,
		rgba(0, 0, 0, 0.90) 100%
	);
}

/* ── Marc interior ───────────────────────────────────────────────────────── */
.mmkt-ce-frame {
	position:        relative;
	flex:            1;
	display:         flex;
	flex-direction:  column;
	justify-content: flex-end;
	border:          1px solid rgba(255, 255, 255, 0.55);
	border-radius:   8px;
	padding:         18px;
	transition:      border-color 0.35s ease;
}

.mmkt-ce-item:hover .mmkt-ce-frame {
	border-color: rgba(255, 255, 255, 0.72);
}

/* ── Categoria (cantonada sup. dreta del marc) ───────────────────────────── */
.mmkt-ce-cats {
	position:        absolute;
	top:             10px;
	right:           10px;
	display:         flex;
	flex-wrap:       wrap;
	gap:             4px;
	justify-content: flex-end;
}

.mmkt-ce-cat-tag {
	display:        inline-block;
	padding:        2px 8px;
	border-radius:  10px;
	font-size:      9px;
	font-weight:    700;
	color:          #fff;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity:        0.92;
}

/* ── Títol ───────────────────────────────────────────────────────────────── */
.mmkt-ce-titol {
	margin:      0;
	font-size:   18px;
	font-weight: 600;
	line-height: 1.25;
	color:       #fff;
	transform:   translateY(4px);
	transition:  transform 0.35s ease;
}

.mmkt-ce-titol a {
	color:           #fff;
	text-decoration: none;
}

.mmkt-ce-titol a:hover {
	text-decoration: none;
}

.mmkt-ce-item:hover .mmkt-ce-titol {
	transform: translateY(-3px);
}

/* ── Subtítulo ───────────────────────────────────────────────────────────── */
.mmkt-ce-subtitol {
	margin:      4px 0 0;
	font-size:   16px;
	font-weight: 600;
	line-height: 1.3;
	color:       rgba(255, 255, 255, 0.75);
	transform:   translateY(4px);
	transition:  transform 0.35s ease;
}

.mmkt-ce-item:hover .mmkt-ce-subtitol {
	transform: translateY(-3px);
}

/* ── Contingut visible al hover ──────────────────────────────────────────── */
.mmkt-ce-hover-content {
	overflow:   hidden;
	max-height: 0;
	opacity:    0;
	transform:  translateY(6px);
	transition: max-height 0.4s ease, opacity 0.35s ease, transform 0.35s ease;
	margin-top: 0;
}

.mmkt-ce-item:hover .mmkt-ce-hover-content {
	max-height: 160px;
	opacity:    1;
	transform:  translateY(-3px);
	margin-top: 10px;
}

/* Intro */
.mmkt-ce-intro {
	margin:      0 0 8px;
	font-size:   14px;
	line-height: 1.4;
	color:       rgba(255, 255, 255, 0.88);
}

/* Meta (hora, adreça) */
.mmkt-ce-meta {
	display:       flex;
	flex-wrap:     wrap;
	gap:           4px 10px;
	margin-bottom: 8px;
}

.mmkt-ce-meta-item {
	display:     inline-flex;
	align-items: center;
	gap:         4px;
	font-size:   12px;
	color:       rgba(255, 255, 255, 0.85);
}

.mmkt-ce-meta-item svg { flex-shrink: 0; }

/* Botó */
.mmkt-ce-accions {
	display:   flex;
	gap:       6px;
	flex-wrap: wrap;
}

.mmkt-ce-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             4px;
	padding:         5px 14px;
	border-radius:   30px;
	font-size:       12px;
	font-weight:     600;
	text-decoration: none;
	line-height:     1;
	background:      var(--ce-primary);
	color:           #fff;
	border:          1px solid transparent;
	transition:      background 0.2s ease;
}

.mmkt-ce-btn:hover {
	background: var(--ce-primary-dark);
	color:      #fff;
}

/* ── Editor Gutenberg: placeholder sense contingut ───────────────────────── */
.mmkt-ce-item.mmkt-ce-empty {
	display:         flex;
	align-items:     center;
	justify-content: center;
	background:      #f0f4ff;
	border:          2px dashed var(--ce-primary);
	aspect-ratio:    3 / 4;
}

.mmkt-ce-empty-msg {
	text-align:  center;
	color:       var(--ce-primary);
	font-size:   14px;
	line-height: 1.5;
}

.mmkt-ce-empty-msg strong {
	display:     block;
	font-size:   16px;
	margin-bottom: 4px;
}