/* =========================================================
   INTERACTIVE WEB MAPS  (nick: append to style.css)

   Companion to the PHOTOJOURNALISM SECTIONS. For qgis2web /
   Leaflet maps served from /maps/<slug>/ on this site and
   embedded with an iframe. Same three widths as the photo
   classes, same breakout geometry, same caption look, so a
   map and a photo in one article line up.

   A map differs from a photo in one way: an iframe has no
   natural height, so each size sets an aspect-ratio and the
   iframe fills the box. Height follows width.

   HOW TO USE (per map, in the editor):
     1. Add a core "Custom HTML" block (not a PostX block).
     2. Paste:

        <div class="pp-map">
          <iframe src="https://pinalpost.com/maps/SLUG/"
                  title="What the map shows"
                  loading="lazy" allowfullscreen></iframe>
        </div>
        <p class="pp-map-caption">Interactive map of ...
          (Map: Pinal Post) &middot;
          <a href="https://pinalpost.com/maps/SLUG/"
             target="_blank" rel="noopener">Open full-screen</a></p>

     3. Change SLUG in BOTH places; write the title and caption.
     4. Optionally swap the class on the div for a bigger size.

   THE THREE SIZES (class on the div):
     pp-map        -> article width (default)                 3:2
     pp-map-wide   -> wider than text, like pp-photo-wide     16:10
     pp-map-full   -> full-bleed, like pp-photo               21:9 band

   All three switch to a portrait 4:5 box on phones; wide and
   full go edge to edge there. No toolbar alignment step --
   the class alone does it. Scroll-wheel zoom inside the
   article is handled in the map's own index.html, not here.
   ========================================================= */


/* ---------------------------------------------------------
   1. SHARED BOX  (all three sizes)
   The wrapper is the sized box; the iframe only fills it.
   --------------------------------------------------------- */

.pp-map,
.pp-map-wide,
.pp-map-full {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-height: 85vh;                 /* never taller than one screen */
  min-height: 360px;                /* fallback if aspect-ratio is unsupported */
  margin-top: clamp(1.5rem, 3vw, 3rem);
  margin-bottom: 0;                 /* the caption supplies the space below */
  overflow: hidden;
  background: #e9e5dc;              /* shows while the map loads */
}

.pp-map iframe,
.pp-map-wide iframe,
.pp-map-full iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}


/* ---------------------------------------------------------
   2. ARTICLE WIDTH  (class: pp-map) -- the default
   Sits inside the text column. 3:2 gives roughly the 520px
   the first map ran at in the 68% column.
   --------------------------------------------------------- */

.pp-map {
  aspect-ratio: 3 / 2;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}


/* ---------------------------------------------------------
   3. WIDE MAP  (class: pp-map-wide)
   Same geometry as pp-photo-wide: ~120px past the text
   column on each side, never to the screen edge. Uses a
   `left` offset instead of negative margins so the theme's
   constrained-layout `margin: auto !important` cannot undo
   it. z-index keeps the map above the sidebar: the Leaflet
   layer list sits on the map's right edge, exactly where the
   sidebar would otherwise paint over it and block clicks.
   --------------------------------------------------------- */

.pp-map-wide {
  aspect-ratio: 16 / 10;
  width: calc(100% + 240px) !important;
  max-width: 100vw !important;
  left: -120px !important;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
  z-index: 2;
}

/* On narrow screens, don't push past the edge -- go full
   (same 900px breakpoint as pp-photo-wide). */
@media (max-width: 900px) {
  .pp-map-wide {
    width: 100vw !important;
    max-width: 100vw !important;
    left: calc(50% - 50vw) !important;
    border-radius: 0;
  }
}


/* ---------------------------------------------------------
   4. FULL-BLEED MAP  (class: pp-map-full)
   Same offset as pp-photo: the 68% column sits at the left
   edge of the centered 1140px row, so above 1139px the shift
   to viewport-left is 570px - 50vw. A 21:9 band rather than
   16:10 -- at full screen width a 16:10 map would be taller
   than the screen and the 85vh cap would kick in anyway.
   --------------------------------------------------------- */

.pp-map-full {
  aspect-ratio: 21 / 9;
  width: 100vw !important;
  max-width: 100vw !important;
  left: calc(570px - 50vw) !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: none !important;
  border-radius: 0;
  z-index: 2;
}

/* Below 1140 the column is effectively centered, so the
   standard breakout is correct (same as pp-photo). */
@media (max-width: 1139px) {
  .pp-map-full {
    left: calc(50% - 50vw) !important;
  }
}


/* ---------------------------------------------------------
   5. PHONES  (max 650px, matches the header/duo breakpoint)
   Portrait box: more map per screen, and the Leaflet layer
   list is collapsed to its toggle at this width anyway.
   The default pp-map stays in the column (the gutter is
   only ~16px); wide and full are already edge to edge.
   --------------------------------------------------------- */

@media (max-width: 650px) {
  .pp-map,
  .pp-map-wide,
  .pp-map-full {
    aspect-ratio: 4 / 5;
    max-height: 70vh;
    min-height: 320px;
    border-radius: 0;
  }
}


/* ---------------------------------------------------------
   6. CAPTION  (class: pp-map-caption on the <p> under the map)
   Same look as the site's standard inline caption div:
   PostX body font, 13px, #333, italic, left-aligned. Italic
   comes from font-style, so no <i> wrapper is needed.
   margin-top is +8px, not the caption div's -10px: that
   negative margin compensates for an Image block's gap,
   and the map box has none.
   --------------------------------------------------------- */

.pp-map-caption {
  font-family: var(--postx_preset_Body_and_Others_typo_font_family, sans-serif);
  font-weight: var(--postx_preset_Body_and_Others_typo_font_weight, 400);
  font-style: italic;
  text-transform: var(--postx_preset_Body_and_Others_typo_text_transform, none);
  text-decoration: var(--postx_preset_Body_and_Others_typo_text_decoration, none);
  font-size: 13px;
  line-height: 1.4;
  color: #333;
  margin: 8px 0 0;
  padding-bottom: 20px;
  text-align: left;
}

.pp-map-caption a {
  white-space: nowrap;              /* "Open the map full-screen" never breaks mid-link */
}

/* Dark photojournalism template: light caption text, white
   links (same reason as the comment form), and drop the
   shadow/light placeholder on the map box. */
body.tag-photojournalism .pp-map-caption { color: #b9b2aa; }
body.tag-photojournalism .pp-map-caption a { color: #ffffff; }

body.tag-photojournalism .pp-map,
body.tag-photojournalism .pp-map-wide,
body.tag-photojournalism .pp-map-full {
  background: #2a1f16;
  box-shadow: none;
}


/* ---------------------------------------------------------
   7. LET THE BREAKOUT ESCAPE
   Same as the photo rule: PostX wrappers clip overflow, so
   any wrapper that contains a wide/full map must not. Scoped
   with :has() so it only fires on posts that use them. A
   parallel rule rather than an edit to the photo one, so the
   two sections stay independent. html/body already have
   overflow-x: clip from the photo section, which guards
   against a horizontal scrollbar from the 100vw box.
   --------------------------------------------------------- */

:is(.ultp-builder-container,
    .ultp-builder-wrap,
    .ultp-builder-content,
    .ultp-block-wrapper,
    .ultp-column-wrapper,
    .ultp-row-content,
    .ultp-row-wrapper,
    [class*="wp-block-ultimate-post-column"],
    [class*="wp-block-ultimate-post-row"],
    [class*="wp-block-ultimate-post-post-content"]):has(.pp-map-wide, .pp-map-full) {
  overflow: visible !important;
}