/* PetAdoption.ai — Homepage styles
   PETADOPTION-GUEST-ENTRY-POINT Session 1 (2026-05-20).
   Mobile-first. Pairs with main.css (navbar + tokens) and unified-footer.css.
   Tokens: --warm-cream, --soft-black, --warm-gray, --accent-coral, --accent-sage.
*/

.hero-italic {
    font-style: italic;
    color: var(--accent-coral);
    font-weight: 400;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =====================================================
   HERO
   ===================================================== */
.home-hero {
    padding-top: 96px;
    background: var(--warm-cream);
}

.home-hero__container {
    /* Keep .container's 1400px cap so the hero text + image + chat block
       share the same gutters as the navbar's .nav-inner (logo on the left,
       Sign In on the right). The hero section's bg still spans full
       viewport via .home-hero — only the content stays within 1400px. */
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: end;
    padding-top: 24px;
    padding-bottom: 0;
}

.home-hero__text {
    align-self: center;
}

.home-hero__text h1 {
    font-size: clamp(2.25rem, 6vw, 3.75rem);
    line-height: 1.1;
    margin: 0 0 20px;
    color: var(--soft-black);
    letter-spacing: -0.01em;
}

.home-hero__lede {
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--warm-gray);
    margin: 0 0 24px;
    max-width: 520px;
}

.home-hero__features {
    list-style: none;
    padding: 0;
    margin: 0 0 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.home-hero__features li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9375rem;
    color: var(--soft-black);
    font-weight: 500;
}

.home-hero__features li::before {
    content: '';
    width: 18px;
    height: 18px;
    border-radius: 9999px;
    background: rgba(224, 122, 95, 0.15);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E07A5F'%3E%3Cpath d='M12 2C9.243 2 7 4.243 7 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5zm-3 8.4c-1.654 0-3 1.346-3 3 0 .553.447 1 1 1s1-.447 1-1c0-.551.449-1 1-1 .553 0 1-.447 1-1s-.447-1-1-1zm6 0c-.553 0-1 .447-1 1s.447 1 1 1c.551 0 1 .449 1 1 0 .553.447 1 1 1s1-.447 1-1c0-1.654-1.346-3-3-3z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
    flex-shrink: 0;
}

.home-hero__visual {
    position: relative;
    /* Mobile: keep centered + capped. Desktop overrides below push the
       image to the right edge of its grid column so it "hugs the right
       margin" — see @media (min-width: 768px). */
    margin: 0 auto;
    max-width: 420px;
    width: 100%;
}

.home-hero__image {
    width: 100%;
    height: auto;
    display: block;
}

/* =====================================================
   SPOT CHAT BLOCK
   ===================================================== */
.spot-block {
    background: #FFFFFF;
    border: 1px solid var(--light-gray);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: 24px;
    /* Fill the full container width so it spans from left to right margin
       (matching the hero text and image edges). */
    margin: 0 0 16px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.spot-block__greeting {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0;
}

/* Avatar in a talk-bubble shape: coral-bordered white circle with a
   pointed tail to the lower-left (speech-bubble pointer). */
.spot-block__avatar-bubble {
    position: relative;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 9999px;
    background: #FFFFFF;
    border: 2px solid var(--accent-coral);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    box-sizing: border-box;
}

/* Coral tail (outer triangle) */
.spot-block__avatar-bubble::before {
    content: '';
    position: absolute;
    left: 4px;
    bottom: -8px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 12px 0 0;
    border-color: var(--accent-coral) transparent transparent transparent;
}

/* White tail interior (inner triangle, inset to leave the coral edge) */
.spot-block__avatar-bubble::after {
    content: '';
    position: absolute;
    left: 7px;
    bottom: -3px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 8px 0 0;
    border-color: #FFFFFF transparent transparent transparent;
}

.spot-block__avatar {
    width: 100%;
    height: 100%;
    object-fit: contain;
    fill: var(--accent-coral);
    color: var(--accent-coral);
}

.spot-block__hello {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--accent-coral);
    margin: 0 0 2px;
    line-height: 1.3;
}

.spot-block__sub {
    font-size: 0.9375rem;
    color: var(--warm-gray);
    margin: 0;
    line-height: 1.4;
}

