/* ==========================================================================
   OTN theme: Join page layout (DESIGN.md 8.6), ported from the mockups'
   assets/css/pages/join.css.
   Components (page head, jump chips, gallery, job card, band, FAQ, text
   link, back to top) come from components.css and blocks.css.
   ========================================================================== */

/* Jump chips in the mockups' own container (the theme's .otn-chips-row,
   blocks.css, does the same for otn/on-this-page) */
.otn-join__chips {
  margin-bottom: calc(var(--otn-section-y) / 2);
}

/* No Open positions (no jobs listed, or otn-jobs off): the strip is followed
   straight by the pitch band, so the same half section gap keeps the photos
   off the band's rule */
.otn-join__strip + .is-style-band {
  margin-top: calc(var(--otn-section-y) / 2);
}

/* Photo strip (the gallery with the class otn-gallery--strip): top-aligned,
   each photo at its own shape on its black mat, never cropped (Picture3
   has the words "And we’re live!" in the image).

   The column sizes come from the photos themselves: the theme reads each
   photo's width and height and writes them into two variables on the
   gallery (inc/markup.php, otn_theme_join_strip):
     --otn-strip-cols        from 600px: one row, each column as wide as its
                             photo's width ÷ height, so all come out the same
                             height (today: 1.409fr 1.644fr 0.775fr);
     --otn-strip-phone-left  phones, three photos with a portrait one last
                             (today's): the left column's width, so the two
                             photos stacked on the left come out exactly as
                             tall as the portrait spanning both rows on the
                             right (today: 49.467% less 0.878 of the gap).
   Any other strip is one photo a row on phones. Source and reading order
   are unchanged. */
:root .wp-block-gallery.has-nested-images.otn-gallery.otn-gallery--strip {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (max-width: 599.98px) {
  :root .wp-block-gallery.has-nested-images.otn-gallery.otn-gallery--strip.otn-strip--portrait-right {
    grid-template-columns: var(--otn-strip-phone-left, calc(49.467% - 0.878 * var(--otn-space-2))) minmax(0, 1fr);
  }

  :root .wp-block-gallery.has-nested-images.otn-gallery.otn-gallery--strip.otn-strip--portrait-right > figure.wp-block-image:nth-of-type(3):not(#individual-image) {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

@media (min-width: 600px) {
  :root .wp-block-gallery.has-nested-images.otn-gallery.otn-gallery--strip {
    grid-template-columns: var(--otn-strip-cols, minmax(0, 1.409fr) minmax(0, 1.644fr) minmax(0, 0.775fr));
  }
}

/* The apply sentence follows the last job card */
.otn-join__apply,
:root p.otn-join__apply {
  margin-top: var(--otn-space-6);
}

/* The "no open positions" message (shown when no job is open) */
:root p.otn-join__none {
  margin: 0;
}

/* "See all questions" under the FAQ items */
.otn-join__more,
:root #questions p.otn-morelink {
  margin-top: var(--otn-space-4);
}