/* july.css — July 2026 issue-specific section styles that ride on top of style.css */

/* =============================================================
   .section-header — wrapper block that groups section-eyebrow +
   section-headline + section-sub together with consistent spacing.
   Inner elements inherit their styling from style.css (the live
   June template), so headlines match the treatment already used in
   Retirees, Wellness, Riverside, and Beaumont. Applied to President's
   Message, Gig Workers, Linda Dent, and Santa Ana after Marie
   Retallick flagged missing/weak headline rendering.
============================================================= */
.section-header {
  max-width: 1100px;
  margin: 0 auto 28px;
  padding: 0 24px;
  text-align: left;
}
.section-header > * + * { margin-top: 12px; }
.section-header .section-eyebrow { margin-bottom: 4px; }

/* President's Message: with the new section-header above the pres-message-grid,
   the leftover artifacts from the older template chassis (vertical rail label,
   inline body-column h2, oversized standalone headshot) need to be neutralized
   so the section reads cleanly. Full re-alignment to the new June chassis is
   scheduled for the August build. */
.pres-message .pres-message-body > h2:first-child { display: none; }
.pres-message .pres-message-rail { display: none; }
.pres-message .pres-message-grid {
  display: block; /* collapse the old three-column grid — photo now spans full width */
}
.pres-message .pres-message-photo {
  position: relative;
  max-width: 1100px;
  margin: 0 auto 32px;
  padding: 0 24px;
}
.pres-message .pres-message-photo > img {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  object-position: center 30%;
  border-radius: 4px;
  display: block;
}
.pres-message .pres-headshot {
  position: absolute;
  right: 32px;
  bottom: -32px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--gold, #F8D11F);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  background: #eee;
}
.pres-message .pres-headshot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pres-message .pres-message-body {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 24px 0;
}
.pres-message .pres-message-body .columns {
  column-count: 2;
  column-gap: 32px;
}
.pres-message .pres-message-body .columns p {
  break-inside: avoid;
  font-size: 1.02rem;
  line-height: 1.55;
  margin-bottom: 14px;
}
.pres-message .signoff {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (max-width: 760px) {
  .pres-message .pres-message-body .columns { column-count: 1; }
  .pres-message .pres-headshot { width: 90px; height: 90px; right: 24px; bottom: -24px; }
}

/* Legacy Linda Dent inline banner is replaced by the .section-header block
   above. Hide any remaining .ld-banner (defensive — the July HTML no longer
   emits one) so it can't render as unstyled bold text if reintroduced. */
.linda-dent .ld-banner,
.linda-dent .ld-deck { display: none; }


/* =============================================================
   .photo-strip — normalized multi-photo layout helper.
   Use whenever a story ships 2–4 supporting photos. All images
   share one aspect ratio and one grid, so photo blocks always
   look intentional and balanced at every viewport width.

   Usage in HTML:
     <div class="photo-strip photo-strip--2">   (or --3, --4)
       <figure><img ...><figcaption>optional</figcaption></figure>
       <figure><img ...></figure>
     </div>

   Behavior:
     • Desktop (>= 900px): N equal columns, images cover a shared 4/3 box
     • Tablet (600–900px):  2 columns max, wraps neatly
     • Mobile  (< 600px):   single column, images stack full-width
     • Prevents the "one photo left over" problem that showed up in
       the July gig / wellness sections at desktop widths.
============================================================= */
.photo-strip {
  display: grid;
  gap: 16px;
  margin: 24px 0;
}
.photo-strip figure { margin: 0; }
.photo-strip img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
.photo-strip figcaption {
  margin-top: 6px;
  font-size: 0.85rem;
  color: #555;
  line-height: 1.3;
}
.photo-strip--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.photo-strip--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.photo-strip--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .photo-strip--3, .photo-strip--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .photo-strip--2, .photo-strip--3, .photo-strip--4 { grid-template-columns: 1fr; }
}
/* Portrait variant — for taller photos (banners, standing shots) */
.photo-strip--portrait img { aspect-ratio: 3 / 4; }
/* Wide variant — for panoramic group shots */
.photo-strip--wide img { aspect-ratio: 16 / 9; }


/* ---- Cover image sizing (static PNG cover) ---- */
.cover-static-img {
  width: 100%;
  height: auto;
  max-width: min(900px, 100vw);
  margin: 0 auto;
  display: block;
}

/* ---- Retirees ---- */
.retirees .retirees-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  align-items: start;
  margin-top: 24px;
}
.retirees .retirees-hero img {
  width: 100%;
  border-radius: 4px;
  aspect-ratio: 3/2;
  object-fit: cover;
}
.retirees .retirees-body p {
  font-size: 1.05rem;
  margin-bottom: 14px;
}
.retirees .retirees-strip {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 8px;
}
.retirees .retirees-strip img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 4px;
}
@media (max-width: 800px) {
  .retirees .retirees-grid { grid-template-columns: 1fr; }
  .retirees .retirees-strip { grid-template-columns: 1fr; }
}

