/* ============================================
   MAINE HAUS CATTERY - ABOUT PAGE STYLES
   Loaded after main.css and responsive.css
   ============================================ */

/* ========== PAGE HEADER (INTRO) ==========
   Recreated from our-cats.css — page-specific CSS isn't shared between
   page stylesheets, so the dark intro-band pattern is duplicated here. */
.page-header {
    background: linear-gradient(135deg, var(--color-black) 0%, var(--color-gray-dark) 100%);
    color: var(--color-white);
    text-align: center;
    margin-top: 70px;
    padding: var(--spacing-xl) 0;
}

.page-header h1 {
    color: var(--color-white);
    margin-bottom: var(--spacing-sm);
}

.page-header .title-underline {
    margin-bottom: var(--spacing-md);
}

/* The site-wide .section-label uses the darker AA gold meant for light
   backgrounds; on this page's dark bands the bright gold has ~10:1 contrast. */
.page-header .section-label,
.trust-band .section-label {
    color: var(--color-gold);
}

.page-header-text {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}

.page-header-text .lead {
    color: var(--color-white);
}

/* ========== SECTION 2: MEET THE BREEDER ==========
   Layout reuses main.css's .welcome-content/.welcome-image/.welcome-text
   grid (side-by-side on desktop, stacked on mobile via responsive.css).
   main.css's shared .welcome-content sets align-items: center, which floats
   the portrait mid-column against the taller text column — override to
   stretch both columns to the same height so the portrait's top stays flush
   with the eyebrow/heading and its bottom fills the row instead of leaving
   a gap under a shorter placeholder. */
.meet-breeder .welcome-content {
    align-items: stretch;
}

/* Stretch the portrait placeholder to match the text column's height (the
   image was previously top-aligned against a taller text column, leaving a
   dead gap underneath at wide viewports) — same height:100% pattern as
   our-cats.css's .cat-portrait .image-placeholder. */
.meet-breeder .welcome-image {
    height: 100%;
}

.meet-breeder .welcome-image .image-placeholder {
    height: 100%;
    min-height: 450px;
}

.meet-breeder .welcome-text .section-label {
    display: block;
    text-align: left;
}

.meet-breeder .welcome-text h2 {
    text-align: left;
}

/* Left-aligned variant of the shared centered .title-underline, for use
   next to left-aligned headings inside a two-column layout. */
.title-underline.underline-left {
    margin: 0 0 var(--spacing-md);
}

.meet-breeder .btn {
    margin-top: var(--spacing-sm);
}

/* Visible placeholder for copy the owner still needs to supply.
   Recreated from our-cats.css's .owner-input-note (page-specific there too).
   Now a single wrapper around all three prompt paragraphs, rather than three
   separate dashed boxes, so the section reads as "one pending item" instead
   of three. */
.owner-input-note {
    font-style: italic;
    color: var(--color-gray-medium);
    background-color: var(--color-gray-lightest);
    border: 2px dashed var(--color-gray-medium);
    padding: var(--spacing-sm) var(--spacing-md);
}

.owner-input-note p {
    margin-bottom: var(--spacing-sm);
}

.owner-input-note p:last-child {
    margin-bottom: 0;
}

/* ========== SECTION 3: OUR PHILOSOPHY ==========
   Card grid reuses main.css's shared .highlights/.highlights-grid/.highlight-card
   (the same pattern as the homepage's four highlight cards) — no new CSS
   needed for the grid itself, just spacing for the intro paragraph. */
.philosophy-intro {
    max-width: 700px;
    margin: var(--spacing-sm) auto 0;
}

.philosophy .highlight-card p {
    text-align: left;
}

.philosophy .highlight-card h3 {
    text-align: left;
}

/* The reused .highlights-grid is a 4-up auto-fit (~260px columns) tuned for
   short homepage blurbs; this page's longer paragraphs read as thin, hollow
   columns at that width. Override to a 2x2 grid at desktop widths — mobile's
   existing 1-column stack (responsive.css, max-width:1024px) is untouched. */
