/* ========================================================================
   COMO FUNCIONA O COLD OUTREACH — EDITORIAL ARTICLE PAGE
   ======================================================================== */


/* PAGE-LEVEL TOKENS */

.cfco-page {
    --cfco-font-editorial: 'Playfair Display', Georgia, serif;
    --cfco-font-body: 'Quicksand', sans-serif;
    --cfco-reading-width: 720px;
}


/* ========================================================================
   HERO — FULL-VIEWPORT CENTERED EDITORIAL HEADER
   ======================================================================== */


.cfco-page .cfco-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    text-align: center;
    background: var(--color-primary-50);
}


.cfco-page .cfco-hero .cfco-hero__inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    padding: 0 25px;
}


.cfco-page .cfco-hero .cfco-hero__inner .cfco-hero__eyebrow {
    font-family: var(--cfco-font-body);
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 600;
    margin: 0;
}


.cfco-page .cfco-hero .cfco-hero__inner .cfco-hero__title {
    font-family: var(--cfco-font-editorial);
    color: var(--color-ink);
    font-weight: 700;
    line-height: 1.15;
    margin: 0;
    max-width: 900px;
}


.cfco-page .cfco-hero .cfco-hero__inner .cfco-hero__lede {
    font-family: var(--cfco-font-body);
    color: var(--color-muted);
    line-height: 1.6;
    margin: 0;
    max-width: 720px;
    font-style: italic;
}


.cfco-page .cfco-hero .cfco-hero__inner .cfco-hero__author {
    font-family: var(--cfco-font-body);
    color: var(--color-muted);
    margin: 0;
    font-weight: 500;
}


/* ========================================================================
   ARTICLE SECTIONS — ALTERNATING BACKGROUNDS
   ======================================================================== */


.cfco-page .cfco-section {
    position: relative;
    z-index: 1;
}


.cfco-page .cfco-section.cfco-section--white {
    background: var(--color-surface);
}


.cfco-page .cfco-section.cfco-section--blue {
    background: var(--color-primary-100);
}


.cfco-page .cfco-section .content-inner {
    max-width: 1400px;
}


/* PROSE — NARROW READING COLUMN INSIDE EACH SECTION */

.cfco-page .cfco-section .content-inner .cfco-prose {
    max-width: var(--cfco-reading-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 25px;
    font-family: var(--cfco-font-body);
    color: var(--color-ink);
    line-height: 1.75;
}


.cfco-page .cfco-section .content-inner .cfco-prose .cfco-h2 {
    font-family: var(--cfco-font-editorial);
    color: var(--color-primary);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}


.cfco-page .cfco-section .content-inner .cfco-prose p {
    margin: 0;
    color: var(--color-ink);
}


.cfco-page .cfco-section .content-inner .cfco-prose p strong {
    color: var(--color-ink);
    font-weight: 700;
}


.cfco-page .cfco-section .content-inner .cfco-prose p em {
    font-style: italic;
    color: var(--color-muted);
}


.cfco-page .cfco-section .content-inner .cfco-prose .cfco-quote-line {
    font-family: var(--cfco-font-editorial);
    font-style: italic;
    color: var(--color-primary);
    text-align: center;
}


.cfco-page .cfco-section .content-inner .cfco-prose .cfco-warning {
    color: var(--color-ink);
    background: var(--color-accent-50);
    padding: 25px;
    border-radius: var(--radius-lg);
}


.cfco-page .cfco-section .content-inner .cfco-prose .cfco-emphasis {
    font-family: var(--cfco-font-editorial);
    font-style: italic;
    color: var(--color-ink);
    text-align: center;
}


.cfco-page .cfco-section .content-inner .cfco-prose .cfco-closer {
    font-family: var(--cfco-font-editorial);
    color: var(--color-primary);
    font-weight: 700;
    font-style: italic;
    text-align: center;
    margin-top: 25px;
}


/* PULL QUOTE — EDITORIAL EMPHASIS BLOCK */

.cfco-page .cfco-section .content-inner .cfco-prose .cfco-pullquote {
    font-family: var(--cfco-font-editorial);
    color: var(--color-ink);
    font-style: italic;
    line-height: 1.4;
    margin: 25px 0;
    padding: 25px;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
}


.cfco-page .cfco-section.cfco-section--white .content-inner .cfco-prose .cfco-pullquote {
    background: var(--color-primary-100);
}


.cfco-page .cfco-section .content-inner .cfco-prose .cfco-pullquote strong {
    color: var(--color-primary);
}


/* TIMELINE — THREE-TEMPO BLOCKS */

.cfco-page .cfco-section .content-inner .cfco-prose .cfco-timeline {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin: 10px 0;
}


.cfco-page .cfco-section .content-inner .cfco-prose .cfco-timeline .cfco-timeline__item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 25px;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
}


.cfco-page .cfco-section.cfco-section--white .content-inner .cfco-prose .cfco-timeline .cfco-timeline__item {
    background: var(--color-primary-100);
}


.cfco-page .cfco-section .content-inner .cfco-prose .cfco-timeline .cfco-timeline__item .cfco-timeline__label {
    font-family: var(--cfco-font-body);
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-muted);
    font-weight: 600;
    margin: 0;
}


