/*
 * BA Golf Core: the venue map (block bagolf/map, also behind the [wpgmza]
 * stand-in). Loaded only where the map renders, and in the block editor.
 *
 * Three crops of the map (tools/static-map), which the <picture> picks by
 * screen width at the same breakpoints as below: a square one up to 600px, a
 * 1000×416 one up to 1126px and a 12:5 one above. The map box takes the
 * crop's shape; the image covers it, centred, and the pin sits on the venue
 * wherever the crop has it (the block sets --bagolf-map-<crop>-x and -y).
 * Selectors carry the block class twice where the theme styles the same
 * elements (p, a, img).
 */

.bagolf-map {
  --bagolf-map-ink: #132618;
  --bagolf-map-paper: #f7f6e5;
  --bagolf-map-muted: #dfe5da;

  box-sizing: border-box;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0;
  color: var(--bagolf-map-ink);
  font-size: 1rem;
  line-height: 1.5;
  text-align: left;
}

.bagolf-map *,
.bagolf-map *::before,
.bagolf-map *::after {
  box-sizing: border-box;
}

.bagolf-map.bagolf-map .bagolf-map__heading {
  margin: 0 0 1rem;
  color: var(--bagolf-map-ink);
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.15;
  text-wrap: balance;
}

.bagolf-map .bagolf-map__notes {
  flex-basis: 100%;
  margin: 0;
  color: var(--bagolf-map-ink);
  font-size: 1rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* The homepage column is full-bleed: sit in the theme's 72rem column the way
 * its activity cards do (72rem including the side gutters), so the map, its
 * caption and the cards share both edges. The map ends the page there, so
 * leave room before the footer. */
.home.page .site-main > .bagolf-map {
  width: 100%;
  margin: 2rem auto clamp(3rem, 7vw, 6rem);
  padding-inline: var(--spacing-container-padding-inline, 1.25rem);
}

/* A paragraph just before the map introduces it ("Hitta till oss …"): keep it
 * with the map. .site-main is a flex column, so margins would add up and leave
 * it halfway between the cards and the map. */
.home.page .site-main > p:has(+ .bagolf-map) {
  margin-bottom: 1rem;
}

.home.page .site-main > p + .bagolf-map,
.home.page .site-main > .wp-block-heading + .bagolf-map {
  margin-top: 0;
}

@media (max-width: 600px) {
  .home.page .site-main > .bagolf-map {
    padding-inline: 1rem;
  }
}

.bagolf-map__media {
  position: relative;
  /* Keeps the focus ring's z-index inside the map (under the sticky header). */
  isolation: isolate;
  /* No overflow clip: the image link clips itself, and the attribution link's
   * focus ring may reach past the frame. */
  border-radius: 1rem;
  /* The map's own cream, while the image loads and under the attribution. */
  background-color: #f3f1e3;
}

/* A hairline edge: the map's cream is close to the page's. */
.bagolf-map__media::after {
  position: absolute;
  inset: 0;
  border: 1px solid rgb(19 38 24 / 0.14);
  border-radius: inherit;
  content: '';
  pointer-events: none;
}

/* Desktop (from 1127px): the 12:5 crop. The box is 12:5 and at least 26rem
 * tall, and the image at least 62.4rem wide: in a narrower box (another page
 * layout) its sides are cropped rather than the map shrunk below 87% (its
 * names below 11px). The box's size comes from here alone, so nothing moves
 * when the image loads. The width must be definite: with width: auto,
 * browsers carry the min-height through the ratio into a minimum width. */
.bagolf-map .bagolf-map__place {
  --bagolf-map-image-width: max(100%, 62.4rem);
  --bagolf-map-pin-x: var(--bagolf-map-desktop-x, 0.5);
  --bagolf-map-pin-y: var(--bagolf-map-desktop-y, 0.5);

  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 12 / 5;
  min-height: 26rem;
  overflow: hidden;
  /* Square at the bottom, where the image meets the attribution line. */
  border-radius: 1rem 1rem 0 0;
  color: inherit;
  text-decoration: none;
}

.bagolf-map .bagolf-map__picture {
  display: contents;
}

/* Like object-fit: cover, but the image keeps its real layout size, so the
 * browser's srcset choice (sizes="auto") matches what is painted: as wide as
 * the box or the crop's minimum, whichever is larger, and always exactly as
 * tall as the box. The aspect ratios here back up the width and height of
 * the <img> and <source>s. object-fit keeps the old crop undistorted while
 * the other crop's file loads (a phone turned across 600px). */
.bagolf-map .bagolf-map__image {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--bagolf-map-image-width);
  max-width: none;
  height: auto;
  margin: 0;
  aspect-ratio: 12 / 5;
  object-fit: cover;
  transform: translate(-50%, -50%);
}

