/**
 * =====================================================================
 * FIELD PHOTO COMPONENT — STYLES
 * =====================================================================
 * Copied verbatim from the current static design system's
 * ".field-photo" rules (css/style.css).
 *
 * FULL-BLEED WIDTH BREAK-OUT ADDED (same WordPress-specific fix already
 * confirmed necessary on hero_carousel/style.css — see that file's own
 * comment for the full explanation): the static site's .field-photo is
 * a direct child of <main> with nothing constraining its width; this
 * shortcode instead renders inside Blocksy's own boxed content
 * wrapper, so it needs the same explicit break-out to actually reach
 * full-bleed.
 * =====================================================================
 */

figure.field-photo {
  position: relative; margin: 0; overflow: hidden;
  height: 340px; background: var(--ink);
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}
.field-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.field-photo::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, var(--ivory) 0%, rgba(245, 245, 243, 0) 14%),
    linear-gradient(0deg, rgba(4, 7, 7, 0.8), rgba(4, 7, 7, 0) 55%);
}
.field-photo__caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding-block: 28px 32px;
  /* CONFIRMED, FIXED BUG (live-site audit, 2026-09): WordPress/Gutenberg
     applies its own default centered text-align to <figcaption>
     elements (confirmed live — the <figcaption> itself computed to
     "center" while its own parent <figure> correctly computed to
     "start"/left). The static reference never shows this because it
     never runs through WordPress at all. Explicitly reset here to
     match the intended left-aligned design. */
  text-align: left;
}
.field-photo__kicker {
  display: block; margin-bottom: 8px;
  --forced-font: var(--font-mono); font-family: var(--forced-font) !important; font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--red-bright);
}
.field-photo__caption p {
  margin: 0; max-width: 64ch; color: var(--white);
  --forced-font: var(--font-serif); font-family: var(--forced-font) !important; font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem); line-height: 1.3;
}
@media (max-width: 700px) {
  figure.field-photo { height: 280px; }
}