/* Job Fair Photo (acf/job-fair-photo). Shared tokens: css/job-fair-base.css
   --bridge: top half light blue, bottom half white, so the photo ties the What to
   Expect band to the white Come Prepared section below it. */
.jf-block.jf-photo { background: #fff; }
.jf-block.jf-photo--bridge { background: linear-gradient(to bottom, var(--jf-ice) 50%, #fff 50%); }
.jf-block.jf-photo--white { padding-top: 4rem; }
.jf-block.jf-photo .jf-photo__wrap { max-width: 1240px; margin-inline: auto; padding-inline: 1.5rem; }
.jf-block.jf-photo .jf-photo__frame { position: relative; overflow: hidden; margin: 0; border-radius: 12px; height: clamp(240px, 34vw, 480px); }
.jf-block.jf-photo .jf-photo__image { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.jf-block.jf-photo .jf-photo__triangle { position: absolute; left: 0; bottom: 0; width: 65px; height: 65px; background: #34ad65; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.jf-block.jf-photo .jf-photo__quarter { position: absolute; right: 0; bottom: 0; width: 82px; height: 82px; background: #ffbf00; border-top-left-radius: 100%; border-top: 5px solid #fff; border-left: 5px solid #fff; }

@media (min-width: 768px) {
  .jf-block.jf-photo .jf-photo__wrap { padding-inline: 2.5rem; }
  .jf-block.jf-photo--white { padding-top: 5rem; }
}
@media (max-width: 767px) {
  .jf-block.jf-photo .jf-photo__triangle { width: 30px; height: 30px; }
  .jf-block.jf-photo .jf-photo__quarter { width: 38px; height: 38px; border-width: 3px; }
}