/* resources-redesign.css — Resources section (Phase 3). Loaded on the Resources
   landing (body.rd resources) and every article page (body.rd article).
   Requires redesign.css. Elevates the guide cards and the article reading
   experience to the v5 DNA. Article copy is unchanged. style.v5.css stays frozen. */

/* ============================================================
   RESOURCES LANDING (body.resources)
   ============================================================ */
body.resources .resource-grid { gap: 22px; }
body.resources .resource-card {
    position: relative;
    border-radius: 16px;
    padding: 26px 24px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
body.resources .resource-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
    border-color: #D5DEEA;
}
/* navy accent bar that reveals on hover — a small moment of life */
body.resources .resource-card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--navy), #2B6DA8);
    transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
body.resources .resource-card:hover::before { transform: scaleX(1); }
/* pills — calm navy tint instead of orange, consistent across the section */
body.resources .resource-pill { background: rgba(26,60,94,0.08); color: var(--navy); }
/* read-link goes navy (primary action); keep the arrow motion */
body.resources .resource-card-link { color: var(--navy); font-weight: 600; }
body.resources .resource-card-link:hover { color: #143049; }
body.resources .resource-card-time { color: var(--muted); font-size: 12.5px; }

/* ============================================================
   ARTICLE TEMPLATE (body.article) — content-first, calm, premium
   ============================================================ */
body.article .article-breadcrumb { font-size: 13px; color: var(--muted); padding: 22px 0 0; }
body.article .article-breadcrumb a { color: var(--navy); }
body.article .article-breadcrumb span { margin: 0 8px; color: var(--muted); }

body.article .article-header { padding: 24px 0 20px; }
body.article .article-header .resource-pill { background: rgba(26,60,94,0.08); color: var(--navy); }
body.article .article-header h1 { color: var(--navy); letter-spacing: -0.01em; }
body.article .article-header hr { border: 0; border-top: 1px solid var(--border); margin: 20px 0 0; }

/* prose — comfortable measure + navy section heads */
body.article .article-body h2 { color: var(--navy); letter-spacing: -0.005em; }
body.article .article-body a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }

/* data tables inside articles — premium, matches the pricing table language */
body.article .article-body table {
    border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
    box-shadow: var(--shadow-sm); border-collapse: separate; border-spacing: 0;
}
body.article .article-body table th {
    background: var(--navy); color: #fff; font-size: 12.5px;
    letter-spacing: 0.02em; border-bottom: 0;
}
body.article .article-body table td { border-bottom: 1px solid #EEF1F5; }
body.article .article-body table tr:last-child td { border-bottom: 0; }
body.article .article-body table tbody tr:nth-child(even) td { background: #FAFBFD; }

/* CTA card — deep-navy tonal moment with the motif (contained final-CTA) */
body.article .article-cta-card {
    position: relative; overflow: hidden;
    background: var(--navy); border: 0; border-radius: 18px;
    box-shadow: var(--shadow-lg);
}
body.article .article-cta-card::before {
    content: ""; position: absolute; inset: 0; z-index: 0; opacity: .6;
    background-image:
        linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 40px 40px;
    -webkit-mask-image: radial-gradient(90% 120% at 50% 0%, #000, transparent 72%);
            mask-image: radial-gradient(90% 120% at 50% 0%, #000, transparent 72%);
}
body.article .article-cta-card > * { position: relative; z-index: 1; }
body.article .article-cta-card h3 { color: #fff; }
body.article .article-cta-card p { color: rgba(255,255,255,.82); }
body.article .article-cta-card .article-cta-note { color: rgba(255,255,255,.6); }
body.article .article-cta-card .btn-primary { background: #fff; color: var(--navy); border-color: #fff; }
body.article .article-cta-card .btn-primary:hover { background: rgba(255,255,255,.9); }

/* related guides — lift + navy accent on hover */
body.article .related-card {
    border-radius: 12px; padding: 18px; box-shadow: var(--shadow-sm);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
body.article .related-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: #D5DEEA; }