/* Homepage-only compact contact card; loaded after luxury-theme.css. */
.hero-contact-card { box-sizing: border-box; }

@media (min-width: 1200px) {
  .hero-contact-card {
    position: absolute !important;
    inset: 8px clamp(24px, 5vw, 72px) auto auto !important;
    box-sizing: border-box;
    width: min(600px, 44vw) !important;
    max-width: 600px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "kicker kicker" "address address" "hours last" "link link";
    align-items: start;
    gap: 5px 12px;
    padding: 10px 12px !important;
  }

  .hero-copy {
    width: min(760px, calc(100% - min(600px, 44vw) + 10vw - clamp(24px, 5vw, 72px) - 24px)) !important;
  }

  .hero-contact-kicker { grid-area: kicker; margin: 0 !important; font-size: 11px !important; line-height: 1.35 !important; }
  .hero-contact-row { grid-area: address; min-width: 0; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; }
  .hero-checkin { grid-area: hours; min-width: 0; margin: 0 !important; padding: 6px 0 0; gap: 7px; border-top: 1px solid rgb(255 255 255 / 22%); }
  .last-checkin-alert { grid-area: last; min-width: 0; margin: 0 !important; padding: 6px 8px !important; }
  .hero-contact-card > a[href] { grid-area: link; font-size: 14px !important; line-height: 1.45 !important; }
}

.hero-contact-card :is(.hero-contact-row p, .hero-contact-row small, .hero-contact-row strong,
  .hero-checkin small, .hero-checkin strong, .last-checkin-alert, .last-checkin-alert strong,
  .last-checkin-alert small, .last-checkin-times) {
  font-size: 14px !important;
  line-height: 1.45 !important;
}

.hero-contact-card .hero-contact-kicker { font-size: 11px !important; line-height: 1.35 !important; }
.hero-contact-card .last-checkin-alert .last-checkin-time { font-size: 14px !important; line-height: 1.45 !important; }
.hero-contact-card > a[href] { font-size: 14px !important; line-height: 1.45 !important; }
.hero-contact-card .hero-contact-row p { min-width: 0; }
.hero-contact-card .hero-contact-row strong { display: block; overflow-wrap: anywhere; }
.hero-contact-card .hero-checkin > span { flex: 0 0 auto; font-size: 16px !important; line-height: 1.45 !important; }
.hero-contact-card .hero-checkin div { min-width: 0; gap: 2px; }
.hero-contact-card .hero-checkin strong { display: flex; flex-wrap: wrap; column-gap: 6px; }
.hero-contact-card .hero-time-range,
.hero-contact-card .last-checkin-time { white-space: nowrap; }
.hero-contact-card .last-checkin-alert strong { display: block; }
.hero-contact-card .last-checkin-times { display: grid; gap: 1px; }
.hero-contact-card .last-checkin-alert small { display: block; }

@media (max-width: 1199px) {
  .hero { flex-wrap: wrap; }
  .hero-copy { width: min(100%, 760px) !important; }
  .hero-contact-card {
    position: relative !important;
    inset: auto !important;
    width: min(600px, 100%) !important;
    max-width: 100%;
    margin: 8px 0 0 auto;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "kicker kicker" "address address" "hours last" "link link";
    gap: 6px 12px;
    padding: 11px 12px !important;
  }
}

@media (max-width: 680px) {
  .hero-contact-card {
    width: 100% !important;
    margin: 8px 0 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "kicker" "address" "hours" "last" "link";
    gap: 9px;
    padding: 14px !important;
  }

  .hero-contact-card :is(.hero-contact-row p, .hero-contact-row strong, .hero-checkin strong,
    .last-checkin-alert, .last-checkin-alert strong, .last-checkin-times) {
    font-size: 16px !important;
    line-height: 1.45 !important;
  }

  .hero-contact-card > a[href] { font-size: 16px !important; line-height: 1.45 !important; }

  .hero-contact-card :is(.hero-contact-row small, .hero-checkin small, .last-checkin-alert small) {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  .hero-contact-card .hero-contact-kicker { font-size: 11px !important; line-height: 1.35 !important; }
  .hero-contact-card .last-checkin-alert .last-checkin-time { font-size: 16px !important; line-height: 1.45 !important; }
  .hero-contact-card .hero-checkin { margin: 0 !important; padding-top: 7px; }
  .hero-contact-card .last-checkin-alert { padding: 8px 10px !important; }
  .hero-contact-card .last-checkin-times { gap: 2px; }
}

/* The layout switch can request mobile at a wide viewport; keep its card in flow. */
html[data-view-mode="mobile"] .hero { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
html[data-view-mode="mobile"] .hero-copy { width: 100% !important; max-width: none; }
html[data-view-mode="mobile"] .hero-contact-card {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  max-width: 100%;
  margin: 8px 0 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "kicker" "address" "hours" "last" "link";
  gap: 9px;
  padding: 14px !important;
}
html[data-view-mode="mobile"] .hero-contact-card :is(.hero-contact-row p, .hero-contact-row strong,
  .hero-checkin strong, .last-checkin-alert, .last-checkin-alert strong, .last-checkin-times) {
  font-size: 16px !important;
  line-height: 1.45 !important;
}
html[data-view-mode="mobile"] .hero-contact-card > a[href] { font-size: 16px !important; line-height: 1.45 !important; }
html[data-view-mode="mobile"] .hero-contact-card :is(.hero-contact-row small, .hero-checkin small, .last-checkin-alert small) {
  font-size: 14px !important;
  line-height: 1.45 !important;
}
html[data-view-mode="mobile"] .hero-contact-card .hero-contact-kicker { font-size: 11px !important; line-height: 1.35 !important; }
html[data-view-mode="mobile"] .hero-contact-card .last-checkin-alert .last-checkin-time { font-size: 16px !important; line-height: 1.45 !important; }