/* V20 contact page. Location card foundations are shared from locations.css. */
.v20-contact {
  width: 100%;
  min-width: 0;
  overflow: clip;
  background: var(--lt-crema);
  color: var(--lt-tinta);
  font-family: var(--font-body);
}
.v20-contact :where(section, article, header, div, nav, address, dl) { min-width: 0; }
.v20-contact :where(h1, h2, h3, p, ol, dl) { margin-top: 0; }
.v20-contact-hero {
  padding-block: clamp(3rem, 7vw, 6rem);
  background: var(--lt-noche);
  color: var(--lt-crema);
}
.v20-contact-hero__inner { max-width: var(--wrap-wide); }
.v20-contact-hero h1 { max-width: 13ch; margin-bottom: var(--sp-5); color: var(--lt-crema); }
.v20-contact-hero__lead { max-width: 60ch; margin-bottom: var(--sp-6); color: var(--lt-crema-soft); font-size: var(--fs-body-lg); }
.v20-contact-hero .v20-button { border-color: var(--lt-tinta); color: var(--lt-tinta); }

.v20-contact-breadcrumbs { margin-bottom: var(--sp-6); color: var(--lt-crema-soft); font-size: var(--fs-caption); }
.v20-contact-breadcrumbs ol { display: flex; align-items: center; padding: 0; margin: 0; list-style: none; }
.v20-contact-breadcrumbs li { display: inline-flex; align-items: center; }
.v20-contact-breadcrumbs li + li::before { margin-inline: .6rem; color: var(--lt-marigold-bright); content: "·"; }
.v20-contact-breadcrumbs a,
.v20-contact-breadcrumbs [aria-current="page"] { display: inline-flex; align-items: center; min-height: 44px; color: inherit; }
.v20-contact-breadcrumbs a { color: var(--lt-crema); }

.v20-contact-locations,
.v20-contact-form,
.v20-contact-channels { padding-block: var(--section-y); }
.v20-contact-locations { background: var(--lt-crema-deep); }
.v20-contact-section-head { max-width: var(--wrap-text); margin-bottom: var(--sp-7); }
.v20-contact-section-head h2 { margin-bottom: var(--sp-4); font-size: var(--fs-title); }
.v20-contact-section-head > p:last-child { margin-bottom: 0; color: var(--lt-ink-soft); font-size: var(--fs-body-lg); }
.v20-contact-locations__grid { display: grid; gap: var(--sp-6); }

.v20-contact .v20-contact-location-card { grid-template-rows: 1fr; padding: 7px; }
.v20-contact .v20-contact-location-card .v20-location-card__body { padding: var(--sp-5); }
.v20-contact .v20-contact-location-card .v20-location-card__heading { min-height: 0; }
.v20-contact .v20-contact-location-card .v20-location-card__heading > div { min-width: 0; }
.v20-contact .v20-contact-location-card h2 { margin-top: var(--sp-3); overflow-wrap: anywhere; }
.v20-contact-location-card__index {
  display: inline-grid;
  min-width: 48px;
  min-height: 44px;
  padding: .35rem .7rem;
  place-items: center;
  border: var(--bw-frame);
  border-radius: var(--r-stamp);
  background: var(--lt-marigold-bright);
  color: var(--lt-tinta);
  font-weight: 700;
}
.v20-contact .v20-contact-location-card address { min-height: 0; margin-block: var(--sp-5); }
.v20-contact .v20-contact-location-card address strong { color: var(--lt-tinta); }
.v20-contact .v20-contact-location-card .v20-location-card__actions { margin-bottom: 0; }
.v20-contact-hours { margin: 0 0 var(--sp-5); }
.v20-contact .v20-contact-location-card .v20-location-card__body { display: flex; flex-direction: column; }
.v20-contact .v20-contact-hours { flex: 1 1 auto; }
.v20-contact .v20-contact-location-card .v20-location-card__actions { margin-top: auto; }
.v20-contact .v20-contact-location-card .v20-button--primary.wc-phone {
  background: var(--lt-rosa) !important;
  color: var(--lt-tinta) !important;
}
.v20-contact .v20-contact-hours > div {
  display: grid;
  grid-template-columns: minmax(7rem, .9fr) minmax(0, 1.1fr);
  gap: var(--sp-3);
  padding-block: var(--sp-2);
  border-bottom: var(--bw-hair);
}
body.v20-chrome .v20-contact .v20-contact-hours dt,
body.v20-chrome .v20-contact .v20-contact-hours dd { margin: 0; font-size: var(--fs-caption); font-variant-numeric: tabular-nums; }
body.v20-chrome .v20-contact .v20-contact-hours dt { color: var(--lt-ink-soft); font-weight: 600; }
body.v20-chrome .v20-contact .v20-contact-hours dd { color: var(--lt-tinta); }

