/* ---------- Blog index + single post ----------
   Card grid for /blog/ and archives, the category rail, pagination, and the
   single-post reading column. Loaded only on blog / archive / search / single
   views (see crr_child_enqueue_styles). */

/* ================================================================
   Blog index
   ================================================================ */

/* The hero above this is .is-tight (48px top, 0 bottom), so the rail supplies
   the whole gap under it -- symmetric padding here keeps the chips optically
   centred in their own band instead of sitting on the bottom rule. */
.crr-blog-cats{background:var(--white);border-bottom:1px solid var(--line);}
.crr-blog-cats ul{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:24px 0;margin:0;}
.crr-blog-cat{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px;border:1px solid var(--line);border-radius:999px;font-size:.88rem;font-weight:500;color:var(--muted);background:var(--white);transition:border-color .15s ease,color .15s ease,background .15s ease;}
.crr-blog-cat:hover{border-color:var(--teal);color:var(--teal);}
.crr-blog-cat:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
.crr-blog-cat.is-active{background:var(--navy);border-color:var(--navy);color:var(--white);}
.crr-blog-cat-count{font-size:.74rem;font-weight:600;opacity:.65;}
.crr-blog-cat.is-active .crr-blog-cat-count{opacity:.8;}

.crr .crr-blog{padding:56px 0;background:var(--white);}
.crr .crr-blog.crr-bg-sand{background:var(--sand);}

.crr-blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:stretch;}

/* The card markup deliberately avoids post_class() -- Astra injects
   .ast-grid-common-col (20px side padding) and .ast-article-post (2.5em bottom
   margin) through it, which inset the image from the card edges and knocked the
   grid rows out of alignment. */
.crr-blog-card{position:relative;display:flex;flex-direction:column;height:100%;margin:0;padding:0;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.crr-blog-card:hover{transform:translateY(-4px);border-color:transparent;box-shadow:var(--shadow);}
.crr-blog-card:focus-within{border-color:var(--teal);}

/* Featured images are a mix of landscape and portrait crops, so the frame sets
   the ratio and object-fit does the cropping -- otherwise a 768x1024 portrait
   makes its card twice as tall as the one beside it. */
.crr-blog-thumb{position:relative;display:block;width:100%;aspect-ratio:16/10;overflow:hidden;background:var(--sand);}
.crr-blog-thumb img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform .45s ease;}
.crr-blog-card:hover .crr-blog-thumb img{transform:scale(1.05);}
.crr-blog-thumb-fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--teal);font-size:2.4rem;}
/* No scrim over the photo -- the chip carries its own solid navy background,
   which reads on any floor image and keeps the design's "no gradients" rule. */

/* Sits on the image rather than above the headline: it frees a full line of
   vertical space in every card body and ties the label to its photo. */
.crr-blog-media{position:relative;}
.crr-blog-tag{position:absolute;left:14px;bottom:14px;z-index:3;pointer-events:none;padding:5px 11px;border-radius:999px;background:rgba(11,37,64,.86);color:var(--white);font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1;backdrop-filter:blur(6px);}

.crr-blog-card-body{display:flex;flex-direction:column;flex:1;padding:20px 22px 18px;}
/* Clamped so every card in a row breaks at the same height -- these headlines
   run 8-14 words and would otherwise stagger the meta rows across the grid. */
.crr-blog-card h2{font-size:1.05rem;line-height:1.4;margin:0 0 10px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.crr-blog-card h2 a{transition:color .15s ease;}
.crr-blog-card h2 a:hover{color:var(--teal);}
.crr-blog-card p{margin:0 0 18px;color:var(--muted);font-size:.91rem;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.crr-blog-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-size:.82rem;color:var(--muted);}
.crr-blog-go{display:inline-flex;align-items:center;gap:6px;color:var(--teal);font-weight:600;white-space:nowrap;}
.crr-blog-go ion-icon{transition:transform .2s ease;}
.crr-blog-card:hover .crr-blog-go ion-icon{transform:translateX(3px);}

/* Whole card is clickable; the real links sit above the cover so they stay
   focusable and keep their own hover states. */
.crr-blog-cover{position:absolute;inset:0;z-index:1;}
.crr-blog-card-body a,.crr-blog-thumb{position:relative;z-index:2;}
.crr-blog-empty{text-align:center;color:var(--muted);padding:48px 0;}

.crr-blog-more-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:28px;}
.crr-blog-more-head h2{margin:0;font-size:1.5rem;}

