/**
 * A página de uma capa de jornal (14e) — template-parts/layouts/single-capa.php.
 *
 * O visor da capa à esquerda (≥1024: coluna de 420) e o texto à direita; no
 * telemóvel o visor primeiro, a toda a largura, e o texto por baixo. As
 * pastilhas dos jornais e dos dias são as pílulas do tema. O calendário
 * («Escolher dia») é um <details>: no desktop abre por baixo do botão, no
 * telemóvel ocupa a largura do cabeçalho.
 */

.sp-capa {
	padding: 20px 0 40px;
	background: var(--sp-page, #f4f7fb);
}

.sp-capa__migalhas {
	margin-bottom: 12px;
}

.sp-capa__cab {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sp-capa__dia {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.sp-capa__titulo {
	flex: 1;
	min-width: 0;
	margin: 0;
	font: 700 22px/28px 'Source Serif 4', Georgia, serif;
	color: var(--sp-ink, #0f172a);
	letter-spacing: -0.01em;
}

.sp-capa__seta {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--sp-border, #dfe5ee);
	border-radius: 50%;
	background: var(--sp-surface, #fff);
	color: var(--sp-ink, #0f172a);
	text-decoration: none;
}

.sp-capa__seta:hover {
	border-color: var(--sp-porto, #004b9b);
	color: var(--sp-porto, #004b9b);
}

.sp-capa__seta.is-inactiva {
	opacity: 0.35;
}

.sp-capa__atalhos {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* «Escolher dia»: só os dias com capas levam ligação. */
.sp-capa-cal__abrir {
	cursor: pointer;
	list-style: none;
}

.sp-capa-cal__abrir::-webkit-details-marker {
	display: none;
}

.sp-capa-cal[open] .sp-capa-cal__abrir {
	border-color: var(--sp-porto, #004b9b);
	color: var(--sp-porto, #004b9b);
}

.sp-capa-cal__painel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 30;
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: min(20rem, calc(100vw - 32px));
	max-height: min(28rem, 70vh);
	overflow-y: auto;
	padding: 14px;
	border: 1px solid var(--sp-border, #dfe5ee);
	border-radius: 12px;
	background: var(--sp-surface, #fff);
	box-shadow: 0 16px 40px rgba(6, 21, 43, 0.16);
}

.sp-capa-cal__mes {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	font: 500 13px/1 'Libre Franklin', sans-serif;
	color: var(--sp-ink, #0f172a);
}

.sp-capa-cal__mes caption {
	padding-bottom: 8px;
	text-align: left;
	font: 700 14px/18px 'Source Serif 4', Georgia, serif;
}

.sp-capa-cal__mes th {
	padding-bottom: 6px;
	font: 600 11px/14px 'Libre Franklin', sans-serif;
	color: var(--sp-ink-muted, #475569);
	text-align: center;
}

.sp-capa-cal__mes td {
	padding: 2px;
	text-align: center;
}

.sp-capa-cal__dia {
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	text-decoration: none;
	color: var(--sp-porto, #004b9b);
	font-weight: 700;
}

a.sp-capa-cal__dia:hover {
	background: var(--sp-porto-light, #e8f0fa);
}

.sp-capa-cal__dia.is-sem {
	color: var(--sp-ink-faint, #94a3b8);
	font-weight: 400;
}

.sp-capa-cal__dia.is-hoje {
	box-shadow: inset 0 0 0 1px var(--sp-porto, #004b9b);
}

.sp-capa-cal__dia.is-actual {
	background: var(--sp-porto, #004b9b);
	color: #fff;
}

.sp-capa__jornais {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin-top: 14px;
}

.sp-capa__jornais .sp-pilulas {
	flex-wrap: wrap;
	overflow: visible;
}

.sp-capa__teclas {
	display: none;
	margin: 0;
	font: 500 12px/16px 'Libre Franklin', sans-serif;
	color: var(--sp-ink-muted, #475569);
}

/* O visor e o texto. */
.sp-capa__grelha {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	margin-top: 16px;
}

.sp-capa__visor {
	margin: 0;
	min-width: 0;
}

.sp-capa__zoom {
	position: relative;
	display: block;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--sp-border, #dfe5ee);
	background: var(--sp-surface, #fff);
	box-shadow: 0 10px 30px rgba(6, 21, 43, 0.12);
}

.sp-capa__imagem {
	display: block;
	width: 100%;
	height: auto;
}

.sp-capa__zoom-ico {
	position: absolute;
	right: 10px;
	bottom: 10px;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(6, 21, 43, 0.8);
	color: #fff;
}

.sp-capa__vazia {
	display: grid;
	place-items: center;
	align-content: center;
	gap: 6px;
	aspect-ratio: 3 / 4;
	border: 1px solid var(--sp-border, #dfe5ee);
	border-radius: 12px;
	background: var(--sp-surface, #fff);
	color: var(--sp-ink-muted, #475569);
	font: 500 14px/20px 'Libre Franklin', sans-serif;
}

.sp-capa__vazia span {
	font: 800 28px/32px 'Source Serif 4', Georgia, serif;
	color: var(--sp-muted, #7c8aa5);
}

.sp-capa__credito {
	margin: 10px 0 0;
	font: 400 11px/16px 'Libre Franklin', sans-serif;
	color: var(--sp-ink-muted, #475569);
}

.sp-capa__texto {
	min-width: 0;
}

.sp-capa__h1 {
	margin: 0;
	font: 700 15px/20px 'Libre Franklin', sans-serif;
	color: var(--sp-porto, #004b9b);
	text-wrap: pretty;
}

.sp-capa__manchete {
	margin: 8px 0 0;
	font: 700 26px/30px 'Source Serif 4', Georgia, serif;
	color: var(--sp-ink, #0f172a);
	text-wrap: pretty;
}

.sp-capa__resumo {
	margin: 12px 0 0;
	font: 400 16px/24px 'Libre Franklin', sans-serif;
	color: var(--sp-ink-body, #33415c);
	max-width: 58ch;
}

.sp-capa__accoes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
}

.sp-capa__texto .sp-ai-transparency {
	margin-top: 16px;
}

/* As outras capas do dia. */
.sp-capa__outras {
	margin-top: 32px;
}

.sp-capa__outras-lista {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-capa-outra {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 10px;
	border: 1px solid var(--sp-border, #dfe5ee);
	border-radius: 12px;
	background: var(--sp-surface, #fff);
	text-decoration: none;
	color: var(--sp-ink, #0f172a);
}

.sp-capa-outra:hover {
	border-color: var(--sp-porto, #004b9b);
}

.sp-capa-outra__imagem {
	flex: none;
	width: 64px;
	aspect-ratio: 3 / 4;
	border-radius: 6px;
	overflow: hidden;
	border: 1px solid var(--sp-border, #dfe5ee);
	background: var(--sp-page, #f4f7fb);
	display: grid;
	place-items: center;
	font: 800 10px/12px 'Libre Franklin', sans-serif;
	color: var(--sp-muted, #7c8aa5);
	text-align: center;
}

.sp-capa-outra__imagem img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

.sp-capa-outra__textos {
	min-width: 0;
}

.sp-capa-outra__nome {
	display: block;
	font: 700 11px/13px 'Libre Franklin', sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sp-ink-muted, #475569);
}

.sp-capa-outra__manchete {
	display: block;
	margin-top: 4px;
	font: 600 15px/20px 'Source Serif 4', Georgia, serif;
}

.sp-capa__anteriores {
	margin-top: 28px;
}

.sp-capa__anteriores .sp-pilulas {
	flex-wrap: wrap;
	overflow: visible;
}

.sp-capa__comentarios {
	margin-top: 32px;
	max-width: 46rem;
}

@media (min-width: 640px) {
	.sp-capa__grelha {
		grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
		gap: 28px;
		align-items: start;
	}

	.sp-capa__outras-lista {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.sp-capa-cal__painel {
		right: 0;
		left: auto;
	}

	.sp-capa__h1 {
		font-size: 16px;
		line-height: 22px;
	}

	.sp-capa__cab {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.sp-capa__titulo {
		font-size: 32px;
		line-height: 38px;
	}

	.sp-capa__teclas {
		display: block;
	}

	.sp-capa__grelha {
		grid-template-columns: 420px minmax(0, 1fr);
		gap: 40px;
		margin-top: 20px;
	}

	.sp-capa__texto {
		padding-top: 8px;
	}

	.sp-capa__manchete {
		font-size: 32px;
		line-height: 38px;
	}
}