/* ── Long-form guide pages (stud services, and the other guides queued behind it) ──
   v2 tokens come from home.css, which the layout loads on every page. Scoped under
   .guide-* so nothing here can reach the legacy stylesheets, per the v2 scoping rule. */

.guide-page {
    padding: 40px 0 56px;
}

.guide-page-header {
    margin-bottom: 28px;
}

.guide-page-header h1 {
    font-family: var(--v2-font);
    font-weight: 700;
    font-size: 28px;
    line-height: 1.2;
    color: var(--v2-fg);
    margin-bottom: 0;
}

/* Measure, not width: prose past roughly 75 characters a line is measurably harder to
   read, and this page is 1,400 words of it. The container stays full width so the
   header and footer still line up with every other page. */
.guide-content {
    max-width: 760px;
}

.guide-content h2 {
    font-family: var(--v2-font);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.3;
    color: var(--v2-fg);
    margin: 36px 0 12px;
}

.guide-content h3 {
    font-family: var(--v2-font);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
    color: var(--v2-fg);
    margin: 24px 0 6px;
}

.guide-content p {
    font-family: var(--v2-font);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.75;
    color: var(--v2-fg);
    margin-bottom: 16px;
}

.guide-content ul {
    padding-left: 20px;
    margin-bottom: 16px;
}

.guide-content ul li {
    font-family: var(--v2-font);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.75;
    color: var(--v2-fg);
    margin-bottom: 6px;
}

.guide-content strong {
    font-weight: 700;
    color: var(--v2-fg);
}

.guide-content a {
    color: var(--v2-primary);
    font-weight: 500;
}

.guide-content a:hover {
    color: var(--v2-primary-hover);
}

/* ── Breed stud sections ──
   A wrapped row of pills rather than a bullet list: there are ~19 of them and a vertical
   list that long pushes the rest of the page below the fold on a phone. */
.guide-content ul.guide-breed-links {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 24px;
}

.guide-breed-links li {
    margin-bottom: 0;
}

.guide-breed-links a {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--v2-border);
    border-radius: 999px;
    background: var(--v2-bg-card);
    font-size: 14px;
    font-weight: 500;
    color: var(--v2-fg);
    text-decoration: none;
}

.guide-breed-links a:hover {
    border-color: var(--v2-primary);
    color: var(--v2-primary);
}

/* ── Call to action ── */
.guide-cta-wrap {
    margin: 24px 0 8px;
}

.guide-content .guide-cta {
    display: inline-block;
    padding: 12px 22px;
    border-radius: 8px;
    background: var(--v2-primary);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.18s ease;
}

.guide-content .guide-cta:hover {
    background: var(--v2-primary-hover);
    color: #fff;
}

/* ── Desktop ── */
@media (min-width: 768px) {
    .guide-page {
        padding: 64px 0 80px;
    }

    .guide-page-header h1 {
        font-size: 38px;
    }

    .guide-content h2 {
        font-size: 24px;
        margin-top: 44px;
    }

    .guide-content h3 {
        font-size: 17px;
    }

    .guide-content p,
    .guide-content ul li {
        font-size: 16px;
    }
}