/* Styles for blog posts generated via the admin editor */

/* Inline Etsy product cards inside a post (hydrated by assets/post.js).
   Reuses the homepage .product-card look; sized for the narrower post column. */
.post-products {
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 22px;
  margin: 2.5rem 0;
}
.post-products .product-title { font-size: 0.95rem; }
@media (max-width: 900px) {
  .post-products { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
}
.etsy-products:empty { min-height: 120px; }

/* Post hero image (injected by post.js from the post's thumbnail) */
.post-hero-img { display: block; width: min(900px, calc(100% - 48px)); margin: 0 auto 2.2rem;
  border-radius: 16px; max-height: 520px; object-fit: cover; box-shadow: 0 10px 36px rgba(40,30,20,.16); }

/* Sane image sizes inside articles (Quill/agent images were rendering huge) */
.ql-content img { display: block; margin: 1.6rem auto; max-width: 100%; max-height: 72vh;
  width: auto; border-radius: 10px; }

/* Floating admin action bar (admins only — post.js) */
.admin-pill-bar { position: fixed; right: 22px; bottom: 22px; z-index: 90; display: flex; gap: 10px; }
.admin-pill-bar .admin-edit-pill { position: static; }
.admin-delete-pill { background: #a83a3a !important; border: none; cursor: pointer; }
.admin-delete-pill:hover { background: #8c2e2e !important; }
.admin-edit-pill { position: fixed; right: 22px; bottom: 22px; z-index: 90;
  background: #163087; color: #fff; text-decoration: none; padding: .7rem 1.2rem;
  border-radius: 999px; font: 600 .92rem 'Lora', Georgia, serif;
  box-shadow: 0 6px 22px rgba(15,36,102,.35); }
.admin-edit-pill:hover { background: #0f2466; color: #fff; }

/* Inline admin actions under the post title (admins only) */
.post-admin-row { display: flex; gap: 10px; justify-content: center; margin-top: 1.1rem; }
.post-admin-row .admin-edit-pill { position: static; }

/* Auto-injected "Newest in the shop" strip (post.js) */
.shop-strip { max-width: 900px; margin: 0 auto; padding: 2.5rem 24px 3.5rem; border-top: 1px solid #e2d7c3; }
.shop-strip .section-head h2 { font-size: 1.6rem; }
@media (max-width: 600px) { .shop-strip-grid { grid-template-columns: repeat(2, 1fr) !important; } }

/* Named color-palette block inside articles (agent-generated) */
.post-palette { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; margin: 2.2rem 0; }
.post-palette .sw { text-align: center; width: 108px; }
.post-palette .sw i { display: block; height: 96px; border-radius: 14px; border: 4px solid #fff; box-shadow: 0 3px 14px rgba(40,30,20,.18); }
.post-palette .sw b { display: block; margin-top: .5rem; font: 600 .82rem 'Lora', Georgia, serif; color: #2a2a3a; }
.post-palette .sw span { font: italic .72rem 'Lora', Georgia, serif; color: #7a6f5e; }

.post-etsy-cta { background: #f0e8d5; border: 1px solid #d8cbb8; border-radius: 10px; padding: 1.75rem 2rem; margin: 3rem 0 1rem; text-align: center; }
.post-etsy-cta p { color: #7a6e5f; font-style: italic; margin-bottom: 0.75rem; }
.post-etsy-cta a { display: inline-block; background: #163087; color: white; padding: 0.75rem 2rem; border-radius: 8px; text-decoration: none; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.1rem; transition: background 0.2s; }
.post-etsy-cta a:hover { background: #0f2466; color: white; }
.ql-content { font-family: 'Lora', Georgia, serif; font-size: 1.05rem; line-height: 1.85; color: #2c2416; }
.ql-content h1, .ql-content h2, .ql-content h3 { font-family: 'Cormorant Garamond', Georgia, serif; color: #163087; margin: 2rem 0 0.75rem; line-height: 1.25; }
.ql-content h1 { font-size: 2rem; }
.ql-content h2 { font-size: 1.55rem; }
.ql-content h3 { font-size: 1.25rem; }
.ql-content p { margin-bottom: 1.25rem; }
.ql-content a { color: #163087; text-decoration: underline; }
.ql-content a:hover { color: #c9873a; }
.ql-content img { max-width: 100%; border-radius: 8px; margin: 1.5rem 0; }
.ql-content blockquote { border-left: 3px solid #163087; padding: 0.5rem 1.5rem; margin: 2rem 0; font-style: italic; color: #7a6e5f; background: #f0e8d5; border-radius: 0 8px 8px 0; }
.ql-content ul, .ql-content ol { padding-left: 1.75rem; margin-bottom: 1.25rem; }
.ql-content li { margin-bottom: 0.4rem; }
.ql-content pre { background: #2c2416; color: #faf3e6; padding: 1.25rem 1.5rem; border-radius: 8px; overflow-x: auto; font-size: 0.9rem; margin-bottom: 1.25rem; }
.ql-content iframe { max-width: 100%; border-radius: 8px; margin: 1.5rem 0; }
.ql-content .ql-video { width: 100%; aspect-ratio: 16/9; border-radius: 8px; margin: 1.5rem 0; }