/* =========================================================
   PHOTOJOURNALISM
   Pinal Post child theme - css/photojournalism.css

   Everything built for the photojournalism pieces: the
   pp-photo section types (full-bleed, wide, duo, optional
   crop) with their captions, plus the overrides that make the
   dark photojournalism PostX template readable (comment form,
   headings, featured video).

   Loaded from functions.php on single posts that either carry
   the "photojournalism" tag or use a pp-photo class in their
   content, versioned by filemtime(). Split out of style.css
   2026-10-03; rules unchanged.

   The html/body overflow-x guard that goes with the 100vw
   breakouts stays in style.css (global).

   SECTIONS
     1. pp-photo       full-bleed photo
     2. pp-photo-wide  wider than text
     3. pp-photo-duo   two side by side
     4. captions (all three)
     5. pp-crop        optional cinematic crop
     6. comment form on the dark template
     7. article headings on the dark template
     8. featured video whitespace fix
   ========================================================= */


/* =========================================================
   PHOTOJOURNALISM SECTIONS

   Built for Twenty Twenty-Four child + core Gutenberg Image
   block. Uses TT4 native alignments, so most of the work is
   done by the editor's own "Full width" / "Wide width"
   buttons -- this CSS just makes photos prominent and styles
   captions for a Reuters-style look.

   DEFAULT = whole photo, natural height, NO crop.

   HOW TO USE (per image, in the editor):
     1. Add a core "Image" block (not a PostX image block).
     2. Add the class in the right sidebar:
          Block > Advanced > Additional CSS class(es)
        and/or use the alignment toolbar as noted below.

   THE THREE SECTION TYPES:
     pp-photo            -> full-bleed, edge to edge
     pp-photo-wide       -> wider than text, not full-bleed
     pp-photo-duo        -> two images side by side (see notes)

   OPTIONAL on pp-photo / pp-photo-wide:
     pp-crop             -> crop to a fixed cinematic height
     pp-focus-top / -bottom / -left / -right  (only with pp-crop)
   ========================================================= */


/* ---------------------------------------------------------
   1. FULL-BLEED PHOTO  (class: pp-photo)

   True edge-to-edge across the whole screen. Add class
   "pp-photo" -- no toolbar step.

   ONE clean offset method. The earlier versions failed
   because they stacked TWO shifts (a transform AND a left/
   margin), which double-moved the image off-screen. This
   uses a single calc() offset and nothing else.

   width:100vw makes the image as wide as the screen.
   margin-left:calc(50% - 50vw) pulls its left edge from the
   parent's center back to the screen's left edge. With no
   transform and no `left` competing, it lands clean.
   --------------------------------------------------------- */

/* Full-bleed inside PostX's 68% flex article column.
   The column lives inside a 1140px max-width CENTERED row, so above the
   mobile breakpoint the column's left inset = (100vw - 1140px)/2. To
   reach viewport-left the figure shifts left by exactly that amount:
   left: calc(570px - 50vw)  (570 = half of 1140).
   Confirmed flush (left:0, right:winW) at 1821px and 2128px.
   Stacked classes beat PostX/theme rules. No block IDs. */
figure.wp-block-image.alignfull.size-full.pp-photo,
.wp-block-image.pp-photo {
  position: relative !important;
  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;
  box-sizing: border-box !important;
  margin-top: clamp(1.5rem, 3vw, 3rem) !important;
  margin-bottom: clamp(1.5rem, 3vw, 3rem) !important;
}

/* The desktop formula above assumes the row is at its full 1140px
   width (centered), true only when the viewport is wider than 1140.
   Below 1140 the row shrinks to fit / the column goes full-width, so
   the column is effectively centered and the standard breakout is
   correct. Confirmed flush at 1125px. */
@media (max-width: 1139px) {
  figure.wp-block-image.alignfull.size-full.pp-photo,
  .wp-block-image.pp-photo {
    left: calc(50% - 50vw) !important;
  }
}


/* Whole photo, natural height, never cropped. Width fills the viewport
   edge-to-edge; height follows naturally. max-height caps only very
   tall/portrait shots at one screenful (with contain to avoid distortion
   -- a capped tall image may show side bars, but wide landscapes never
   hit the cap and stay flush edge-to-edge). */
.wp-block-image.pp-photo img {
  display: block;
  width: 100vw !important;       /* fill the viewport at EVERY width */
  max-width: 100vw !important;
  height: auto !important;
  max-height: 100vh !important;  /* tall shots stay within one screen */
  object-fit: contain !important; /* show whole photo, no crop/distort */
  margin: 0 auto;
}

/* Caption: the figure is full-bleed, so a default caption lands at the
   far-left viewport edge. Constrain to a comfortable measure, left-align
   so it flows under the photo (rather than huddling centered), upright
   text in a soft light grey on the dark template. A bold lead-in is
   rendered white as a clear opener. Uses the core caption element. */
