/* Escape Verse blog: post grid, reading column, riddles, end of post call to action */

/* grid */
.nxb-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 40px; }
.nxb-filter button { font: 500 15px/1 var(--nx-display); text-transform: uppercase; color: var(--nx-text); background: transparent; border: 1px solid var(--nx-line); border-radius: 4px; padding: 14px 22px; cursor: pointer; transition: border-color .25s, background .25s; }
.nxb-filter button:hover { border-color: var(--nx-pink); }
.nxb-filter button.is-on { background: var(--nx-pink); border-color: var(--nx-pink); color: #fff; }
.nxb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.nxb-wrap .nxb-card, .nxb-wrap .nxb-card:hover { color: var(--nx-muted); }
.nxb-card { display: flex; flex-direction: column; background: var(--nx-panel); border: 1px solid var(--nx-line); border-radius: 14px; overflow: hidden; color: var(--nx-muted); text-decoration: none; transition: transform .3s, border-color .3s; }
.nxb-card[hidden] { display: none; }
.nxb-card:hover { transform: translateY(-4px); border-color: rgba(211, 18, 47, .6); }
.nxb-pic { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #000; }
.nxb-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s; }
.nxb-card:hover .nxb-pic img { transform: scale(1.05); }
.nxb-body { display: flex; flex-direction: column; gap: 12px; padding: 24px 24px 28px; flex: 1; }
.nxb-meta { font: 400 13px/1.3 var(--nx-body); color: var(--nx-pink-2); }
.nxb-title { font: 500 22px/1.2 var(--nx-display); text-transform: uppercase; color: #fff; }
.nxb-wrap .nxb-ex { font: 400 15px/1.6 var(--nx-body); color: var(--nx-muted); }
.nxb-more { margin-top: auto; padding-top: 6px; font: 500 14px/1 var(--nx-display); text-transform: uppercase; color: #fff; }
.nxb-more::after { content: ' \2192'; color: var(--nx-pink); }
@media (max-width: 1024px) { .nxb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .nxb-grid-3 .nxb-card:nth-child(3) { display: none; } }
@media (max-width: 640px) { .nxb-grid { grid-template-columns: 1fr; } .nxb-grid-3 .nxb-card:nth-child(3) { display: flex; } .nxb-title { font-size: 20px; } }

/* single post */
.nxb-postmeta { margin: 0; font: 400 15px/1.5 var(--nx-body); color: var(--nx-muted); }
.nxb-postmeta a { color: var(--nx-pink-2); text-decoration: none; }
.nxb-content { font: 400 18px/1.75 var(--nx-body); color: #cfc9d3; }
.nxb-content p, .nxb-content ul, .nxb-content ol { margin: 0 0 1.25em; }
.nxb-content h2 { font: 600 34px/1.15 var(--nx-display); text-transform: uppercase; color: #fff; margin: 1.6em 0 .6em; }
.nxb-content h3 { font: 500 23px/1.25 var(--nx-display); text-transform: uppercase; color: #fff; margin: 1.4em 0 .5em; }
.nxb-content > :first-child { margin-top: 0; }
.nxb-content a { color: #fff; text-decoration: underline; text-decoration-color: var(--nx-pink); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.nxb-content a:hover { color: var(--nx-pink-2); }
.nxb-content strong { color: #fff; font-weight: 600; }
.nxb-content ul, .nxb-content ol { padding-left: 1.3em; }
.nxb-content li { margin: 0 0 .5em; }
.nxb-content li::marker { color: var(--nx-pink); }
.nxb-content ol li::marker { font-weight: 700; }
@media (max-width: 767px) { .nxb-content { font-size: 17px; } .nxb-content h2 { font-size: 27px; } .nxb-content h3 { font-size: 21px; } }

/* riddles: question with a hidden answer */
.nx-riddle { background: var(--nx-panel); border: 1px solid var(--nx-line); border-radius: 12px; padding: 20px 24px; margin: 0 0 14px; }
.nx-riddle > p { margin: 0; color: #fff; }
.nx-riddle details { margin-top: 10px; }
.nx-riddle summary { cursor: pointer; list-style: none; display: inline-block; font: 500 14px/1 var(--nx-display); text-transform: uppercase; color: var(--nx-pink-2); }
.nx-riddle summary::-webkit-details-marker { display: none; }
.nx-riddle summary::after { content: ' +'; }
.nx-riddle details[open] summary::after { content: ' \2212'; }
.nx-riddle details p { margin: 10px 0 0; color: var(--nx-muted); }

/* call to action at the end of a post */
.nxb-cta { display: grid; grid-template-columns: 300px 1fr; background: var(--nx-panel); border: 1px solid rgba(211, 18, 47, .45); border-radius: 14px; overflow: hidden; }
.nxb-cta-pic { min-height: 100%; }
.nxb-cta-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nxb-cta-body { padding: 36px 40px; align-self: center; }
.nxb-cta h2 { font: 600 30px/1.15 var(--nx-display); text-transform: uppercase; color: #fff; margin: 0 0 12px; }
.nxb-cta p { font: 400 16px/1.65 var(--nx-body); color: var(--nx-muted); margin: 0 0 22px; }
.nxb-cta .nxb-btn, .nxb-cta .nxb-btn:hover { color: #fff; }
.nxb-btn { display: inline-block; font: 500 15px/1 var(--nx-display); text-transform: uppercase; color: #fff; background: var(--nx-pink); border-radius: 4px; padding: 18px 28px; text-decoration: none; transition: background .3s, transform .3s; }
.nxb-btn::after { content: ' \2192'; }
.nxb-btn:hover { background: #9e0c22; color: #fff; transform: translateY(-2px); }
@media (max-width: 767px) { .nxb-cta { grid-template-columns: 1fr; } .nxb-cta-pic { aspect-ratio: 16 / 9; } .nxb-cta-body { padding: 26px 22px 30px; } .nxb-cta h2 { font-size: 25px; } }