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, pero sin pasar de los
bloques finales ("Canjear vale de compra", "Si ya ha pedido una
entrada"): al llegar a ellos se queda parada y la página sigue
subiendo.
Quien se pega es el
de dentro, no la cabecera. Chromium no
frena un `position: sticky` en el borde de su celda de la
retícula —lo deja correr hasta el fondo de la retícula entera, y
la imagen acaba montándose sobre esos bloques en pantallas
bajas—, así que la cabecera se estira (`align-self: stretch`)
hasta donde terminan sus 51 filas y hace de tope del
pegajoso, que es un bloque normal y ahí sí se detiene. */
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. Van después de las dos
columnas, así que no desplazan nada: se colocan solos, en las
filas libres que quedan por debajo del texto.
Ojo: cualquier elemento a 1/-1 colocado ANTES rompería el reparto
de columnas.
Cada bloque lleva su fila: Pretix pinta uno ("Si ya ha pedido una
entrada") o dos —el de canjear el vale de compra aparece sólo si
el evento tiene vales—, y compartiendo fila se montarían uno
encima del otro. */
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;
}
/* El pie cierra la página, a todo ancho y por debajo de los bloques
finales. 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: 55;
}
/* 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);
}
/* Aquí la cabecera está desmontada, así que el tope de la imagen lo
hace el enlace que la envuelve: se estira hasta el final de las
51 filas y la imagen se pega dentro de él. Si el evento no lleva
enlace en la imagen, es ella la que va en la retícula y se pega
ella misma. */
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;
}
/* 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;
}
}