.wp-block-image.pp-photo figcaption,
.wp-block-image.pp-photo .wp-element-caption {
  max-width: 900px !important;
  margin: 0.85rem auto 0 !important;
  padding: 0 1.5rem !important;
  text-align: left !important;
  color: #b9b2aa !important;
  font-family: Merriweather, serif !important;
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
  font-style: normal !important;
}
.wp-block-image.pp-photo figcaption strong,
.wp-block-image.pp-photo figcaption b,
.wp-block-image.pp-photo .wp-element-caption strong,
.wp-block-image.pp-photo .wp-element-caption b {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* CRITICAL: every ancestor between a breakout photo and <body> must
   allow the 100vw breakout to escape instead of clipping it. The key
   element is .ultp-builder-container, which sits above the article and
   was the element clipping the full-bleed.
   SCOPED 2026-07: this rule used to be global -- it disabled overflow
   clipping on EVERY PostX wrapper site-wide, which let other PostX
   blocks (Post List cards etc.) paint over neighboring rows. :has()
   now limits it to wrappers that actually contain a pp- breakout
   figure, on any post, regardless of tag. Classes only -- no PostX
   block IDs. */
: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-photo, .pp-photo-wide, .pp-photo-duo) {
  overflow: visible !important;
}


/* ---------------------------------------------------------
   2. WIDE PHOTO  (class: pp-photo-wide)

   SELF-CONTAINED. Pushes ~120px past the text column on each
   side but never to the screen edge. Class alone does it --
   no toolbar step. Add class "pp-photo-wide".
   --------------------------------------------------------- */

.wp-block-image.pp-photo-wide {
  position: relative;
  width: calc(100% + 240px);
  max-width: 100vw;
  margin-left: -120px;
  margin-right: -120px;
  margin-top: clamp(2rem, 4vw, 4rem);
  margin-bottom: clamp(2rem, 4vw, 4rem);
}

.wp-block-image.pp-photo-wide img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/* On narrow screens, don't push past the edge -- just go full */
@media (max-width: 900px) {
  .wp-block-image.pp-photo-wide {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}


/* ---------------------------------------------------------
   3. PHOTO DUO  (class: pp-photo-duo on a GROUP block)

   Two photos side by side on desktop, stacked on mobile.

   Build it like this:
     - Add a "Group" block.
     - Give the Group the class "pp-photo-duo".
     - Inside, add two core "Image" blocks.
   The class forces the full-width breakout itself -- no
   toolbar step needed.
   --------------------------------------------------------- */

.pp-photo-duo {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 1vw, 16px);
  margin-top: clamp(2.5rem, 6vw, 6rem);
  margin-bottom: clamp(2.5rem, 6vw, 6rem);
}

.pp-photo-duo > .wp-block-image {
  flex: 1 1 0;
  min-width: 0;          /* lets images shrink evenly */
  margin: 0;
}

.pp-photo-duo > .wp-block-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;     /* duo crops so the pair lines up */
  object-position: 50% 50%;
}

/* Stack on smaller screens (matches your 650px breakpoint) */
@media (max-width: 650px) {
  .pp-photo-duo {
    flex-direction: column;
  }
  .pp-photo-duo > .wp-block-image img {
    height: auto;        /* whole photo again once stacked */
  }
}


/* ---------------------------------------------------------
   4. CAPTIONS  (works for all three types)

   Uses the native caption you type into the Image block.
   Styled quiet and small so the photo dominates. Inherits
   your theme's color + spacing variables.
   --------------------------------------------------------- */

.wp-block-image.pp-photo figcaption,
.wp-block-image.pp-photo-wide figcaption,
.pp-photo-duo > .wp-block-image figcaption {
  margin-top: var(--wp--preset--spacing--20, 0.5rem);
  padding: 0 clamp(16px, 4vw, 24px);
  max-width: 42rem;      /* matches your content width */
  margin-left: auto;
  margin-right: auto;
  color: var(--wp--preset--color--contrast-2, #555);
  font-size: var(--wp--preset--font-size--small, 0.875rem);
  line-height: 1.5;
  text-align: center;
}

/* For full-bleed, left-align the caption under the photo edge
   so it reads like a wire-service credit line. */
.wp-block-image.pp-photo figcaption {
  max-width: none;
  text-align: left;
  padding-left: clamp(16px, 4vw, 64px);
  padding-right: clamp(16px, 4vw, 64px);
}


/* ---------------------------------------------------------
   5. OPTIONAL CROP  (add class pp-crop)

   Only use when you WANT a uniform cinematic band instead of
   the full frame. Pair with a focus class if the subject
   isn't centered.
   --------------------------------------------------------- */

.wp-block-image.pp-photo.pp-crop img,
.wp-block-image.pp-photo-wide.pp-crop img {
  height: clamp(60vh, 70vh, 80vh);
  object-fit: cover;
  max-height: none;
}

.wp-block-image.pp-crop.pp-focus-top img    { object-position: 50% 20%; }
.wp-block-image.pp-crop.pp-focus-bottom img { object-position: 50% 80%; }
.wp-block-image.pp-crop.pp-focus-left img   { object-position: 25% 50%; }
.wp-block-image.pp-crop.pp-focus-right img  { object-position: 75% 50%; }


/* =========================================================
   6. PHOTOJOURNALISM COMMENT FORM - text color
   Scoped to the photojournalism tag so the shared PostX
   comment form keeps its normal color on all other posts.

   The form wrapper is #commentform (an ID), so every rule
   below uses that to beat the theme's high-specificity
   defaults (links were inheriting --wp--preset--color--contrast
   = #111111, invisible on the dark background).

   Covers logged-in (.logged-in-as) and logged-out
   (labels/inputs) views of the form.
   ========================================================= */

/* logged-in notice text */
.tag-photojournalism #commentform .logged-in-as {
  color: #ffffff !important;
}

