/* ==========================================================================
   Premium Contact Us redesign
   Purely visual overlay + light markup wrapping around the existing
   reasons list / contact form (name/email/phone/comment fields, action,
   route -- App\Http\Controllers\ContactController::store -- all untouched):
   a card-style reasons grid, pill-style quick-contact links, a two-column
   "form + Visit Us" layout, and an embedded Google Map built from the
   admin-editable Contact Page `physical_address` field (see
   App\Models\ContactPage::mapEmbedUrl() -- no API key needed). Uses the
   same jewel-tone palette as about-us-premium-redesign.css / collection-
   premium-redesign.css so this page matches the rest of the site.
   Loaded after pages__contact.css / header-layout.css / footer-redesign.css
   / section-contact-form.css so it can refine them.
   ========================================================================== */

:root {
    --jewel-ivory: #faf6ef;
    --jewel-cream: #f4ece0;
    --jewel-card: #fffdfa;
    --jewel-line: #e8dcc8;
    --jewel-charcoal: #2b241d;
    --jewel-charcoal-soft: rgba(43, 36, 29, 0.68);
    --jewel-gold: #b8860b;
    --jewel-gold-dark: #8a6508;
    --jewel-maroon: #6d1730;
    --jewel-shadow: 43, 36, 29;
    --jewel-radius-card: 14px;
    --jewel-ease: cubic-bezier(0.22, 1, 0.36, 1);
}


/* -------------------------------------------------------------------- */
/* Section backgrounds                                                    */
/* -------------------------------------------------------------------- */

#site-section-template--24510752915620__main {
    background: linear-gradient(180deg, var(--jewel-ivory) 0%, #fff 420px);
}


/* -------------------------------------------------------------------- */
/* Hero title ("We'd Love to Hear From You")                             */
/* -------------------------------------------------------------------- */

.main-page-title.page-title {
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
}

.main-page-title.page-title::after {
    content: "";
    display: block;
    width: 72px;
    height: 2px;
    margin: 1.6rem auto 0;
    background: linear-gradient(90deg, transparent, var(--jewel-gold), transparent);
}


/* -------------------------------------------------------------------- */
/* Intro / closing prose                                                  */
/* -------------------------------------------------------------------- */

.contact-us-intro {
    max-width: 68rem;
    margin: 0 auto;
    text-align: center;
}

.contact-us-intro p {
    line-height: 1.85;
}


/* -------------------------------------------------------------------- */
/* "Reasons to reach out" card grid (replaces the old plain <ul>)         */
/* -------------------------------------------------------------------- */

.contact-reasons-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.6rem;
    margin: 2.8rem auto;
    max-width: 84rem;
    text-align: left;
}

@media screen and (min-width: 750px) {
    .contact-reasons-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 990px) {
    .contact-reasons-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.contact-reason-card {
    background: var(--jewel-card);
    border: 1px solid var(--jewel-line);
    border-radius: var(--jewel-radius-card);
    padding: 2rem 1.8rem;
    box-shadow: 0 10px 30px -22px rgba(var(--jewel-shadow), 0.3);
    transition: transform 220ms var(--jewel-ease), box-shadow 220ms var(--jewel-ease);
}

.contact-reason-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px -20px rgba(var(--jewel-shadow), 0.4);
}

.contact-reason-card__label {
    display: block;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--jewel-maroon);
    margin-bottom: 0.6rem;
}

.contact-reason-card p {
    font-size: 1.35rem;
    line-height: 1.7;
    color: var(--jewel-charcoal-soft);
    margin: 0;
}


/* -------------------------------------------------------------------- */
/* Quick-contact pills (Email / WhatsApp)                                 */
/* -------------------------------------------------------------------- */

.contact-quick-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.2rem;
    margin-top: 2.8rem;
}

.contact-quick-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 1rem 2rem;
    border: 1px solid var(--jewel-gold);
    border-radius: 999px;
    color: var(--jewel-maroon);
    font-size: 1.3rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background 180ms var(--jewel-ease), color 180ms var(--jewel-ease), box-shadow 180ms var(--jewel-ease);
}

.contact-quick-links a:hover {
    background: var(--jewel-gold);
    color: #fff;
    box-shadow: 0 8px 20px -12px rgba(var(--jewel-shadow), 0.5);
}


/* -------------------------------------------------------------------- */
/* Form + "Visit Us" two-column layout                                    */
/* -------------------------------------------------------------------- */

.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3.2rem;
    align-items: start;
}

@media screen and (min-width: 990px) {
    .contact-grid {
        grid-template-columns: 1.15fr 0.85fr;
    }
}

.contact-grid__form-panel,
.contact-visit-panel {
    background: var(--jewel-card);
    border: 1px solid var(--jewel-line);
    border-radius: var(--jewel-radius-card);
    padding: 2.8rem;
    box-shadow: 0 10px 30px -22px rgba(var(--jewel-shadow), 0.3);
}

.contact-grid__form-heading,
.contact-visit-panel__heading {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.9rem;
    font-weight: 600;
    margin: 0 0 2rem;
    color: var(--jewel-charcoal);
}

.contact-visit-panel__address {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    font-size: 1.4rem;
    line-height: 1.7;
    color: var(--jewel-charcoal-soft);
    margin: 0 0 2rem;
}

.contact-visit-panel__pin {
    flex: 0 0 auto;
    font-size: 1.6rem;
    margin-top: 0.1rem;
}

.contact-visit-panel__address strong {
    color: var(--jewel-charcoal);
}

.contact-map {
    position: relative;
    width: 100%;
    padding-bottom: 75%; /* ~4:3 -- keeps the map a sensible height at any panel width */
    border-radius: var(--jewel-radius-card);
    overflow: hidden;
    border: 1px solid var(--jewel-line);
}

.contact-map iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* "Open in Google Maps" link shown under the embedded map when the admin
   has set a shareable Map URL in Settings → Contact. */
.contact-visit-panel__map-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: 1rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--jewel-charcoal);
    text-decoration: none;
    border-bottom: 1px solid var(--jewel-gold, #c9a227);
    padding-bottom: .15rem;
    transition: color .2s ease, border-color .2s ease;
}

.contact-visit-panel__map-link:hover,
.contact-visit-panel__map-link:focus-visible {
    color: var(--jewel-gold, #c9a227);
}

@media screen and (max-width: 749px) {
    .contact-grid__form-panel,
    .contact-visit-panel {
        padding: 2.2rem 1.8rem;
    }

    .contact-map {
        padding-bottom: 100%; /* squarer on narrow screens so it never gets too tall */
    }
}