/* Page-specific components for Views/ContactUs/Index.cshtml. Shared chrome/tokens
   (eyebrow, section-h2, btn-pill, plain-list, etc.) live in site-theme.css.
   Below the hero: one two-column panel — a "Get in touch" list on the left (Book row + Call /
   WhatsApp / Email / Hours rows) and the map on the right (Google's embed shows its own place card). The booking
   form itself lives on /book (and Home); the Book row links there. */

.contact-inline-link{color:var(--color-brand-dark);font-weight:600}

.contact-panel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,3vw,32px);align-items:stretch}

/* ---- Left: Get in touch ---- */
.contact-list-card{background:var(--color-surface);border:1px solid rgba(var(--color-ink-rgb),0.09);border-radius:28px;padding:clamp(24px,3vw,34px);box-shadow:0 12px 32px rgba(46,43,37,0.08)}
.contact-list-card .section-h2{margin-bottom:22px}

.contact-book-row{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:20px;background:var(--color-brand);color:var(--color-cream);text-decoration:none;box-shadow:0 8px 20px rgba(46,56,37,0.18);transition:transform 0.15s ease,box-shadow 0.15s ease,background 0.15s ease}
.contact-book-row:hover{background:var(--color-brand-dark);transform:translateY(-2px);box-shadow:0 12px 26px rgba(46,56,37,0.24)}
.contact-book-icon{width:46px;height:46px;border-radius:999px;background:rgba(247,251,240,0.16);display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0}
.contact-book-title{font-family:Georgia,serif;font-size:19px;line-height:1.2;color:var(--color-cream)}
.contact-book-sub{font-size:14.5px;line-height:1.4;color:var(--color-on-dark)}
.contact-book-arrow{font-size:16px;flex-shrink:0;transition:transform 0.15s ease}
.contact-book-row:hover .contact-book-arrow{transform:translateX(3px)}

.contact-rows{margin-top:10px}
.contact-rows li+li{border-top:1px solid rgba(var(--color-ink-rgb),0.08)}
.contact-row{display:flex;align-items:center;gap:14px;padding:14px 8px;border-radius:14px;color:inherit;text-decoration:none}
a.contact-row:hover{background:var(--color-brand-pale)}
.contact-row-icon{width:40px;height:40px;border-radius:999px;background:var(--color-brand-pale);color:var(--color-brand-dark);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
a.contact-row:hover .contact-row-icon{background:var(--color-surface)}
.contact-row-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.contact-row-label{font-size:12px;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-text-quiet)}
.contact-row-value{font-size:16.5px;line-height:1.35;color:var(--color-ink);overflow-wrap:anywhere;font-style:normal}
.contact-row-chevron{font-size:13px;color:var(--color-text-quiet);flex-shrink:0}

/* ---- Right: map with address overlay ---- */
.contact-map-card{position:relative;min-height:460px;border-radius:28px;overflow:hidden;background:var(--color-brand-pale);box-shadow:0 12px 32px rgba(46,43,37,0.1)}
.contact-map-frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* Phones/tablets: stack (list first), map at 4:3. */
@media (max-width:860px){
  .contact-panel{grid-template-columns:minmax(0,1fr)}
  .contact-map-card{min-height:0}
  .contact-map-frame{position:static;height:auto;aspect-ratio:4/3}
}