/* logged-in notice LINKS (Edit profile / Log out)
   All states forced so the theme's contrast-color rule
   on the anchors can't win. */
.tag-photojournalism #commentform .logged-in-as a,
.tag-photojournalism #commentform .logged-in-as a:link,
.tag-photojournalism #commentform .logged-in-as a:visited,
.tag-photojournalism #commentform .logged-in-as a:hover {
  color: #ffffff !important;
}

/* "Required fields are marked" message */
.tag-photojournalism #commentform .required-field-message,
.tag-photojournalism #commentform .required-field-message .required {
  color: #cccccc !important;
}

/* logged-out form: field labels + typed text + placeholders */
.tag-photojournalism #commentform label {
  color: #ffffff !important;
}
.tag-photojournalism #commentform input,
.tag-photojournalism #commentform textarea {
  color: #ffffff !important;
}
.tag-photojournalism #commentform input::placeholder,
.tag-photojournalism #commentform textarea::placeholder {
  color: #999999 !important;
}

/* ============================================================
   7. PHOTOJOURNALISM ARTICLE HEADINGS
   Scoped to body.tag-photojournalism (added via
   inc/body-class-tags.php) + the stable .ultp-builder-content
   wrapper. No PostX block IDs.
   White headings for the dark photojournalism template.
   ============================================================ */
body.tag-photojournalism .ultp-builder-content h1,
body.tag-photojournalism .ultp-builder-content h2,
body.tag-photojournalism .ultp-builder-content h3,
body.tag-photojournalism .ultp-builder-content h4,
body.tag-photojournalism .ultp-builder-content h5,
body.tag-photojournalism .ultp-builder-content h6 {
  font-family: Merriweather, serif !important;
  color: #FFFFFF !important;
  line-height: 1.25 !important;
  margin-top: 2.5rem !important;
  margin-bottom: .75rem !important;
  font-weight: 700 !important;
}
body.tag-photojournalism .ultp-builder-content h2 { font-size: 2rem !important; }
body.tag-photojournalism .ultp-builder-content h3 { font-size: 1.6rem !important; }
body.tag-photojournalism .ultp-builder-content h4 { font-size: 1.3rem !important; }
body.tag-photojournalism .ultp-builder-content h5 {
  font-size: 1.1rem !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
}
body.tag-photojournalism .ultp-builder-content h6 {
  font-size: 1rem !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}

/* ============================================================
   8. PHOTOJOURNALISM FEATURED VIDEO — REMOVE BOTTOM WHITESPACE
   Scoped to body.tag-photojournalism + stable PostX wrapper
   classes (.ultp-builder-video / .ultp-embaded-video). No
   PostX block IDs. Forces the iframe to fill the aspect-ratio
   box and zeroes wrapper margins so no empty padding shows.
   ============================================================ */
body.tag-photojournalism .ultp-builder-video .ultp-video-wrapper.ultp-embaded-video {
  /* aspect-ratio (not padding-bottom:56.25%) sizes the box directly,
     avoiding the fractional-pixel rounding mismatch between a
     percentage-padded wrapper and a height:100% iframe -- that
     mismatch is what produced the sliver of whitespace that came and
     went with browser zoom. */
  position: relative !important;
  aspect-ratio: 16 / 9 !important;
  padding-bottom: 0 !important;   /* override the old hack */
  height: auto !important;
  overflow: hidden !important;
  line-height: 0 !important;
  font-size: 0 !important;        /* kill inline-element whitespace */
  margin: 0 !important;
}

body.tag-photojournalism .ultp-builder-video .ultp-video-wrapper.ultp-embaded-video iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  /* +1px and translateY(-0.5px) absorb any sub-pixel rounding so the
     iframe always fully covers the box edge at every zoom level. */
  min-height: calc(100% + 1px) !important;
  display: block !important;
  border: 0 !important;
  vertical-align: bottom !important;
}

/* zero out margins/line-height on the nesting wrappers */
body.tag-photojournalism .ultp-image-wrapper,
body.tag-photojournalism .ultp-builder-video,
body.tag-photojournalism .ultp-video-block {
  margin: 0 !important;
  line-height: 0 !important;
}