/*
 * Shared styles for the public marketing/SEO pages (Pages/Public/**,
 * especially the breeder pages under Pages/Public/Breeders/**).
 *
 * This file consolidates presentation rules that were previously repeated
 * either as inline style="" attributes or as copy-pasted <style> blocks on
 * multiple individual pages. Every rule here reproduces the exact values
 * already in use elsewhere - nothing was redesigned, recolored, resized, or
 * otherwise intentionally changed. Page-specific values that only appear
 * once, or that genuinely differ page to page (e.g. a page's own responsive
 * column count for a grid it defines), were deliberately left where they
 * were instead of being forced in here.
 */

/* Kennel hero background image. Pairs with the shared .hero-bg class
   already defined in _PublicLayout.cshtml (which has no default image of
   its own): <div class="hero-bg hero-bg-kennel"></div>. Previously inlined
   via style="background-image:url('/img/hero/kennel-bg.jpg');" on ~34
   elements across 20 pages. */
.hero-bg-kennel {
    background-image: url('/img/hero/kennel-bg.jpg');
}

/* Narrow centered lead paragraph under a section heading. Pairs with the
   page's own "text-muted mx-auto" classes. Previously inlined via
   style="max-width: 720px;". */
.marketing-lead {
    max-width: 720px;
}

/* Narrow centered section-intro wrapper (heading + lead paragraph
   together). Pairs with the page's own "text-center mx-auto" classes.
   Previously inlined via style="max-width: 760px;". */
.marketing-section-intro {
    max-width: 760px;
}

/* "Related features" plain-text link list. Previously copy-pasted verbatim
   into 7 separate page-local <style> blocks. Each page keeps its own
   responsive column count above the sm breakpoint below (2 vs. 3 vs. 4
   columns, depending on how many related links that page lists) as a
   page-local override, since that count is genuinely page-specific. */
.related-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: .85rem;
    max-width: 900px;
    margin: 0 auto;
}

.related-grid a {
    display: block;
    padding: 1rem 1.25rem;
    border: 1px solid #e5e7eb;
    border-radius: .9rem;
    background: #ffffff;
    text-decoration: none;
    color: #1e293b;
    font-weight: 700;
}

.related-grid a:hover {
    border-color: #bfdbfe;
    box-shadow: 0 .75rem 1.5rem rgba(15, 23, 42, .08);
}

@media (min-width: 768px) {
    .related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* "Solution card" hover treatment for resource/related-page link cards
   (an <a class="solution-card"> wrapping a Bootstrap .card). Previously
   copy-pasted verbatim into 4 separate page-local <style> blocks - and,
   on 2 other pages that already used the solution-card class in markup
   (Litter-Management.cshtml, puppy-buyer-crm.cshtml), never defined at
   all, so those cards were silently missing the hover lift/shadow. Moving
   it here also fixes that gap for those 2 pages. */
.solution-card .card {
    transition: transform .15s ease, box-shadow .15s ease;
    border-radius: 1rem;
}

.solution-card:hover .card {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.solution-card .card-title,
.solution-card p,
.solution-card li,
.solution-card div {
    text-decoration: none;
}

/* "Records & Compliance" supporting bar - sits directly beneath a page's
   breeder workflow/lifecycle strip to communicate that staying inspection-
   ready supports the whole workflow rather than being one more step in it.
   Originally built as a homepage-only (Index.cshtml) <style> block; moved
   here so /howitworks (and any future page with its own workflow strip)
   can reuse the identical component instead of duplicating it. */
.compliance-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    border: 1px solid #dbeafe;
    border-radius: .85rem;
    background: #eff6ff;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.compliance-bar:hover {
    background: #dbeafe;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}

.compliance-bar-icon {
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #2563eb;
    color: #fff;
    font-size: 1.25rem;
}

.compliance-bar-copy {
    flex: 1 1 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
}

.compliance-bar-copy strong {
    display: block;
    color: #07152b;
    font-weight: 600;
}

.compliance-bar-copy span {
    display: block;
    color: #475569;
    font-size: .92rem;
    font-weight: 400;
    line-height: 1.5;
}

.compliance-bar-action {
    flex: 0 0 auto;
    margin-left: auto;
    color: #2563eb;
    font-weight: 600;
    font-size: .92rem;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .compliance-bar {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .compliance-bar-action {
        margin-left: 0;
    }
}