/*
 * Agami custom layout — overrides for blog.agami.ai.
 *
 * Loaded after Source's screen.css so the cascade gives `agami-*` rules
 * the last word. Hand-written; Source's gulp pipeline does not touch this
 * file.
 *
 * Pass 2 polish — match agami.ai chrome (white bg, larger type), more
 * vertical breathing room (Vercel/Cursor reference), framed card images,
 * light-blue Featured cards, subscribe band removed.
 */

:root {
    --agami-accent: #0b57d0;
    --agami-accent-hover: #0a4ab1;
    --agami-accent-soft: #e7eefb;
    --agami-bg: #ffffff;
    --agami-bg-soft: #f5f7fb;
    --agami-bg-card: #eef3fc;
    --agami-border: rgba(15, 40, 90, 0.10);
    --agami-border-strong: rgba(15, 40, 90, 0.18);
    --agami-text: #131316;
    --agami-text-secondary: #4a4a52;
    --agami-text-tertiary: #6e6e76;
    --agami-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
    --agami-radius: 12px;
}

/* Page chrome — white background to match agami.ai marketing site. No
   `padding-bottom` reservation — Pass 2 dropped the sticky signup band. */
body {
    background: var(--agami-bg);
    color: var(--agami-text);
    line-height: 1.55;
}

/* Filter pills ---------------------------------------------------------- */

.agami-filter-bar {
    padding: 6.4rem 0 4rem;
    border-bottom: 1px solid var(--agami-border);
    margin-bottom: 6.4rem;
}

.agami-filter-pills {
    display: flex;
    gap: 0.64rem;
    flex-wrap: wrap;
    align-items: center;
}

.agami-filter-pill {
    padding: 0.55em 1.15em;
    border-radius: 999px;
    font-size: 1.52rem;
    font-weight: 500;
    color: var(--agami-text-secondary);
    background: transparent;
    border: 1px solid transparent;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.agami-filter-pill:hover {
    color: var(--agami-text);
    background: var(--agami-bg-soft);
}

.agami-filter-pill.is-active {
    background: var(--agami-accent);
    color: #fff;
}

.agami-filter-pill.is-active:hover {
    background: var(--agami-accent-hover);
    color: #fff;
}

/* Section heads --------------------------------------------------------- */

.agami-section {
    padding: 3.2rem 0 8.8rem;
}

.agami-section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 3.52rem;
}

.agami-section-title {
    font-family: var(--agami-mono);
    font-size: 1.68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--agami-text-tertiary);
    margin: 0;
}

.agami-section-link {
    font-size: 1.52rem;
    color: var(--agami-accent);
    font-weight: 500;
    text-decoration: none;
}

.agami-section-link:hover {
    color: var(--agami-accent-hover);
    text-decoration: underline;
}

.agami-empty {
    grid-column: 1 / -1;
    color: var(--agami-text-tertiary);
    font-style: italic;
    margin: 0;
}

/* Card grid ------------------------------------------------------------- */

.agami-card-grid {
    display: grid;
    /* Vertical gap larger than horizontal — Cursor / Lindy pattern. */
    gap: 4.16rem 3.2rem;
    grid-template-columns: 1fr;
}

