/* ==========================================================================
   Pages styles (addon)
   Used ONLY for /pages/*
   Depends on styles.css
   ========================================================================== */

/* --- General page wrapper tweak --- */
.page--inner {
    background: radial-gradient(
            1200px 520px at 15% -5%,
            rgba(247, 233, 235, 0.75),
            rgba(255, 255, 255, 0) 60%
        ),
        var(--c-bg);
}

/* --- Hero adjustments for inner pages --- */
.page--inner .hero {
    padding-top: clamp(var(--sp-32), 4.5vw, var(--sp-56));
}

/* Contact uses the Home-like hero (flush under header) */
.page--contact .hero {
    padding-top: 0;
}

.page--inner .hero__wrap {
    box-shadow: var(--sh-2);
}

/* Contact hero should look like Home (no card shadow) */
.page--contact .hero__wrap {
    box-shadow: none;
}

.page--inner .hero__title {
    max-width: 18ch;
}

.page--inner .hero__lead {
    max-width: 56ch;
}

/* Slightly smaller hero image on inner pages */
.page--inner .hero__photo {
    max-width: 320px;
}

/* Contact hero image should be full-width on mobile (like Home). */
.page--contact .hero__photo {
    max-width: none;
}

/* --- Section rhythm (inner pages) --- */
.page--inner .section {
    padding: clamp(var(--sp-32), 4vw, var(--sp-48)) 0;
}

.page--inner .section__head {
    margin-bottom: var(--sp-20);
}

.page--inner .section__subtitle {
    max-width: 58ch;
}

/* --- Cards on inner pages feel tighter --- */
.page--inner .serviceCard {
    box-shadow: var(--sh-1);
}

.page--inner .serviceCard__title {
    font-size: var(--fs-16);
}

/* --- About page specifics --- */
.page--about .hero__badge {
    background: rgba(247, 233, 235, 0.9);
}

.page--about .hero__floatTitle {
    color: #9e5c68;
}

/* Timeline / process look (about) */
.page--about .serviceCard {
    position: relative;
}

.page--about .serviceCard::after {
    content: "";
    position: absolute;
    inset-inline-start: 18px;
    inset-block-end: -10px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-gold-400), var(--c-gold-500));
    opacity: 0.35;
}

/* --- Contact page specifics --- */
.page--contact .hero__badge {
    background: rgba(214, 177, 91, 0.12);
    color: #7a5c18;
}

/* Contact hero image placeholder
   To set an image later: add inline style on the hero section, e.g.
   style="--hero-bg-image: url('/images/your-image.webp')" */
.page--contact .hero--contact {
    --hero-bg-image: none;
}

.page--contact .hero--contact .hero__photo {
    width: min(360px, 100%);
    aspect-ratio: 4 / 5;
    border-radius: var(--r-xl);
    border: 1px solid var(--c-line-2);
    background-color: var(--c-surface);
    background-image: var(--hero-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.page--contact .serviceCard__icon {
    background: rgba(214, 177, 91, 0.14);
    border-color: rgba(214, 177, 91, 0.3);
}

/* Contact cards hover emphasis */
.page--contact .serviceCard:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh-2);
}

/* --- Simple form helpers (visual only) --- */
.form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-14);
}

.form__field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
}

.form__input,
.form__textarea {
    height: 44px;
    padding: 0 14px;
    border-radius: var(--r-md);
    border: 1px solid rgba(32, 32, 40, 0.14);
    background: rgba(255, 255, 255, 0.88);
    font-size: var(--fs-14);
}

.form__textarea {
    height: auto;
    min-height: 110px;
    padding: 12px 14px;
    resize: vertical;
}

.form__input:focus,
.form__textarea:focus {
    outline: none;
    border-color: rgba(214, 177, 91, 0.45);
    box-shadow: var(--focus);
}

/* --- Map placeholder --- */
.map {
    height: 260px;
    border-radius: var(--r-lg);
    border: 1px solid rgba(32, 32, 40, 0.1);
    background: linear-gradient(
        180deg,
        rgba(247, 233, 235, 0.7),
        rgba(255, 255, 255, 0.92)
    );
    box-shadow: var(--sh-1);
}

/* --- Footer spacing tweak on inner pages --- */
.page--inner .footer {
    margin-top: var(--sp-48);
}

/* ==========================================================================
   Responsive refinements (inner pages)
   ========================================================================== */

@media (max-width: 980px) {
    .page--inner .hero__photo {
        max-width: 260px;
    }

    .page--inner .hero__title {
        max-width: none;
    }
}

@media (max-width: 560px) {
    .page--inner .hero__photo {
        max-width: 220px;
    }

    .page--contact .hero__photo {
        max-width: none;
    }

    .page--inner .serviceCard {
        padding: var(--sp-16);
    }
}