/* ========================================================================== 
   9TH STORY FOUNDRY — INSIGHT ARTICLE CALLOUTS
   Version 1.0.0

   Compatibility layer:
   - Current article markup: .fds-article-callout...
   - Original Foundry markup: .foundry-callout / .foundry-observation...

   The selectors deliberately support both contracts so the global repair
   restores existing articles without editing every post in WordPress.
   ========================================================================== */

:root {
    --fic-coal: var(--fds-coal, #1e201f);
    --fic-copper: var(--fds-copper, #b56a3a);
    --fic-copper-bright: #d18a5d;
    --fic-patina: var(--fds-patina, #5e8b80);
    --fic-patina-deep: #315f59;
    --fic-blueprint: #315b7d;
    --fic-steel: var(--fds-steel, #f2f3f1);
    --fic-paper: #f7f6f2;
    --fic-blue-paper: #eef2f3;
    --fic-ink: #23394d;
    --fic-line: rgba(35, 57, 77, .22);
}

/* --------------------------------------------------------------------------
   Base component
   -------------------------------------------------------------------------- */

:where(.foundry-callout, .fds-article-callout) {
    --fic-background: var(--fic-paper);
    --fic-foreground: var(--fic-ink);
    --fic-accent: var(--fic-copper);
    --fic-icon-color: var(--fic-accent);
    --fic-border: 1px solid var(--fic-line);
    --fic-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.75 14.25 9.75 21.25 12l-7 2.25L12 21.25l-2.25-7L2.75 12l7-2.25L12 2.75Z' fill='black'/%3E%3C/svg%3E");

    position: relative;
    isolation: isolate;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: clamp(16px, 2.5vw, 26px);
    row-gap: 9px;
    align-items: start;
    box-sizing: border-box;
    width: 100%;
    margin-block: clamp(44px, 6vw, 72px) !important;
    padding: clamp(26px, 4vw, 38px) !important;
    overflow: hidden;
    border: var(--fic-border);
    border-radius: 0;
    background: var(--fic-background);
    color: var(--fic-foreground);
    box-shadow: none;
    font-family: Archivo, Arial, sans-serif;
}

/* Neutralize Gutenberg's constrained-layout child widths and inherited margins. */
:where(.foundry-callout, .fds-article-callout) > * {
    width: auto;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

:where(.foundry-callout, .fds-article-callout)::before {
    content: "";
    grid-column: 1;
    grid-row: 1 / span 2;
    display: block;
    width: 38px;
    height: 38px;
    margin-top: 1px;
    background-color: var(--fic-icon-color);
    -webkit-mask: var(--fic-icon-mask) center / contain no-repeat;
    mask: var(--fic-icon-mask) center / contain no-repeat;
}

:where(
    .foundry-callout__label,
    .fds-article-callout__label,
    .foundry-callout > p:first-of-type,
    .fds-article-callout > p:first-of-type
) {
    grid-column: 2;
    grid-row: 1;
    margin: 0 !important;
    color: var(--fic-accent) !important;
    font-family: Archivo, Arial, sans-serif;
    font-size: .72rem !important;
    font-style: normal;
    font-weight: 760;
    letter-spacing: .21em;
    line-height: 1.2 !important;
    text-transform: uppercase;
}

:where(
    .foundry-callout__statement,
    .fds-article-callout__statement,
    .foundry-callout > p:last-of-type,
    .fds-article-callout > p:last-of-type
) {
    grid-column: 2;
    grid-row: 2;
    margin: 0 !important;
    color: var(--fic-foreground) !important;
    font-family: Archivo, Arial, sans-serif;
    font-size: clamp(1.14rem, 1.55vw, 1.42rem) !important;
    font-style: normal;
    font-weight: 520;
    letter-spacing: -.012em;
    line-height: 1.48 !important;
    text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Observation — strongest signal: dark teal field, white eye and text
   -------------------------------------------------------------------------- */

:where(
    .foundry-observation,
    .foundry-callout--observation,
    .fds-article-callout--observation
) {
    --fic-background: var(--fic-patina-deep);
    --fic-foreground: #ffffff;
    --fic-accent: rgba(255, 255, 255, .76);
    --fic-icon-color: #ffffff;
    --fic-border: 1px solid var(--fic-patina-deep);
    --fic-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 12s3.6-6.25 10-6.25S22 12 22 12s-3.6 6.25-10 6.25S2 12 2 12Z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12' r='3.1' fill='black'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Pattern — analytical / blueprint treatment with copper signal rail
   -------------------------------------------------------------------------- */

:where(
    .foundry-pattern,
    .foundry-callout--pattern,
    .fds-article-callout--pattern
) {
    --fic-background: var(--fic-blue-paper);
    --fic-foreground: var(--fic-ink);
    --fic-accent: var(--fic-copper);
    --fic-icon-color: var(--fic-copper);
    --fic-border: 1px solid rgba(49, 91, 125, .28);
    --fic-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 6h7M12 6l-2.2-2.2M12 6 9.8 8.2M19 18h-7M12 18l2.2-2.2M12 18l2.2 2.2M6 12h12' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='5' cy='6' r='2' fill='black'/%3E%3Ccircle cx='19' cy='18' r='2' fill='black'/%3E%3C/svg%3E");

    border-left: 5px solid var(--fic-copper);
}

:where(
    .foundry-pattern,
    .foundry-callout--pattern,
    .fds-article-callout--pattern
)::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    opacity: .18;
    background-image:
        linear-gradient(rgba(49, 91, 125, .15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(49, 91, 125, .15) 1px, transparent 1px);
    background-size: 28px 28px;
}

/* --------------------------------------------------------------------------
   Question — open inquiry: light field, deliberate outline, no heavy fill
   -------------------------------------------------------------------------- */

:where(
    .foundry-question,
    .foundry-callout--question,
    .fds-article-callout--question
) {
    --fic-background: rgba(255, 255, 255, .42);
    --fic-foreground: var(--fic-ink);
    --fic-accent: var(--fic-blueprint);
    --fic-icon-color: var(--fic-blueprint);
    --fic-border: 2px solid rgba(49, 91, 125, .62);
    --fic-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.25' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M9.25 9a2.9 2.9 0 1 1 4.7 2.28c-1.1.78-1.95 1.32-1.95 2.72' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17.15' r='1.05' fill='black'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Reflection — quiet close: warm paper, patina rules, copper spark
   -------------------------------------------------------------------------- */

:where(
    .foundry-reflection,
    .foundry-callout--reflection,
    .fds-article-callout--reflection
) {
    --fic-background: var(--fic-paper);
    --fic-foreground: #364844;
    --fic-accent: #3f6f65;
    --fic-icon-color: var(--fic-copper);
    --fic-border: 0;
    --fic-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.75 14.15 9.85 21.25 12l-7.1 2.15L12 21.25l-2.15-7.1L2.75 12l7.1-2.15L12 2.75Z' fill='black'/%3E%3C/svg%3E");

    border-top: 2px solid var(--fic-copper);
    border-bottom: 2px solid var(--fic-patina);
}

/* --------------------------------------------------------------------------
   Responsive and print behavior
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {
    :where(.foundry-callout, .fds-article-callout) {
        grid-template-columns: 36px minmax(0, 1fr);
        column-gap: 14px;
        row-gap: 8px;
        margin-block: 38px !important;
        padding: 22px 20px !important;
    }

    :where(.foundry-callout, .fds-article-callout)::before {
        width: 30px;
        height: 30px;
    }

    :where(
        .foundry-callout__statement,
        .fds-article-callout__statement,
        .foundry-callout > p:last-of-type,
        .fds-article-callout > p:last-of-type
    ) {
        font-size: 1.08rem !important;
        line-height: 1.5 !important;
    }
}

@media print {
    :where(.foundry-callout, .fds-article-callout) {
        break-inside: avoid;
        color-adjust: exact;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}