.spot-block__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.spot-chip {
    appearance: none;
    -webkit-appearance: none;
    background: var(--warm-cream);
    border: 1px solid var(--light-gray);
    border-radius: 9999px;
    padding: 8px 14px;
    font: 500 0.875rem/1.2 'Inter', -apple-system, sans-serif;
    color: var(--soft-black);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.spot-chip:hover {
    background: var(--accent-coral);
    border-color: var(--accent-coral);
    color: #FFFFFF;
}

.spot-chip:focus-visible {
    outline: 2px solid var(--accent-sage);
    outline-offset: 2px;
}

.spot-block__input {
    position: relative;
    display: flex;
    align-items: center;
}

.spot-block__input input {
    width: 100%;
    padding: 14px 56px 14px 18px;
    border: 1px solid var(--light-gray);
    border-radius: 9999px;
    font: 400 0.9375rem/1.4 'Inter', -apple-system, sans-serif;
    color: var(--soft-black);
    background: #FFFFFF;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.spot-block__input input:focus {
    outline: none;
    border-color: var(--accent-sage);
    box-shadow: 0 0 0 3px rgba(129, 178, 154, 0.18);
}

.spot-block__submit {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    background: var(--accent-sage);
    border: none;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.spot-block__submit:hover {
    background: #6B9A84;
    transform: translateY(-50%) scale(1.05);
}

.spot-block__submit svg {
    width: 18px;
    height: 18px;
}

.spot-block__note {
    text-align: center;
    font-size: 0.8125rem;
    color: var(--warm-gray);
    margin: 0;
}

.home-browse-alt {
    text-align: center;
    font-size: 1.0625rem;
    color: var(--warm-gray);
    margin: 8px auto 0;
}

.home-browse-alt__link {
    color: var(--accent-coral);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease;
}

.home-browse-alt__link:hover {
    border-bottom-color: var(--accent-coral);
}

/* =====================================================
   SPOTLIGHT (pets near you)
   White background separates the spotlight from the cream hero above
   and the cream process section below.
   ===================================================== */
.spotlight {
    background: #FFFFFF;
    padding: 56px 0;
}

.spotlight__header {
    text-align: center;
    margin: 0 auto 32px;
    max-width: 720px;
}

.spotlight__header h2 {
    font-size: clamp(1.75rem, 4.5vw, 2.5rem);
    margin: 0 0 8px;
    color: var(--soft-black);
}

.spotlight__header p {
    color: var(--warm-gray);
    font-size: 1rem;
    margin: 0 0 20px;
}

.spotlight__header-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.spotlight__location-link {
    color: var(--accent-coral);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
}

.spotlight__location-link:hover { text-decoration: underline; }

.spotlight__view-all {
    color: var(--soft-black);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 600;
}

.spotlight__view-all:hover { color: var(--accent-coral); }

/* =====================================================
   PROCESS (Adoption made simple)
   ===================================================== */
.process {
    background: var(--warm-cream);
    padding: 72px 0;
}

.process__heading {
    text-align: center;
    font-size: clamp(1.75rem, 4.5vw, 2.5rem);
    margin: 0 0 8px;
    color: var(--soft-black);
}

.process__sub {
    text-align: center;
    color: var(--warm-gray);
    font-size: 1rem;
    margin: 0 0 40px;
}

.process__steps {
    list-style: none;
    padding: 0;
    margin: 0 auto 32px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    max-width: 1080px;
}

.process__step {
    text-align: center;
    padding: 0 12px;
}

.process__icon {
    width: 56px;
    height: 56px;
    border-radius: 9999px;
    background: rgba(224, 122, 95, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: var(--accent-coral);
}

.process__icon svg { width: 24px; height: 24px; }

.process__step-num {
    display: inline;
    color: var(--accent-coral);
    font-weight: 600;
    margin-right: 4px;
}

.process__step h3 {
    font-family: 'Inter', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    display: inline;
    color: var(--soft-black);
}

.process__step p {
    font-size: 0.875rem;
    color: var(--warm-gray);
    margin: 8px 0 0;
    line-height: 1.5;
}

.process__cta {
    text-align: center;
}

.btn-coral {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent-coral);
    color: #FFFFFF;
    padding: 14px 28px;
    border-radius: 9999px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9375rem;
    transition: background-color 0.15s ease, transform 0.15s ease;
    border: none;
    cursor: pointer;
}

.btn-coral:hover {
    background: #C96A52;
    transform: translateY(-1px);
}

/* Testimonials section removed — content lives on /about (Session 2). */

/* =====================================================
   GUIDES & RESOURCES
   ===================================================== */
.guides {
    background: #FCEFDC;
    padding: 72px 0;
}

.guides__heading {
    text-align: center;
    font-size: clamp(1.75rem, 4.5vw, 2.5rem);
    margin: 0 0 8px;
    color: var(--soft-black);
}

.guides__sub {
    text-align: center;
    color: var(--warm-gray);
    font-size: 1rem;
    margin: 0 0 40px;
}

.guides__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 1080px;
    margin: 0 auto 32px;
}

.guide-card {
    background: #FFFFFF;
    border-radius: var(--radius-md);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-soft);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}

