/* Shared styles for the joantool.com resources/ content library —
   reused across resources.php and all resources-*.php articles rather
   than repeating the same block six times, the way hoa.php/aboutus.php
   each carry their own one-off inline <style>. */
body { font-family: 'Lato', Arial, sans-serif; }

.res-hero {
    background: linear-gradient(rgba(20,60,100,0.80), rgba(74,139,194,0.75)) center/cover no-repeat;
    min-height: 260px;
    display: flex; align-items: center; justify-content: center;
    text-align: center; color: #fff;
    padding: 5rem 2rem 3rem;
}
.res-hero h1 { font-family: 'Playfair Display', serif; font-size: 2.6rem; margin-bottom: .7rem; max-width: 800px; }
.res-hero p { font-size: 1.1rem; font-weight: 300; max-width: 640px; margin: 0 auto; opacity: .93; }

.breadcrumb { background:#f0f4f8; padding:.7rem 2rem; font-size:.9rem; color:#555; border-bottom:1px solid #dde4ec; }
.breadcrumb a { color:#4a8bc2; text-decoration:none; }
.breadcrumb a:hover { text-decoration:underline; }
.breadcrumb span { margin:0 .4rem; color:#aaa; }

.res-section { padding: 3.5rem 2rem; max-width: 780px; margin: 0 auto; }
.res-section.wide { max-width: 1200px; }
.res-meta { color: #888; font-size: .9rem; margin-bottom: 2rem; }
.res-body h2 { font-family:'Playfair Display',serif; font-size: 1.6rem; color:#2c3e50; margin: 2.2rem 0 1rem; }
.res-body h3 { font-family:'Playfair Display',serif; font-size: 1.25rem; color:#2c3e50; margin: 1.8rem 0 .8rem; }
.res-body p { color:#444; line-height: 1.85; font-size: 1.05rem; margin-bottom: 1.2rem; }
.res-body ul, .res-body ol { color:#444; line-height: 1.85; font-size: 1.05rem; margin: 0 0 1.2rem 1.4rem; }
.res-body li { margin-bottom: .5rem; }
.res-body strong { color: #2c3e50; }

.res-callout { background:#f0f6fb; border-left: 4px solid #4a8bc2; border-radius: 6px; padding: 1.2rem 1.5rem; margin: 1.6rem 0; }
.res-callout .lbl { font-size:.72rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:#4a8bc2; margin-bottom:.4rem; display:block; }
.res-callout p:last-child { margin-bottom: 0; }

.res-figure-table { width: 100%; border-collapse: collapse; margin: 1.6rem 0; font-size: .98rem; }
.res-figure-table th, .res-figure-table td { text-align: left; padding: .7rem 1rem; border-bottom: 1px solid #e2e8f0; }
.res-figure-table th { background: #f0f4f8; color: #2c3e50; font-weight: 700; }

.res-disclaimer { background:#fdf6ec; border:1px solid #f0e0c0; border-radius:6px; padding:1rem 1.3rem; font-size:.92rem; color:#7a5c1e; margin: 2rem 0; }

.res-video-wrap { max-width: 560px; margin: 1.6rem auto; border-radius: 10px; overflow: hidden; box-shadow: 0 8px 28px rgba(0,0,0,.14); }
.res-video-wrap video { width: 100%; display: block; }

.res-source-list { font-size: .88rem; color: #888; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid #e2e8f0; }
.res-source-list li { margin-bottom: .3rem; }

.res-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem; margin: 2rem auto; max-width: 1200px; padding: 0 2rem; }
.res-card { background:#fff; border-radius:10px; padding:1.8rem 1.6rem; box-shadow:0 4px 16px rgba(0,0,0,.07); border-top:4px solid #8fc6de; text-decoration:none; display:block; transition:transform .3s,box-shadow .3s; }
.res-card:hover { transform:translateY(-5px); box-shadow:0 12px 30px rgba(0,0,0,.12); border-top-color:#4a8bc2; }
.res-card h3 { font-family:'Playfair Display',serif; color:#2c3e50; font-size:1.1rem; margin-bottom:.6rem; }
.res-card p { color:#666; font-size:.93rem; line-height:1.7; margin: 0; }
.res-card .res-card-tag { font-size:.72rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:#4a8bc2; margin-bottom:.5rem; display:block; }

.cta-band { background:linear-gradient(135deg,#2c5f8a,#4a8bc2); color:#fff; padding:3.5rem 2rem; text-align:center; }
.cta-band h2 { font-family:'Playfair Display',serif; font-size:1.7rem; margin-bottom:.7rem; }
.cta-band p { font-size:1rem; opacity:.9; margin-bottom:1.6rem; max-width:520px; margin-left:auto; margin-right:auto; }
.btn { display:inline-block; background:#fff; color:#2c5f8a; padding:.85rem 2.2rem; border-radius:6px; text-decoration:none; font-weight:700; font-size:1rem; transition:transform .3s,box-shadow .3s; box-shadow:0 4px 16px rgba(0,0,0,.15); }
.btn:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.2); }
.btn-outline { display:inline-block; background:transparent; color:#4a8bc2; border: 2px solid #4a8bc2; padding: .7rem 1.8rem; border-radius:6px; text-decoration:none; font-weight:700; font-size:.95rem; margin-top: .5rem; }

@media(max-width:900px) { .res-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:580px) { .res-grid { grid-template-columns:1fr; } .res-hero h1 { font-size:1.9rem; } }