.cfco-page .cfco-section .content-inner .cfco-prose .cfco-timeline .cfco-timeline__item .cfco-timeline__value {
    font-family: var(--cfco-font-editorial);
    color: var(--color-primary);
    font-weight: 700;
    line-height: 1;
    margin: 0;
}


.cfco-page .cfco-section .content-inner .cfco-prose .cfco-timeline .cfco-timeline__item .cfco-timeline__desc {
    margin: 0;
    color: var(--color-ink);
}


/* LISTS */

.cfco-page .cfco-section .content-inner .cfco-prose .cfco-list,
.cfco-page .cfco-section .content-inner .cfco-prose .cfco-numbered-list {
    margin: 0;
    padding-left: 25px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--color-ink);
}


.cfco-page .cfco-section .content-inner .cfco-prose .cfco-list li,
.cfco-page .cfco-section .content-inner .cfco-prose .cfco-numbered-list li {
    line-height: 1.7;
}


.cfco-page .cfco-section .content-inner .cfco-prose .cfco-numbered-list {
    list-style: decimal;
}


/* ========================================================================
   CTA SECTION
   ======================================================================== */


.cfco-page .cfco-cta {
    background: var(--color-ink);
    padding: 75px 25px;
}


.cfco-page .cfco-cta .cfco-cta__inner {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    text-align: center;
}


.cfco-page .cfco-cta .cfco-cta__inner .cfco-cta__title {
    font-family: var(--cfco-font-editorial);
    color: #ffffff;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}


.cfco-page .cfco-cta .cfco-cta__inner .cfco-cta__subtitle {
    font-family: var(--cfco-font-body);
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin: 0;
}


/* ========================================================================
   RESPONSIVE TYPE SCALE
   ======================================================================== */


/* MOBILE BASE */

.cfco-page .cfco-hero .cfco-hero__inner .cfco-hero__title { font-size: 28px; }

.cfco-page .cfco-hero .cfco-hero__inner .cfco-hero__lede { font-size: 16px; }

.cfco-page .cfco-hero .cfco-hero__inner .cfco-hero__author { font-size: 13px; }

.cfco-page .cfco-section .content-inner .cfco-prose { font-size: 16px; }

.cfco-page .cfco-section .content-inner .cfco-prose .cfco-h2 { font-size: 24px; }

.cfco-page .cfco-section .content-inner .cfco-prose .cfco-quote-line { font-size: 18px; }

.cfco-page .cfco-section .content-inner .cfco-prose .cfco-emphasis { font-size: 19px; }

.cfco-page .cfco-section .content-inner .cfco-prose .cfco-closer { font-size: 19px; }

.cfco-page .cfco-section .content-inner .cfco-prose .cfco-pullquote { font-size: 18px; }

.cfco-page .cfco-section .content-inner .cfco-prose .cfco-timeline .cfco-timeline__item .cfco-timeline__label { font-size: 11px; }

.cfco-page .cfco-section .content-inner .cfco-prose .cfco-timeline .cfco-timeline__item .cfco-timeline__value { font-size: 28px; }

.cfco-page .cfco-cta .cfco-cta__inner .cfco-cta__title { font-size: 26px; }

.cfco-page .cfco-cta .cfco-cta__inner .cfco-cta__subtitle { font-size: 16px; }


/* TABLET */

@media (min-width: 768px) {

    .cfco-page .cfco-hero .cfco-hero__inner .cfco-hero__title { font-size: 40px; }

    .cfco-page .cfco-hero .cfco-hero__inner .cfco-hero__lede { font-size: 18px; }

    .cfco-page .cfco-section .content-inner .cfco-prose { font-size: 17px; }

    .cfco-page .cfco-section .content-inner .cfco-prose .cfco-h2 { font-size: 32px; }

    .cfco-page .cfco-section .content-inner .cfco-prose .cfco-quote-line { font-size: 22px; }

    .cfco-page .cfco-section .content-inner .cfco-prose .cfco-emphasis { font-size: 22px; }

    .cfco-page .cfco-section .content-inner .cfco-prose .cfco-closer { font-size: 22px; }

    .cfco-page .cfco-section .content-inner .cfco-prose .cfco-pullquote { font-size: 22px; }

    .cfco-page .cfco-section .content-inner .cfco-prose .cfco-timeline .cfco-timeline__item .cfco-timeline__value { font-size: 36px; }

    .cfco-page .cfco-cta .cfco-cta__inner .cfco-cta__title { font-size: 32px; }

    .cfco-page .cfco-cta .cfco-cta__inner .cfco-cta__subtitle { font-size: 18px; }

}


/* DESKTOP */

@media (min-width: 1024px) {

    .cfco-page .cfco-hero .cfco-hero__inner .cfco-hero__title { font-size: 52px; }

    .cfco-page .cfco-section .content-inner .cfco-prose .cfco-h2 { font-size: 38px; }

    .cfco-page .cfco-section .content-inner .cfco-prose .cfco-timeline .cfco-timeline__item .cfco-timeline__value { font-size: 42px; }

    .cfco-page .cfco-cta .cfco-cta__inner .cfco-cta__title { font-size: 38px; }

}