/* Home layout follows the 1440px Figma frame (1320px content, 60px gutters). */
.hero { min-height: 331px; }
.home-content > .container { max-width: 1440px; padding-left: 60px; padding-right: 60px; }
.popular-grid, .post-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.popular-grid { grid-template-rows: repeat(2, minmax(209px, auto)); row-gap: 42px; }
.post-grid { row-gap: 30px; margin-top: 40px; align-items: stretch; }
.popular-grid .featured { grid-row: 1 / span 2; }
.popular-grid .post-card:not(.featured), .post-grid .post-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; min-width: 0; min-height: 209px; }
.popular-grid .post-card, .post-grid .post-card { overflow: hidden; background: #fff; border: 1px solid #dce3ed; border-radius: 9px; box-shadow: 0 2px 10px rgba(29,53,91,.045); }
.popular-grid .post-card:hover, .post-grid .post-card:hover { border-color: #bfcee2; box-shadow: 0 6px 18px rgba(29,53,91,.09); }
.popular-grid .card-image, .post-grid .card-image { display: block; min-width: 0; margin: 0; }
.popular-grid .post-card:not(.featured) .card-image img, .popular-grid .post-card:not(.featured) .image-placeholder, .post-grid .card-image img, .post-grid .image-placeholder { display: block; width: 100%; height: 100%; min-height: 209px; object-fit: contain; background: #e3eaf3; border-radius: 0; }
.popular-grid .post-card:not(.featured) .card-body, .post-grid .card-body { display: flex; flex-direction: column; min-width: 0; padding: 14px 16px; }
.popular-grid .post-card:not(.featured) h3, .post-grid .post-card h3 { margin: 0 0 10px; font-size: 24px; line-height: 1.1; overflow-wrap: anywhere; }
.popular-grid .post-card:not(.featured) .card-excerpt, .post-grid .card-excerpt { color: #243655; font-size: 14px; line-height: 1.2; overflow-wrap: anywhere; }
.popular-grid .post-card:not(.featured) .card-excerpt p, .post-grid .card-excerpt p { margin: 0; }
.popular-grid .post-card:not(.featured) .card-meta, .post-grid .card-meta { margin-top: auto; padding-top: 12px; }
.popular-grid .featured { display: flex; flex-direction: column; }
.popular-grid .featured .card-image img, .popular-grid .featured .image-placeholder { display: block; width: 100%; height: 298px; min-height: 0; object-fit: contain; background: #e3eaf3; border-radius: 0; }
.popular-grid .featured .card-body { display: flex; flex: 1; flex-direction: column; padding: 14px 16px; }
.popular-grid .featured h3 { margin: 0 0 10px; font-size: 24px; line-height: 1.1; }
.popular-grid .featured .card-excerpt { color: #243655; font-size: 14px; line-height: 1.2; }
.popular-grid .featured .card-meta { margin-top: auto; padding-top: 12px; }
@media (max-width: 900px) {
  .hero { min-height: 405px; }
  .home-content > .container { padding-left: 20px; padding-right: 20px; }
  .popular-grid { grid-template-rows: auto auto; gap: 24px; }
  .popular-grid .featured { grid-column: 1 / -1; grid-row: auto; }
  .popular-grid .post-card:last-child { grid-column: auto; display: flex; grid-template-columns: none; }
  .popular-grid .featured .card-image img, .popular-grid .featured .image-placeholder { height: auto; aspect-ratio: 2.1; }
  .popular-grid .post-card:not(.featured), .post-grid .post-card { display: flex; flex-direction: column; }
  .popular-grid .post-card:not(.featured) .card-image img, .popular-grid .post-card:not(.featured) .image-placeholder, .post-grid .card-image img, .post-grid .image-placeholder { height: auto; min-height: 0; aspect-ratio: 1.55; }
  .popular-grid .post-card:not(.featured) h3, .post-grid .post-card h3 { font-size: 20px; line-height: 1.2; }
}
@media (max-width: 600px) {
  .hero { min-height: 362px; }
  .popular h2 { max-width: 300px; font-size: 30px; line-height: 1.2; }
  .popular-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .popular-grid .post-card:not(.featured), .popular-grid .featured { min-height: 457px; }
  .popular-grid .featured { grid-column: 1 / -1; }
  .popular-grid .post-card:not(.featured) h3 { font-size: 20px; }
  .post-grid { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
}