/* Resources (Insights, FAQ, Glossary) fixes, scoped by body[data-area=resources] so shared templates.css stays untouched. */

/* Hub cards: an even grid instead of the tall featured card, which left a mostly empty card and lone last cards. */
@media(min-width:801px){
 [data-area=resources][data-template=hub] .detail-grid:has(>article:nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr));column-gap:16px}
 [data-area=resources][data-template=hub] .detail-grid:has(>article:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
 [data-area=resources][data-template=hub] .detail-grid:has(>article:nth-child(3))>article:first-child{grid-row:auto}
 [data-area=resources][data-template=hub] .detail-grid:has(>article:nth-child(3))>article:first-child h3{font-size:20px}
 [data-area=resources] .detail-grid:has(>article:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
 [data-area=resources][data-template=hub] .library-grid:has(>.library-card:nth-child(3):last-child)>.library-card:first-child{grid-column:auto}
}
@media(min-width:801px) and (max-width:1100px){
 [data-area=resources][data-template=hub] .detail-grid:has(>article:nth-child(3)){grid-template-columns:repeat(2,minmax(0,1fr))}
}
[data-area=resources] :is(.detail-grid>article,.library-card){display:flex;flex-direction:column}
[data-area=resources] .detail-grid>article>.detail-link{margin-top:auto;align-self:flex-start}

/* Card arrow sat on the card border. */
body[data-area=resources] .library-card{padding-right:56px!important}
body[data-area=resources] .library-card b{right:22px;top:22px}

/* Article: the answer box spanned 40 grid rows, and each empty row's gap added a large blank area after the article. */
[data-area=resources][data-template=article] .article{row-gap:0}
[data-area=resources][data-template=article] .article>:not(.answer)+:not(.answer){margin-top:24px}

/* FAQ: the +/- marker sat mid-row; put it at the end of the divider line. */
[data-area=resources] .detail-faq summary{max-width:none}
[data-area=resources] .detail-faq summary:after{flex-shrink:0}

/* Glossary: definitions as a two-column card grid instead of one long narrow column. */
[data-area=resources] .terms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:28px}
[data-area=resources] .term{padding:22px 24px;border:1px solid var(--rule);border-radius:18px;background:linear-gradient(160deg,#101521,#0b0d12);scroll-margin-top:120px}
[data-area=resources] .term h3{margin:0 0 10px}
[data-area=resources] .term p{margin:0 0 10px}
[data-area=resources] .term p:last-child{margin:0}
[data-area=resources] .term:target{border-color:#329fff99}
[data-area=resources] .detail-narrow:has(>.terms){max-width:none}
@media(max-width:800px){[data-area=resources] .terms{grid-template-columns:1fr}}

/* Phone: comparison tables fit the screen instead of clipping the last column. */
@media(max-width:600px){
 [data-area=resources] .table-wrap th,[data-area=resources] .table-wrap td{min-width:0;padding:12px 8px;font-size:12px}
 [data-area=resources] .table-wrap caption{text-align:left}
}

/* Numbered steps: the number sat a line below its step title. */
[data-area=resources] .detail-steps li:before{top:7px}

/* Article "How Exodus approaches this" box: a card, so it reads as a pointer to the product, not another body section. */
[data-area=resources][data-template=article] .solution-callout{margin-top:40px;padding:24px 28px;border:1px solid var(--rule);border-radius:18px;background:linear-gradient(160deg,#101521,#0b0d12)}
[data-area=resources][data-template=article] .solution-callout h2{font-size:clamp(24px,2.2vw,30px);margin:6px 0 10px}
[data-area=resources][data-template=article] .solution-callout p:last-child{margin:0}

/* "The short answer" box: same card style as the rest of the site (full border, even 18px corners), not a left-bar quote. */
body[data-area=resources] .answer{padding:24px 28px;border:1px solid var(--rule);border-left:1px solid var(--rule);border-radius:18px;background:linear-gradient(160deg,#101521,#0b0d12)}
body[data-area=resources][data-template=article] .article>.answer{border-radius:18px}
body[data-area=resources] .answer .eyebrow{margin:0 0 12px}
body[data-area=resources] .answer p:last-child{margin-bottom:0}
@media(max-width:1000px){body[data-area=resources][data-template=article] .article>.answer{margin-bottom:24px}}