/**
 * Craft creativeorange Article field — matches CP grid + typography (not marketing “card” styles).
 * Load order: before Vite; selectors use main .article-content.lyff-article-field to beat the bundle.
 */

/* Stable stacking: two .grid rows must not overlap (bundle blockquote/card was leaking before :not scope) */
main .article-content.lyff-article-field {
    display: flow-root;
    /* Match Tailwind .text-lg (see src/css/app.css @theme) */
    font-family: var(--font-inter-tight, "Inter Tight", Inter, sans-serif);
    font-size: var(--text-lg, clamp(17px, calc(19 * (100vw / 1128)), 19px));
    line-height: var(--text-lg--line-height, 1.5);
    font-weight: var(--text-lg--font-weight, 300);
    color: var(--color-body-600, #656565);
}

/* Headings — match .article-content scale; semibold reads closer to CP editor */
main .article-content.lyff-article-field h1 {
    scroll-margin-top: calc(var(--spacing, 0.25rem) * 5) !important;
    margin: 0 !important;
    margin-top: calc(var(--spacing, 0.25rem) * 10) !important;
    margin-bottom: calc(var(--spacing, 0.25rem) * 4) !important;
    max-width: none !important;
    font-family: var(--font-display, "Proza Display", sans-serif) !important;
    font-size: var(--text-3xl, clamp(24px, calc(30 * (100vw / 1128)), 30px)) !important;
    line-height: var(--text-3xl--line-height, 1.25) !important;
    font-weight: var(--font-weight-semibold, 600) !important;
    color: var(--color-title, #3a3a3a) !important;
}

main .article-content.lyff-article-field h2 {
    scroll-margin-top: calc(var(--spacing, 0.25rem) * 5) !important;
    margin: 0 !important;
    margin-top: calc(var(--spacing, 0.25rem) * 10) !important;
    margin-bottom: calc(var(--spacing, 0.25rem) * 3) !important;
    max-width: none !important;
    font-family: var(--font-display, "Proza Display", sans-serif) !important;
    font-size: var(--text-2xl, clamp(20px, calc(24 * (100vw / 1128)), 24px)) !important;
    line-height: var(--text-2xl--line-height, 1.35) !important;
    font-weight: var(--font-weight-semibold, 600) !important;
    color: var(--color-title, #3a3a3a) !important;
}

main .article-content.lyff-article-field h3 {
    scroll-margin-top: calc(var(--spacing, 0.25rem) * 5) !important;
    margin: 0 !important;
    margin-top: calc(var(--spacing, 0.25rem) * 8) !important;
    margin-bottom: calc(var(--spacing, 0.25rem) * 2) !important;
    max-width: none !important;
    font-family: var(--font-inter-tight, "Inter Tight", Inter, sans-serif) !important;
    font-size: var(--text-xl, clamp(18px, calc(22 * (100vw / 1128)), 22px)) !important;
    line-height: var(--text-xl--line-height, 1.45) !important;
    font-weight: var(--font-weight-semibold, 600) !important;
    color: var(--color-title, #3a3a3a) !important;
}

main .article-content.lyff-article-field h1:first-child,
main .article-content.lyff-article-field h2:first-child,
main .article-content.lyff-article-field h3:first-child {
    margin-top: 0 !important;
}

@media (min-width: 48rem) {
    main .article-content.lyff-article-field h1 {
        font-size: var(--text-4xl, clamp(28px, calc(48 * (100vw / 1128)), 48px)) !important;
        line-height: var(--text-4xl--line-height, 1.15) !important;
    }

    main .article-content.lyff-article-field h2 {
        font-size: var(--text-3xl, clamp(24px, calc(30 * (100vw / 1128)), 30px)) !important;
        line-height: var(--text-3xl--line-height, 1.25) !important;
    }

    main .article-content.lyff-article-field h3 {
        font-size: var(--text-2xl, clamp(20px, calc(24 * (100vw / 1128)), 24px)) !important;
        line-height: var(--text-2xl--line-height, 1.35) !important;
    }
}

/* Row spacing: only top-level grids (not nested inside .column) */
main .article-content.lyff-article-field > .grid {
    margin-block: 20px !important;
    margin-inline: 0 !important;
}

main .article-content.lyff-article-field > .grid,
main .article-content.lyff-article-field .grid:has(> .column) {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    align-items: start !important;
    column-gap: 5rem !important;
    row-gap: 0 !important;
    padding: 0 !important;
    position: relative;
    z-index: 0;
}

main .article-content.lyff-article-field > .grid > .column,
main .article-content.lyff-article-field .grid:has(> .column) > .column {
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    align-self: start;
}

main .article-content.lyff-article-field .column.column-1 { grid-column: span 1 / span 1 !important; }
main .article-content.lyff-article-field .column.column-2 { grid-column: span 2 / span 2 !important; }
main .article-content.lyff-article-field .column.column-3 { grid-column: span 3 / span 3 !important; }
main .article-content.lyff-article-field .column.column-4 { grid-column: span 4 / span 4 !important; }
main .article-content.lyff-article-field .column.column-5 { grid-column: span 5 / span 5 !important; }
main .article-content.lyff-article-field .column.column-6 { grid-column: span 6 / span 6 !important; }
main .article-content.lyff-article-field .column.column-7 { grid-column: span 7 / span 7 !important; }
main .article-content.lyff-article-field .column.column-8 { grid-column: span 8 / span 8 !important; }
main .article-content.lyff-article-field .column.column-9 { grid-column: span 9 / span 9 !important; }
main .article-content.lyff-article-field .column.column-10 { grid-column: span 10 / span 10 !important; }
main .article-content.lyff-article-field .column.column-11 { grid-column: span 11 / span 11 !important; }
main .article-content.lyff-article-field .column.column-12 { grid-column: span 12 / span 12 !important; }

main .article-content.lyff-article-field .grid.grid-cols-12 {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    align-items: start !important;
    column-gap: 5rem !important;
    row-gap: 0 !important;
    padding: 0 !important;
}

main .article-content.lyff-article-field .grid.grid-cols-12 > * {
    min-width: 0;
}

main .article-content.lyff-article-field .col-span-1 { grid-column: span 1 / span 1 !important; }
main .article-content.lyff-article-field .col-span-2 { grid-column: span 2 / span 2 !important; }
main .article-content.lyff-article-field .col-span-3 { grid-column: span 3 / span 3 !important; }
main .article-content.lyff-article-field .col-span-4 { grid-column: span 4 / span 4 !important; }
main .article-content.lyff-article-field .col-span-5 { grid-column: span 5 / span 5 !important; }
main .article-content.lyff-article-field .col-span-6 { grid-column: span 6 / span 6 !important; }
main .article-content.lyff-article-field .col-span-7 { grid-column: span 7 / span 7 !important; }
main .article-content.lyff-article-field .col-span-8 { grid-column: span 8 / span 8 !important; }
main .article-content.lyff-article-field .col-span-9 { grid-column: span 9 / span 9 !important; }
main .article-content.lyff-article-field .col-span-10 { grid-column: span 10 / span 10 !important; }
main .article-content.lyff-article-field .col-span-11 { grid-column: span 11 / span 11 !important; }
main .article-content.lyff-article-field .col-span-12 { grid-column: span 12 / span 12 !important; }
main .article-content.lyff-article-field .col-span-full { grid-column: 1 / -1 !important; }

/* CP preview: plain blockquote — no card, no purple bar */
main .article-content.lyff-article-field blockquote {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    position: static !important;
    max-width: none;
    color: inherit;
}

main .article-content.lyff-article-field blockquote::before {
    content: none !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    background: none !important;
}

/* Quote line: same scale as .text-lg; weight for hierarchy */
main .article-content.lyff-article-field blockquote > p:not(:has(cite)) {
    margin: 0 0 0.25rem !important;
    max-width: none;
    font-family: inherit;
    font-style: normal !important;
    font-weight: var(--font-weight-semibold, 600);
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

main .article-content.lyff-article-field blockquote > p:not(:has(cite)):last-child {
    margin-bottom: 0 !important;
}

/* Attribution: same type scale as .text-lg, italic */
main .article-content.lyff-article-field blockquote > p:has(> cite:only-child) {
    margin: 0 !important;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    font-style: normal !important;
    font-weight: var(--font-weight-normal, 400);
    color: inherit;
    opacity: 0.85;
}

main .article-content.lyff-article-field blockquote > p:has(> cite:only-child) cite {
    display: block;
    font-size: inherit;
    font-weight: 400;
    font-style: italic !important;
    color: inherit;
}

main .article-content.lyff-article-field blockquote cite {
    font-style: italic !important;
}

/* If plugin emits .article-quote / .article-block, strip legacy “card” rules (e.g. news inline CSS) */
main .article-content.lyff-article-field .article-quote {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: none !important;
    position: static !important;
    overflow: visible !important;
}

main .article-content.lyff-article-field .article-quote::before {
    content: none !important;
}

main .article-content.lyff-article-field .article-block {
    margin: 0 !important;
}

main .article-content.lyff-article-field .article-image {
    margin: 0 !important;
    text-align: inherit !important;
}

main .article-content.lyff-article-field .article-image img {
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Body copy reset; lists get their own spacing below */
main .article-content.lyff-article-field :where(p, figure, table) {
    margin-block: 0 !important;
}

main .article-content.lyff-article-field figure {
    margin: 0 !important;
}

/* Editor: image flush, square corners */
main .article-content.lyff-article-field figure img {
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: 0 !important;
    display: block;
}

main .article-content.lyff-article-field .column p,
main .article-content.lyff-article-field .column ul,
main .article-content.lyff-article-field .column ol {
    max-width: none;
}

main .article-content.lyff-article-field img {
    max-width: 100%;
    height: auto;
    border-radius: 0 !important;
}

/* Lists — align with .article-content ul/ol */
main .article-content.lyff-article-field ul,
main .article-content.lyff-article-field ol {
    margin-block: calc(var(--spacing, 0.25rem) * 4) !important;
    margin-inline: 0 !important;
    padding-left: calc(var(--spacing, 0.25rem) * 6) !important;
    max-width: none !important;
    list-style-position: outside !important;
    color: var(--color-body-600, #656565) !important;
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    display: grid !important;
    gap: calc(var(--spacing, 0.25rem) * 1) !important;
}

main .article-content.lyff-article-field ul {
    list-style-type: disc !important;
}

main .article-content.lyff-article-field ul ::marker,
main .article-content.lyff-article-field ol ::marker {
    color: var(--color-primary, #6d47ff) !important;
}

main .article-content.lyff-article-field ol {
    list-style-type: decimal !important;
}

main .article-content.lyff-article-field li {
    padding-left: calc(var(--spacing, 0.25rem) * 1) !important;
    margin: 0 !important;
}

main .article-content.lyff-article-field li ul,
main .article-content.lyff-article-field li ol {
    margin-block: calc(var(--spacing, 0.25rem) * 2) !important;
}