/* =================================================================
   Golden Core Mining - SEO pages shared styles
   Extends css/home.css. No inline styles in generated pages.
   Used by /services/* and /articles/* generated pages.
   ================================================================= */

/* -----------------------------------------------------------------
   Layout utilities (replace ad hoc inline styles)
----------------------------------------------------------------- */
.gcm-wrap--narrow { max-width: 860px; }
.gcm-wrap--center { text-align: center; }
.gcm-page-cta--center { justify-content: center; }

/* -----------------------------------------------------------------
   Article meta row (published / updated / read time)
----------------------------------------------------------------- */
.gcm-articlemeta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .65rem 1.25rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
    font-size: .9rem;
    color: var(--c-text-3);
}
.gcm-articlemeta li {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}
.gcm-articlemeta li::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--c-gold);
    box-shadow: 0 0 8px rgba(255, 183, 3, .5);
}
.gcm-articlemeta strong { color: var(--c-text-2); font-weight: 600; }

/* -----------------------------------------------------------------
   Key takeaways box (top of articles)
----------------------------------------------------------------- */
.gcm-takeaways {
    margin: 0 0 2.25rem;
    padding: 1.5rem 1.75rem;
    background: linear-gradient(135deg, rgba(255,183,3,.07), rgba(255,154,31,.03));
    border: 1px solid rgba(255, 183, 3, 0.28);
    border-radius: var(--r-lg);
}
.gcm-takeaways h2 {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--c-cyan-deep);
    margin: 0 0 .85rem;
}
.gcm-takeaways ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .6rem;
}
.gcm-takeaways li {
    position: relative;
    padding-left: 1.6rem;
    color: var(--c-text-2);
    line-height: 1.6;
    font-weight: 500;
}
.gcm-takeaways li::before {
    content: '';
    position: absolute;
    left: 0; top: .5rem;
    width: 9px; height: 9px;
    border-radius: 2px;
    background: linear-gradient(135deg, var(--c-cyan), var(--c-electric));
}

/* -----------------------------------------------------------------
   In page table of contents
----------------------------------------------------------------- */
.gcm-toc {
    margin: 0 0 2rem;
    padding: 1.25rem 1.5rem;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
}
.gcm-toc h2 {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--c-text-3);
    margin: 0 0 .75rem;
}
.gcm-toc ol {
    margin: 0;
    padding-left: 1.2rem;
    display: grid;
    gap: .4rem;
    color: var(--c-text-2);
}
.gcm-toc a {
    color: var(--c-text-2);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .2s ease, border-color .2s ease;
}
.gcm-toc a:hover { color: var(--c-electric); border-bottom-color: var(--c-electric); }

/* -----------------------------------------------------------------
   Captioned figure
----------------------------------------------------------------- */
.gcm-figure {
    margin: 2rem 0;
}
.gcm-figure img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--r-lg);
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-sm);
}
.gcm-figure__cap {
    margin: .75rem 0 0;
    font-size: .86rem;
    color: var(--c-text-3);
    line-height: 1.55;
    text-align: center;
}

/* -----------------------------------------------------------------
   Sourced stat row
----------------------------------------------------------------- */
.gcm-statrow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.25rem;
    margin: 2.25rem 0;
}
.gcm-statrow__item {
    padding: 1.5rem 1.4rem;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
}
.gcm-statrow__num {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--c-cyan-deep);
    line-height: 1.1;
    margin: 0 0 .4rem;
    letter-spacing: -0.02em;
}
.gcm-statrow__label {
    color: var(--c-text-2);
    font-size: .92rem;
    line-height: 1.55;
    margin: 0 0 .6rem;
}
.gcm-statrow__src {
    font-size: .78rem;
    color: var(--c-text-3);
}
.gcm-statrow__src a { color: var(--c-cyan-deep); font-weight: 600; }

