/* GENERAL STYLES CHANGES */

.text-body {
  color: var(--alti2Gray);
}

.hamburger-bar {
  background-color: var(--altiGray);
}

/* NAV Styles  */
.navbar {
  margin-bottom: 80px;
}
/* HERO Section styles  */

h1 {
  font-size: 2rem;
  line-height: 2.7rem;
  letter-spacing: 0.5px;
  padding-bottom: 160px;
}

.heronav-section {
  background-image: url(/image/oportunidades/m-bg-oportunidades.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  min-height: 200px;
  width: 100%;
}
.page-hero {
  font-family: rajdhani;
  color: white;
}

@media (min-width: 769px) {
  .heronav-section {
    background-image: url(/image/oportunidades/bg-oportunidades.png);
  }

  h1 {
    max-width: 900px;
    font-family: rajdhani;
    font-size: 3rem;
    line-height: 4rem;
    letter-spacing: 1px;
  }
}

/* SEARCH SECTION */

.search-section {
  background: url(/image/topographic-pattern2.svg) #f5f5f5;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--altiGreen);
  padding-top: 48px;
  padding-bottom: 48px;
}

.search-section h2 {
  text-align: center;
}

.search-wrapper {
  display: flex;
  flex-direction: column;
  padding-top: 40px;
}

.search-wrapper label {
  font-family: grotesk;
}

.search-wrapper input {
  border: 1px solid var(--altiGray);
  background-color: white;
  height: 48px;
}

#search {
  padding-left: 16px;
}

::placeholder {
  color: var(--alti2Gray);
}

/*SEARCH SECTION media query mods for desktop*/
@media (min-width: 769px) {
  .search-section {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .search-wrapper {
    padding: 0;
  }

  .search-wrapper input {
    min-width: 600px;
  }
}

/* CARDS SECTION Styles  */

.section-title {
  color: var(--altiGreen);
  text-align: center;
  padding-top: 96px;
  padding-bottom: 56px;
}

#job-list {
  display: flex;
  flex-direction: column;
  margin: auto;
  gap: 48px;
  padding-bottom: 80px;
}

.card {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  border: 2px solid var(--altiGray);
  padding: 24px 16px;
  font-family: grotesk;
  overflow: visible;
}

.header {
  font-size: 24px;
  font-weight: bold;
  line-height: 32px;
  color: white;
}

.job-info {
  color: white;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  max-height: 60px;
}

.terciary-button {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.card hr {
  border: 1px solid var(--alti2Gray);
  background-color: var(--alti2Gray);
}

/* CORNER RIBBON*/

.corner-ribbon {
  position: absolute;
  top: -3px;
  left: -3px;
  height: 7em;
  width: 7em;
  padding: 8px;
}

.cr-inner {
  position: absolute;
  inset: 0;
  background: var(--altiYellow);
  color: white;
  border-radius: 4px 8px 0 8px;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.cr-text {
  display: block;
  font-weight: bold;
  font-size: 0.8em;
  line-height: 1.3;
  text-align: center;
  transform: rotate(-45deg) translateY(0.05em) translateX(-2.25em);
}

.corner-ribbon::before,
.corner-ribbon::after {
  content: "";
  position: absolute;
  background: var(--altiYellow);
  z-index: -1;
}

.corner-ribbon::before {
  top: calc(100% - 8px);
  left: 0;
  height: 8px;
  width: 3px;
  border-radius: 0 0 0 50%;
}

.corner-ribbon::after {
  left: calc(100% - 8px);
  top: 0;
  width: 8px;
  height: 3px;
  border-radius: 0 50% 0 0;
}

.tags {
  font-family: grotesk;
  font-size: bold;
  color: white;
}

.hide {
  display: none;
}

@media (min-width: 769px) {
  #job-list {
    width: 75%;
  }
}

/* PERSONALIZED DETAILS - CARDS */

.mantenimiento-planta {
  background: url(/image/oportunidades/matenimiento-planta/card-bg-mantenimiento-planta.png) white;
  background-size: cover;
}

.gerente-operaciones-minasub {
  background: url(/image/oportunidades/gerente-operaciones-mineriasub/card-gerente-operaciones-sub-min.png) white;
  background-size: cover;
}

.geotechnical-lead {
  background: url(/image/oportunidades/senior-geotechnical/card-senior-geotechnical-lead-min.png);
  background-size: cover;
}

.gerente-relaciones-comunitarias-sur {
  background: url(/image/oportunidades/gerente-operaciones-comunitarias/card-gerente-operaciones-comunitarias-sur.png);
  background-size: cover;
}

.gerente-exploraciones {
  background: url(/image/oportunidades/gerente-exploraciones/card-gerente-exploraciones.png);
  background-size: cover;
}

.project-evaluations {
  background: url(/image/oportunidades/gerente-proyectos-evaluacion/card-gerente-proyectos-evaluacion.png);
  background-size: cover;
}

.superintendente-mina-operacion-subterranea {
  background: url(/image/oportunidades/superintendente-mina-operacion-subterranea/card-superintendente-mina-subterreanea.png);
  background-size: cover;
}

.superintendente-logistica {
  background: url(/image/oportunidades/superintendente-logistica/card-superintendente-logistica.png);
  background-size: cover;
}

.senior-civil-structural-design-engineer {
  background: url(/image/oportunidades/senior-civil-structural-design-engineer/senior-civilstructural-design-engineer.png);
  background-size: cover;
}
.lead-designer-mechanical-plant-design {
  background: url(/image/oportunidades/lead-designer-mechanical-plant-design/card-lead-designer-mechanical-plant-design.png);
  background-size: cover;
}
.senior-design-draftsperson-metallurgy {
  background: url(/image/oportunidades/senior-design-draftsperson-metallurgy/card-senior-design-draftperson-met.png);
  background-size: cover;
}
.gerente-comercial-mineria {
  background: url(/image/oportunidades/gerente-comercial-mineria/card-gerente-comercial-mineria.png);
  background-size: cover;
}
.gerente-servicio-tecnico {
  background: url(/image/oportunidades/gerente-servicio-tecnico/card-gerente-servicio-tecnico.png);
  background-size: cover;
}
.geologo-principal {
  background: url(/image/oportunidades/geologo-principal/card-geologo-principal.png);
  background-size: cover;
}
.superintendente-asuntos-ambientales {
  background: url(/image/oportunidades/superintendente-asuntos-ambientales/card-superintendente-asuntos-ambientales.png);
  background-size: cover;
}
/* APPLY MEETING SECTION Styles */

.apply-meeting-section {
  background-image: url(/image/topographic-pattern2.svg);
  background-color: var(--alti2Green);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding-top: 80px;
  padding-bottom: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: right;
  gap: 24px;
}

.apply-meeting-section h2 {
  color: white;
  padding-bottom: 16px;
}

.apply-meeting-section .primary {
  background-color: white;
  color: var(--altiYellow);
}

@media (min-width: 769px) {
  .apply-meeting-section {
    justify-content: space-around;
    flex-direction: row;
    align-items: center;
    gap: 0;
  }

  .apply-meeting-section h2 {
    max-width: 65%;
    padding-bottom: 0;
  }
}