/* Letalife — CMS editorial page styles (.cms-page, .cms-content).
   Renderer classes are emitted by app/domains/cms/render.py; every value here reads a
   --ll-* token (style-bible §2: tokens are the authority, never hardcode hex). */

/* ============================================================
   CMS pages (/p/{slug}) — editorial article layout + prose.
   ============================================================ */
.cms-page {
   max-width: 720px;
   margin: 0 auto;
   padding: 1rem 0 2rem
}

/* Admin-only preview banner (was inline-hardcoded hex) */
.cms-preview-banner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   background: var(--ll-blue-900);
   color: var(--ll-white);
   padding: .6rem 1rem;
   border-radius: var(--ll-r);
   font-size: .85rem;
   margin-bottom: 1.75rem
}

.cms-preview-banner a {
   color: var(--ll-blue-100);
   font-size: .8rem;
   white-space: nowrap
}

.cms-page-header {
   margin-bottom: 1.75rem;
   padding-bottom: 1.25rem;
}

.cms-page-title {
   font-weight: 900;
   letter-spacing: -0.035em;
   font-size: clamp(1.75rem, 4.5vw, 2.5rem);
   color: var(--ll-text);
   margin: 0
}

/* Prose body — generous editorial rhythm */
.cms-content {
   color: var(--ll-slate-700);
   font-size: 1rem;
   line-height: 1.75
}

.cms-content>*+* {
   margin-top: 1.1rem
}

.cms-content .cms-h {
   color: var(--ll-text);
   font-weight: 800;
   letter-spacing: -0.02em;
   line-height: 1.3;
   margin-top: 2.25rem
}

.cms-content h2.cms-h {
   font-size: 1.6rem
}

.cms-content h3.cms-h {
   font-size: 1.3rem
}

.cms-content h4.cms-h {
   font-size: 1.1rem
}

.cms-content a {
   color: var(--ll-blue-700);
   text-decoration: underline;
   text-underline-offset: 2px
}

.cms-content a:hover {
   color: var(--ll-blue-900)
}

.cms-content .cms-list {
   padding-left: 1.4rem
}

.cms-content .cms-list li {
   margin: .35rem 0
}

.cms-content .cms-quote {
   margin: 1.5rem 0;
   padding: .85rem 1.25rem;
   border-left: 3px solid var(--ll-blue-200);
   background: var(--ll-blue-50);
   border-radius: var(--ll-r-sm);
   color: var(--ll-slate-700)
}

.cms-content .cms-quote p {
   margin: 0;
   font-style: italic
}

.cms-content .cms-quote cite {
   display: block;
   margin-top: .5rem;
   font-size: .85rem;
   font-style: normal;
   color: var(--ll-muted)
}

.cms-content .cms-delimiter {
   border: none;
   border-top: 1px solid var(--ll-border);
   margin: 2.25rem 0
}

.cms-content .cms-figure {
   margin: 1.5rem 0
}

.cms-content .cms-img {
   display: block;
   width: 100%;
   height: auto;
   border-radius: var(--ll-r);
   box-shadow: var(--ll-shadow-sm)
}

.cms-content .cms-figure figcaption {
   margin-top: .5rem;
   font-size: .82rem;
   color: var(--ll-muted);
   text-align: center
}

/* ---- Hero block ---- */
.cms-content .cms-hero {
   margin: 2rem 0;
   padding: 2.5rem 2rem;
   border-radius: var(--ll-r-xl);
   background: linear-gradient(130deg, var(--ll-blue-900), var(--ll-blue-700));
   color: var(--ll-white);
   text-align: center
}

.cms-content .cms-hero-title {
   margin: 0;
   color: var(--ll-white);
   font-weight: 900;
   letter-spacing: -0.03em;
   font-size: clamp(1.5rem, 3.5vw, 2.1rem)
}

.cms-content .cms-hero-sub {
   margin: .75rem 0 0;
   font-size: 1.05rem;
   opacity: .9
}

.cms-content .cms-hero-cta {
   display: inline-block;
   margin-top: 1.5rem;
   padding: .6rem 1.4rem;
   background: var(--ll-surface);
   color: var(--ll-blue-700);
   font-weight: 700;
   text-decoration: none;
   border-radius: var(--ll-r-sm);
   box-shadow: var(--ll-shadow-sm);
   transition: transform .12s, box-shadow .12s, color .12s
}

.cms-content .cms-hero-cta:hover {
   color: var(--ll-blue-900);
   transform: translateY(-1px);
   box-shadow: var(--ll-shadow-md)
}

/* ---- Callout block (mirrors the .ll-flash-* token pattern) ---- */
.cms-content .cms-callout {
   margin: 1.5rem 0;
   padding: .9rem 1.1rem;
   border: 1px solid;
   border-radius: var(--ll-r);
   font-size: .95rem
}

.cms-content .cms-callout> :first-child {
   margin-top: 0
}

.cms-content .cms-callout--info {
   background: var(--ll-blue-50);
   border-color: var(--ll-blue-200);
   color: var(--ll-blue-900)
}

.cms-content .cms-callout--success {
   background: var(--ll-green-50);
   /* mirrors .ll-flash-success border in components.css — same green-200 token */
   border-color: var(--ll-green-200);
   color: var(--ll-green-700)
}

.cms-content .cms-callout--warning {
   background: var(--ll-amber-100);
   /* mirrors .ll-flash-warning border — same amber-200 token */
   border-color: var(--ll-amber-200);
   color: var(--ll-amber-900)
}

/* ---- Columns block ---- */
.cms-content .cms-columns {
   display: grid;
   gap: 1.25rem;
   margin: 1.5rem 0
}

.cms-content .cms-columns--2 {
   grid-template-columns: repeat(2, 1fr)
}

.cms-content .cms-columns--3 {
   grid-template-columns: repeat(3, 1fr)
}

.cms-content .cms-col> :first-child {
   margin-top: 0
}

@media(max-width:575px) {

   .cms-content .cms-columns--2,
   .cms-content .cms-columns--3 {
      grid-template-columns: 1fr
   }
}