/* ==========================================================================
   Great Garden Buffet: location and contact page
   --------------------------------------------------------------------------
   The address, phone and hours column, and the map beside it.
   Only contact.html loads this.

   The hours list and phone numbers are styled in base.css, since the footer
   uses them too. The open/closed line is filled in by js/site.js.

   Needs base.css and chrome.css loaded first.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Layout: one column on phones, info beside the map on wide screens
   -------------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr 1.15fr;
    gap: 3.5rem;
    align-items: start;
  }
}


/* --------------------------------------------------------------------------
   Address, phone and hours
   -------------------------------------------------------------------------- */

/* a hairline between each block, but not after the last one */
.contact-info section {
  margin-bottom: 1.75rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--rule);
}

.contact-info section:last-child {
  margin-bottom: 0;
  border-bottom: 0;
}

.contact-info h2 {
  font-size: 1.5rem;
  color: var(--red-deep);
}

.contact-info address {
  margin-bottom: 0.4rem;
  font-size: 1.25rem;
}


/* --------------------------------------------------------------------------
   Map
   --------------------------------------------------------------------------
   Display only. pointer-events is off on the iframe so a stray pinch or a
   scroll can't zoom the map and leave someone stuck inside it, which was easy
   to do by accident on a phone. The link on top of it opens the real map in
   Google Maps instead.

   To make the map interactive again: delete the pointer-events line below and
   remove the .map-open link from contact.html.
   -------------------------------------------------------------------------- */

.map {
  position: relative;
  overflow: hidden;
  border: 3px solid var(--charcoal);
  border-radius: 6px;
  background: var(--rule);
  aspect-ratio: 4 / 3.4;
}

/* Taller and stuck in place while the info column scrolls, on wide screens. */
@media (min-width: 900px) {
  .map {
    position: sticky;
    top: 1.5rem;
    aspect-ratio: 4 / 4.4;
  }
}

.map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;     /* the map is a picture, not a control */
}

/* Covers the whole map so a tap anywhere opens it properly. */
.map-open {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0.75rem;
  text-decoration: none;
}

/* the little pill in the corner */
.map-open span {
  padding: 0.4em 0.8em;
  border-radius: 4px;
  background: var(--charcoal);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.map-open:hover span {
  background: var(--red);
}