/* Green Mountain Turf — blog index + post pages.
   Geometry measured from the live Wix Blog widgets at 1440px:
   feed cards 1060px wide (514px image + text column), post card 940px with
   100px side padding (740px text column), recent-post cards 291px. */

:root {
  --blog-line: rgba(237, 236, 245, .75);
  --blog-rule: rgba(0, 0, 0, .2);
  --blog-text: #333;
}

/* ---------- Blog hero ---------- */
.blog-hero { min-height: 411px; } /* image opacity (.39, live --fill-layer-image-opacity) is set inline */
.blog-hero p { margin-top: 12px; }

/* ---------- "All Posts" bar ---------- */
.blog-nav { height: 80px; display: flex; align-items: center; }
.blog-nav a { font-size: 14px; line-height: 19.6px; color: #393939; }
.blog-nav a:hover { color: var(--green-dark); }

/* ---------- Shared byline ---------- */
.byline { display: flex; align-items: center; gap: 10px; }
.byline .avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: 0 0 32px; }
.byline .author { display: block; font-size: 12px; line-height: 18px; }
.byline .meta { display: flex; align-items: center; font-size: 12px; line-height: 17px; }
.byline .dot { width: 2px; height: 2px; margin: 0 8px; border-radius: 50%; background: #000; flex: 0 0 2px; }

/* ---------- Feed (blog.html) ---------- */
.blog-feed { max-width: 1060px; margin: 0 auto; padding-bottom: 63px; }
.post-list { display: grid; gap: 31.5px; margin-top: 20px; }
.post-item {
  position: relative;
  display: grid;
  grid-template-columns: 514px 1fr;
  height: 386px;
  border: 1px solid var(--blog-line);
  background: #fff;
}
.post-item-img { display: block; margin: -1px 0 -1px -1px; overflow: hidden; }
.post-item-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.post-item:hover .post-item-img img { transform: scale(1.03); }
.post-item-body { position: relative; padding: 27px 37px 0 35px; min-width: 0; }
.post-item-title { margin-top: 15px; font-size: 28px; line-height: 34px; }
.post-item-title a {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.post-item-title a:hover { color: var(--green-dark); }
.post-item-excerpt {
  margin-top: 12px; font-size: 16px; line-height: 24px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.post-item-rule { position: absolute; left: 35px; right: 37px; bottom: 59px; height: 1px; background: var(--blog-rule); }

/* ---------- Post page ---------- */
.post-wrap { max-width: 940px; margin: 0 auto; padding-bottom: 20px; }
.post-wrap .blog-nav a { color: #000; }
.post-card { border: 1px solid var(--blog-line); background: #fff; padding: 60px 99px; margin-top: 20px; }
.post-card .byline { gap: 12px; }
.post-card .byline .author, .post-card .byline .meta { font-size: 14px; line-height: 21px; }
.post-card .byline .dot { margin: 0 7px; }
.post-card .byline-text { display: flex; flex-wrap: wrap; align-items: center; }
.post-card .byline .author::after { content: ""; display: inline-block; vertical-align: middle; width: 2px; height: 2px; margin: 0 7px; border-radius: 50%; background: #000; }
.post-title { margin-top: 18px; font-size: 40px; line-height: 56px; }

.post-body { margin-top: 34px; color: var(--blog-text); font-size: 18px; line-height: 27px; overflow-wrap: break-word; }
.post-body p { margin: 0; }
.post-body h2 { font-size: 28px; line-height: 39.2px; color: var(--blog-text); }
.post-body h3 { font-size: 22px; line-height: 30.8px; color: var(--blog-text); }
.post-body h4 { font-size: 20px; line-height: 28px; color: var(--blog-text); }
.post-body ul, .post-body ol { margin: 0; padding: 0; }
.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body li { margin-left: 27px; padding-left: 9px; }
.post-body strong { font-weight: 700; }
.post-body a { color: #393939; }
.post-body a:hover { opacity: .8; }
.post-body sup { font-size: 15px; line-height: 0; }
.post-figure { margin: 0; }
.post-figure img { width: 100%; height: auto; }

.post-share { display: flex; gap: 30px; margin-top: 20px; padding: 23px 0; border-top: 1px solid var(--blog-rule); }
.post-share a, .post-share button {
  display: block; width: 19px; height: 19px; padding: 0; border: 0; background: none; color: #000; cursor: pointer;
}
.post-share svg { display: block; width: 19px; height: 19px; }
.post-share a:hover, .post-share button:hover { color: var(--green-dark); }
.post-actions-rule { height: 40px; border-top: 1px solid var(--blog-rule); }
.post-share-note { font-size: 12px; line-height: 19px; color: #555; margin-left: -18px; }

/* ---------- Recent posts ---------- */
.recent-posts { margin-top: 30px; }
.recent-head { display: flex; justify-content: space-between; align-items: baseline; }
.recent-head h2 { font-family: var(--font-body); font-weight: 400; font-size: 18px; line-height: 27px; }
.recent-head a { font-size: 14px; line-height: 21px; }
.recent-head a:hover, .recent-card h3 a:hover { color: var(--green-dark); }
.recent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 33px; margin-top: 20px; }
.recent-card { display: flex; flex-direction: column; height: 314px; border: 1px solid var(--blog-line); background: #fff; }
.recent-card .thumb { display: block; height: 162px; overflow: hidden; flex: 0 0 162px; }
.recent-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.recent-card h3 { margin: 24px 24px 0; font-size: 18px; line-height: 21px; }
.recent-card h3 a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.recent-card .rule { margin: auto 24px 59px; height: 1px; background: var(--blog-rule); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .post-item { grid-template-columns: 45% 1fr; }
}
@media (max-width: 980px) {
  .blog-nav { height: 60px; }
  .post-list, .post-card { margin-top: 0; }
  .post-item { grid-template-columns: 1fr; height: auto; }
  .post-item-img { margin: -1px -1px 0; aspect-ratio: 514 / 386; }
  .post-item-body { padding: 24px 24px 70px; }
  .post-item-rule { left: 24px; right: 24px; bottom: 40px; }
  .post-card { padding: 40px 32px; }
  .recent-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
  .recent-card { height: auto; }
  .recent-card .thumb { height: auto; aspect-ratio: 16 / 9; flex: none; }
  .recent-card .rule { margin: 25px 24px 40px; }
}
@media (max-width: 620px) {
  .blog-hero { min-height: 340px; }
  .blog-hero p { font-size: 16px; line-height: 23px; }
  .post-item-title { font-size: 22px; line-height: 28px; }
  .post-card { padding: 28px 18px; }
  .post-title { font-size: 28px; line-height: 38px; }
  .post-body { font-size: 16px; line-height: 25px; }
  .post-body h2 { font-size: 24px; line-height: 33px; }
  .post-body h2 span { font-size: inherit !important; }
  .post-body h3 { font-size: 20px; line-height: 28px; }
  .post-body li { margin-left: 20px; padding-left: 4px; }
}