/*Returns a CSS clamp function which resolves to $size-at-min-width when page width is
below $min-width,
$size-at-max-width when page width is above $max-width,
and linearly scales between the two between $min-width and $max-width*/
/*
 * clickstorm/go-maps-ext (sales-partner map + address list). Ported 1:1 from
 * Scss/Extensions/_go_maps_ext.scss. ".tx-go-maps-ext" comes from the vendor extension's own
 * Layouts/Default.html, ".js-gme-container" from its Templates/Map/Show.html.
 *
 * Dropped as dead code (confirmed no live consumer):
 * - ".gme-cats li { ... }" -- the entire "<ul class="gme-cats">" block in
 *   con_go_maps_ext/Partials/Map/Categories.html is wrapped in "<f:comment>", i.e. commented out
 *   in the Fluid template itself; it never renders.
 *
 * REGRESSION FOUND AND FIXED (2026-07-23, Phase 7 prep session): "del { display: none; }" was
 * ALSO dropped here as "dead code" during the original 2026-07-16 migration, based on a static
 * grep across this extension's Fluid templates (correctly finding no "<del>" tag written by any
 * of them). That grep missed a JS-created element: "conGoMapsExt.js"'s "setCountries()" wraps a
 * filtered-out "#gme-address{uid}" element in a runtime `document.createElement('del')` to hide
 * it when the country dropdown changes. Without this rule, the country filter on the distributor
 * map stopped visually hiding non-matching addresses (this was already the shipped/committed
 * behavior before this session touched anything -- a real, pre-existing bug, not something this
 * session's own edits caused). Restored below. Lesson: a static per-template grep is not enough
 * to confirm a selector is dead when the project's own JS can inject the matching element/tag at
 * runtime -- same class of miss as the "hidden `!important` override in an already-migrated file"
 * lesson recorded earlier for the product-modal work.
 */
