/* ═══════════════════════════════════════════════════════════
   LSC Advertorial — Option C "Personal Story" Design
   v2.7.0
   All tokens driven by CSS vars set inline from Settings.
═══════════════════════════════════════════════════════════ */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }

/* ── Rem base — matches preview design (17px) ── */
html { font-size: 17px; }

/* ── Page background ── */
body.lsc-adv-page {
    background: #ffffff;
    font-family: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ══════════════════════════════════════════════
   PROGRESS BAR
══════════════════════════════════════════════ */
.lsc-adv-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    background: var(--lsc-accent, #FF6201);
    width: 0%;
    z-index: 10000;
    transition: width 0.1s linear;
}

/* ══════════════════════════════════════════════
   PROOF BAR
══════════════════════════════════════════════ */
.lsc-adv-proof-bar {
    background: #111111;
    color: #fff;
    padding: 10px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.lsc-adv-proof-bar__item {
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    padding: 4px 20px;
    opacity: 0.88;
    border-right: 1px solid rgba(255,255,255,0.18);
    font-family: var(--lsc-text-font, Arial, sans-serif);
}
.lsc-adv-proof-bar__item:last-child { border-right: none; }

/* ══════════════════════════════════════════════
   HERO BANNER — full-width warm surface
══════════════════════════════════════════════ */
.lsc-adv-hero-banner {
    background: #f8f5f0;
    padding: 56px 24px 48px;
    text-align: center;
    border-bottom: 1px solid #e6e0d8;
}
.lsc-adv-hero-banner__category {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lsc-accent, #FF6201);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: var(--lsc-text-font, Arial, sans-serif);
}
.lsc-adv-hero-banner__category::before,
.lsc-adv-hero-banner__category::after {
    content: '';
    width: 40px;
    height: 1px;
    background: var(--lsc-accent, #FF6201);
    opacity: 0.4;
}
.lsc-adv-hero-banner__title {
    font-family: var(--lsc-h1-font, 'Playfair Display', Georgia, serif) !important;
    font-size: var(--lsc-h1-size, 2.5rem) !important;
    font-weight: var(--lsc-h1-weight, 800) !important;
    color: var(--lsc-h1-color, #111111) !important;
    line-height: 1.18 !important;
    max-width: 700px;
    margin: 0 auto 18px !important;
    background: none !important;
    padding: 0 !important;
    border: none !important;
}
.lsc-adv-hero-banner__deck {
    font-size: 1.1rem;
    color: #5a5a5a;
    line-height: 1.75;
    max-width: 560px;
    margin: 0 auto 24px;
    font-style: italic;
    font-family: var(--lsc-text-font, Arial, sans-serif);
}
.lsc-adv-hero-banner__byline {
    font-size: 0.85rem;
    color: #888;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    font-family: var(--lsc-text-font, Arial, sans-serif);
}
.lsc-adv-hero-banner__byline strong { color: #111; font-weight: 700; }
.lsc-adv-hero-banner__byline-dot {
    width: 3px; height: 3px;
    border-radius: 50%;
    background: #e6e0d8;
    display: inline-block;
}

/* ══════════════════════════════════════════════
   ARTICLE WRAPPER — narrow centred column
══════════════════════════════════════════════ */
.lsc-adv-article {
    max-width: 680px;
    margin: 0 auto;
    padding: 48px 24px 120px;
}

/* ══════════════════════════════════════════════
   HERO IMAGE
══════════════════════════════════════════════ */
.lsc-adv-hero-img { margin-bottom: 8px; }
.lsc-adv-hero-img img {
    width: 100%;
    aspect-ratio: 3/2;
    object-fit: cover;
    display: block;
    background: #f8f5f0;
    border-radius: 2px;
}
.lsc-adv-hero-img figcaption {
    font-size: 0.8rem;
    color: #888;
    padding: 8px 0;
    font-style: italic;
    line-height: 1.5;
    font-family: var(--lsc-text-font, Arial, sans-serif);
}

/* ══════════════════════════════════════════════
   SNAPSHOT BOX — "What you'll discover"
══════════════════════════════════════════════ */
.lsc-adv-snapshot {
    background: #f8f5f0;
    border-radius: 6px;
    border-left: 4px solid var(--lsc-accent, #FF6201);
    padding: 22px 26px;
    margin: 36px 0;
}
.lsc-adv-snapshot__title {
    font-family: var(--lsc-heading-font, 'Playfair Display', Georgia, serif) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #111 !important;
    margin: 0 0 14px !important;
    background: none !important;
    padding: 0 !important;
    border: none !important;
}
.lsc-adv-snapshot__list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lsc-adv-snapshot__list li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 0.9375rem;
    color: var(--lsc-text-color, #1e1e1e);
    line-height: 1.5;
    font-family: var(--lsc-text-font, Arial, sans-serif);
}
.lsc-adv-snapshot__check {
    background: var(--lsc-accent, #FF6201);
    color: #fff;
    width: 20px; height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ══════════════════════════════════════════════
   BODY COPY
══════════════════════════════════════════════ */
.lsc-adv__title {
    font-family:  var(--lsc-h1-font, Georgia, serif) !important;
    font-weight:  var(--lsc-h1-weight, 700) !important;
    font-size:    var(--lsc-h1-size, 2.4rem) !important;
    color:        var(--lsc-h1-color, #111111) !important;
    line-height:  1.18 !important;
    margin: 0 0 16px !important;
    background: none !important;
    padding: 0 !important;
    border: none !important;
    text-shadow: none !important;
    display: none; /* hidden — title is now in hero banner */
}

.lsc-adv__text {
    font-family:  var(--lsc-text-font, 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif) !important;
    font-weight:  var(--lsc-text-weight, 400) !important;
    font-size:    var(--lsc-text-size, 1.05rem) !important;
    color:        var(--lsc-text-color, #1e1e1e) !important;
    line-height:  1.9 !important;
    margin: 0 0 26px !important;
    background: none !important;
}

/* Drop cap on very first paragraph */
.lsc-adv__text--first::first-letter {
    font-family:  var(--lsc-h1-font, 'Playfair Display', Georgia, serif);
    font-size:    3.8rem;
    font-weight:  800;
    color:        var(--lsc-accent, #FF6201);
    float:        left;
    line-height:  0.75;
    margin:       6px 10px 0 0;
    padding:      0;
}

.lsc-adv__text a {
    color: var(--lsc-accent, #FF6201);
    text-decoration: underline;
}

.lsc-adv__heading {
    font-family:  var(--lsc-heading-font, 'Playfair Display', Georgia, serif) !important;
    font-weight:  var(--lsc-heading-weight, 700) !important;
    font-size:    var(--lsc-heading-size, 1.45rem) !important;
    color:        var(--lsc-heading-color, #111111) !important;
    margin: 40px 0 16px !important;
    line-height:  1.3 !important;
    background: none !important;
    padding: 0 !important;
}
/* Orange accent bar above each H2 */
.lsc-adv__heading::before {
    content: '';
    display: block;
    width: 32px;
    height: 3px;
    background: var(--lsc-accent, #FF6201);
    margin-bottom: 12px;
}

/* Legacy author badge (kept for backwards compat) */
.lsc-adv__author { display: none; }

/* ══════════════════════════════════════════════
   INLINE IMAGE
══════════════════════════════════════════════ */
.lsc-adv__figure { margin: 32px 0; }
.lsc-adv__image {
    width: 100%;
    height: auto;
    border-radius: 2px;
    display: block;
}
.lsc-adv__video {
    width: 100%;
    height: auto;
    border-radius: 2px;
    display: block;
    background: #000; /* avoids white flash before first frame loads */
}
.lsc-adv__figure figcaption {
    font-size: 0.8rem;
    color: #888;
    padding: 8px 0;
    font-style: italic;
    line-height: 1.5;
    font-family: var(--lsc-text-font, Arial, sans-serif);
}

/* ══════════════════════════════════════════════
   PULL QUOTE
══════════════════════════════════════════════ */
.lsc-adv-pullquote {
    margin: 44px 0;
    text-align: center;
    padding: 32px 24px;
    border-top: 1px solid #e6e0d8;
    border-bottom: 1px solid #e6e0d8;
}
.lsc-adv-pullquote__text {
    font-family: var(--lsc-h1-font, 'Playfair Display', Georgia, serif) !important;
    font-size: 1.45rem !important;
    font-style: italic !important;
    font-weight: 700 !important;
    color: #111 !important;
    line-height: 1.45 !important;
    margin: 0 0 12px !important;
    background: none !important;
    padding: 0 !important;
    border: none !important;
}
.lsc-adv-pullquote__text::before { content: '\201C'; color: var(--lsc-accent, #FF6201); }
.lsc-adv-pullquote__text::after  { content: '\201D'; color: var(--lsc-accent, #FF6201); }
.lsc-adv-pullquote__attr {
    font-size: 0.85rem;
    color: #5a5a5a;
    font-weight: 600;
    font-family: var(--lsc-text-font, Arial, sans-serif);
}

/* ══════════════════════════════════════════════
   TESTIMONIALS — 2 side by side
══════════════════════════════════════════════ */
.lsc-adv-testimonials {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 40px 0;
}
.lsc-adv-testimonial {
    background: #f8f5f0;
    border-radius: 6px;
    padding: 20px;
}
.lsc-adv-testimonial__stars {
    color: #f5a623;
    font-size: 0.9rem;
    margin-bottom: 8px;
    letter-spacing: 1px;
}
.lsc-adv-testimonial__text {
    font-size: 0.9rem !important;
    color: var(--lsc-text-color, #1e1e1e) !important;
    line-height: 1.7 !important;
    font-style: italic !important;
    margin: 0 0 12px !important;
    font-family: var(--lsc-text-font, Arial, sans-serif) !important;
    background: none !important;
}
.lsc-adv-testimonial__author {
    font-size: 0.85rem;
    font-weight: 700;
    color: #111;
    display: block;
    font-family: var(--lsc-text-font, Arial, sans-serif);
}
.lsc-adv-testimonial__location {
    font-size: 0.78rem;
    color: #888;
    font-family: var(--lsc-text-font, Arial, sans-serif);
}

/* ══════════════════════════════════════════════
   CTA BLOCK — dark ink panel
══════════════════════════════════════════════ */
.lsc-adv__cta {
    margin: 48px 0;
    text-align: center;
}
.lsc-adv-cta-block {
    background: #111111;
    color: #fff;
    border-radius: 6px;
    padding: 36px 32px;
    text-align: center;
    margin: 48px 0;
}
.lsc-adv-cta-block__eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    margin-bottom: 12px;
    font-family: var(--lsc-text-font, Arial, sans-serif);
}
.lsc-adv-cta-block__title {
    font-family: var(--lsc-heading-font, 'Playfair Display', Georgia, serif) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin: 0 0 10px !important;
    line-height: 1.3 !important;
    background: none !important;
    padding: 0 !important;
    border: none !important;
}
.lsc-adv-cta-block__text {
    font-size: 0.9375rem !important;
    color: rgba(255,255,255,0.7) !important;
    line-height: 1.7 !important;
    margin: 0 0 24px !important;
    font-family: var(--lsc-text-font, Arial, sans-serif) !important;
    background: none !important;
}
.lsc-adv__cta-btn,
.lsc-adv__cta-btn:link,
.lsc-adv__cta-btn:visited {
    display: inline-block;
    background: var(--lsc-btn-bg, #FF6201) !important;
    color: var(--lsc-btn-color, #fff) !important;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 17px 40px;
    border-radius: 3px;
    text-decoration: none !important;
    transition: opacity 0.15s;
    font-family: var(--lsc-text-font, Arial, sans-serif);
    text-transform: uppercase;
}
.lsc-adv__cta-btn:hover { opacity: 0.88; color: var(--lsc-btn-color, #fff) !important; }
.lsc-adv-cta-block__note {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.35);
    margin-top: 12px;
    font-family: var(--lsc-text-font, Arial, sans-serif);
}

/* ══════════════════════════════════════════════
   MEDIA BAR — As Seen In
══════════════════════════════════════════════ */
.lsc-adv-media-bar {
    padding: 26px 0;
    margin: 40px 0;
    text-align: center;
    border-top: 1px solid #e6e0d8;
    border-bottom: 1px solid #e6e0d8;
}
.lsc-adv-media-bar__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 18px;
    font-family: var(--lsc-text-font, Arial, sans-serif);
}
.lsc-adv-media-bar__logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}
.lsc-adv-media-bar__pub {
    font-family: Georgia, serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #c8c0b6;
    letter-spacing: 0.03em;
}

/* ══════════════════════════════════════════════
   AUTHOR BIO
══════════════════════════════════════════════ */
.lsc-adv-author-bio {
    display: flex;
    gap: 18px;
    padding: 26px;
    background: #f8f5f0;
    border-radius: 6px;
    margin: 48px 0 0;
    align-items: flex-start;
}
.lsc-adv-author-bio__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #f2ece4;
    border: 1px solid #e6e0d8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--lsc-h1-font, 'Playfair Display', Georgia, serif);
    font-size: 1.3rem;
    color: #888;
    flex-shrink: 0;
    overflow: hidden;
}
.lsc-adv-author-bio__avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.lsc-adv-author-bio__name {
    font-family: var(--lsc-heading-font, 'Playfair Display', Georgia, serif) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #111 !important;
    margin: 0 0 4px !important;
    background: none !important;
    padding: 0 !important;
    border: none !important;
}
.lsc-adv-author-bio__cred {
    font-size: 0.875rem !important;
    color: #5a5a5a !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    font-family: var(--lsc-text-font, Arial, sans-serif) !important;
    background: none !important;
}

/* ══════════════════════════════════════════════
   STICKY CTA BAR
══════════════════════════════════════════════ */
.lsc-adv-sticky-cta {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--lsc-btn-bg, #FF6201);
    padding: 12px 20px;
    z-index: 9999;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.18);
    align-items: center;
    gap: 16px;
}
.lsc-adv-sticky-cta__text { flex: 1; min-width: 0; }
.lsc-adv-sticky-cta__label {
    color: #fff;
    font-weight: 700;
    font-size: 0.9375rem;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--lsc-text-font, Arial, sans-serif);
}
.lsc-adv-sticky-cta__sub {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.8);
    font-family: var(--lsc-text-font, Arial, sans-serif);
    white-space: nowrap;
}
.lsc-adv-sticky-cta__btn,
.lsc-adv-sticky-cta__btn:link,
.lsc-adv-sticky-cta__btn:visited {
    background: #fff;
    color: var(--lsc-btn-bg, #FF6201) !important;
    border: none;
    padding: 12px 24px;
    font-family: var(--lsc-text-font, Arial, sans-serif);
    font-weight: 700;
    font-size: 0.9375rem;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none !important;
    display: inline-block;
}

/* ══════════════════════════════════════════════
   LEGACY SIDEBAR (kept, hidden on new template)
══════════════════════════════════════════════ */
.lsc-adv__sidebar { display: none; }
.lsc-adv { display: block; max-width: none; margin: 0; padding: 0; }
.lsc-adv__body { flex: none; }
.lsc-adv__content { max-width: none; }

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */
@media (max-width: 768px) {
    .lsc-adv-article { padding: 32px 16px 120px; }
    .lsc-adv-hero-banner { padding: 36px 16px 32px; }
    .lsc-adv-hero-banner__title { font-size: 1.85rem !important; }
    .lsc-adv-testimonials { grid-template-columns: 1fr; }
    .lsc-adv-pullquote__text { font-size: 1.2rem !important; }
    .lsc-adv-proof-bar__item { padding: 3px 12px; font-size: 0.77rem; }
    .lsc-adv-cta-block { padding: 28px 20px; }
    .lsc-adv-author-bio { padding: 20px; }
    .lsc-adv-media-bar__logos { gap: 24px; }
    .lsc-adv-sticky-cta { display: flex; }
}

@media (max-width: 480px) {
    .lsc-adv-hero-banner__title { font-size: 1.6rem !important; }
    .lsc-adv__text--first::first-letter { font-size: 2.8rem; }
    .lsc-adv-pullquote__text { font-size: 1.1rem !important; }
    .lsc-adv-sticky-cta { padding: 10px 14px; gap: 10px; }
    .lsc-adv-sticky-cta__label { font-size: 0.875rem; }
    .lsc-adv-sticky-cta__sub { font-size: 0.75rem; }
    .lsc-adv-sticky-cta__btn,
    .lsc-adv-sticky-cta__btn:link,
    .lsc-adv-sticky-cta__btn:visited { padding: 10px 16px; font-size: 0.875rem; }
}