/* Blog: the cards (used on the landing page too), the listing page and the article page. Needs site.css. */

/* ---------- Card ---------- */
.bgrid { display:grid; gap:40px 28px; grid-template-columns:1fr; }
.bcard { display:block; color:inherit; text-decoration:none; }
.bimg { position:relative; aspect-ratio:4/3; border-radius:20px; overflow:hidden; background:#e9eaee; }
.bimg img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .55s ease; }
.bcard:hover .bimg img { transform:scale(1.06); }
.bimg.noimg { display:grid; place-items:center; background:linear-gradient(135deg, #fdeaec, #f4dfe2); }
.bimg.noimg span { font-family:'Plus Jakarta Sans', var(--h-font); font-weight:600; font-size:3.2rem; color:rgba(227,6,19,.25); letter-spacing:.05em; }

/* Date tag in the top-left corner; the two ::before/::after pieces curve it smoothly into the photo's edges */
.bdate { position:absolute; top:0; left:0; z-index:2; background:#fff; color:#1c1c1e; font-size:.8rem; font-weight:500; line-height:1; padding:11px 16px 11px 14px; border-radius:0 0 18px 0; }
.bdate::before, .bdate::after { content:""; position:absolute; width:18px; height:18px; pointer-events:none; }
.bdate::before { top:0; right:-18px; background:radial-gradient(circle at 100% 100%, transparent 17.5px, #fff 18px); }
.bdate::after { left:0; bottom:-18px; background:radial-gradient(circle at 100% 100%, transparent 17.5px, #fff 18px); }

.barrow { position:absolute; left:50%; top:50%; width:64px; height:64px; margin:-32px 0 0 -32px; border-radius:50%; background:var(--brand); color:#fff; display:grid; place-items:center; opacity:0; transform:scale(.6); transition:opacity .25s ease, transform .25s ease; box-shadow:0 10px 26px rgba(227,6,19,.4); }
.bcard:hover .barrow, .bcard:focus-visible .barrow { opacity:1; transform:none; }
.bcard:focus-visible { outline:3px solid var(--brand); outline-offset:6px; border-radius:20px; }

.btitle { margin-top:16px; font-family:'Plus Jakarta Sans', var(--h-font); font-weight:600; font-size:1.15rem; line-height:1.4; color:#14151a; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; transition:color .2s; }
.bcard:hover .btitle { color:var(--brand); }

@media (min-width:640px) { .bgrid { grid-template-columns:repeat(2, 1fr); } }
@media (min-width:1000px) { .bgrid { grid-template-columns:repeat(3, 1fr); gap:44px 32px; } }

/* ---------- Pages ---------- */
.blog-page { background:#fff; padding:76px var(--gutter) 56px; }              /* 76px = the fixed header */
.blog-in { max-width:1320px; margin:0 auto; }
.blog-hero { padding:48px 0 36px; text-align:center; }
.blog-hero .sec-title { margin-bottom:12px; }
.blog-hero p { color:#6b6b72; max-width:620px; margin:0 auto; line-height:1.7; }
.blog-empty { text-align:center; color:#6b6b72; padding:60px 0; }

.crumbs { display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:.88rem; color:#6b6b72; padding-top:28px; }
.crumbs a { color:#6b6b72; text-decoration:none; transition:color .15s; }
.crumbs a:hover { color:var(--brand); }
.crumbs span[aria-current] { color:#14151a; }

.pager-blog { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:52px; }
.pager-blog a, .pager-blog span { min-width:44px; height:44px; padding:0 14px; display:grid; place-items:center; border:1px solid #e6e6ea; border-radius:999px; background:#fff; color:#14151a; text-decoration:none; font-weight:600; font-size:.92rem; }
.pager-blog a:hover { border-color:var(--brand); color:var(--brand); }
.pager-blog .cur { background:var(--brand); border-color:var(--brand); color:#fff; }
.pager-blog .off { opacity:.4; }

/* ---------- Article ---------- */
.post { max-width:820px; margin:0 auto; }
.post-head { padding:20px 0 0; }
.post-head .sec-title { margin:18px 0 16px; text-wrap:pretty; }
.post-meta { display:flex; flex-wrap:wrap; gap:6px 18px; color:#6b6b72; font-size:.92rem; }
.post-meta span + span::before { content:"•"; margin-right:18px; color:#c8c9cf; }
.post-cover { margin:30px 0 8px; border-radius:22px; overflow:hidden; aspect-ratio:16/9; background:#e9eaee; }
.post-cover img { width:100%; height:100%; object-fit:cover; display:block; }

.prose { margin-top:30px; font-size:1.08rem; line-height:1.85; color:#2c2e35; overflow-wrap:anywhere; }
.prose > :first-child { margin-top:0; }
.prose p { margin:0 0 1.25em; }
.prose h2, .prose h3, .prose h4 { font-family:var(--h-font); font-weight:400; color:#14151a; line-height:1.25; margin:1.9em 0 .6em; }
.prose h2 { font-size:1.95rem; } .prose h3 { font-size:1.55rem; } .prose h4 { font-size:1.25rem; }
.prose ul, .prose ol { margin:0 0 1.25em; padding-left:1.4em; }
.prose li { margin:.45em 0; padding-left:.2em; }
.prose a { color:var(--brand); text-decoration:underline; text-underline-offset:3px; }
.prose a:hover { color:var(--brand-dark); }
.prose blockquote { margin:1.6em 0; padding:6px 0 6px 22px; border-left:4px solid var(--brand); color:#4f5159; font-size:1.15rem; font-style:italic; }
.prose hr { border:0; border-top:1px solid #e6e6ea; margin:2.2em 0; }

.share { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:40px; padding-top:26px; border-top:1px solid #e6e6ea; }
.share b { font-size:.92rem; margin-right:4px; }
.share a, .share button { font:inherit; font-size:.86rem; font-weight:600; padding:9px 16px; border:1px solid #e6e6ea; border-radius:999px; background:#fff; color:#14151a; text-decoration:none; cursor:pointer; transition:border-color .15s, color .15s; }
.share a:hover, .share button:hover { border-color:var(--brand); color:var(--brand); }


.related { margin-top:72px; text-align:center; }
.related .bgrid { text-align:left; margin-top:30px; grid-template-columns:repeat(auto-fit, minmax(260px, 400px)); justify-content:center; }   /* 1-3 cards stay centred */
.back-link { display:inline-block; margin-top:36px; color:#14151a; font-weight:600; text-decoration:none; }
.back-link:hover { color:var(--brand); }

@media (max-width:639px) { .blog-page { padding-bottom:40px; } }

/* ---------- Landing page section ---------- */
.blogs { background:#fff; padding:20px var(--gutter) 28px; }
.blogs-in { max-width:1320px; margin:0 auto; }
.blogs .sec-head { text-align:center; margin-bottom:22px; }
.blogs .sec-head .sec-title { margin-bottom:0; }
.blogs-more { text-align:center; margin-top:28px; }
@media (min-width:900px) { .blogs { padding:28px var(--gutter) 36px; } }

/* ---------- Article page: contents (left) | article | enquiry form (right) ---------- */
.blog-in.wide { max-width:1480px; }
.post-layout { display:grid; grid-template-columns:minmax(0, 1fr); gap:28px; align-items:start; }
.post-layout .post { width:100%; }
.prose h2, .prose h3, .prose h4 { scroll-margin-top:96px; }          /* headings stop below the fixed header when a contents link is used */

.toc-box { border:1px solid #e6e6ea; border-radius:14px; background:#fff; }
.toc-box summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; padding:14px 18px; font-size:.76rem; letter-spacing:.09em; text-transform:uppercase; font-weight:600; color:#74757d; }
.toc-box summary::-webkit-details-marker { display:none; }
.toc-box summary::after { content:"+"; font-size:1.2rem; line-height:1; }
.toc-box[open] summary::after { content:"–"; }
.post-toc { display:none; }
.toc-mobile { margin:24px 0 0; scroll-margin-top:90px; }
.toc-list { list-style:none; margin:0; padding:0 18px 14px; display:grid; gap:2px; }
.toc-list a { display:block; padding:7px 0 7px 14px; border-left:2px solid #e6e6ea; color:#4f5159; text-decoration:none; font-size:.92rem; line-height:1.4; transition:color .15s, border-color .15s; }
.toc-list .l3 a { padding-left:28px; font-size:.88rem; }
.toc-list a:hover { color:var(--brand); }
.toc-list a.on { color:var(--brand); border-left-color:var(--brand); font-weight:600; }

.card.side-card { padding:22px 20px; border:1px solid #e6e6ea; box-shadow:0 12px 40px rgba(20,21,26,.1); }
.side-card h3 { font-family:'Plus Jakarta Sans', var(--h-font); font-weight:600; font-size:1.2rem; line-height:1.3; color:#14151a; }
.side-card .sub { margin:6px 0 14px; }
/* Compact form: the placeholders say what each box is, so the labels are kept only for screen readers */
.compact .field > label { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.compact .grid { gap:10px; }
.compact input, .compact select { padding-top:11px; padding-bottom:11px; }
.compact textarea { min-height:72px; }
.compact .btn { margin-top:2px; }
.compact .note { margin-top:8px; }

@media (min-width:1180px) {
    .post-layout { grid-template-columns:minmax(0, 1fr) 360px; gap:48px; }
    .post-layout.has-toc { grid-template-columns:250px minmax(0, 1fr) 360px; }
    .post-toc { display:block; }
    .toc-mobile { display:none; }
    .post-toc, .post-side { position:sticky; top:96px; max-height:calc(100vh - 116px); overflow:auto; scrollbar-width:thin; }
    .post-side { padding-bottom:4px; }
    .toc-box { border:0; background:none; }
    .toc-box summary { pointer-events:none; cursor:default; padding:0 0 12px; }
    .toc-box summary::after { display:none; }
    .toc-list { padding:0; }
}

/* Comparison tables inside articles: scroll sideways on narrow screens instead of breaking the page */
.prose table { display:block; width:100%; max-width:100%; overflow-x:auto; border-collapse:collapse; margin:1.6em 0; font-size:.96rem; line-height:1.55; -webkit-overflow-scrolling:touch; }
.prose th, .prose td { padding:12px 16px; border:1px solid #e6e6ea; text-align:left; vertical-align:top; min-width:150px; }
.prose th { background:#14151a; color:#fff; font-weight:600; border-color:#14151a; white-space:nowrap; }
.prose tbody tr:nth-child(even) td, .prose tr:nth-child(even) td { background:#faf8f8; }
.prose td:first-child { font-weight:600; color:#14151a; }