/* CommentGrid blog structure, adapted to the FollowGrid brand and preview content. */
.blog-directory .nav a[aria-current="page"]{color:var(--orange);font-weight:700}
.blog-directory .blog-hero{padding:28px 0 24px;border:0;text-align:center}
.blog-hero .wrap{max-width:1248px}
.blog-directory .blog-hero h1{max-width:none;margin:0 auto 20px;font-family:var(--brand-display);font-size:var(--font-size-title);line-height:1.25;font-weight:700;letter-spacing:-.02em;text-wrap:balance}
.blog-directory .blog-hero .lead{max-width:800px;margin:auto;font-size:var(--font-size-body);line-height:1.65;color:var(--text-2);}
.blog-preview-note{margin-top:12px;color:var(--text-3);font-size:var(--font-size-label);line-height:22px}
.blog-filter-wrap{padding-bottom:32px}
.blog-filters{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
.blog-filters button,.blog-load-more{border:1px solid #d5d7dc;border-radius:999px;background:#fff;color:var(--text);font-size:var(--font-size-label);line-height:22px;min-height:40px;padding:8px 20px;transition:background .2s,border-color .2s}
.blog-filters button:hover,.blog-load-more:hover{background:#fff;color:#55555d;border-color:#dbab8d}
.blog-filters button[aria-pressed="true"]{background:var(--peach);border-color:#e9c9b5;color:var(--orange-deep);font-weight:600}
.blog-filters button[aria-pressed="true"]:hover{background:#fff8f3;color:var(--orange-hover)}
.blog-results{background:#f8f9fb;padding:40px 0 72px}
.blog-results>.wrap{max-width:1168px}
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.blog-card{position:relative;min-width:0;display:flex;flex-direction:column;gap:12px;border:1px solid #e4e8ed;border-radius:24px;background:#fff;box-shadow:none;transition:border-color .2s,background .2s}
.blog-card:hover{border-color:#e5b89b;box-shadow:none;transform:none}
.blog-cover{aspect-ratio:16/9;overflow:hidden;border-radius:23px 23px 0 0;background:#fff4ec}
.blog-cover img{display:block;width:100%;height:100%;object-fit:cover}
.blog-card-content{flex:1;display:flex;flex-direction:column;gap:16px;padding:8px 20px 24px}
.blog-card h2{font-family:var(--sans);font-size:var(--font-size-card);font-weight:700;line-height:1.5;letter-spacing:-.01em}
.article-preview{border:0;background:none;color:inherit;text-align:left;font:inherit;padding:0}
.article-preview::after{content:"";position:absolute;inset:0;border-radius:24px}
.blog-card:has(.article-preview:focus-visible){outline:3px solid #7258d6;outline-offset:4px}
.article-preview:focus-visible{outline:none}
.blog-card-content>p{font-size:var(--font-size-body);line-height:26px;color:var(--text-2)}
.blog-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;margin-top:auto;padding-top:6px;font-size:var(--font-size-meta);line-height:20px;color:var(--text-3)}
.blog-meta .reading-time{display:inline-flex;align-items:center;gap:6px;color:var(--text-3);font-weight:400}
.reading-time-icon{display:block;flex:none}
.blog-featured{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:24px;padding:28px;background:#fff8f3;border-color:#efdccc;min-height:340px}
.blog-featured .blog-cover{border-radius:20px}
.blog-featured .blog-card-content{padding:0;gap:18px}
.blog-featured h2{font-size:var(--font-size-feature);line-height:1.4;}
.blog-featured .blog-meta{margin-top:0}
.blog-more{display:flex;justify-content:center;margin-top:36px}
.blog-more:has([hidden]){display:none}
.blog-load-more{min-height:46px;padding:10px 28px;font-weight:600}
.blog-dialog{position:fixed;inset:0;margin:auto;width:calc(100% - 40px);max-width:620px;max-height:calc(100dvh - 48px);overflow:auto;padding:32px;border:1px solid #eadbce;border-radius:24px;background:#fff;color:var(--text);box-shadow:none}
.blog-dialog::backdrop{background:#16161a80;backdrop-filter:blur(3px)}
.blog-dialog form{display:flex;justify-content:flex-end;margin-bottom:20px}
.preview-close{padding:7px 16px;min-height:40px;border:1px solid #d5d7dc;border-radius:999px;background:#fff;font-size:var(--font-size-label)}
.preview-category{font-size:var(--font-size-label);font-weight:600;color:var(--orange);margin-bottom:12px}
.blog-dialog h2{font-size:var(--font-size-price);line-height:38px;margin-bottom:20px;letter-spacing:-.02em}
.preview-description{font-size:var(--font-size-body);line-height:26px;color:var(--text-2)}
.preview-note{margin:24px 0;padding:16px;border-radius:12px;background:var(--peach);font-size:var(--font-size-label);line-height:24px;color:var(--text-2)}
.preview-related{display:inline-flex;align-items:center;justify-content:center;text-align:center}
body:has(.blog-dialog[open]){overflow:hidden}
@media(max-width:960px){
  .blog-directory .blog-hero h1{font-size:var(--font-size-title);line-height:1.25;font-weight:700;font-family:var(--brand-display);}
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .blog-featured{padding:24px;grid-template-columns:1fr}
  .blog-featured .blog-cover{max-height:350px}
}
@media(max-width:600px){
  .blog-directory .blog-hero{padding:28px 0 24px}
  .blog-directory .blog-hero h1{font-size:var(--font-size-title);line-height:1.25;margin-bottom:16px;font-weight:700;font-family:var(--brand-display);}
  .blog-directory .blog-hero .lead{font-size:var(--font-size-body);line-height:1.65;color:var(--text-2);}
  .blog-filters{gap:8px}
  .blog-filters button{padding:8px 14px;font-size:var(--font-size-label)}
  .blog-filter-wrap{padding-bottom:24px}
  .blog-results{padding:28px 0 48px}
  .blog-grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .blog-featured{padding:16px;gap:20px}
  .blog-featured .blog-cover{border-radius:16px}
  .blog-featured h2{font-size:var(--font-size-feature);line-height:1.4;}
  .blog-featured .blog-card-content{padding:0 4px 8px}
  .blog-card-content{padding:4px 20px 22px}
  .blog-card h2{font-size:var(--font-size-card);line-height:1.5;}
  .blog-dialog{padding:24px;width:calc(100% - 32px)}
  .blog-dialog h2{font-size:var(--font-size-feature);line-height:32px}
}
@media(prefers-reduced-motion:reduce){.blog-card,.blog-filters button,.blog-load-more{transition:none}.blog-card:hover{transform:none}}