/* Only shortcode cards and the explicit after-content selection use these grids. */
.pistas-related-inline { container-type:inline-size; width:100%; max-width:100%; margin:20px 0; text-align:left; clear:both; }
.pistas-related-grid { display:grid; gap:18px; grid-template-columns:minmax(0,1fr); }
@container (min-width:600px) {
 .pistas-related-inline .pistas-related-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
.pistas-related-inline .pistas-related-card,
.pistas-related-after .pistas-related-card { float:none; width:auto; min-width:0; margin:0; }
.pistas-related-inline .pistas-related-card { display:flex; align-items:center; background:#f2f2f2; }
.pistas-related-inline .pistas-related-card .image { flex:0 0 110px; width:110px; height:100px; float:none; border-radius:0; }
.pistas-related-inline .pistas-related-card .image img { display:block; width:100%; height:100%; object-fit:cover; }
.pistas-related-inline .pistas-related-card .related-content { flex:1; min-width:0; width:auto; float:none; margin:0; padding:12px; }
.pistas-related-inline .pistas-related-card .related-title { margin:0 0 3px; padding:0; line-height:1.2; }
.pistas-related-inline .pistas-related-card .related-title a { font-size:20px; line-height:1.2; font-weight:600; text-decoration:none; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pistas-related-inline .pistas-related-card .related-content p { width:100%; font-size:16px; line-height:1.4; font-weight:400; color:#666; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pistas-related-inline .pistas-related-card .related-more { display:none; }
.pistas-related-card .related-title,
.pistas-related-card .related-title a { position:static; }
.pistas-related-card .related-title a::after { content:""; position:absolute; inset:0; z-index:2; }
.pistas-related-card .related-more { pointer-events:none; }
.pistas-related-card:has(.related-title a:focus-visible) { outline:2px solid var(--theme-accent,#34ad54); outline-offset:3px; }
.pistas-related-after { clear:both; background:#f2f2f2; padding:45px 0; }
.pistas-related-after > .wrapper { box-sizing:border-box; }
.pistas-related-after .pistas-related-heading { margin:0 0 24px; padding:0; font-size:24px; line-height:1.3; color:#333; }
.pistas-related-after .pistas-related-card { background:#fff; display:flex; flex-direction:column; }
.pistas-related-after .pistas-related-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; }
.pistas-related-after .pistas-related-card .image { width:100%; height:auto; aspect-ratio:3/2; float:none; }
.pistas-related-after .pistas-related-card .image img { display:block; width:100%; height:100%; object-fit:cover; }
.pistas-related-after .pistas-related-card .related-content { display:flex; flex-direction:column; flex:1; width:auto; margin:0; padding:20px; }
.pistas-related-after .pistas-related-card .related-title { margin:0 0 8px; padding:0; line-height:1.2; }
.pistas-related-after .pistas-related-card .related-title a { font-size:22px; line-height:1.2; font-weight:600; text-decoration:none; }
.pistas-related-after .pistas-related-card .related-content p { font-size:15px; line-height:1.5; margin:0 0 24px; width:auto; white-space:normal; }
.pistas-related-after .pistas-related-card .related-more { align-self:flex-start; margin-top:auto; }
@media (min-width:729px) and (max-width:1000px) {
 .pistas-related-after .pistas-related-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:728px) {
 /* The legacy start/index layout stays intact; its CTA is now a decorative span. */
 .pistas-related-card .related-content .related-more { display:none; }
 .pistas-related-after { padding:28px 0; }
 .pistas-related-after .pistas-related-heading { font-size:21px; margin-bottom:18px; }
 .pistas-related-after .pistas-related-grid { grid-template-columns:minmax(0,1fr); gap:15px; }
 .pistas-related-inline .pistas-related-grid { gap:15px; }
 .pistas-related-after .pistas-related-card { flex-direction:row; align-items:center; }
 .pistas-related-inline .pistas-related-card .image,
 .pistas-related-after .pistas-related-card .image { flex:0 0 85px; width:85px; height:70px; aspect-ratio:auto; border-radius:0; }
 .pistas-related-inline .pistas-related-card .related-content,
 .pistas-related-after .pistas-related-card .related-content { display:block; flex:1; min-width:0; width:auto; float:none; margin:0; padding:8px 12px; }
 .pistas-related-inline .pistas-related-card .related-title,
 .pistas-related-after .pistas-related-card .related-title { margin:0 0 3px; padding:0; line-height:1.2; }
 .pistas-related-inline .pistas-related-card .related-title a,
 .pistas-related-after .pistas-related-card .related-title a { display:block; font-size:18px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
 .pistas-related-inline .pistas-related-card .related-content p,
 .pistas-related-after .pistas-related-card .related-content p { margin:0; width:100%; font-size:15px; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}

/* Compact headings retain normal text colour, including theme content links. */
.pistas-related-inline .pistas-related-card { border:0; }
#main-content .pistas-related-card .related-title,
#main-content .pistas-related-card .related-title a { line-height:1.2; }
@media (max-width:728px) {
 #main-content .pistas-related-inline .pistas-related-card .related-title a,
 #main-content .pistas-related-after .pistas-related-card .related-title a { color:#333; font-size:16px; font-weight:500; text-decoration:none; }
}

/* 1.0.34: one bounded horizontal layout, including Start/Index on mobile.
   A fixed image cell avoids extra zoom when a title wraps. */
@media (min-width:729px) {
 #main-content .pistas-related-card .related-title { margin-bottom:8px; }
}
#main-content .pistas-related-inline .pistas-related-card { display:grid; grid-template-columns:110px minmax(0,1fr); align-items:stretch; height:100px; min-height:0; border:0; }
#main-content .pistas-related-inline .pistas-related-card .image { position:relative; width:auto; height:auto; min-width:0; float:none; border-radius:0; }
#main-content .pistas-related-inline .pistas-related-card .image img { position:absolute; inset:0; display:block; width:100%; height:100%; min-width:0; object-fit:cover; object-position:center; }
#main-content .pistas-related-inline .pistas-related-card .related-content { display:flex; flex-direction:column; justify-content:center; min-width:0; width:auto; float:none; margin:0; padding:8px 12px; }
#main-content .pistas-related-inline .pistas-related-card .related-title { font-size:18px; line-height:1.2; margin:0 0 3px; padding:0; }
#main-content .pistas-related-inline .pistas-related-card .related-title a { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; white-space:normal; font-size:inherit; line-height:inherit; font-weight:500; color:#333; text-decoration:none; }
#main-content .pistas-related-inline .pistas-related-card .related-content p { margin:0; }
#main-content .pistas-related-inline .pistas-related-card:not(:has(.image)) { grid-template-columns:minmax(0,1fr); }
@media (max-width:728px) {
 #main-content .pistas-related-card,
 #main-content .pistas-related-inline .pistas-related-card { display:grid; grid-template-columns:108px minmax(0,1fr); align-items:stretch; height:90px; min-height:0; box-sizing:border-box; }
 #main-content .pistas-related-card .image,
 #main-content .pistas-related-inline .pistas-related-card .image { position:relative; float:none; width:auto; height:auto; min-width:0; aspect-ratio:auto; border-radius:0; }
 #main-content .pistas-related-card .image img { position:absolute; inset:0; display:block; width:100%; height:100%; min-width:0; object-fit:cover; object-position:center; }
 #main-content .pistas-related-card .related-content,
 #main-content .pistas-related-inline .pistas-related-card .related-content { display:flex; flex-direction:column; justify-content:center; float:none; width:auto; min-width:0; margin:0; padding:8px 12px; }
 #main-content .pistas-related-card .related-title,
 #main-content .pistas-related-inline .pistas-related-card .related-title { font-size:16px; line-height:1.2; margin:0 0 3px; padding:0; }
 #main-content .pistas-related-card .related-title a,
 #main-content .pistas-related-inline .pistas-related-card .related-title a,
 #main-content .pistas-related-after .pistas-related-card .related-title a { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; white-space:normal; color:#333; font-size:16px; font-weight:500; line-height:1.2; text-decoration:none; }
 #main-content .pistas-related-card .related-content p { width:100%; margin:0; font-size:15px; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
 #main-content .pistas-related-card::after { content:none; }
 #main-content .pistas-related-card:not(:has(.image)) { grid-template-columns:minmax(0,1fr); }
}