/* ---------------------------------------------------------------------------
   Mosaico de portada
   Reproduce el bloque "g-slideshow" del tema Joomla rt_salient: rejilla 25/50/25
   con fondo de color, icono superpuesto y animacion al pasar el raton.
   Colores tomados de salient_26.css.
   ------------------------------------------------------------------------- */

/* Fondo estatico de la seccion, igual que #g-slideshow en el tema Joomla:
   centrado, sin repetir y recortado a lo ancho. En el original la regla que lo
   ponia en blanco estaba dentro de @media print, asi que en pantalla se ve la
   imagen. Se sirve desde el tema, no desde uploads: es un recurso de diseno. */
.aopa-mosaic-section {
	background: #fff url("mosaic-bg.jpg") center center no-repeat;
	background-size: cover;
}

.aopa-mosaic {
	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
	grid-template-rows: repeat(2, minmax(150px, 1fr));
	gap: 0.5rem;
}

.aopa-mosaic__center {
	grid-column: 2;
	grid-row: 1 / span 2;
}

.aopa-tile {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 3px;
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	min-height: 150px;
}

.aopa-tile:hover,
.aopa-tile:focus-visible {
	color: #fff;
}

/* Fondos del tema Joomla, oscurecidos lo justo para cumplir WCAG AA con el
   texto blanco encima (#ec4345 daba 3,85:1, por debajo del 4,5:1 exigido).
   El bloque dorado conserva su color original y usa texto oscuro: aclararlo
   no era viable y oscurecerlo lo habria convertido en otro color. */
.aopa-tile--red    { background: #ce1517; }
.aopa-tile--blue   { background: #5454ce; }
.aopa-tile--gold   { background: #d4ab3c; color: #1a1a1a; }
.aopa-tile--gold:hover,
.aopa-tile--gold:focus-visible { color: #1a1a1a; }
.aopa-tile--gold .aopa-tile__button { border-color: #1a1a1a; color: #1a1a1a; }
.aopa-tile--grad-red  { background: linear-gradient(90deg, #ce1517, #9f1012); }
.aopa-tile--grad-blue { background: linear-gradient(90deg, #5454ce, #3e3ebe); }

.aopa-tile--grad-red:hover  { background: linear-gradient(90deg, #9f1012, #ce1517); }
.aopa-tile--grad-blue:hover { background: linear-gradient(90deg, #3e3ebe, #5454ce); }

.aopa-tile__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.25s ease;
}

.aopa-tile__title {
	position: absolute;
	top: 0.75rem;
	left: 1rem;
	font-size: clamp(2rem, 4vw, 3.5rem);
	line-height: 1;
}

.aopa-tile__desc {
	position: absolute;
	bottom: 0.75rem;
	left: 1rem;
	right: 3.5rem;
	font-size: 0.85rem;
	line-height: 1.3;
}

.aopa-tile__arrow {
	position: absolute;
	right: 1.25rem;
	bottom: 0.25rem;
	font-size: 2rem;
	line-height: 1;
}

/* --- Variante "reveal": el icono se atenua y aparecen titulo y texto ------- */
.aopa-tile--reveal .aopa-tile__title {
	opacity: 0;
	transform: translateY(-100%);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.aopa-tile--reveal .aopa-tile__desc,
.aopa-tile--reveal .aopa-tile__arrow {
	opacity: 0;
	transform: scale(0);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.aopa-tile--reveal:hover .aopa-tile__img,
.aopa-tile--reveal:focus-visible .aopa-tile__img {
	opacity: 0.25;
}

.aopa-tile--reveal:hover .aopa-tile__title,
.aopa-tile--reveal:focus-visible .aopa-tile__title,
.aopa-tile--reveal:hover .aopa-tile__desc,
.aopa-tile--reveal:focus-visible .aopa-tile__desc,
.aopa-tile--reveal:hover .aopa-tile__arrow,
.aopa-tile--reveal:focus-visible .aopa-tile__arrow {
	opacity: 1;
	transform: none;
}

/* --- Variante "button": el texto se ve siempre, el boton aparece al pasar -- */
.aopa-tile--button .aopa-tile__title,
.aopa-tile--button .aopa-tile__desc {
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.aopa-tile__button {
	position: absolute;
	right: 1rem;
	bottom: 0.75rem;
	opacity: 0;
	transform: scale(0);
	transition: opacity 0.3s ease, transform 0.3s ease;
	padding: 0.5rem 1rem;
	border: 2px solid #fff;
	border-radius: 3px;
	color: #fff;
	font-size: 0.8rem;
	white-space: nowrap;
}

.aopa-tile--button:hover .aopa-tile__button,
.aopa-tile--button:focus-visible .aopa-tile__button {
	opacity: 1;
	transform: scale(1);
}

.aopa-tile--button:hover .aopa-tile__title,
.aopa-tile--button:focus-visible .aopa-tile__title {
	transform: scale(0.75);
	transform-origin: top left;
}

.aopa-tile--button:hover .aopa-tile__arrow,
.aopa-tile--button:focus-visible .aopa-tile__arrow {
	opacity: 0;
	transform: scale(0);
}

/* --- Movil: una sola columna ---------------------------------------------- */
@media (max-width: 781px) {
	.aopa-mosaic {
		grid-template-columns: 1fr;
		grid-template-rows: none;
	}

	.aopa-mosaic__center {
		grid-column: 1;
		grid-row: auto;
	}

	/* Sin :hover en tactil, el contenido debe verse siempre. */
	.aopa-tile--reveal .aopa-tile__title,
	.aopa-tile--reveal .aopa-tile__desc,
	.aopa-tile--reveal .aopa-tile__arrow,
	.aopa-tile__button {
		opacity: 1;
		transform: none;
	}

	.aopa-tile--reveal .aopa-tile__img {
		opacity: 0.25;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aopa-tile__img,
	.aopa-tile__title,
	.aopa-tile__desc,
	.aopa-tile__arrow,
	.aopa-tile__button {
		transition: none;
	}
}

/* Barra separadora entre el mosaico y las noticias. En el tema Joomla la
   dibujaba #g-feature, una seccion vacia con border-top: 5px solid #ec4345.
   Se usa el rojo original: es decorativo y no lleva texto encima, asi que no
   le aplica el minimo de contraste de WCAG. */
.aopa-news-section {
	border-top: 5px solid #ec4345;
}