/**
 * PP Malaga - Banner Anuncios, documents page.
 *
 * Colours and type come from the Elementor kit rather than literals, so the
 * page follows the site if the palette or the font is ever retuned. Fallbacks
 * are the current values of those globals.
 *
 * The page sits on gris100 on purpose: the cards are white, and white cards on
 * a white page are not cards, they are outlines. The tint is what makes them
 * read as objects you can pick up.
 */

.pp-banner-docs {
	background-color: var(--e-global-color-gris100, #f9f9fb);
	padding: 80px 16px 104px;
}

.pp-banner-docs__inner {
	margin: 0 auto;
	max-width: 1400px;
}

/* --- Section header: the same idiom as "Ultimas noticias" on the home --- */

.pp-banner-docs__header {
	margin-bottom: 48px;
}

/**
 * Title block left, the banner itself hard right.
 *
 * Centred rather than bottom-aligned: the text block is about 50px tall and the
 * image about 125px, so sharing a bottom edge left roughly 75px of empty space
 * stacked above the title. Centring splits that gap in two and the header reads
 * as one band instead of a short column hanging off a tall one.
 */
.pp-banner-docs__headrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	margin-bottom: 20px;
}

.pp-banner-docs__headtext {
	min-width: 0;
}

/**
 * Capped rather than sized: banners are uploaded at wildly different widths
 * (300px on one site, 1280px on another) and without a ceiling the header
 * would look different on each page. flex-shrink keeps a wide banner from
 * squeezing the title on a narrow window.
 */
