:root{
 
  --m-border: rgba(255,255,255,.65);
  --dash: rgba(255,255,255,.55);
}

/* ===== Section background like screenshot ===== */
.mission-section{
  background: var(--bg);   
  display:flex;
  align-items:center;
}
.mission-title{
  margin: 0;
  text-transform: uppercase; 
  color: var(--text);
}
.mission-underline{
  width: 160px;
  height: 4px;
 /* border-radius: 99px;
  background: rgba(255,255,255,.92);   เส้นขาวใต้หัวข้อ 
  margin: 12px auto 0;*/  
  margin: var(--mt-top-line) auto 0;
  border-radius: var(--radius-line);
  background: var(--bg-line-white);
}
 
.mission-panel{
  text-align: center;
  /*margin-bottom: clamp(18px, 5vw, 36px);*/
} 
/* ===== Grid wrapper ===== */
.mission-grid{
  display: grid;
  gap: 0; 
} 
.mission-item{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  grid-template-areas: "media text";
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
  /*padding: clamp(24px, 5vw, 44px) 0;*/
  padding: clamp(24px, 5vw, 44px) 0;   
  position: relative;
}
.mission-item + .mission-item::before{
  content:"";
  position: absolute;
  left: 0; 
  right: 0;
  top: 0;
  border-top: 2px dashed var(--dash);
  opacity: .9;
} 
.mission-img-card{
  grid-area: media;   
  overflow: hidden;
  background: var(--bg-white);  
  border: 4px solid var(--m-border);
 /* box-shadow: 0 14px 34px rgba(0,0,0,.10);*/
  width: 100%;
  max-width: 640px;
  justify-self: start;
  /*
  border-radius: 10px;
   background: rgba(255,255,255,.18);*/
}

.mission-img-card img{
  width: 100%;
  height: 100%;
  max-height: 360px;
  object-fit: cover;
  display: block;
}

/* ===== Text block ===== */
.mission-goal-card{
  grid-area: text;
  max-width: 520px;
  justify-self: end;
  text-align: left;                 /* ตามรูปจะอ่านซ้าย */
  padding-top: 0;
  color: var(--text);
} 
.mission-goal-line{
  margin: 0 0 16px;
  line-height: 1;
  letter-spacing: .05em;
  text-transform: uppercase;

  /* ให้เหมือนป้ายวงรี */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 12px 34px;
  border-radius: 999px;
  background: var(--bg-white);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
} 
.mission-goal-title,
.mission-goal-number{  
  font-size: clamp(18px, 2.5vw, 30px);
  color: var(--bg);
}
 
.mission-goal-subtitle{
  margin: 0 0 14px;
  font-weight: 700;
  font-size: clamp(18px, 1.8vw, 26px);
  /*
  font-size: clamp(18px, 2.1vw, 26px);*/
  line-height: 1.25;
  color: var(--text);
} 
.mission-goal-desc{
  margin: 0;
  color: var(--text);
  line-height: 1.7;
  text-align: justify;
	
}
/* ===== Alternate layout for even items (Goal 2: text left, image right) ===== */
@media (min-width: 861px){
  .mission-item:nth-child(even){
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    grid-template-areas: "text media";
  }

  .mission-item:nth-child(even) .mission-goal-card{
    justify-self: start;
  }

  .mission-item:nth-child(even) .mission-img-card{
    justify-self: end;
  }
}

/* ===== Mobile ===== */
@media (max-width: 860px){
  .mission-item{
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "text";
    padding: 26px 0;
  }

  .mission-img-card{
    max-width: 100%;
    justify-self: center;
  }

  .mission-goal-card{
    max-width: 100%;
    justify-self: center;
  }

  .mission-goal-line{
    width: 100%;
    justify-content: center;
  }
}