/* ======================================================
   Modelrailways.ie — Blog stylesheet (extends style.css)
   ====================================================== */

.blog-hero { background: linear-gradient(135deg, var(--primary-deep), var(--primary-dark)); color: #fff; padding: 3rem 1rem 2.6rem; text-align: center; }
.blog-hero h1 { color: #fff; margin-bottom: .5rem; }
.blog-hero p { color: rgba(255,255,255,.85); max-width: 640px; margin: 0 auto; }

.blog-grid { padding: 3rem 0 4rem; max-width: var(--maxw); margin: 0 auto; padding-left: 22px; padding-right: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.blog-card { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; box-shadow: var(--shadow-sm); }
.blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--brass); }
.blog-tag { display: inline-block; background: var(--primary-dark); color: var(--brass); font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: 4px; align-self: flex-start; margin-bottom: .8rem; }
.blog-card h2 { font-size: 1.2rem; margin-bottom: .6rem; line-height: 1.3; }
.blog-card h2 a { color: var(--primary-dark); }
.blog-card h2 a:hover { color: var(--brass-deep); }
.blog-card p { color: var(--text); font-size: .94rem; flex-grow: 1; margin-bottom: 1rem; }
.blog-card-meta { font-size: .83rem; color: var(--text-light); border-top: 1px solid var(--border); padding-top: .7rem; display: flex; justify-content: space-between; }

.article { max-width: 740px; margin: 0 auto; padding: 2rem 22px 4rem; }
.article-head h1 { color: var(--primary-dark); margin-top: .5rem; margin-bottom: .8rem; line-height: 1.2; }
.article-meta { color: var(--text-light); font-size: .9rem; margin-bottom: 2rem; border-bottom: 1px solid var(--border); padding-bottom: 1rem; }
.article-content h2 { margin-top: 2rem; margin-bottom: .8rem; font-size: 1.4rem; }
.article-content h3 { margin-top: 1.4rem; margin-bottom: .5rem; font-size: 1.1rem; }
.article-content p { color: var(--text); margin-bottom: 1rem; }
.article-content ul, .article-content ol { margin-left: 1.4rem; margin-bottom: 1.2rem; }
.article-content li { margin-bottom: .4rem; }
.article-content blockquote { border-left: 4px solid var(--brass); padding: .7rem 1.2rem; margin: 1.3rem 0; background: var(--cream-soft); color: var(--text-dark); font-family: var(--serif); font-style: italic; border-radius: 0 var(--radius) var(--radius) 0; }
.article-footer { border-top: 1px solid var(--border); margin-top: 2.5rem; padding-top: 1.5rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .9rem; color: var(--text-light); }

@media (max-width: 960px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } .article { padding: 1.5rem 18px 3rem; } }