/* ── Utilities — shared across modules ───────────────────────────────
   Only things used by two or more places belong here. Anything that is
   really one module's business goes in that module's own file. */


/* ── .fill-image ─────────────────────────────────────────────────────
   Makes a Divi Image module fill its column instead of sitting at its
   own aspect ratio.

   Why it is needed: Divi sizes an image module by its content, so a photo
   in a column that is taller than the photo's aspect leaves the rest of the
   column empty. On Meet the Doctor the portrait is 1080x1526 (aspect 0.708)
   in a column that measures 0.54 — no width setting can make it fill both
   axes, because filling requires *cropping*, and the image module exposes
   no object-fit.

   The alternative was a column background image, which does crop but throws
   away the alt attribute. This keeps the real <img>.

   Add the class in the module's CSS Class field. Note the column keeps its
   own padding — the point is to fill the column's CONTENT box, so padding
   set aside for something else (the animated badge, here) still works. */
.fill-image {
  /* Divi columns are flex columns, so the module must be told to take the
     leftover height before height:100% has anything to resolve against. */
  flex   : 1 1 auto;
  height : 100%;
  /* min-height:0 lets it shrink inside the flex column rather than being
     floored at its content height. */
  min-height : 0;
}

.fill-image .et_pb_image_wrap {
  display : block;
  height  : 100%;
}

.fill-image img {
  width      : 100%;
  height     : 100%;
  object-fit : cover;
  /* Keeps faces in frame when the crop is tighter than the photo. Override
     per instance if a particular image wants a different anchor. */
  object-position : center center;
}


/* ── .pa-open-mobile-menu ────────────────────────────────────────────
   Opt-in on a Divi Menu module: below 980px its links stay visible as a
   stacked column instead of collapsing into the hamburger. Used on the
   footer menu; a header keeps the hamburger by omitting the class.
   Separate mechanism from css/global/mobile-menu.css, which collapses
   submenus INSIDE the hamburger. */
@media (max-width: 980px) {
  .pa-open-mobile-menu .et_pb_menu__menu {
    display        : flex !important;
    flex-direction : column !important;
  }
  .pa-open-mobile-menu .et_mobile_nav_menu { display: none !important; }
}