@media (min-width: 1025px) {
    .philosophy .highlights-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 900px;
        margin: 0 auto;
    }
}

/* ========== GENERIC ALTERNATING-SECTION BACKGROUND ==========
   Same gray-lightest tone used by .highlights/.cat-profile.alt elsewhere,
   as a reusable utility for sections that aren't card grids. */
.alt-bg {
    background-color: var(--color-gray-lightest);
}

/* ========== SECTION 4: TICA REGISTRATION (DARK TRUST BAND) ==========
   Recreated from our-cats.css's .verify-section dark-band pattern. */
.trust-band {
    background: linear-gradient(135deg, var(--color-gray-dark) 0%, var(--color-black) 100%);
    color: var(--color-white);
}

.trust-band .section-title {
    color: var(--color-white);
}

.trust-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.trust-content > p {
    color: var(--color-gray-light);
    text-align: left;
}

.trust-content .lead {
    color: var(--color-white);
    text-align: left;
}

.trust-content strong {
    color: var(--color-white);
}

/* :not(.btn) keeps this off the CTA button, whose .btn-primary styling this
   selector would otherwise out-rank (gold text on gold background) */
.trust-content a:not(.btn) {
    color: var(--color-gold);
    text-decoration: underline;
}

/* Large prominent registration number — the visual anchor of the trust band.
   Selector is deliberately more specific than ".trust-content > p" above, which
   would otherwise win the cascade and override the gold color + centering. */
.trust-content p.reg-number {
    font-family: var(--font-heading);
    font-size: clamp(3rem, 9vw, 5.5rem);
    font-weight: 700;
    color: var(--color-gold);
    letter-spacing: 2px;
    text-align: center;
    margin: 0 0 var(--spacing-md);
    line-height: 1;
}

.reg-number-symbol {
    font-weight: 400;
    opacity: 0.7;
    margin-right: 0.25rem;
}

.trust-cta {
    text-align: center;
    margin-top: var(--spacing-md);
}

/* ========== SECTION 5: OUR HOME ========== */
.home-content {
    max-width: 800px;
    margin: 0 auto;
}

/* ========== SECTION 6: SIX THINGS (GOLD-LEFT-BORDER LIST) ==========
   Recreated from our-cats.css's .health-list gold-left-border treatment. */
.principle-list {
    max-width: 800px;
    margin: 0 auto;
}

.principle-list li {
    background-color: var(--color-white);
    border-left: 3px solid var(--color-gold);
    box-shadow: var(--shadow-subtle);
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    font-size: 0.9375rem;
    color: var(--color-gray-medium);
    line-height: 1.7;
}

.principle-list li:last-child {
    margin-bottom: 0;
}

.principle-list strong {
    color: var(--color-black);
}

/* ========== SECTION 7: CLOSING CTA ========== */
.cta-buttons {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--spacing-md);
}

/* Gold outline button — the shared .btn-secondary is white-on-dark only,
   so light backgrounds need this variant. Recreated from our-cats.css. */
.btn-outline-gold {
    background-color: transparent;
    color: var(--color-gold-dark);
    border-color: var(--color-gold-dark);
}

.btn-outline-gold:hover {
    background-color: var(--color-gold-dark);
    color: var(--color-white);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    /* Nav shrinks to 64px tall on mobile (40px logo + 0.75rem padding × 2);
       match it so no white seam shows above the dark header. */
    .page-header {
        margin-top: 64px;
    }

    .meet-breeder .welcome-text .section-label,
    .meet-breeder .welcome-text h2,
    .philosophy .highlight-card h3,
    .philosophy .highlight-card p {
        text-align: center;
    }

    /* Re-center the underline once the heading above it centers on mobile —
       .underline-left is only meant for the desktop side-by-side layout. */
    .meet-breeder .title-underline.underline-left {
        margin: 0 auto var(--spacing-md);
    }

    .cta-buttons {
        flex-direction: column;
    }

    .cta-buttons .btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .reg-number {
        font-size: 2.75rem;
    }
}