/* ==========================================================================
   Shared sections: Careers, Certifications, and the call to action, used at
   the bottom of the homepage and the Products page.
   Requires tokens.css, typography.css, layout.css, and components.css.
   ========================================================================== */


/* ---------- Careers ----------
   Desktop: a photo card in columns 1–6 and a text card in columns 7–12, the
   same height. The photo (a transparent halftone) is multiplied onto Green
   and anchored to the top, so the radar array stays in frame. The text card has a 60px animated texture
   banner, then two columns sitting at the bottom of the card: the heading
   with the button below it, and the subhead with the paragraph.
   Below desktop: the photo stacks above the text card. On the 3-column
   tablet the card is two columns (heading left; subhead, paragraph, and
   button right); below that it's one column. */

.careers__layout {
  display: grid;
  gap: var(--gutter);
}

.careers__photo {
  position: relative;
  isolation: isolate;
  aspect-ratio: 650 / 501;                   /* the design's proportions */
  overflow: hidden;
  background: var(--color-green);
  border: var(--line-width) solid var(--color-line);
}
.careers__photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;   /* keeps the top of the radar in frame */
  mix-blend-mode: multiply;
}

.careers__card {
  display: flex; flex-direction: column;
  background: var(--color-surface);
  border: var(--line-width) solid var(--color-line);
}
.careers__card > .texture { height: var(--space-60); border-bottom: var(--line-width) solid var(--color-line); }

.careers__body {
  flex: 1;
  display: grid;
  grid-template-areas: "heading" "subhead" "text" "button";
  align-content: end;                        /* fill: content sits at the bottom of the card */
  justify-items: start;
  padding: var(--space-40) var(--space-20) var(--space-20);
}
/* Stacked: 40px below the heading, then 24px between subhead, paragraph, and button. */
.careers__body h2      { grid-area: heading; margin-bottom: var(--space-40); }
.careers__body .text-h4 { grid-area: subhead; }
.careers__body p:not(.text-h4) { grid-area: text; margin: var(--space-24) 0; max-width: var(--text-max); }
.careers__body .button { grid-area: button; }

/* 3-column tablet: the heading on the left; subhead, paragraph, and button
   on the right, all starting at the top. */
@media (min-width: 811px) and (max-width: 900px) {
  .careers__body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "heading subhead"
      "heading text"
      "heading button";
    column-gap: var(--gutter);
    align-content: start;
  }
  .careers__body h2 { margin: 0; }
  .careers__body p:not(.text-h4) { margin: var(--space-40) 0; }
}

@media (min-width: 901px) {
  .careers__layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .careers__photo { aspect-ratio: auto; min-height: 501px; }
  .careers__body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "heading subhead"
      "button  text";
    grid-template-rows: auto auto;          /* both rows sit at the bottom of the card */
    column-gap: var(--gutter);
    padding-bottom: var(--space-60);
  }
  .careers__body h2 { margin: 0; }
  .careers__body p:not(.text-h4) { margin: var(--space-40) 0 0; }
  .careers__body .button { align-self: end; }
}


/* ---------- Certifications ----------
   From the 3-column tablet up: the heading in the left half; the subhead,
   paragraph, and certification pills in the right half, 40px apart.
   Below that they stack: 40px below the heading, then 24px between the
   subhead, paragraph, and pills. */

.certifications { display: grid; gap: var(--space-40); }
.certifications__detail p:not(.text-h4) { margin: var(--space-24) 0; max-width: 440px; }   /* about 4 columns, as in the design */

@media (min-width: 811px) {
  .certifications { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
  .certifications__detail p:not(.text-h4) { margin: var(--space-40) 0; }
}


/* ---------- Call to action ----------
   A Sand band with a centered heading and button, 40px apart. */

.cta {
  display: grid; justify-items: center; gap: var(--space-40);
  text-align: center;
}