/* ==========================================================================
   Insights page
   ========================================================================== */

.insights-hero {
    padding: 160px var(--sp-5) var(--sp-11);
    background: var(--dark-bg);
    color: var(--white);
    text-align: center;
}
.insights-hero h1 { color: var(--white); font-size: var(--fs-3xl); margin-bottom: var(--sp-3); }
.insights-hero p { color: var(--slate-400); max-width: 700px; margin: 0 auto; }

.content-section { max-width: var(--container); margin: 0 auto; padding: var(--sp-11) var(--sp-5); }

.card-display {
    background-color: var(--white);
    padding: var(--sp-6);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
}
.card-display h3 { color: var(--dark-bg); margin-bottom: var(--sp-4); }

/* A 250px floor produced four columns at 1440px, narrow enough that most
   headlines broke mid-phrase ("Why Bundled / Packages Beat Hiring / Five
   Freelancers"). 300px settles into three, which is wide enough for a title
   to break where the words actually divide. */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 25px; }

.blog-card {
    background-color: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 25px;
    transition: transform var(--dur-2) var(--ease-out),
                box-shadow var(--dur-2) var(--ease-out),
                border-color var(--dur-2) var(--ease-out);
}

.blog-card-tag {
    display: inline-block;
    background-color: var(--badge-bg);
    color: var(--badge-text);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 5px var(--sp-3);
    border-radius: var(--radius-pill);
    margin-bottom: 14px;
}
.blog-card h4 { color: var(--dark-bg); font-size: var(--fs-base); margin-bottom: var(--sp-3); line-height: 1.4; }
.blog-card p { font-size: var(--fs-sm); color: var(--text-main); line-height: var(--lh-base); margin-bottom: 18px; }

.blog-read-more {
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}
.blog-read-more .icon { transition: transform var(--dur-2) var(--ease-out); }
.blog-read-more:hover .icon { transform: translateX(3px); }

/* This sheet had no media queries at all: the hero's 160px top padding burned
   about a quarter of a phone's first screen. calc() below still clears the
   fixed header in full, at ~114px instead. */
@media (max-width: 900px) {
    .insights-hero { padding: calc(var(--header-h) + var(--sp-7)) var(--sp-5) var(--sp-8); }
    .content-section { padding: var(--sp-8) var(--sp-5); }
}