@layer extensions {
  .tx-go-maps-ext del {
    display: none;
  }
  /* Map + consent placeholder share one height (Figma: 600px desktop; smaller below, the whole world
     doesn't fit a tall map on phones -> grey bands). */
  .tx-go-maps-ext {
    --gme-map-height: 20rem;
  }
  @media (min-width: 640px) {
    .tx-go-maps-ext {
      --gme-map-height: 30rem;
    }
  }
  @media (min-width: 992px) {
    .tx-go-maps-ext {
      --gme-map-height: 37.5rem;
    }
  }
  .tx-go-maps-ext .js-map {
    border-radius: var(--border-radius-default);
    margin-bottom: var(--gap-xl);
    /* "!important" needed: gomapsext.js sets the backend record's height as an inline style */
    height: var(--gme-map-height) !important;
  }
  /* Usercentrics' own ".uc-embedding-*" rules (injected sitewide) style the box; only the map-sized
     frame + background live here. "hidden" is toggled by con_go_maps_ext's conGoMapsExt.js. */
  /* Info bubble: Google sets "Roboto, Arial" on it, which has no 900 -> the global heading weight got
     faux-bolded and looked smeared. Site font has the real weights. */
  .tx-go-maps-ext .gm-style-iw {
    font-family: var(--font-family-default);
  }
  .tx-go-maps-ext .gm-style-iw h4 {
    font-size: 1.25rem;
    overflow-wrap: anywhere;
  }
  .tx-go-maps-ext .gme-consent {
    height: var(--gme-map-height);
    border-radius: var(--border-radius-default);
    margin-bottom: var(--gap-xl);
    background: url(../../Images/map-placeholder.svg) center/cover;
  }
  .tx-go-maps-ext .gme-consent[hidden] {
    display: none;
  }
  /* "!important" genuinely still needed here, same category as textpic.css's TYPO3-default-CSS
     rival (NOT Bootstrap, 2026-07-27 !important cleanup pass): the clickstorm/go-maps-ext
     extension itself registers a sitewide ".tx-go-maps-ext img { max-width: none; }" default,
     aggregated by TYPO3 core into the same unlayered "typo3temp/assets/css/<hash>.css" as the
     tx_frontend default styles -- presumably so the map's own tile <img>s aren't constrained by a
     generic responsive-image reset. That rule otherwise wins over this one regardless of
     specificity (unlayered always beats layered for normal-priority declarations), even though
     this selector is more specific -- found live originally via computed-style comparison
     (address-contact photos rendered unconstrained instead of capped to their column width).
     Re-confirmed live 2026-07-27: that stylesheet is still served today, and removing
     "!important" here reverts "max-width" straight back to "none". */
  .tx-go-maps-ext .google-maps-contact img {
    max-width: 100% !important;
  }
  /*
   * Address entry (Figma node 2184:16609): logo on its own row, then address / contact / description
   * columns (1:1:2, Figma 350/350/rest) and a hairline separator. "hr" stays a direct child of
   * "#gme-address{uid}" because "conGoMapsExt.js" toggles that whole element's visibility when the
   * country filter changes.
   */
  .tx-go-maps-ext .google-maps-box {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-l) var(--grid-gutter-default);
  }
  .tx-go-maps-ext .google-maps-box h2 {
    margin: 0;
    font-size: var(--font-size-default);
    line-height: 1.5;
  }
  .tx-go-maps-ext .google-maps-box h2 a {
    color: inherit;
    text-decoration: none;
  }
  .tx-go-maps-ext .google-maps-box p {
    margin: 0;
  }
  .tx-go-maps-ext .google-maps-box .google-maps-responsibility {
    margin: var(--gap-m) 0 0;
  }
  .tx-go-maps-ext .google-maps-box .google-maps-logo img {
    width: auto;
    height: 58px;
    object-fit: contain;
  }
  .tx-go-maps-ext .google-maps-box .google-maps-contact-data a {
    color: inherit;
  }
  .tx-go-maps-ext .google-maps-box .google-maps-contact-data a[href^=http] {
    color: var(--color-primary-orange);
    font-weight: var(--font-weight-bold);
  }
  .tx-go-maps-ext .google-maps-box hr {
    grid-column: 1/-1;
    margin: 0 0 var(--gap-l);
    border: 0;
    border-top: var(--border-default-width) solid var(--shade-grey-100);
  }
  .tx-go-maps-ext .google-maps-logo,
  .tx-go-maps-ext .google-maps-box hr {
    grid-column: 1/-1;
  }
  @media (min-width: 768px) {
    .tx-go-maps-ext .google-maps-box {
      grid-template-columns: 1fr 1fr 2fr;
    }
  }
  /* Figma: two fixed 350px columns, description takes the rest. */
  @media (min-width: 1200px) {
    .tx-go-maps-ext .google-maps-box {
      grid-template-columns: repeat(2, 21.875rem) 1fr;
    }
  }
  /* Country select above the map: small label over an orange outline select (Figma node 3207:14759). */
  .tx-go-maps-ext .countrySelector {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
    max-width: 43rem;
    margin-bottom: var(--gap-xl);
  }
  .tx-go-maps-ext .countrySelector label {
    display: block;
    padding-left: var(--padding-button-l-r);
    font-size: var(--font-size-s);
  }
  .tx-go-maps-ext .countrySelector select {
    box-sizing: border-box;
    height: 3rem;
    border-color: var(--color-primary-orange);
    color: var(--font-color-secondary);
    font-weight: var(--font-weight-bold);
  }
  /* Map markers (Figma node 2184:16609), injected by conGoMapsExt.js. Sizes: 30px pin, 44x39px hexagon (smaller than Figma's 52x47px, by request). */
  .gme-pin {
    display: block;
    width: 1.875rem;
    height: 1.875rem;
    fill: var(--color-primary-anthracite);
    stroke: var(--shade-white);
    stroke-width: 2;
    transition: fill var(--transition-default, 0.2s);
  }
  .gme-pin:hover {
    fill: var(--color-primary-orange);
  }
  .gme-cluster {
    position: relative;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.4375rem;
    color: var(--shade-white);
    font-family: var(--font-family-default);
    font-size: var(--font-size-default);
    font-weight: var(--font-weight-bold);
  }
  .gme-cluster > * {
    grid-area: 1/1;
  }
  .gme-cluster__hex {
    width: 100%;
    height: 100%;
    fill: var(--color-primary-anthracite);
    stroke: var(--shade-white);
    stroke-width: 2;
  }
  .tx-go-maps-ext .no-result-found {
    display: none;
    padding: 0 15px;
  }
}