@import url('../shared/styles.css?v=0a2dac9eb0d6');

.blog-hero { background: var(--c); padding: 72px 0; }
.blog-hero h1 { max-width: 800px; }
.blog-hero p { max-width: 580px; color: var(--m); line-height: 1.85; }
.blog-text-link { display: inline-block; font-size: 14px; font-weight: 800; color: #00647e; text-decoration: underline; text-underline-offset: 5px; margin-top: 12px; }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr)); gap: 24px; }
.blog-entry { display: grid; grid-template-columns: .8fr 1.3fr; border: 1px solid #cae4f1; border-radius: 18px; overflow: hidden; max-width: 900px; }
.blog-entry-visual { min-height: 270px; display: grid; place-items: center; background: #0292b7; padding: 35px; }
.blog-entry-visual img { width: min(100%,180px); height: auto; border-radius: 50%; }
.blog-entry-body { padding: 32px; display: flex; flex-direction: column; align-items: start; }
.blog-category { background: #e5f7fb; color: #00647e; font-size: 11px; font-weight: 800; border-radius: 20px; padding: 5px 10px; }
.blog-entry h3 { font-weight: 500; font-size: 23px; line-height: 1.4; margin: 18px 0 10px; }
.blog-entry h3 a:hover { text-decoration: underline; }
.blog-entry p { font-size: 15px; color: var(--m); line-height: 1.75; }
.blog-entry-meta { font-size: 12px; color: var(--m); margin: 8px 0; }
.blog-entry .blog-text-link { margin-top: auto; padding-top: 15px; }
.blog-invite { padding: 50px 0; background: var(--c); margin-bottom: 55px; }
.blog-invite > .wrap { display: flex; justify-content: space-between; align-items: center; gap: 35px; }
.blog-invite h2 { font-size: 30px; }
.blog-invite p { color: var(--m); line-height: 1.7; max-width: 540px; }
.blog-invite .actions { max-width: 350px; }
@media(max-width:950px) { nav .blog-menu-link { display: inline-flex; } }
@media(max-width:640px) {
  .blog-hero { padding: 44px 0; }
  .blog-entry { grid-template-columns: 1fr; }
  .blog-entry-visual { min-height: 180px; padding: 25px; }
  .blog-entry-visual img { width: 125px; }
  .blog-entry-body { padding: 24px; }
  .blog-invite > .wrap { flex-direction: column; align-items: start; }
  .blog-page nav { gap: 12px; }
}
@media(prefers-color-scheme:dark) {
  .blog-entry { background: #192c37; border-color: #344b59; }
  .blog-category { background: #12333d; color: #7fe4f5; }
  .blog-text-link { color: #7fe4f5; }
}

.blog-entry-visual.has-cover { padding: 0; background: #cae4f1; }
.blog-entry-visual.has-cover img { width: 100%; height: 100%; min-height: 270px; object-fit: cover; border-radius: 0; }
@media(max-width:640px) { .blog-entry-visual.has-cover img { height: auto; min-height: 0; aspect-ratio: 3 / 2; } }