/* assets/editor/sg-content.css
 * Styles for post content. Used by BOTH the editor (so what you see is what readers get)
 * and the public article page (.news-content.sg-content). */
.sg-content { font-size: 17px; line-height: 1.85; color: #1f2937; overflow-wrap: anywhere; }
.sg-content p { margin: 0 0 1em; }
.sg-content h1, .sg-content h2, .sg-content h3 { font-weight: 800; line-height: 1.3; color: #111827; margin: 1.3em 0 .55em; }
.sg-content h1 { font-size: 1.8em; }
.sg-content h2 { font-size: 1.45em; }
.sg-content h3 { font-size: 1.2em; }
.sg-content ul, .sg-content ol { margin: 0 0 1em; padding-left: 1.5em; }
.sg-content li { margin-bottom: .3em; }
.sg-content a { color: #0F7B4F; text-decoration: underline; text-underline-offset: 2px; }
.sg-content blockquote {
    margin: 1.2em 0; padding: 14px 20px; border-left: 4px solid #F2A900; background: #fffaf0;
    color: #4b5563; font-style: italic; border-radius: 0 10px 10px 0;
}
.sg-content blockquote p:last-child { margin-bottom: 0; }
.sg-content hr { border: 0; height: 2px; background: linear-gradient(90deg, transparent, #cbd5e1, transparent); margin: 1.8em 0; opacity: 1; }

/* images */
.sg-content figure.ps-img { margin: 1.3em auto; text-align: center; }
.sg-content figure.ps-img img { display: block; margin: 0 auto; max-width: 100%; height: auto; border-radius: 10px; }
.sg-content figure.ps-img.ps-w-full img { width: 100%; }
.sg-content figure.ps-img.ps-w-med img { width: 62%; }
.sg-content figure.ps-img.ps-w-sm img { width: 36%; }
.sg-content figure.ps-img figcaption { font-size: 13px; color: #6b7280; margin-top: 8px; font-style: italic; }
@media (max-width: 600px) {
    .sg-content figure.ps-img.ps-w-med img { width: 82%; }
    .sg-content figure.ps-img.ps-w-sm img { width: 56%; }
}

/* gallery */
.sg-content .ps-gallery { display: grid; gap: 8px; margin: 1.3em 0; }
.sg-content .ps-gallery.ps-cols-2 { grid-template-columns: repeat(2, 1fr); }
.sg-content .ps-gallery.ps-cols-3 { grid-template-columns: repeat(3, 1fr); }
.sg-content .ps-gallery.ps-cols-4 { grid-template-columns: repeat(4, 1fr); }
.sg-content .ps-gallery figure { margin: 0; position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 8px; background: #e5e7eb; }
.sg-content .ps-gallery figure img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; transition: transform .3s; }
.sg-content .ps-gallery figure:hover img { transform: scale(1.05); }
@media (max-width: 600px) {
    .sg-content .ps-gallery.ps-cols-3, .sg-content .ps-gallery.ps-cols-4 { grid-template-columns: repeat(2, 1fr); }
}

/* embeds */
.sg-content .ps-embed { margin: 1.3em 0; }
.sg-content .ps-embed-yt { position: relative; width: 100%; padding-top: 56.25%; border-radius: 12px; overflow: hidden; background: #000; }
.sg-content .ps-embed-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sg-content .ps-embed-fb, .sg-content .ps-embed-ig, .sg-content .ps-embed-x { display: flex; justify-content: center; }
.sg-content .ps-embed-fb iframe, .sg-content .ps-embed-ig iframe { max-width: 100%; border: 0; background: #fff; border-radius: 10px; }

/* social link card (links that cannot be embedded) */
.sg-content .ps-social-card { margin: 1.3em 0; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; transition: .2s; }
.sg-content .ps-social-card:hover { border-color: #0F7B4F; box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.sg-content .ps-social-card a { display: flex; align-items: center; gap: 14px; padding: 14px 16px; text-decoration: none; color: inherit; flex-wrap: wrap; }
.sg-content .ps-social-card a::before {
    content: "\f0c1"; font-family: "Font Awesome 6 Free"; font-weight: 900; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; background: #475569;
}
.sg-content .ps-social-card a b { display: block; font-size: 15px; color: #111827; flex: 1 1 140px; min-width: 0; }
.sg-content .ps-social-card a span { display: block; font-size: 12px; color: #6b7280; flex-basis: 100%; padding-left: 58px; margin-top: -10px; word-break: break-all; }
.sg-content .ps-sc-facebook a::before  { content: "\f39e"; font-family: "Font Awesome 6 Brands"; font-weight: 400; background: #1877F2; }
.sg-content .ps-sc-instagram a::before { content: "\f16d"; font-family: "Font Awesome 6 Brands"; font-weight: 400; background: linear-gradient(45deg,#f09433,#dc2743,#bc1888); }
.sg-content .ps-sc-x a::before         { content: "\e61b"; font-family: "Font Awesome 6 Brands"; font-weight: 400; background: #111; }
.sg-content .ps-sc-youtube a::before   { content: "\f167"; font-family: "Font Awesome 6 Brands"; font-weight: 400; background: #FF0000; }
.sg-content .ps-sc-whatsapp a::before  { content: "\f232"; font-family: "Font Awesome 6 Brands"; font-weight: 400; background: #25D366; }
.sg-content .ps-sc-telegram a::before  { content: "\f2c6"; font-family: "Font Awesome 6 Brands"; font-weight: 400; background: #229ED9; }

/* lightbox (article page) */
.sg-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 5000; display: none; align-items: center; justify-content: center; padding: 20px; }
.sg-lightbox.open { display: flex; }
.sg-lightbox img { max-width: 100%; max-height: 92vh; border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.sg-lightbox button { position: absolute; background: rgba(255,255,255,.14); color: #fff; border: 0; width: 46px; height: 46px; border-radius: 50%; font-size: 20px; cursor: pointer; }
.sg-lightbox button:hover { background: rgba(255,255,255,.3); }
.sg-lightbox .lb-x { top: 16px; right: 16px; } .sg-lightbox .lb-p { left: 14px; top: 50%; } .sg-lightbox .lb-n { right: 14px; top: 50%; }