/* ---- Ventura stats (reuses .stat / .stat-value / .stat-label from June measure-er) ---- */
.ventura-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 32px auto 24px;
  max-width: 1100px;
  padding: 0 24px;
}
.ventura-stats .stat {
  background: var(--purple, #2D1B69);
  color: #fff;
  padding: 26px 20px;
  border-radius: 4px;
  text-align: center;
}
.ventura-stats .stat-value {
  font-family: var(--font-display, "loos-compressed", Arial Black, sans-serif);
  font-size: clamp(3rem, 6vw, 4.6rem);
  line-height: 1;
  color: var(--gold, #F8D11F);
  letter-spacing: 0.02em;
}
.ventura-stats .stat-label {
  margin-top: 10px;
  font-size: 0.95rem;
  line-height: 1.35;
}
@media (max-width: 800px) {
  .ventura-stats { grid-template-columns: 1fr; }
}
.ventura-second img {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  border-radius: 4px;
  margin-top: 8px;
}

/* ---- Wellness in Motion ----
   Grid uses subgrid-like matched heights via `align-items: stretch`, and the
   image fills its column with object-fit:cover so no dead space forms below
   either side. ---- */
.wellness .wellness-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
  margin-top: 24px;
}
.wellness .wellness-hero {
  position: relative;
  min-height: 100%;
  border-radius: 4px;
  overflow: hidden;
}
.wellness .wellness-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
.wellness .wellness-body {
  align-self: center;
  padding: 4px 0;
}
.wellness .wellness-body p {
  font-size: 1.05rem;
  margin-bottom: 14px;
}
@media (max-width: 800px) {
  .wellness .wellness-grid { grid-template-columns: 1fr; }
  .wellness .wellness-hero {
    position: static;
    min-height: 0;
    aspect-ratio: 4/3;
  }
  .wellness .wellness-hero img { position: static; }
}

/* =============================================================
   PULL QUOTE — unified design used across all sections.
   Three color variants: default (cream), .pullquote-inverse
   (purple over dark bg), .pullquote-gold, .pullquote-purple.
   ============================================================= */
.pullquote {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 20px;
  align-items: center;
  background: #fff;
  border-radius: 6px;
  padding: 22px 24px 22px 22px;
  margin: 24px 0;
  box-shadow: 0 4px 24px rgba(45, 27, 105, 0.10);
  border-left: 6px solid var(--gold, #F8D11F);
  position: relative;
}
.pullquote .pullquote-photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--gold, #F8D11F);
  background: #eee;
  align-self: center;
}
.pullquote .pullquote-body {
  position: relative;
}
.pullquote .pullquote-mark {
  width: 34px;
  height: 28px;
  color: var(--gold, #F8D11F);
  opacity: 0.85;
  margin-bottom: 6px;
  display: block;
}
.pullquote blockquote {
  font-family: var(--font-display-wide, "loos-compressed", "Loos Wide", Arial Black, sans-serif);
  font-size: clamp(1.15rem, 2.1vw, 1.55rem);
  line-height: 1.18;
  color: var(--purple, #2D1B69);
  letter-spacing: 0.005em;
  text-transform: none;
  margin: 0 0 12px;
}
.pullquote figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pullquote figcaption .name {
  font-family: var(--font-display, "loos-compressed", Arial Black, sans-serif);
  font-weight: 700;
  color: var(--ink, #1a1a1a);
  font-size: 0.98rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.pullquote figcaption .title {
  font-family: var(--font-body, "cofo-sans-variable", system-ui, sans-serif);
  color: #555;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

/* Gold variant — bright accent card */
.pullquote-gold {
  background: var(--gold, #F8D11F);
  border-left-color: var(--purple, #2D1B69);
  box-shadow: 0 6px 26px rgba(45, 27, 105, 0.18);
}
.pullquote-gold .pullquote-photo { border-color: var(--purple, #2D1B69); }
.pullquote-gold .pullquote-mark { color: var(--purple, #2D1B69); }
.pullquote-gold blockquote { color: var(--purple, #2D1B69); }
.pullquote-gold figcaption .name { color: var(--purple, #2D1B69); }
.pullquote-gold figcaption .title { color: rgba(45, 27, 105, 0.75); }

/* Purple variant — deep union card */
.pullquote-purple {
  background: var(--purple, #2D1B69);
  color: #fff;
  border-left-color: var(--gold, #F8D11F);
}
.pullquote-purple .pullquote-photo { border-color: var(--gold, #F8D11F); }
.pullquote-purple .pullquote-mark { color: var(--gold, #F8D11F); }
.pullquote-purple blockquote { color: #fff; }
.pullquote-purple figcaption .name { color: var(--gold, #F8D11F); }
.pullquote-purple figcaption .title { color: rgba(255,255,255,0.75); }

/* Inverse — used inside a photo/dark hero (e.g., gig hero) */
.pullquote-inverse {
  background: rgba(45, 27, 105, 0.92);
  color: #fff;
  border-left-color: var(--gold, #F8D11F);
  backdrop-filter: blur(4px);
}
.pullquote-inverse .pullquote-photo { border-color: var(--gold, #F8D11F); }
.pullquote-inverse .pullquote-mark { color: var(--gold, #F8D11F); }
.pullquote-inverse blockquote { color: #fff; }
.pullquote-inverse figcaption .name { color: var(--gold, #F8D11F); }
.pullquote-inverse figcaption .title { color: rgba(255,255,255,0.78); }

@media (max-width: 640px) {
  .pullquote {
    grid-template-columns: 1fr;
    text-align: left;
    padding: 20px 20px;
  }
  .pullquote .pullquote-photo { justify-self: start; }
}

/* ---- Leadership strip (President's Message footer) ---- */
.leadership-strip {
  margin-top: 32px;
  padding-top: 22px;
  border-top: 2px solid rgba(45, 27, 105, 0.12);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.leadership-strip figure {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  align-items: center;
}
.leadership-strip img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold, #F8D11F);
}
.leadership-strip figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.15;
}
.leadership-strip .role {
  font-family: var(--font-body, "cofo-sans-variable", sans-serif);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #666;
}
.leadership-strip .leader-name {
  font-family: var(--font-display, "loos-compressed", Arial Black, sans-serif);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--purple, #2D1B69);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
@media (max-width: 640px) {
  .leadership-strip { grid-template-columns: 1fr; }
}

/* ---- Gilda byline ---- */
.gilda-byline {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
  padding: 12px 0;
  border-bottom: 2px solid rgba(45, 27, 105, 0.15);
}
.gilda-byline img {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--gold, #F8D11F);
}
.gilda-byline > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gilda-byline .section-eyebrow {
  display: inline-block;
  margin: 0;
  font-size: 0.75rem;
}
.gilda-byline-name {
  font-family: var(--font-display, "loos-compressed", Arial Black, sans-serif);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--purple, #2D1B69);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
  margin-top: 2px;
}
.gilda-byline-title {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: #555;
}

/* ---- Riverside ---- */
.riverside .riverside-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 32px;
  align-items: start;
  margin-top: 24px;
}
.riverside .riverside-hero img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  border-radius: 4px;
}
.riverside .riverside-body p {
  font-size: 1.05rem;
  margin-bottom: 14px;
}
@media (max-width: 800px) {
  .riverside .riverside-grid { grid-template-columns: 1fr; }
}

/* ---- Beaumont ---- */
.beaumont .beaumont-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 32px;
  align-items: start;
  margin-top: 24px;
}
.beaumont .beaumont-hero img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  border-radius: 4px;
}
.beaumont .beaumont-body p {
  font-size: 1.05rem;
  margin-bottom: 14px;
}
@media (max-width: 800px) {
  .beaumont .beaumont-grid { grid-template-columns: 1fr; }
}

/* ---- Tri-Counties palm badge: swap the SVG line-art palm for the branded
   coral-circle palm PNG. The image itself already has the coral background,
   so we let it fill the circle. ---- */
.tri-counties .tc-wave-circle--photo {
  background: transparent;
  overflow: hidden;
  width: 96px;
  height: 96px;
  top: 12px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.18);
}
.tri-counties .tc-wave-circle--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* ---- Photo crop tuning ---- */
/* Ventura group hero — favor upper 30% so raised signs & heads stay visible */
.tri-counties .tc-hueneme-photo img {
  object-position: center 30%;
  aspect-ratio: 4/3;
  object-fit: cover;
}
/* Move the caption OFF the group photo to a floating overlay pill in the
   bottom-left, so it stops covering the signs. */
.tri-counties .tc-hueneme-photo {
  position: relative;
}
.tri-counties .tc-hueneme-banner {
  position: absolute;
  left: 16px;
  bottom: 16px;
  right: auto;
  padding: 8px 16px;
  background: var(--gold, #F8D11F);
  color: var(--purple, #2D1B69);
  font-family: var(--font-display-wide, "loos-compressed", Arial Black, sans-serif);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  border-radius: 3px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.25);
  max-width: 78%;
  line-height: 1.15;
}
/* Ventura second (wide steps photo) — use natural aspect, no crop */
.ventura-second img {
  aspect-ratio: auto;
  object-fit: contain;
  width: 100%;
  height: auto;
  max-height: none;
  background: transparent;
  border-radius: 4px;
}

/* ---- Gig section: force columns to match heights so the CGWU logo sits
   flush with the bottom of the hero, no dead space below either side. ---- */
.gig-drivers .gig-grid { align-items: stretch; }
.gig-drivers .gig-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: space-between;
}
.gig-drivers .gig-cgwu-mark {
  align-self: flex-end;
  max-width: 150px;
  width: 34%;
  margin: 0;
}
.gig-drivers .gig-cgwu-mark img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---- Gig hero: title anchored to bottom (don't cover the subject) and
   aspect ratio matched to the content column so no vertical dead space. ---- */
.gig-drivers .gig-hero { position: relative; }
.gig-drivers .gig-hero > img {
  object-position: center 30%;
  aspect-ratio: 4/3;
  object-fit: cover;
  width: 100%;
  height: 100%;
  filter: none; /* remove the June template's grayscale/contrast filter */
}
.gig-drivers .gig-hero-title {
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 90px 24px 24px;
  text-align: left;
  background: linear-gradient(to top,
    rgba(0,0,0,0.85) 0%,
    rgba(0,0,0,0.65) 45%,
    rgba(0,0,0,0) 100%);
}
.gig-drivers .gig-hero-title h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.02;
  text-shadow: 0 2px 14px rgba(0,0,0,0.8);
  max-width: 22ch;
}

/* ---- Linda Dent hero image: don't force to fill column height (which
   cropped Linda off the right at narrower widths). Use natural aspect. ---- */
.linda-dent .ld-grid { align-items: start; }
.linda-dent .ld-image {
  align-self: start;
  background: transparent;
}
.linda-dent .ld-image img {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 4px;
  display: block;
}

/* ---- COPE Warriors ---- */
.cope-warriors { background: var(--cream, #f7f2e5); }
.cope-warriors .cope-banner {
  text-align: center;
  padding: 0 24px 24px;
}
.cope-warriors .cope-banner .cope-eyebrow {
  display: inline-block;
  background: var(--purple, #2D1B69);
  color: var(--gold, #F8D11F);
  font-family: var(--font-display, "loos-compressed", sans-serif);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 3px;
  font-size: 0.9rem;
}
.cope-warriors .cope-banner h2 {
  font-family: var(--font-display-wide, "loos-compressed", sans-serif);
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 1;
  color: var(--purple, #2D1B69);
  text-transform: uppercase;
  margin: 14px 0 8px;
  letter-spacing: 0.005em;
}
.cope-warriors .cope-banner .cope-deck {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--ink, #1a1a1a);
  max-width: 720px;
  margin: 0 auto;
}
.cope-warriors .cope-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 32px;
  align-items: start;
  margin-top: 32px;
}
.cope-warriors .cope-body p {
  font-size: 1.05rem;
  margin-bottom: 14px;
}
/* Cope card owns its own pullquote spacing */
.cope-warriors .pullquote { margin-top: 20px; }
.cope-warriors .cope-list {
  background: var(--purple, #2D1B69);
  color: #fff;
  padding: 24px 22px;
  border-radius: 4px;
}
.cope-warriors .cope-list h3 {
  font-family: var(--font-display, "loos-compressed", sans-serif);
  color: var(--gold, #F8D11F);
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.cope-warriors .cope-list .cope-subhead {
  font-size: 0.9rem;
  line-height: 1.4;
  margin-bottom: 14px;
  opacity: 0.9;
}
.cope-warriors .cope-list ul {
  columns: 2;
  column-gap: 18px;
  list-style: none;
  padding: 0;
}
.cope-warriors .cope-list li {
  padding: 4px 0;
  font-size: 0.95rem;
  border-bottom: 1px dashed rgba(255,255,255,0.18);
  break-inside: avoid;
}
@media (max-width: 800px) {
  .cope-warriors .cope-grid { grid-template-columns: 1fr; }
  .cope-warriors .cope-list ul { columns: 1; }
}

/* ---- Santa Ana photostack ---- */
.santa-ana .sa-photostack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.santa-ana .sa-photostack img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 4px;
}

/* ---- Gilda ---- */
.gilda .gilda-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 32px;
  align-items: start;
}
.gilda .gilda-collage img {
  width: 100%;
  border-radius: 4px;
}
.gilda .gilda-body p {
  font-size: 1.05rem;
  margin-bottom: 14px;
}
.gilda .gilda-body .section-eyebrow {
  display: inline-block;
  margin-bottom: 8px;
}
.gilda .gilda-body .section-headline {
  margin-bottom: 20px;
}
.gilda .gilda-signoff {
  margin-top: 22px;
}
@media (max-width: 800px) {
  .gilda .gilda-grid { grid-template-columns: 1fr; }
}