/* Dharti Group — careers + channel partners
   Both pages are the contact page's layout (contact.css: the head, the side
   column of .ct-block, the two-column .ct-form grid). This adds what that
   page does not have: each head's image, a list for the side column, a title
   over the form, and the CV file field.
   ============================================================ */

/* ---------- page heads ----------
   Generated for these two pages in round 3. Both keep their people on the
   right third, clear of the headline. */
.ap-head--careers{
  --bg:url("../assets/stock/careers-head.jpg");
  --bg:image-set(url("../assets/stock/careers-head.webp") type("image/webp"),
                 url("../assets/stock/careers-head.jpg")  type("image/jpeg"));
  --bg-pos:center 45%;
  --bg-op:.55;
}
.ap-head--partners{
  --bg:url("../assets/stock/partners-head.jpg");
  --bg:image-set(url("../assets/stock/partners-head.webp") type("image/webp"),
                 url("../assets/stock/partners-head.jpg")  type("image/jpeg"));
  --bg-pos:center 50%;
  --bg-op:.55;
}

/* a picture at the top of the side column */
.ap-photo{ margin-bottom:2rem; }

/* ---------- side column ---------- */
.ap-text{ color:var(--bone-dim); font-size:.9rem; line-height:1.75; }
.ap-text a{ color:var(--gold-2); border-bottom:1px solid rgba(198,161,91,.4); transition:color .3s; }
.ap-text a:hover{ color:var(--gold); }

.ap-list{ list-style:none; display:flex; flex-direction:column; gap:1.1rem; }
.ap-list li{
  position:relative; padding-left:1.4rem;
  color:var(--bone-dim); font-size:.88rem; line-height:1.7;
}
.ap-list li::before{
  content:""; position:absolute; left:0; top:.62em; width:.65rem; height:1px; background:var(--gold);
}
.ap-list strong{ display:block; margin-bottom:.15rem; font-weight:500; font-size:.95rem; color:var(--bone); }

/* ---------- over the form ---------- */
.ap-form-title{
  font-weight:500; font-size:clamp(1.35rem,2.4vw,1.75rem); line-height:1.2;
  letter-spacing:-.02em; color:var(--bone);
}
.ap-form-lede{ margin:.5rem 0 1.8rem; color:var(--bone-dim); font-size:.9rem; line-height:1.7; }

/* "(optional)" beside a label, in the label's own type but quieter */
.ap-opt{ letter-spacing:.12em; color:rgba(123,133,152,.75); text-transform:none; }

/* GSTIN and the MahaRERA number are codes; show them the way they are printed */
.ap-upper{ text-transform:uppercase; }
.ap-upper::placeholder{ text-transform:none; }

/* links in the small print under the button */
.ct-form__note a{ color:var(--bone-dim); border-bottom:1px solid var(--line); transition:color .3s, border-color .3s; }
.ct-form__note a:hover{ color:var(--gold-2); border-bottom-color:var(--gold); }

/* ---------- CV file field ----------
   The real input is stretched over the whole box and made transparent, so a
   click anywhere opens the picker and a file can be dropped straight onto it.
   Focus is shown on the box, since the input itself cannot be seen. */
.ap-file{
  position:relative; display:flex; align-items:center; flex-wrap:wrap; gap:.8rem 1.1rem;
  padding:1.1rem 1rem; border:1px dashed rgba(198,161,91,.45); border-radius:2px;
  background:rgba(6,13,28,.5); cursor:pointer;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.ap-file input{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; cursor:pointer;
}
.ap-file:hover{ border-color:var(--gold); background:rgba(6,13,28,.7); }
.ap-file:focus-within{ border-style:solid; border-color:var(--gold); outline:1px solid var(--gold); outline-offset:2px; }
.ap-file__btn{
  flex:none; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--bone);
  padding:.6rem 1rem; border:1px solid var(--line); border-radius:2px;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.ap-file:hover .ap-file__btn{ border-color:var(--gold); color:var(--gold-2); }
.ap-file__name{ min-width:0; font-size:.85rem; color:var(--muted); overflow-wrap:anywhere; }
.ap-file[data-state="ok"] .ap-file__name{ color:var(--bone); }
.ap-file[data-state="error"]{ border-color:#b4643f; }
.ap-file[data-state="error"] .ap-file__name{ color:#e9a98f; }