/* MVDCC 2026 layout adjustments
   Loaded after the main stylesheet so these rules override the template defaults.
*/

/* On wide desktop screens the candidate group PNG is taller than the 800px hero.
   Lower it slightly so the tops of the heads remain visible; the excess is cropped at the bottom. */
@media (min-width: 1401px) {
  .wpo-static-hero .static-hero.hero-s2 .consult-pic {
    bottom: -65px;
  }
}

/* Make all three election information color panels equal height on desktop. */
@media (min-width: 992px) {
  .wpo-election-donation-section > .container > .row {
    align-items: stretch;
  }

  .wpo-election-donation-section > .container > .row > [class*="col-"] {
    display: flex;
  }

  .wpo-election-donation-section .election-donation-item {
    width: 100%;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* Cleaner hero typography and spacing on phones. */
.wpo-static-hero .candidate-hero-line {
  color: #fff;
  font-size: 18px;
  line-height: 36px;
  font-weight: 400;
}
.wpo-static-hero .candidate-office::before {
  content: " - ";
}

@media (max-width: 767px) {
  /* Let the hero grow with the text and image instead of forcing both into 700px. */
  .wpo-static-hero .static-hero.hero-s2 {
    height: auto;
    min-height: 0;
    overflow: hidden;
  }

  /* Move the copy upward and give it safe side margins. */
  .wpo-static-hero .static-hero.hero-s2 .hero-inner {
    padding-top: 42px;
  }

  .wpo-static-hero .static-hero.hero-s2 .hero-content {
    padding: 0 18px;
  }

  .wpo-static-hero .static-hero.hero-s2 .slide-title h2 {
    font-size: 28px;
    line-height: 34px;
    margin: 0 0 20px;
  }

  .wpo-static-hero .candidate-hero-list {
    max-width: 100%;
    margin: 0 auto;
  }

  .wpo-static-hero .candidate-hero-line {
    font-size: 15px;
    line-height: 20px;
    margin-bottom: 10px;
    text-align: center;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  /* On mobile, put the office on its own line so long titles don't collide with the photo. */
  .wpo-static-hero .candidate-office {
    display: block;
    font-size: 14px;
    line-height: 19px;
  }

  .wpo-static-hero .candidate-office::before {
    content: "";
  }

  /* Keep the team photo in normal flow beneath the copy. */
  .wpo-static-hero .static-hero.hero-s2 .consult-pic {
    position: relative;
    top: 0;
    right: 0;
    width: min(92%, 520px);
    margin: 18px auto 0;
    transform: none;
  }
}

@media (max-width: 400px) {
  .wpo-static-hero .static-hero.hero-s2 .consult-pic {
    width: 94%;
    top: 0;
  }
}

/* Mobile hero v2: keep all copy in its own block ABOVE the team photo.
   The template originally absolutely positions .hero-container/.hero-inner,
   which causes the text to sit on top of the image. These rules restore
   normal document flow on phones. */
@media (max-width: 767px) {
  .wpo-static-hero .static-hero.hero-s2 {
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden;
    padding: 0 !important;
  }

  .wpo-static-hero .static-hero.hero-s2 .hero-container {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    z-index: 2;
  }

  .wpo-static-hero .static-hero.hero-s2 .hero-inner {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    padding: 38px 0 14px !important;
    background: transparent !important;
  }

  /* The hero itself already supplies the blue/red background overlay. */
  .wpo-static-hero .static-hero.hero-s2 .hero-inner::before {
    display: none !important;
  }

  .wpo-static-hero .static-hero.hero-s2 .hero-content {
    position: relative;
    z-index: 3;
    max-width: 100% !important;
    padding: 0 20px !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  .wpo-static-hero .static-hero.hero-s2 .slide-title h2 {
    font-size: 27px !important;
    line-height: 1.22 !important;
    margin: 0 0 20px !important;
  }

  .wpo-static-hero .candidate-hero-list {
    margin: 0 auto !important;
    max-width: 520px !important;
  }

  .wpo-static-hero .candidate-hero-line {
    font-size: 15px !important;
    line-height: 1.25 !important;
    margin: 0 0 10px !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .wpo-static-hero .candidate-hero-line strong {
    display: block;
    font-size: 16px;
    line-height: 1.2;
    margin-bottom: 2px;
  }

  .wpo-static-hero .candidate-office {
    display: block !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
  }

  .wpo-static-hero .candidate-office::before {
    content: "" !important;
  }

  /* The photo now follows the copy instead of sitting beneath it. */
  .wpo-static-hero .static-hero.hero-s2 .consult-pic {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: min(96%, 540px) !important;
    height: auto !important;
    margin: 0 auto !important;
    z-index: 1;
  }

  .wpo-static-hero .static-hero.hero-s2 .consult-pic img {
    display: block;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto;
  }
}

@media (max-width: 420px) {
  .wpo-static-hero .static-hero.hero-s2 .hero-inner {
    padding-top: 30px !important;
  }

  .wpo-static-hero .static-hero.hero-s2 .hero-content {
    padding: 0 14px !important;
  }

  .wpo-static-hero .static-hero.hero-s2 .slide-title h2 {
    font-size: 25px !important;
    line-height: 1.2 !important;
    margin-bottom: 17px !important;
  }

  .wpo-static-hero .candidate-hero-line strong {
    font-size: 15px;
  }

  .wpo-static-hero .candidate-office {
    font-size: 13.5px !important;
  }
}

/* Mobile/tablet hero v3: match the original site's stacked composition.
   The copy sits at the top, the group photo follows it, and the photo's
   bottom edge is flush with the bottom of the hero instead of floating. */
@media (max-width: 1199px) {
  .wpo-static-hero .static-hero.hero-s2 {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .wpo-static-hero .static-hero.hero-s2 .hero-container {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    flex: 0 0 auto !important;
    z-index: 2 !important;
  }

  .wpo-static-hero .static-hero.hero-s2 .hero-inner {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    padding: 70px 0 20px !important;
    background: transparent !important;
  }

  .wpo-static-hero .static-hero.hero-s2 .hero-inner::before {
    display: none !important;
  }

  .wpo-static-hero .static-hero.hero-s2 .hero-content {
    position: relative !important;
    z-index: 3 !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 0 34px !important;
    text-align: center !important;
  }

  .wpo-static-hero .static-hero.hero-s2 .slide-title {
    max-width: 100% !important;
    text-align: center !important;
  }

  .wpo-static-hero .static-hero.hero-s2 .slide-title h2 {
    font-size: 42px !important;
    line-height: 1.28 !important;
    margin: 0 0 26px !important;
  }

  .wpo-static-hero .candidate-hero-list {
    max-width: 820px !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  .wpo-static-hero .candidate-hero-line {
    font-size: 18px !important;
    line-height: 1.35 !important;
    margin: 0 0 6px !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .wpo-static-hero .candidate-hero-line strong {
    display: inline !important;
    font-size: 18px !important;
    line-height: inherit !important;
    margin: 0 !important;
  }

  .wpo-static-hero .candidate-office {
    display: inline !important;
    font-size: 18px !important;
    line-height: inherit !important;
  }

  .wpo-static-hero .candidate-office::before {
    content: " - " !important;
  }

  .wpo-static-hero .static-hero.hero-s2 .consult-pic {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    width: min(74vw, 700px) !important;
    height: auto !important;
    margin: 16px auto 0 !important;
    flex: 0 0 auto !important;
    z-index: 1 !important;
    line-height: 0 !important;
  }

  .wpo-static-hero .static-hero.hero-s2 .consult-pic img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 767px) {
  .wpo-static-hero .static-hero.hero-s2 .hero-inner {
    padding: 44px 0 12px !important;
  }

  .wpo-static-hero .static-hero.hero-s2 .hero-content {
    padding: 0 18px !important;
  }

  .wpo-static-hero .static-hero.hero-s2 .slide-title h2 {
    font-size: 30px !important;
    line-height: 1.24 !important;
    margin-bottom: 20px !important;
  }

  .wpo-static-hero .candidate-hero-line {
    font-size: 15px !important;
    line-height: 1.25 !important;
    margin-bottom: 9px !important;
  }

  .wpo-static-hero .candidate-hero-line strong {
    display: block !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    margin-bottom: 2px !important;
  }

  .wpo-static-hero .candidate-office {
    display: block !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
  }

  .wpo-static-hero .candidate-office::before {
    content: "" !important;
  }

  .wpo-static-hero .static-hero.hero-s2 .consult-pic {
    width: min(92vw, 620px) !important;
    margin-top: 8px !important;
  }
}

@media (max-width: 420px) {
  .wpo-static-hero .static-hero.hero-s2 .hero-inner {
    padding-top: 32px !important;
  }

  .wpo-static-hero .static-hero.hero-s2 .slide-title h2 {
    font-size: 26px !important;
    line-height: 1.2 !important;
  }

  .wpo-static-hero .candidate-hero-line strong {
    font-size: 15px !important;
  }

  .wpo-static-hero .candidate-office {
    font-size: 13.5px !important;
  }

  .wpo-static-hero .static-hero.hero-s2 .consult-pic {
    width: 96vw !important;
  }
}