.agami-card-grid.is-three {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

@media (min-width: 900px) {
    .agami-card-grid.is-three {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Card system — Pass 3 (Lindy two-tone block) -------------------------- */
/*
 * Every card on the page splits into:
 *   .agami-card-block-top    — tinted Agami-blue radial gradient,
 *                              post title in mono, centered.
 *   .agami-card-block-bottom — pure white, eyebrow + (excerpt) + meta +
 *                              byline.
 * The outer card is white-on-white with a 1px Agami-tinted border;
 * `overflow: hidden` clips the gradient block to the rounded corners.
 * Featured and Latest share structure; only padding + type-scale differ.
 */

.agami-card-featured,
.agami-card-latest {
    display: flex;
    flex-direction: column;
    background: var(--agami-bg);
    border: 1px solid var(--agami-border);
    border-radius: var(--agami-radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.agami-card-featured:hover,
.agami-card-latest:hover {
    transform: translateY(-2px);
    /* Hint of the Agami accent in the hover shadow — picks up the tint. */
    box-shadow: 0 10px 30px rgba(11, 87, 208, 0.12);
}

/* Top block — tinted radial gradient + mono title */

.agami-card-block-top {
    /* Stack the gradient over white so the tint reads as soft, not solid.
       The off-center anchor (top-left) gives the modern depth-y feel
       Sandeep called out on lindy.ai. */
    background:
        radial-gradient(
            ellipse at 30% 25%,
            rgba(11, 87, 208, 0.16) 0%,
            rgba(11, 87, 208, 0.07) 45%,
            rgba(11, 87, 208, 0.02) 90%
        ),
        var(--agami-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Pass 3 polish: top block has a *fixed* height (not min-height) so the
   gradient panel is uniform across cards regardless of title length.
   Title is line-clamped to 3 lines to fit the fixed height. */

.agami-card-featured .agami-card-block-top {
    padding: 5.6rem 3.84rem;
    height: 220px;
}

.agami-card-latest .agami-card-block-top {
    padding: 4.48rem 3.2rem;
    height: 220px;
}

.agami-card-block-top .agami-card-title {
    font-family: var(--agami-mono);
    /* Mono regular weight — Pass 3 polish dropped 600 to 400 for an
       editorial (not marketing) feel. */
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.005em;
    color: var(--agami-text);
    margin: 0;
    /* Force Title Case across all post titles for visual consistency.
       `capitalize` only uppercases the FIRST letter of each word; the
       rest of each word is unaffected, so all-caps acronyms (MCP, ROI,
       LLM) stay intact. */
    text-transform: capitalize;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.agami-card-featured .agami-card-block-top .agami-card-title {
    font-size: 2.56rem;
}

.agami-card-latest .agami-card-block-top .agami-card-title {
    font-size: 2rem;
}

.agami-card-featured:hover .agami-card-title,
.agami-card-latest:hover .agami-card-title {
    color: var(--agami-accent);
}

/* Bottom block — white, eyebrow + meta + byline */

.agami-card-block-bottom {
    background: var(--agami-bg);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.agami-card-featured .agami-card-block-bottom {
    padding: 2.4rem 2.4rem 2.2rem;
}

.agami-card-latest .agami-card-block-bottom {
    padding: 2rem 2rem 1.8rem;
}

.agami-card-eyebrow {
    font-family: var(--agami-mono);
    font-size: 1.25rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--agami-accent);
    margin: 0 0 0.85em;
}

.agami-card-block-bottom .agami-card-excerpt {
    font-size: 1.52rem;
    line-height: 1.55;
    color: var(--agami-text-secondary);
    margin: 0 0 1.2em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Foot row: byline left, date · read-time right (when both present) */
.agami-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
    flex-wrap: wrap;
}

.agami-card-byline {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.4rem;
    color: var(--agami-text-tertiary);
}

.agami-card-meta {
    font-family: var(--agami-mono);
    font-size: 1.2rem;
    color: var(--agami-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
    text-align: right;
}

.agami-card-meta span + span::before {
    content: " · ";
    opacity: 0.5;
}

.agami-card-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #999 0%, #555 100%);
    flex-shrink: 0;
}

img.agami-card-avatar {
    object-fit: cover;
    background: var(--agami-bg-card);
}

/* (Pass 3 dropped feature-image cards entirely. The .agami-card-image
   selectors that Pass 2 retained for forward-compat are gone — the
   two-tone block IS the card identity.) */

/* Tag landing ---------------------------------------------------------- */

.agami-tag-header {
    padding: 3.2rem 0 4.8rem;
    text-align: left;
}

.agami-tag-title {
    font-size: clamp(3.2rem, 4vw, 4.48rem);
    line-height: 1.1;
    margin: 0 0 0.4em;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.agami-tag-strapline {
    font-size: 1.84rem;
    color: var(--agami-text-secondary);
    line-height: 1.55;
    max-width: 60ch;
    margin: 0;
}

/* OSS strip ------------------------------------------------------------ */

.agami-oss-strip {
    background: var(--agami-bg-soft);
    border: 1px solid var(--agami-border);
    border-radius: var(--agami-radius);
    padding: 6.4rem 4.8rem;
    margin: 8rem auto 9.6rem;
    max-width: 1280px;
}

.agami-oss-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.56rem;
    align-items: center;
    max-width: none;
}

@media (min-width: 800px) {
    .agami-oss-inner {
        grid-template-columns: 1fr auto;
    }
}

.agami-oss-text .agami-section-title,
.agami-oss-strip h2 {
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
    text-transform: none;
    letter-spacing: -0.01em;
    font-size: 2.64rem;
    font-weight: 700;
    color: var(--agami-text);
    margin: 0 0 0.4em;
}

.agami-oss-strip .agami-section-strapline {
    font-size: 1.6rem;
    color: var(--agami-text-secondary);
    margin: 0;
    line-height: 1.55;
    max-width: 56ch;
}

.agami-oss-actions {
    display: flex;
    gap: 1.12rem;
    flex-wrap: wrap;
}

.agami-button-primary,
.agami-button-secondary {
    display: inline-block;
    padding: 0.75em 1.5em;
    border-radius: 8px;
    font-size: 1.52rem;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.2;
    transition: background 0.15s ease, color 0.15s ease;
}

.agami-button-primary {
    background: var(--agami-accent);
    color: #fff;
}

.agami-button-primary:hover {
    background: var(--agami-accent-hover);
    color: #fff;
}

.agami-button-secondary {
    background: transparent;
    color: var(--agami-text-tertiary);
    border: 1px solid var(--agami-border);
}

.agami-button-secondary.is-pending {
    cursor: default;
}

/* Footer chrome suppression ------------------------------------------- */
/*
 * Source's `partials/components/footer.hbs` ships:
 *   - a `.gh-footer-signup` section (we removed all subscribe in Pass 2)
 *   - a `.gh-footer-copyright` "Powered by Ghost" link
 * We hide both via CSS rather than fork the partial so future Source
 * upstream merges stay clean. The markup is still in the DOM (so any
 * analytics that count `[data-members-form]` stay consistent with
 * Source's defaults).
 */
.gh-footer-signup,
.gh-footer-copyright {
    display: none;
}

@media (max-width: 700px) {
    .agami-filter-bar {
        overflow-x: auto;
        padding-bottom: 1.6rem;
        -webkit-overflow-scrolling: touch;
    }
    .agami-filter-pills {
        flex-wrap: nowrap;
        padding-right: 1.6rem;
    }
    .agami-filter-pill {
        white-space: nowrap;
        flex-shrink: 0;
    }
}