hijo de main que lleva filas .info-row. */
main#content:has(article.product-row):not(:has(.panel-seating)) > div:has(> .info-row) {
grid-column: 2;
grid-row: 2;
margin: 0 0 32px 0;
}
main#content:has(article.product-row):not(:has(.panel-seating)) > details.cart {
grid-column: 2;
grid-row: 3;
margin: 0 0 24px 0;
}
main#content:has(article.product-row):not(:has(.panel-seating)) > form {
grid-column: 2;
grid-row: 4;
margin: 0;
}
/* La descripción baja por debajo del botón de compra. Es el
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: 5;
margin: 40px 0 0 0;
}
/* La imagen abarca todas las filas de la columna derecha y acompaña
al scroll, como el artwork de dice.fm. */
main#content:has(article.product-row):not(:has(.panel-seating)) > .page-header.pager-header-with-logo {
grid-row: 1 / span 51;
align-self: start;
position: sticky;
top: 24px;
margin: 0 0 24px 0;
}
main#content:has(article.product-row):not(:has(.panel-seating)) > .page-header .event-logo {
width: 100%;
max-width: 100%;
height: auto;
}
/* El bloque final ocupa todo el ancho. Va después de las dos
columnas, así que no desplaza nada: se coloca solo, en la fila
libre que queda por debajo del texto.
Ojo: cualquier elemento a 1/-1 colocado ANTES rompería el reparto
de columnas. */
main#content:has(article.product-row):not(:has(.panel-seating)) > aside.front-page {
grid-column: 1 / -1;
grid-row: 52;
margin-top: 40px;
}
/* El pie cierra la página, a todo ancho y por debajo del bloque
final. Colocado a mano por lo mismo: la colocación automática lo
metería en la columna de la imagen. */
main#content:has(article.product-row):not(:has(.panel-seating)) > footer {
grid-column: 1 / -1;
grid-row: 53;
}
/* Fecha, hora y recinto (bloques .info-row de Pretix), separados por
la línea fina del tema. */
main#content:has(article.product-row):not(:has(.panel-seating)) .info-row {
border-top: 1px solid var(--dc-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(--dc-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: si se queda 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 ----------
Cuando el evento tiene logo grande, Pretix no genera el título
visible: mete el nombre y las fechas en un
dentro de la cabecera, oculto salvo para lectores de pantalla.
Aquí desmontamos la cabecera (display:contents) para repartir su
título a la columna derecha y su 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 24px 0;
padding: 0;
text-align: left;
font-size: 36px;
font-weight: 400;
letter-spacing: -0.02em;
color: var(--dc-text);
}
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: 22px;
font-weight: 400;
letter-spacing: 0;
color: var(--dc-yellow);
}
main#content:not(:has(h2.content-header)):has(article.product-row):not(:has(.panel-seating)) > .page-header > div > a,
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;
}
/* Un evento sin ningún título deja la fila 1 vacía; con `row-gap`
a 0 no ocupa nada y el resto de la columna sube solo. */
}
/* ============================================================
PORTADA EN MÓVIL — el mismo orden, en una sola columna
Debajo de 992px no hay dos columnas, pero el orden que sirve
Pretix deja la descripción entre el título y las entradas: hay que
bajar toda la descripción para llegar a comprar. Con una retícula
de una columna repetimos el orden de escritorio: título, ubicación
y horarios, entradas con su botón y, al final, la descripción.
============================================================ */
@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 {
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.cart {
order: 3;
}
main#content:has(article.product-row):not(:has(.panel-seating)) > form {
order: 4;
}
main#content:has(article.product-row):not(:has(.panel-seating)) > div:has(> p):not(.alert):not(:has(.info-row)) {
order: 5;
margin-top: 40px;
}
main#content:has(article.product-row):not(:has(.panel-seating)) > aside.front-page {
order: 6;
}
main#content:has(article.product-row):not(:has(.panel-seating)) > footer {
order: 7;
}
}