.v20-contact-form { scroll-margin-top: var(--v20-header-h); background: var(--lt-noche); color: var(--lt-crema); }
.v20-contact-form__layout { display: grid; gap: var(--sp-7); }
.v20-contact-form h2 { max-width: 15ch; margin-bottom: var(--sp-5); color: var(--lt-crema); font-size: var(--fs-title); }
.v20-contact-form__intro > p { max-width: 52ch; color: var(--lt-crema-soft); font-size: var(--fs-body-lg); }
.v20-contact-form .v20-contact-text-link { color: var(--lt-rosa-bright); }
.v20-contact-form__embed {
  min-height: 38rem;
  overflow: hidden;
  border: 2px solid var(--lt-crema);
  border-radius: var(--r-card);
  background: var(--lt-blanco);
  box-shadow: var(--shadow-raised);
}
.v20-contact-form__embed > div,
.v20-contact-form__embed iframe { width: 100% !important; min-height: 38rem !important; border: 0; }
.v20-contact-form__embed [data-tf-live] { height: 100%; }
.v20-contact-channels { background: var(--lt-marigold); }
.v20-contact-channels > .v20-wrap > h2 { max-width: 18ch; margin-bottom: var(--sp-7); color: var(--lt-tinta); font-size: var(--fs-title); }
.v20-contact-channels__grid { display: grid; gap: var(--sp-4); }
.v20-contact-channels article {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: var(--sp-5);
  border: var(--bw-frame);
  border-radius: var(--r-card);
  background: var(--lt-blanco);
  box-shadow: var(--shadow-card);
}
.v20-contact-channels h3 { margin-bottom: var(--sp-3); color: var(--lt-tinta); font-family: var(--font-body) !important; font-size: var(--fs-body-lg) !important; font-weight: 700 !important; text-transform: none !important; }
.v20-contact-channels article > p { color: var(--lt-ink-soft); }
.v20-contact-channels .v20-button { width: 100%; margin-top: auto; }
.v20-contact-text-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--lt-rosa-deep); font-weight: 700; overflow-wrap: anywhere; }
.v20-contact-channels article .v20-contact-text-link + .v20-contact-text-link { margin-top: var(--sp-1); }

@media (min-width: 768px) {
  .v20-contact-locations__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .v20-contact-channels__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .v20-contact-form__layout { grid-template-columns: minmax(0, .75fr) minmax(32rem, 1.25fr); align-items: start; }
  .v20-contact-form__intro { position: sticky; top: calc(var(--v20-header-h) + var(--sp-6)); }
}

@media (max-width: 389px) {
  .v20-contact .v20-contact-location-card .v20-location-card__body,
  .v20-contact-channels article { padding: var(--sp-4); }
}

/* R25: on mobile, show the general form before the two address cards so it lands
   on the first/second screen; desktop order is unchanged. */
@media (max-width: 767px) {
  body.v20-chrome .v20-contact { display: flex; flex-direction: column; }
  body.v20-chrome .v20-contact-hero { order: 1; }
  body.v20-chrome .v20-contact-form { order: 2; }
  body.v20-chrome .v20-contact-locations { order: 3; }
  body.v20-chrome .v20-contact-channels { order: 4; }
}

/* R25: contact hero routing links (event/catering + book a table). */
body.v20-chrome .v20-contact-hero__routes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin: var(--sp-4) 0 0;
}