/* ---------- Pagination ----------
   Numbers are boxes because they are a set of equal choices; prev/next are
   directional controls, so they read as plain labelled arrows. Boxing all of
   them made the row look like eight competing buttons. */
.crr-pagination{margin-top:48px;}
.crr-pagination ul{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:0;padding:0;}
.crr-pagination li{display:flex;}
.crr-pagination a,.crr-pagination span{display:inline-flex;align-items:center;gap:6px;min-width:44px;height:44px;padding:0 15px;justify-content:center;border:1px solid var(--line);border-radius:var(--radius-sm);font-size:.92rem;font-weight:600;color:var(--navy);background:var(--white);transition:border-color .15s ease,color .15s ease,background .15s ease;}
.crr-pagination a:hover{border-color:var(--teal);color:var(--teal);}
.crr-pagination a:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
.crr-pagination .current{background:var(--navy);border-color:var(--navy);color:var(--white);}
.crr-pagination .dots{border-color:transparent;background:transparent;color:var(--muted);min-width:24px;padding:0;}
.crr-pagination .prev,.crr-pagination .next{border-color:transparent;background:transparent;color:var(--teal-dark);padding:0 10px;}
.crr-pagination .prev:hover,.crr-pagination .next:hover{border-color:transparent;background:transparent;color:var(--teal);}
.crr-pagination .prev ion-icon,.crr-pagination .next ion-icon{transition:transform .2s ease;}
.crr-pagination .prev:hover ion-icon{transform:translateX(-3px);}
.crr-pagination .next:hover ion-icon{transform:translateX(3px);}
/* Small margin pushes them off the number run so the group reads as
   "< back | 1 2 3 | forward >". */
.crr-pagination .prev{margin-right:4px;}
.crr-pagination .next{margin-left:4px;}

/* ================================================================
   Single post
   ================================================================ */

.crr-post-crumbs{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.86rem;color:var(--muted);margin:0 0 14px;}
.crr-post-crumbs a{transition:color .15s ease;}
.crr-post-crumbs a:hover{color:var(--teal);}
.crr-post-crumbs ion-icon{font-size:.8rem;opacity:.6;}
.crr .crr-page-hero.is-tight h1{margin-bottom:14px;}
.crr-post-meta{display:flex;align-items:center;justify-content:center;gap:10px;font-size:.9rem;color:var(--muted);}
.crr-post-meta a{color:var(--teal-dark);font-weight:600;}
.crr-post-meta a:hover{color:var(--teal);}
.crr-post-meta .dot{opacity:.5;}

/* Reading column. Equal top/bottom padding so the article sits centred between
   the hero and the post-nav rather than hugging the heading above it. */
.crr .crr-post{padding:56px 0;}
.crr-post-body{font-size:1.02rem;}
.crr-post-body > *:first-child{margin-top:0;}
.crr-post-body > *:last-child{margin-bottom:0;}
.crr-post-body p{margin:0 0 18px;line-height:1.75;}
.crr-post-body h2{font-size:1.5rem;line-height:1.25;margin:40px 0 14px;}
.crr-post-body h3{font-size:1.15rem;line-height:1.3;margin:30px 0 10px;color:var(--navy);}
.crr-post-body h4{font-size:1.02rem;margin:24px 0 8px;color:var(--navy);}
.crr-post-body a{color:var(--teal-dark);text-decoration:underline;text-underline-offset:2px;}
.crr-post-body a:hover{color:var(--teal);}
.crr-post-body strong{color:var(--navy);}