/* -----------------------------------------------------------------
   Sources / references list
----------------------------------------------------------------- */
.gcm-sources {
    max-width: 840px;
    margin: 0 auto;
}
.gcm-sources ol {
    margin: 1.25rem 0 0;
    padding-left: 1.3rem;
    display: grid;
    gap: .85rem;
}
.gcm-sources li {
    color: var(--c-text-2);
    line-height: 1.6;
    font-size: .94rem;
}
.gcm-sources li a {
    color: var(--c-cyan-deep);
    font-weight: 600;
    word-break: break-word;
}
.gcm-sources__pub { color: var(--c-text-3); }
.gcm-sources__date { color: var(--c-text-3); font-style: normal; }

/* -----------------------------------------------------------------
   Related pages grid
----------------------------------------------------------------- */
.gcm-related {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
    gap: 1.25rem;
    margin-top: 2.5rem;
}
.gcm-related__card {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1.5rem 1.4rem;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transition: transform .35s cubic-bezier(.23,1,.32,1), box-shadow .35s ease, border-color .35s ease;
}
.gcm-related__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: rgba(255, 183, 3, 0.35);
}
.gcm-related__kicker {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--c-cyan-deep);
    font-weight: 700;
}
.gcm-related__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--c-text);
    letter-spacing: -0.01em;
    line-height: 1.3;
}
.gcm-related__desc {
    font-size: .9rem;
    color: var(--c-text-2);
    line-height: 1.55;
}

/* -----------------------------------------------------------------
   Hub index page (services / articles directory)
----------------------------------------------------------------- */
.gcm-hubgroup { margin-top: 3rem; }
.gcm-hubgroup__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--c-border);
}
.gcm-hubgroup__head h2 { margin: 0; font-size: 1.5rem; }
.gcm-hubgroup__head p { margin: 0; color: var(--c-text-3); font-size: .92rem; }
.gcm-hubgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.1rem;
}

/* -----------------------------------------------------------------
   Feature and risk grids: optimized for 2, 3, or 4 items.
   These override the fixed 3-column grids from home.css. seo-pages.css
   is only loaded on generated pages, so the homepage is unaffected.
   auto-fit fills the row, so 4 items sit 4-up on desktop, then reflow.
----------------------------------------------------------------- */
.gcm-features {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.gcm-risk {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

/* -----------------------------------------------------------------
   Steps: home.css styles these for dark sections (white text). On the
   light (ivory / cream) sections used by generated pages, recolor them
   so the copy is legible.
----------------------------------------------------------------- */
.gcm-section--ivory .gcm-steps li,
.gcm-section--cream .gcm-steps li {
    background: var(--c-bg-card);
    border-color: var(--c-border);
    color: var(--c-text-2);
    box-shadow: var(--shadow-sm);
    backdrop-filter: none;
}
.gcm-section--ivory .gcm-steps li:hover,
.gcm-section--cream .gcm-steps li:hover {
    background: var(--c-bg-card);
    border-color: rgba(255, 183, 3, 0.45);
}
.gcm-section--ivory .gcm-steps li strong,
.gcm-section--cream .gcm-steps li strong,
.gcm-section--ivory .gcm-steps li .gcm-steps__title,
.gcm-section--cream .gcm-steps li .gcm-steps__title {
    color: var(--c-text);
}
.gcm-section--ivory .gcm-steps__desc,
.gcm-section--cream .gcm-steps__desc {
    color: var(--c-text-2);
}

/* Slightly wider step column for the longer copy on generated pages */
.gcm-steps { max-width: 760px; }

/* -----------------------------------------------------------------
   Closing CTA band (shared by service, article, and hub pages: id="cta").
   Restores a clean vertical rhythm: heading block, then the centered
   button row, then the disclaimer, each with real breathing room. The
   id selector reliably overrides the base margins from home.css.
----------------------------------------------------------------- */
#cta .gcm-wrap--center { max-width: 760px; }
#cta .gcm-section-head { margin: 0 auto 2.25rem; }
#cta .gcm-page-cta {
    justify-content: center;
    gap: 1rem;
    margin: 0 0 1.75rem;
}
#cta .gcm-risk-note {
    margin: 0 auto;
    max-width: 40rem;
}

/* -----------------------------------------------------------------
   Responsive
----------------------------------------------------------------- */
@media (max-width: 640px) {
    .gcm-related,
    .gcm-hubgrid,
    .gcm-statrow,
    .gcm-features,
    .gcm-risk { grid-template-columns: 1fr; }
}