/* ==========================================================================
   Policies (pages/legal.blade.php): the blog article layout (blog.css bp-)
   with a text-only hero. lg- = additions. Loaded after blog.css.
   ========================================================================== */

.lg-hero { padding-bottom: 3rem; }
.lg-hero .bp-hero__h { max-width: 20ch; }
.lg-updated { margin: 1.25rem 0 0; color: #555; font-size: 1rem; }
.bp-prose .lg-intro { font-size: 1.2rem; color: #222; }

.lg-others ul { margin: 1.25rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--bl-line); }
.lg-others li a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--bl-line); color: #333; font-size: .95rem; text-decoration: none; transition: color .25s; }
.lg-others li a i { color: var(--bl-red); transition: transform .3s; }
.lg-others li a:hover { color: var(--bl-ink); }
.lg-others li a:hover i { transform: translateX(.25rem); }

.bp-prose .lg-contact { padding: 1.5rem 1.75rem; border: 1px solid var(--bl-line); border-radius: 1rem; background: #fafafa; }
.bp-prose .lg-contact p { margin-bottom: 1rem; }
.bp-prose .lg-contact ul { margin: 0; padding: 0; list-style: none; }
.bp-prose .lg-contact li { display: flex; gap: .6rem; align-items: baseline; }
.bp-prose .lg-contact li i { color: var(--bl-red); }

@media (max-width: 900px) {
    .lg-others { display: none; }
}