/* The global `.crr ul` reset strips list markers site-wide; article prose needs
   them back, and the indent that goes with them. */
.crr-post-body ul,.crr-post-body ol{margin:0 0 20px;padding-left:22px;}
.crr-post-body ul li{list-style:disc;margin-bottom:10px;line-height:1.65;}
.crr-post-body ol li{list-style:decimal;margin-bottom:10px;line-height:1.65;}
.crr-post-body li::marker{color:var(--teal);}
.crr-post-body li ul,.crr-post-body li ol{margin:10px 0 0;}

.crr-post-body figure,.crr-post-body .wp-block-image{margin:28px 0;}
.crr-post-body img{width:100%;height:auto;border-radius:var(--radius);}
.crr-post-body figcaption{margin-top:10px;font-size:.85rem;color:var(--muted);text-align:center;}
.crr-post-body blockquote{margin:28px 0;padding:4px 0 4px 20px;border-left:3px solid var(--teal);color:var(--navy);font-size:1.05rem;}
.crr-post-body blockquote p:last-child{margin-bottom:0;}
.crr-post-body hr,.crr-post-body .wp-block-separator{margin:36px 0;border:0;border-top:1px solid var(--line);height:0;}
.crr-post-body table{width:100%;border-collapse:collapse;margin:24px 0;font-size:.94rem;}
.crr-post-body th,.crr-post-body td{padding:11px 14px;border:1px solid var(--line);text-align:left;}
.crr-post-body th{background:var(--sand);color:var(--navy);font-weight:600;}
.crr-post-body .wp-block-table{overflow-x:auto;}

/* ---------- Prev / next ---------- */
.crr-post-nav{background:var(--white);padding:0 0 56px;}
.crr-post-nav .wrap{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch;}
.crr-post-nav-link{display:flex;flex-direction:column;justify-content:center;gap:8px;height:100%;padding:20px 22px;border:1px solid var(--line);border-radius:var(--radius);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;}
.crr-post-nav-link:hover{border-color:transparent;box-shadow:var(--shadow);transform:translateY(-2px);}
.crr-post-nav-link:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
.crr-post-nav-link .dir{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);}
.crr-post-nav-link strong{color:var(--navy);font-size:.98rem;line-height:1.4;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.crr-post-nav-link.is-next{text-align:right;align-items:flex-end;}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .crr-blog-grid{grid-template-columns:repeat(2,1fr);gap:24px;}
}
@media (max-width:760px){
  .crr .crr-blog,.crr .crr-post{padding:40px 0;}
  .crr-blog-cats ul{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding:18px 0;-ms-overflow-style:none;scrollbar-width:none;}
  .crr-blog-cats ul::-webkit-scrollbar{display:none;}
  .crr-blog-cat{flex:0 0 auto;}
  .crr-post-body{font-size:.98rem;}
  .crr-post-body h2{font-size:1.3rem;margin-top:32px;}
  .crr-blog-more-head{flex-direction:column;align-items:flex-start;gap:8px;}
}
@media (max-width:640px){
  .crr-blog-grid{grid-template-columns:1fr;gap:20px;}
  .crr-blog-thumb{aspect-ratio:16/9;}
  .crr-post-nav{padding-bottom:40px;}
  .crr-post-nav .wrap{grid-template-columns:1fr;}
  .crr-post-nav-link.is-next{text-align:left;align-items:flex-start;}
  .crr-pagination a,.crr-pagination span{min-width:40px;height:40px;padding:0 12px;}
  /* Labels drop out; the arrows still carry the meaning at this width. */
  .crr-pagination .prev span,.crr-pagination .next span{display:none;}
  .crr-pagination .prev,.crr-pagination .next{padding:0 6px;min-width:36px;}
}