.guide-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-medium);
}

.guide-card__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.guide-card__body {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.guide-card h3 {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 0.9375rem;
    line-height: 1.35;
    margin: 0;
    color: var(--soft-black);
    font-weight: 700;
}

.guide-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
}

.guide-card__tag {
    background: rgba(129, 178, 154, 0.18);
    color: #4F7A65;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: 9999px;
}

.guide-card__time {
    font-size: 0.75rem;
    color: var(--warm-gray);
}

.guides__view-all {
    display: block;
    width: max-content;
    margin: 0 auto;
    padding: 12px 28px;
    border: 1.5px solid var(--soft-black);
    border-radius: 9999px;
    background: transparent;
    color: var(--soft-black);
    font-weight: 500;
    font-size: 0.9375rem;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.guides__view-all:hover {
    background: var(--soft-black);
    color: #FFFFFF;
}

/* =====================================================
   CTA (coral band)
   Background circle pattern is layered with multiple radial gradients
   (concentric rings at 8% alpha) to create the soft scattered-bubble
   look from the mockup without an external image.
   ===================================================== */
.cta {
    position: relative;
    background-color: var(--accent-coral);
    background-image:
        radial-gradient(circle at 12% 18%, transparent 56px, rgba(255,255,255,0.07) 56px, rgba(255,255,255,0.07) 58px, transparent 59px),
        radial-gradient(circle at 12% 18%, transparent 96px, rgba(255,255,255,0.05) 96px, rgba(255,255,255,0.05) 98px, transparent 99px),
        radial-gradient(circle at 88% 78%, transparent 68px, rgba(255,255,255,0.07) 68px, rgba(255,255,255,0.07) 70px, transparent 71px),
        radial-gradient(circle at 88% 78%, transparent 112px, rgba(255,255,255,0.05) 112px, rgba(255,255,255,0.05) 114px, transparent 115px),
        radial-gradient(circle at 70% 12%, transparent 36px, rgba(255,255,255,0.08) 36px, rgba(255,255,255,0.08) 38px, transparent 39px),
        radial-gradient(circle at 22% 82%, transparent 28px, rgba(255,255,255,0.08) 28px, rgba(255,255,255,0.08) 30px, transparent 31px);
    color: #FFFFFF;
    text-align: center;
    padding: 80px 24px;
    overflow: hidden;
}

.cta__inner {
    position: relative;
    max-width: 640px;
    margin: 0 auto;
}

/* The dog-house SVG ships fill="#fef3e2" (cream), so it renders cream on
   the coral background without any extra styling. No backplate. */
.cta__icon {
    display: block;
    width: 72px;
    height: auto;
    margin: 0 auto 24px;
}

.cta__heading {
    font-size: clamp(1.75rem, 4.5vw, 2.5rem);
    margin: 0 0 12px;
    color: #FFFFFF;
}

.cta p {
    max-width: 540px;
    margin: 0 auto 24px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 1rem;
    line-height: 1.55;
}

.btn-white {
    display: inline-block;
    background: #FFFFFF;
    color: var(--soft-black);
    padding: 14px 32px;
    border-radius: 9999px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9375rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 8px 18px rgba(0,0,0,0.10);
}

.btn-white:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.16);
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (min-width: 768px) {
    .home-hero__container {
        grid-template-columns: 1fr 1fr;
        gap: 48px;
        padding-top: 48px;
        padding-bottom: 0;
    }
    .home-hero__visual {
        /* Hug the right margin: drop the centering and the 480px cap so
           the image fills its grid column to the container's right edge
           (aligned with the Sign In button above). */
        margin: 0 0 0 auto;
        max-width: none;
    }
    .process__steps {
        grid-template-columns: repeat(4, 1fr);
    }
    .guides__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1024px) {
    .home-hero {
        padding-top: 112px;
    }
    .spot-block { padding: 28px 32px; }
}