/* =========================================================
   Content Generator – Maps Widget (final)
   - Wrapper nur so breit wie Inhalt, in Content-Spalte zentriert
   - Höhe per Variable (px/vh möglich), KEIN aspect-ratio
   - Rahmen als inset (innenliegend), keine Kollision mit Außenrahmen
   ========================================================= */

/* -------- Variablen -------- */
:root{
  --cg-content-max: var(--wp--style--global--content-size, 720px); /* Spaltenbreite / Fallback anpassen */
  --cg-map-height: clamp(500px, 62vh, 820px);                       /* Kartenhöhe global */
  --cg-map-radius: 12px;                                            /* Ecken */
  --cg-map-border-width: 1px;                                       /* Rahmendicke */
  --cg-map-border-color: rgba(0,0,0,.14);                           /* Rahmenfarbe */
  --cg-map-font: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* -------- Wrapper: shrink-to-fit & zentriert -------- */
.cg-maps-widget-wrapper{
  display: block;                         /* erlaubt margin:auto */
  width: fit-content;                     /* nur so breit wie Inhalt */
  max-width: min(100%, var(--cg-content-max));
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--cg-map-font);
  position: relative;
}

/* Theme-Aligns neutralisieren NUR für dieses Widget */
.alignwide .cg-maps-widget-wrapper,
.alignfull .cg-maps-widget-wrapper,
.wp-block[data-align="wide"] .cg-maps-widget-wrapper,
.wp-block[data-align="full"] .cg-maps-widget-wrapper,
.wp-site-blocks .cg-maps-widget-wrapper,
.wp-block .cg-maps-widget-wrapper{
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: min(100%, var(--cg-content-max)) !important;
}

/* Optional: minimaler vertikaler Abstand, verhindert Margin-Collapse-Kantenfälle */
.cg-maps-widget-wrapper{ margin-bottom: .001px; }

/* -------- Inneres Widget: Breite begrenzen, Ecken am Container -------- */
.cg-maps-widget{
  width: min(100%, var(--cg-content-max));
  max-width: 100%;
  box-sizing: border-box;
  border-radius: var(--cg-map-radius);
  overflow: hidden;      /* runde Ecken greifen für die Karte */
  background: transparent !important; /* keine fremden Hintergründe */
  border: 0 !important;  /* keinen äußeren Border setzen */
  /* optional: sanfter Schatten der Box (nicht der Karte)
     box-shadow: 0 2px 12px rgba(0,0,0,.08);
  */
}

/* -------- Canvas: echte Höhe, kein aspect-ratio, Rahmen innenliegend -------- */
.cg-maps-widget__canvas{
  width: 100%;
  height: var(--cg-map-height);                 /* zentrale Höhensteuerung */
  position: relative;
  background: transparent;
  border: 0;
  box-shadow: inset 0 0 0 var(--cg-map-border-width) var(--cg-map-border-color);  /* ← innenliegender Rahmen */
  border-radius: 0;        /* Ecken werden vom Container geclippt */
  overflow: hidden;        /* Map-Kacheln sauber an Ecken clippen */
}

/* Map-/Iframe-Kind füllt die Fläche vollständig */
.cg-maps-widget__canvas > .cg-maps,
.cg-maps-widget__canvas > .cg-map,
.cg-maps-widget__canvas > #map,
.cg-maps-widget__frame{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* -------- Lade-/Fehler-Overlays (optional, falls genutzt) -------- */
.cg-maps-widget__loading,
.cg-maps-widget__error{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1rem;
  pointer-events: none;
  font-size: .95rem;
}
.cg-maps-widget__error{ color: #b00020; background: rgba(176,0,32,.06); }

/* -------- Debug-/Meta-Zeile (optional) -------- */
.cg-maps-widget__meta{
  margin-top: .5rem;
  font-size: .85rem;
  color: #666;
  word-break: break-word;
}

/* -------- Mobile: etwas höhere Karte für Nutzbarkeit -------- */
@media (max-width: 480px){
  :root{ --cg-map-height: clamp(520px, 70vh, 900px); }
}

/* -------- Print: ohne Schatten/Rahmen außen, dünner Rand innen ok -------- */
@media print{
  .cg-maps-widget{ box-shadow: none; }
  .cg-maps-widget__canvas{
    box-shadow: inset 0 0 0 1px #000;
  }
}