.pp-banner-docs__image {
	flex: 0 1 auto;
	width: auto;
	max-width: 240px;
	height: auto;
	border: 1px solid var(--e-global-color-gris300, #d4d5d5);
	border-radius: 12px;
}

.pp-banner-docs__eyebrow {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0 0 12px;
	color: var(--e-global-color-azulbrillante, #278bff);
	font-family: var(--e-global-typography-primary-font-family, "Host Grotesk"), sans-serif;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 2.4px;
	line-height: 1.177;
}

.pp-banner-docs__bar {
	display: block;
	flex: 0 0 auto;
	width: 29px;
	height: 3px;
	background-color: var(--e-global-color-azulpp, #21599e);
}

.pp-banner-docs__title {
	margin: 0;
	color: var(--e-global-color-azulpp, #21599e);
	font-family: var(--e-global-typography-primary-font-family, "Host Grotesk"), sans-serif;
	font-size: 24px;
	font-weight: 800;
	text-transform: uppercase;
	/*
	 * "Condensed" without a condensed cut of the face: Host Grotesk has no
	 * narrow variant loaded, and faking one with scaleX() distorts the strokes.
	 * Weight, negative tracking and leading below 1 do the same job honestly -
	 * caps set this tight read as one solid block rather than a row of words.
	 */
	letter-spacing: -0.02em;
	line-height: 0.88;
}

.pp-banner-docs__rule {
	margin: 0;
	border: 0;
	border-top: 1px solid var(--e-global-color-gris300, #d4d5d5);
}

.pp-banner-docs__empty {
	color: var(--e-global-color-negro, #102a43);
}

@media (max-width: 767px) {
	.pp-banner-docs {
		padding: 56px 16px 72px;
	}
}

/* --- The grid of squares --- */

.pp-banner-docs__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pp-banner-docs__item {
	list-style: none;
}

/**
 * aspect-ratio keeps the tile square at every column width, so the grid stays a
 * grid of squares instead of drifting with the length of each name.
 */
.pp-banner-docs__card {
	display: flex;
	aspect-ratio: 1 / 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 28px;
	/*
	 * A hairline of white at low opacity instead of a solid border: it reads
	 * over both ends of the gradient, where a single flat colour would go
	 * invisible at one end and heavy at the other. The inset highlight along the
	 * top edge is what stops the tile looking like a flat rectangle of colour.
	 */
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 16px;
	position: relative;
	/* background-color is the fallback the gradient paints over. */
	background-color: var(--e-global-color-azulpp, #21599e);
	background-image: linear-gradient(135deg, #437ec7 0%, var(--e-global-color-azulpp, #21599e) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
	text-align: center;
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.pp-banner-docs__card:hover {
	transform: translateY(-2px);
	border-color: rgba(255, 255, 255, 0.4);
	/* Solo el brillo interior: la sombra proyectada se retiro a peticion. La
	   elevacion y el borde mas vivo bastan como respuesta al puntero. */
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* Keyboard focus gets its own ring, not the hover treatment: a lift is easy to
   miss when you cannot see a cursor. */
.pp-banner-docs__card:focus-visible {
	outline: 3px solid var(--e-global-color-azulbrillante, #278bff);
	outline-offset: 3px;
}

/**
 * Set in caps and tracked tight, as asked. Caps normally want looser tracking;
 * pulling it in instead is what gives the tile its blocky, stacked look, and
 * the tight leading is what keeps a three word name reading as one mass.
 */
.pp-banner-docs__name {
	color: var(--e-global-color-blanco, #fff);
	font-family: var(--e-global-typography-primary-font-family, "Host Grotesk"), sans-serif;
	font-size: 20px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	line-height: 1.05;
	/*
	 * Lines of even length instead of one long line followed by a short one.
	 * A name like "Junta Electoral de Zona de Antequera" cannot fit on a single
	 * line in a square tile at a readable size, so the goal is not to stop it
	 * wrapping but to make the wrap look deliberate. Browsers without support
	 * just wrap the ordinary way.
	 */
	text-wrap: balance;
	/*
	 * break-word, not anywhere: `anywhere` also shrinks the min-content width,
	 * which let a name split mid-word (CANDIDATUR / AS) inside a narrow tile
	 * even when it had room to wrap normally. It stays only as a guard against
	 * a single word longer than the tile.
	 *
	 * hyphens is deliberately NOT set: it was not hyphenating anything here,
	 * and an automatic hyphen is precisely the kind of cut this text must not
	 * have.
	 */
	overflow-wrap: break-word;
}

/**
 * The file type is white like the name. On the blue fill the eyebrow blue it
 * used to borrow would sit too close to the background to read, so the
 * hierarchy is carried by size, weight and tracking instead of by colour.
 */
.pp-banner-docs__type {
	padding: 5px 10px;
	border-radius: 999px;
	/*
	 * A DARK wash, not a light one. The pill exists to make the badge read as a
	 * tag, but at 12px it is small text and needs 4.5:1. Over the middle of the
	 * gradient white sits at 5.2:1; a white wash at 16% drops that to 3.9 and
	 * fails, while this dark wash lifts it to about 6.5.
	 */
	background-color: rgba(16, 42, 67, 0.28);
	color: var(--e-global-color-blanco, #fff);
	font-family: var(--e-global-typography-primary-font-family, "Host Grotesk"), sans-serif;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 2px;
	line-height: 1;
}

@media (max-width: 767px) {
	.pp-banner-docs__grid {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 16px;
	}

	.pp-banner-docs__card {
		/* Two tiles across a 375px screen leave ~107px of text width at the
		   desktop padding, which is narrower than a word like CANDIDATURAS.
		   Trading padding for text is what keeps names whole. */
		padding: 16px;
		gap: 10px;
	}

	.pp-banner-docs__name {
		font-size: 14px;
	}

	.pp-banner-docs__type {
		font-size: 11px;
		letter-spacing: 1.5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pp-banner-docs__card {
		transition: none;
	}

	.pp-banner-docs__card:hover {
		transform: none;
	}
}

/**
 * The outward arrow that marks the tile as a link.
 *
 * Pinned to the top right rather than sat with the text: the name is centred in
 * the tile and an icon in that stack would push it off centre and change the
 * line wrap. Held back to 70% white so it reads as a hint rather than competing
 * with the name, and brought to full strength on hover with the rest of the
 * card.
 */
.pp-banner-docs__icon {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 16px;
	height: 16px;
	/*
	 * Set explicitly because the SVG strokes with currentColor, and the card
	 * never declares a colour of its own: the icon inherited the theme's default
	 * link colour and drew itself pink on the blue tile.
	 */
	color: var(--e-global-color-blanco, #fff);
	opacity: 0.7;
	transition: opacity 0.25s ease;
}

.pp-banner-docs__card:hover .pp-banner-docs__icon,
.pp-banner-docs__card:focus-visible .pp-banner-docs__icon {
	opacity: 1;
}

/**
 * Available to a screen reader, invisible on screen.
 *
 * The icon cannot be read aloud, so this is what tells someone using a screen
 * reader that the link leaves the page.
 */
.pp-banner-docs__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 767px) {
	.pp-banner-docs__icon {
		top: 10px;
		right: 10px;
		width: 14px;
		height: 14px;
	}
}

@media (max-width: 767px) {
	.pp-banner-docs__headrow {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	.pp-banner-docs__image {
		max-width: 200px;
	}
}