/* ==============================================================================
   PLACE BLOCK
   ============================================================================== */

/* One column on a phone, text then map; two equal columns from 48em, the
   width at which 36rem of reading text and a map still both fit. The gap
   is the same one the page keeps between blocks, so the pair reads as one
   block with two halves rather than two blocks. */
.block-place {
  display: grid;
  gap: var(--spacing-lg);
  align-items: start;
}

@media (min-width: 48em) {
  .block-place {
    grid-template-columns: 1fr 1fr;
  }
}

/* Both halves may shrink below their content's natural width: a grid
   item's default min-width of auto would let the map's box widen the
   column past a 320 px screen (seen in the sweep: 357 px of scroll). */
.place__text,
.place__map {
  min-width: 0;
}

/* The text half is the same paper card every text block is. */
.place__text {
  background: var(--paper-bg);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-sm);
}

.place__map {
  display: grid;
  gap: var(--spacing-md);
}

/* The map has a fixed height whether Leaflet has drawn it or only the
   no-JS link is inside, so the page never jumps when the tiles arrive:
   about 4:3 of the column on a phone, capped so a wide column does not
   turn into a wall of map. A height rather than aspect-ratio because an
   aspect-ratio box with a minimum height asks the grid for a minimum
   width too, and that is what overflowed at 320 px. The paper colour
   shows through until the first tiles load. */
.place__canvas {
  width: 100%;
  height: clamp(16rem, 70vw, 26rem);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper-secondary-bg);
  box-shadow: var(--shadow-sm);
}

/* Leaflet's own stylesheet sets its fonts and sizes; only the pieces that
   sit on this site's paper are restated here. .leaflet-container isolates
   the map's stacking so the header's dropdown and the lightbox never
   fight its panes. */
.place__canvas.leaflet-container {
  font-family: var(--font-text);
  isolation: isolate;
}

/* Centred in the box with no map, which is the only time it is visible. */
.place__fallback {
  display: grid;
  place-items: center;
  height: 100%;
  margin: 0;
  padding: var(--spacing-lg);
  text-align: center;
}

.place__fallback a {
  color: var(--accent-blue);
}

.place__address {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* The pin sits on the first line of the address, at the text's size. */
.place__pin {
  flex: 0 0 auto;
  width: 1.5em;
  height: 1.5em;
  color: var(--accent-blue);
}

/* "Cómo llegar": the label and three buttons that wrap on a narrow
   screen instead of overflowing the column. */
.place__directions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
}

.place__directions-label {
  color: var(--text-muted);
  margin-right: var(--spacing-xs);
}

/* The three links are the quiet kind of button, the same paper the
   slideshow's controls use: they lead off the site, so they must not
   shout like the one primary action of a page. */
.place__directions .btn {
  background: var(--paper-secondary-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-light);
}

.place__directions .btn:hover {
  background: var(--button-bg-hover);
}