/* ==========================================================================
   Centre map — styled Google Map beneath the centre details card.
   Loaded only on single centre pages. See functions/centre-map.php
   ========================================================================== */

/* The section container is a flex row at >=992px, so the card and the map
   are wrapped in a column that inherits the card's original width rules.
   The card then simply fills that column. Widths render identically to
   before at every breakpoint. */
.block-content-card .card-column {
  width: 100%;
  max-width: 475px;
}

@media (max-width: 1199.98px) {
  .block-content-card .card-column { max-width: 50%; }
}

@media (max-width: 991.98px) {
  .block-content-card .card-column { max-width: 100%; }
}

.block-content-card .card-column > .card-body { max-width: 100%; }

/* Feature image matched to the map's aspect ratio so the two boxes are the
   same height. Scoped to .card-column, so the card on other templates
   (template-parts/content_and_card.php) keeps its original 76.21% ratio. */
.block-content-card .card-column .card-image span {
  padding-top: 62.5%;   /* 16:10, same as .centre-map below */
}

/* --- map shell — mirrors the card's radius and background ---------------- */
.centre-map {
  position: relative;
  width: 100%;
  margin-top: 48px;
  border-radius: 25px;
  overflow: hidden;
  background-color: #edebe1;
  aspect-ratio: 16 / 10;
}

@media (max-width: 767.98px) {
  .centre-map {
    border-radius: 20px;
    /* Square on narrow screens: 16:10 leaves the map too shallow to read
       once it is only ~315px wide. */
    aspect-ratio: 1 / 1;
    /* Match the gap below the map (the section's own margin-bottom) so the
       map sits with equal air above and below on narrow screens. */
    margin-top: 80px;
  }
}

@media (max-width: 575.98px) {
  .centre-map { margin-top: 60px; }
}

/* --- centre card buttons side by side on mobile -------------------------
   style.css puts min-width:178px on these, which forces them to stack once
   the card is full width. Scoped to the centres template so the same card
   on other pages is untouched. */
@media (max-width: 767.98px) {
  body.single-centres .block-content-card .buttons {
    width: calc(100% + 10px);
    margin: -5px;
  }

  body.single-centres .block-content-card .buttons .button {
    margin: 5px;
    min-width: 0;          /* style.css forces 178px, which makes them stack */
    flex: 0 0 auto;        /* hug the label rather than split the row evenly */
    padding-left: 16px;
    padding-right: 16px;
    white-space: nowrap;
  }
}

/* Safari < 15 has no aspect-ratio */
@supports not (aspect-ratio: 16 / 10) {
  .centre-map::before { content: ""; display: block; padding-top: 62.5%; }
  .centre-map .centre-map__canvas { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

  @media (max-width: 767.98px) {
    .centre-map::before { padding-top: 100%; }
  }
}

.centre-map__canvas {
  width: 100%;
  height: 100%;
}

/* Keep Google's own UI in the site's typeface */
.centre-map .gm-style,
.centre-map .gm-style-cc { font-family: inherit; }

/* --- fallback state (no key / API error) -------------------------------- */
.centre-map--nokey .centre-map__canvas,
.centre-map--error .centre-map__canvas { display: none; }

.centre-map__fallback {
  display: none;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  font-size: 16px;
  line-height: 1.45;
  color: #374328;
}

.centre-map--nokey .centre-map__fallback,
.centre-map--error .centre-map__fallback { display: flex; }

.centre-map__fallback a { color: #8e8d34; text-decoration: underline; }

/* --- preview badge — only while the map is gated to logged-in staff ------ */
.centre-map__flag {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 12px;
  padding: 5px 11px;
  border-radius: 99px;
  background-color: #e5a391;
  color: #374328;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


/* --- responsive button labels -------------------------------------------
   "Register Today" + "Book a Tour" at 16px need ~306px; the mobile card row
   is 285px. The short label is swapped in below 768px. Base rule must load
   on every centre page, not only ones with a map, or both would show. */
.wfel-lbl-short { display: none; }

@media (max-width: 767.98px) {
  body.single-centres .block-content-card .buttons .wfel-lbl-full { display: none; }
  body.single-centres .block-content-card .buttons .wfel-lbl-short { display: inline; }
}


/* --- card image fills the card at tablet --------------------------------
   Between 768px and 992px .card-body becomes a flex row: image left, details
   right. The image was still locked to the 16:10 ratio via padding-top, so
   it stopped short of the taller text column and left a gap. Here it
   stretches to the row height instead and the photo covers. */
@media (min-width: 768px) and (max-width: 991.98px) {
  body.single-centres .block-content-card .card-column .card-image {
    position: relative;
  }

  body.single-centres .block-content-card .card-column .card-image span {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding-top: 0;
    background-size: cover;
    background-position: center;
  }
}