/* Tablets (601–1126px, the tablet <source>): the 1000×416 crop at 1:1, 26rem
 * tall. Boxes here are 561–998px wide and crop its sides; its names are all in
 * the central 560px. */
@media (max-width: 1126px) {
  .bagolf-map .bagolf-map__place {
    --bagolf-map-image-width: max(100%, 62.5rem);
    --bagolf-map-pin-x: var(--bagolf-map-tablet-x, 0.5);
    --bagolf-map-pin-y: var(--bagolf-map-tablet-y, 0.5);

    aspect-ratio: 125 / 52;
  }

  .bagolf-map .bagolf-map__image {
    aspect-ratio: 125 / 52;
  }
}

/* Phones (up to 600px, the phone <source>): the square crop, shown whole. */
@media (max-width: 600px) {
  .bagolf-map .bagolf-map__place {
    --bagolf-map-image-width: 100%;
    --bagolf-map-pin-x: var(--bagolf-map-phone-x, 0.5);
    --bagolf-map-pin-y: var(--bagolf-map-phone-y, 0.5);

    aspect-ratio: 1;
    min-height: 0;
  }

  .bagolf-map .bagolf-map__image {
    aspect-ratio: 1;
  }
}

/* The pin's tip (the bottom centre of its box) on the venue: the image is
 * centred in the box and as tall as it, so the venue is at pin-y of the box's
 * height, and pin-x of the image's width from the image's left edge. */
.bagolf-map__pin {
  position: absolute;
  top: calc(var(--bagolf-map-pin-y) * 100%);
  left: calc(50% + (var(--bagolf-map-pin-x) - 0.5) * var(--bagolf-map-image-width));
  width: 2rem;
  height: 2.625rem;
  overflow: visible;
  filter: drop-shadow(0 0.125rem 0.1875rem rgb(11 36 24 / 0.35));
  transform: translate(-50%, -100%);
  pointer-events: none;
}

/* The attribution (OpenFreeMap, OpenMapTiles, OpenStreetMap) has a line of
 * its own under the image, inside the map's frame. As an overlay it would cover
 * the bottom-right corner, where the map shows the E4 and Trafikplats Moraberg.
 * On a phone its three links may take two lines. */
.bagolf-map .bagolf-map__attribution {
  /* Positioned, so its links' focus rings paint over the image's edge. */
  display: flex;
  position: relative;
  flex-wrap: wrap;
  justify-content: flex-end;
  column-gap: 0.75rem;
  margin: 0;
  padding: 0.125rem 0.75rem;
  color: var(--bagolf-map-ink);
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: right;
}

/* At least 24px tall, right under the map link (WCAG 2.5.8). */
.bagolf-map .bagolf-map__attribution a {
  display: inline-block;
  min-height: 1.5rem;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 0.15em;
}

.bagolf-map .bagolf-map__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin: 1rem 0 0;
  padding: 0;
  /* Block styles centre figcaptions (the editor does too). */
  text-align: left;
}

.bagolf-map .bagolf-map__address {
  margin: 0;
  color: var(--bagolf-map-ink);
  font-size: 1rem;
  line-height: 1.5;
}

.bagolf-map .bagolf-map__name {
  display: block;
  font-weight: 600;
}

.bagolf-map .bagolf-map__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
}

.bagolf-map .bagolf-map__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.5rem 1.25rem;
  border: 2px solid var(--bagolf-map-ink);
  border-radius: 999px;
  background-color: transparent;
  color: var(--bagolf-map-ink);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
}

.bagolf-map .bagolf-map__link--primary {
  background-color: var(--bagolf-map-ink);
  color: var(--bagolf-map-paper);
}

@media (hover: hover) {
  .bagolf-map .bagolf-map__link:hover {
    background-color: var(--bagolf-map-muted);
    color: var(--bagolf-map-ink);
  }
}

.bagolf-map a:focus-visible {
  outline: 3px solid var(--bagolf-map-ink);
  outline-offset: 3px;
}

/* The map link fills a clipped box, and the image paints over the link's own
 * outline: draw its ring inside, on a layer above the image. The transparent
 * outline still shows in forced-colors mode. */
.bagolf-map .bagolf-map__place:focus-visible {
  outline: 3px solid transparent;
  outline-offset: -3px;
}

.bagolf-map .bagolf-map__place:focus-visible::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  border: 3px solid var(--bagolf-map-ink);
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px var(--bagolf-map-paper);
  content: '';
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .bagolf-map .bagolf-map__link {
    transition: background-color 0.2s ease, color 0.2s ease;
  }
}

@media (max-width: 600px) {
  .bagolf-map .bagolf-map__links {
    width: 100%;
  }

  .bagolf-map .bagolf-map__link {
    flex: 1 1 auto;
  }
}