hijo de main con párrafos propios: el de la ubicación los lleva
dentro de .info-row, y el aviso de modo de pruebas es .alert. */
main#content:has(article.product-row):not(:has(.panel-seating)) > div:has(> p):not(.alert):not(:has(.info-row)) {
grid-column: 2;
grid-row: 7;
margin: 40px 0 0 0;
}
/* La imagen abarca todas las filas de la columna derecha y acompaña
al scroll hasta llegar a los bloques finales. Quien se pega es el
de dentro: Chromium no frena un `position: sticky` en el
borde de su celda de la retícula, así que la cabecera se estira
(`align-self: stretch`) hasta el final de sus 51 filas y le hace
de tope. */
main#content:has(article.product-row):not(:has(.panel-seating)) > .page-header.pager-header-with-logo {
grid-row: 1 / span 51;
align-self: stretch;
margin: 0 0 24px 0;
}
main#content:has(article.product-row):not(:has(.panel-seating)) > .page-header.pager-header-with-logo > div:not(.clearfix) {
position: sticky;
top: 24px;
}
main#content:has(article.product-row):not(:has(.panel-seating)) > .page-header .event-logo {
width: 100%;
max-width: 100%;
height: auto;
}
/* Los bloques finales ocupan todo el ancho, cada uno en su fila:
compartiendo fila se montarían uno encima del otro en los eventos
que tienen "Canjear vale de compra" y "Si ya ha pedido una
entrada" a la vez. */
main#content:has(article.product-row):not(:has(.panel-seating)) > aside.front-page {
grid-column: 1 / -1;
margin-top: 40px;
}
main#content:has(article.product-row):not(:has(.panel-seating)) > aside.front-page:nth-of-type(1) {
grid-row: 52;
}
main#content:has(article.product-row):not(:has(.panel-seating)) > aside.front-page:nth-of-type(2) {
grid-row: 53;
}
main#content:has(article.product-row):not(:has(.panel-seating)) > aside.front-page:nth-of-type(3) {
grid-row: 54;
}
main#content:has(article.product-row):not(:has(.panel-seating)) > footer {
grid-column: 1 / -1;
grid-row: 55;
}
/* Fecha, hora y recinto, separados por líneas finas. */
main#content:has(article.product-row):not(:has(.panel-seating)) .info-row {
border-top: 1px solid var(--fm-border-soft);
padding: 12px 0;
margin: 0;
}
main#content:has(article.product-row):not(:has(.panel-seating)) .info-row:last-child {
border-bottom: 1px solid var(--fm-border-soft);
}
main#content:has(article.product-row):not(:has(.panel-seating)) section.item-category > h3 {
text-align: left;
}
/* La columna es más estrecha: se reparten nombre, precio y cantidad. */
main#content:has(article.product-row):not(:has(.panel-seating)) article.product-row .col-md-8 {
width: 50%;
}
main#content:has(article.product-row):not(:has(.panel-seating)) article.product-row .col-md-2.price {
width: 22%;
}
main#content:has(article.product-row):not(:has(.panel-seating)) article.product-row .col-md-2.availability-box {
width: 28%;
}
/* El botón de compra ocupa toda la columna: en su tercio de
Bootstrap el texto parte en dos líneas. */
main#content:has(article.product-row):not(:has(.panel-seating)) .front-page .col-md-4.col-md-offset-8 {
width: 100%;
margin-left: 0;
}
/* ---------- Eventos SIN h2.content-header ----------
Con logo grande, Pretix mete el nombre y las fechas en un
dentro de la cabecera. Se desmonta la
cabecera (display:contents) para llevar el título a la derecha y
dejar la imagen a la izquierda. */
main#content:not(:has(h2.content-header)):has(article.product-row):not(:has(.panel-seating)) > .page-header.pager-header-with-logo,
main#content:not(:has(h2.content-header)):has(article.product-row):not(:has(.panel-seating)) > .page-header.pager-header-with-logo > div:not(.clearfix) {
display: contents;
}
main#content:not(:has(h2.content-header)):has(article.product-row):not(:has(.panel-seating)) > .page-header .clearfix {
display: none;
}
main#content:not(:has(h2.content-header)):has(article.product-row):not(:has(.panel-seating)) > .page-header h1 {
grid-column: 2;
grid-row: 1;
position: static;
width: auto;
height: auto;
overflow: visible;
clip: auto;
clip-path: none;
white-space: normal;
margin: 0 0 28px 0;
padding: 0;
text-align: left;
font-family: var(--fm-display);
font-style: italic;
font-size: 44px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--fm-heading);
}
main#content:not(:has(h2.content-header)):has(article.product-row):not(:has(.panel-seating)) > .page-header h1 small,
main#content:not(:has(h2.content-header)):has(article.product-row):not(:has(.panel-seating)) > .page-header h1 small time {
display: block;
margin-top: 12px;
font-size: 24px;
letter-spacing: 0.04em;
color: var(--fm-red);
}
/* Con la cabecera desmontada, el tope de la imagen lo hace el
enlace que la envuelve; si no hay enlace, se pega la imagen. */
main#content:not(:has(h2.content-header)):has(article.product-row):not(:has(.panel-seating)) > .page-header > div > a {
grid-column: 1;
grid-row: 1 / span 51;
align-self: stretch;
display: block;
margin-bottom: 24px;
}
main#content:not(:has(h2.content-header)):has(article.product-row):not(:has(.panel-seating)) > .page-header > div > a > .event-logo {
position: sticky;
top: 24px;
}
main#content:not(:has(h2.content-header)):has(article.product-row):not(:has(.panel-seating)) > .page-header > div > .event-logo {
grid-column: 1;
grid-row: 1 / span 51;
align-self: start;
position: sticky;
top: 24px;
display: block;
margin-bottom: 24px;
}
}
/* ============================================================
PORTADA EN MÓVIL — el mismo orden, en una sola columna
Debajo de 992px no hay dos columnas, pero se repite el orden de
escritorio para no tener que bajar toda la descripción antes de
llegar a comprar.
============================================================ */
@media (max-width: 991px) {
main#content:has(article.product-row):not(:has(.panel-seating)) {
display: grid;
grid-template-columns: minmax(0, 1fr);
}
main#content:has(article.product-row):not(:has(.panel-seating)) > h2.content-header,
main#content:has(article.product-row):not(:has(.panel-seating)) > h2.subevent-head {
order: 1;
}
main#content:has(article.product-row):not(:has(.panel-seating)) > div:has(> .info-row) {
order: 2;
}
main#content:has(article.product-row):not(:has(.panel-seating)) > details.panel:not(.cart) {
order: 3;
}
main#content:has(article.product-row):not(:has(.panel-seating)) > details.cart {
order: 4;
}
main#content:has(article.product-row):not(:has(.panel-seating)) > form {
order: 5;
}
main#content:has(article.product-row):not(:has(.panel-seating)) > p {
order: 6;
margin-top: 16px;
}
main#content:has(article.product-row):not(:has(.panel-seating)) > div:has(> p):not(.alert):not(:has(.info-row)) {
order: 7;
margin-top: 40px;
}
main#content:has(article.product-row):not(:has(.panel-seating)) > aside.front-page {
order: 8;
}
main#content:has(article.product-row):not(:has(.panel-seating)) > footer {
order: 9;
}
}
/* ============================================================
PORTADA DE UNA SERIE DE EVENTOS — dos columnas
La página principal de una serie (/organizador/evento/) no tiene
entradas: lista las fechas en un panel ("Elija la fecha…"). Imagen
a la izquierda y, a su lado, todo lo demás en el orden en que lo
pinta Pretix (título, ubicación, lista de fechas, descripción).
Aquí NO se usa la retícula: con tan poco contenido, Chromium le
reserva a la imagen más alto del que ocupa en las filas que abarca y
quedaba un hueco grande antes de "Si ya ha pedido una entrada". Con
la imagen flotando, los bloques finales bajan por debajo de lo que
sea más largo —imagen o lista— y nunca se montan. La imagen no es
pegajosa: en una página tan corta no hace falta.
Sólo con la vista de lista (.event-list): el calendario necesita el
ancho completo y se queda a una columna. En móvil no hace falta
nada: el orden de Pretix ya es el bueno.
============================================================ */
@media (min-width: 992px) {
main#content:has(> .panel .event-list):not(:has(article.product-row)) {
display: flow-root;
}
/* Un tercio del ancho, como el 4fr / 8fr de la portada con
entradas. */
main#content:has(> .panel .event-list):not(:has(article.product-row)) > .page-header.pager-header-with-logo {
float: left;
width: calc((100% - 48px) / 3);
margin: 0 48px 24px 0;
}
main#content:has(> .panel .event-list):not(:has(article.product-row)) > .page-header .event-logo {
width: 100%;
max-width: 100%;
height: auto;
}
/* flow-root hace que cada bloque se estreche junto a la imagen en
vez de pasarle por debajo (y, a diferencia de overflow:hidden, no
recorta sombras). */
main#content:has(> .panel .event-list):not(:has(article.product-row)) > :not(.page-header):not(aside):not(footer):not(script) {
display: flow-root;
}
main#content:has(> .panel .event-list):not(:has(article.product-row)) > h2.content-header {
text-align: left;
margin: 0 0 28px 0;
font-size: 44px;
}
main#content:has(> .panel .event-list):not(:has(article.product-row)) .info-row {
border-top: 1px solid var(--fm-border-soft);
padding: 12px 0;
margin: 0;
}
main#content:has(> .panel .event-list):not(:has(article.product-row)) .info-row:last-child {
border-bottom: 1px solid var(--fm-border-soft);
}
/* Bloques finales y pie, a todo ancho por debajo de la imagen. */
main#content:has(> .panel .event-list):not(:has(article.product-row)) > aside.front-page,
main#content:has(> .panel .event-list):not(:has(article.product-row)) > footer {
clear: both;
}
main#content:has(> .panel .event-list):not(:has(article.product-row)) > aside.front-page {
margin-top: 40px;
}
}