/* ==========================================================================
   ABOUT US / OUR STORY  —  ใช้เฉพาะหน้า /about/
   อ้างอิงตัวแปรสีจาก style.css ทั้งหมด (ไม่ประกาศชุดสีใหม่)
   ทุก selector ขึ้นต้นด้วย .ab- เพื่อไม่ให้กระทบหน้าอื่น
   ========================================================================== */

/* ------------------------------------------------------------- ส่วนหัวเพจ */
.ab-hero {
  position: relative;
  padding: 140px 0 3.5rem;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-dark);
  overflow: hidden;
}

.ab-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/images/hero-banner-tns.webp') center / cover no-repeat;
  opacity: 0.14;
}

.ab-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--bg-main) 8%, rgba(7, 9, 8, 0.55) 55%, rgba(7, 9, 8, 0.15));
}

.ab-hero .container { position: relative; z-index: 1; }

.ab-hero-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2.5rem;
}

.ab-title {
  font-size: clamp(2.4rem, 6vw, 3.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
}

.ab-company {
  margin-top: 0.7rem;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--green-primary);
}

.ab-lead {
  margin-top: 1.1rem;
  max-width: 58ch;
  color: var(--text-muted);
  line-height: 1.85;
}

.ab-hero-logo {
  width: 168px;
  height: 168px;
  border-radius: 50%;
  object-fit: contain;
  padding: 0.6rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-gold);
}

/* -------------------------------------------------------- แบรนด์พันธมิตร */
/* แถบแบรนด์พันธมิตร — แบ่ง 7 ช่องเท่ากัน โลโก้จัดกึ่งกลางทุกช่อง
   ระยะห่างและเส้นคั่นจึงเท่ากันเป๊ะ ไม่ขึ้นกับความกว้างของโลโก้แต่ละอัน */
.ab-partners {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  max-width: 1180px;
  margin: 2.5rem auto 0;
  padding: 1.25rem 0.5rem;
  background: #000;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-md);
}

/* แถวโลโก้สูงคงที่ ป้ายกำกับข้างล่างจะได้อยู่ระดับเดียวกันทุกช่อง
   ไม่ว่าโลโก้แต่ละอันจะสูงไม่เท่ากัน */
.ab-partner-cell {
  display: grid;
  grid-template-rows: 60px auto;
  align-items: end;
  justify-items: center;
  align-content: start;
  gap: 0.6rem;
  padding: 0.25rem 0.75rem;
}

.ab-partner-cell + .ab-partner-cell { border-left: 1px solid var(--border-dark); }

.ab-partner-cell span {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
}

.ab-partner {
  max-height: 44px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

/* โลโก้ที่มีไอคอน+ตัวอักษรซ้อนกันเป็นบล็อก ให้สูงกว่าตัวหนังสือเดี่ยว
   ขนาดที่ตาเห็นจะได้ใกล้เคียงกันทุกช่อง */
.ab-partner.is-stack { max-height: 60px; }

.ab-partner.is-round {
  width: 60px;
  height: 60px;
  max-height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

/* โลโก้ที่มาเป็นภาพสี่เหลี่ยมเต็มพื้นหลัง (เช่น RPM) ทำเป็นแผ่นป้ายมุมมน
   ขนาดเท่าโลโก้วงกลม จะได้ดูเป็นชุดเดียวกันทั้งแถบ */
.ab-partner.is-tile {
  width: 60px;
  height: 60px;
  max-height: 60px;
  border-radius: 10px;
  object-fit: cover;
}

/* --------------------------------------------------------------- ไทม์ไลน์ */
.ab-timeline-section { padding: 4.5rem 0; background: var(--bg-main); }

.ab-timeline {
  position: relative;
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
}

.ab-timeline::before {
  content: '';
  position: absolute;
  left: 51px;
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: linear-gradient(180deg, var(--green-primary), var(--gold-primary) 55%, transparent);
  opacity: 0.5;
}

.ab-item {
  position: relative;
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 1.75rem;
  padding-bottom: 2.25rem;
}

.ab-when {
  position: relative;
  z-index: 1;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #06120c;
  background: var(--green-gradient);
  box-shadow: var(--shadow-green);
}

.ab-when small {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
}

.ab-when strong {
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.05;
}

.ab-item.is-gold .ab-when {
  background: var(--gold-gradient);
  box-shadow: var(--shadow-gold);
  color: #140d00;
}

.ab-card {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.ab-card:hover {
  border-color: var(--border-green);
  box-shadow: var(--shadow-sm);
}

.ab-item.is-gold .ab-card:hover { border-color: var(--border-gold); }

.ab-card-body { padding: 1.7rem 1.85rem; }

.ab-card-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--green-bright);
}

.ab-item.is-gold .ab-card-title { color: var(--gold-light); }

.ab-card-en {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ab-card-date {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.15rem 0.7rem;
  font-size: 0.8rem;
  color: var(--text-gold);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-full);
}

.ab-card-body p {
  margin-top: 0.9rem;
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--text-muted);
}

.ab-feats {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem 1.1rem;
}

.ab-feats li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.87rem;
  color: var(--text-main);
}

.ab-feats i {
  margin-top: 0.2rem;
  font-size: 0.78rem;
  color: var(--green-primary);
}

.ab-item.is-gold .ab-feats i { color: var(--gold-primary); }

.ab-card-photo {
  position: relative;
  min-height: 230px;
  background: #000;
}

/* วางรูปแบบ absolute เพื่อไม่ให้สัดส่วนรูปไปดันความสูงการ์ด
   ความสูงการ์ดจะถูกกำหนดโดยเนื้อหาฝั่งตัวหนังสือแทน */
.ab-card-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ไล่เฉดจากฝั่งตัวหนังสือเข้าหารูป ให้รอยต่อเนียน */
/* ใช้หน่วย px คงที่ (ไม่ใช่ %) เพื่อให้ช่วงไล่เฉดยาวเท่ากันทุกการ์ด
   แม้ความกว้างช่องรูปจะต่างกัน */
.ab-card-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--bg-card), rgba(21, 27, 24, 0) 150px);
}

/* รูปหน้าร้าน (สัดส่วน 1.10) — ยึดขอบบนไว้ ป้ายชื่อร้านจะได้ไม่โดนครอป */
.ab-card-photo.is-top img { object-position: center top; }

/* การ์ดที่รูปเป็นแนวนอนจัด (16:9) — ขยายช่องรูปให้กว้างขึ้น
   สัดส่วนช่องจะได้ใกล้สัดส่วนรูป ครอปน้อยลง ตัวหนังสือในรูปจึงไม่โดนตัด */
.ab-card.is-wide-photo { grid-template-columns: 1fr 1fr; }

/* ------------------------------------------------------------ กล่อง TODAY */
.ab-today {
  padding: 2.25rem 2rem;
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.07), rgba(0, 0, 0, 0));
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
}

.ab-today-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--border-dark);
}

.ab-today-head h2 {
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1;
}

.ab-today-head p {
  flex: 1 1 340px;
  padding-left: 1.35rem;
  border-left: 1px solid var(--border-dark);
  font-size: 0.97rem;
  line-height: 1.8;
  color: var(--text-muted);
}

.ab-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
  margin-top: 1.75rem;
}

.ab-pillar { text-align: center; }

.ab-pillar i {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 0.85rem;
  font-size: 1.4rem;
  color: var(--gold-primary);
  border: 1px solid var(--border-gold);
  border-radius: 50%;
}

.ab-pillar h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-gold);
}

.ab-pillar p {
  margin-top: 0.45rem;
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--text-muted);
}

/* -------------------------------------------- แถบแบรนด์ที่เรามีจำหน่าย */
.ab-brands {
  padding: 2.5rem 0 3.5rem;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-dark);
  text-align: center;
}

/* ทำเป็นป้ายกรอบทองแบบเดียวกับ .badge-gold เขียนไว้ที่นี่เลย
   เพราะ about.css โหลดทีหลัง style.css ถ้าใส่คลาส badge ซ้อน สีจะโดนกฎนี้ทับ */
.ab-brands-label {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 1.15rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-light);
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-full);
}

/* ใช้กริดคอลัมน์ตายตัวแทน flex-wrap เพราะจำนวนโลโก้เกินหนึ่งแถวแล้ว
   ถ้าปล่อยให้ตัดบรรทัดเอง เส้นคั่นจะไปค้างอยู่ท้าย/ต้นบรรทัด */
.ab-brands-row {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  align-items: center;
  max-width: 1020px;
  margin: 2.25rem auto 0;
  row-gap: 1.5rem;
}

/* โลโก้ทุกอันถูกจัดลงกรอบมาตรฐาน 420x140 (พื้นหลังโปร่งใส) มาแล้ว
   ให้ภาพกินเต็มช่องแล้ว contain เอา โลโก้จึงสูงเท่ากันและอยู่กึ่งกลางช่องเป๊ะ
   เส้นคั่นวางเป็น border ของช่อง จะได้ตรงขอบคอลัมน์เสมอ */
.ab-brands-row img {
  width: 100%;
  min-width: 0;
  height: 42px;
  object-fit: contain;
  opacity: 0.92;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

/* กริดซอยเป็น 10 คอลัมน์ โลโก้กินอันละ 2 คอลัมน์ = แถวละ 5 อัน
   ทำแบบนี้เพื่อให้เลื่อนแถวสุดท้ายไปครึ่งคอลัมน์ได้ ปัจจุบันมีโลโก้ 9 อัน
   แถวล่างเหลือ 4 อัน จึงดันให้เริ่มที่คอลัมน์ 2 (กิน 2-9) แถวล่างจะอยู่กึ่งกลางพอดี
   ถ้าเพิ่ม/ลดโลโก้ ต้องแก้เลขคอลัมน์เริ่มต้นของ :nth-child(6) ตามด้วย */
.ab-brands-row img { grid-column: span 2; }
.ab-brands-row img:nth-child(6) { grid-column: 2 / span 2; }

/* เส้นคั่นระหว่างโลโก้ — สไตล์เดียวกับแถบแบรนด์พันธมิตรด้านบน */
.ab-brands-row img + img { border-left: 1px solid var(--border-dark); }
.ab-brands-row img:nth-child(5n+1) { border-left: none; }

.ab-brands-row img:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.ab-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
}

/* ------------------------------------------------------------ Responsive */

/* 7 ช่องเรียงแถวเดียวจะแคบเกินไปบนจอกลาง ตัดเป็น 4 ช่องต่อแถว
   ซอยกริดเป็น 8 คอลัมน์ ช่องละ 2 คอลัมน์ เพื่อให้เลื่อนแถวสุดท้ายทีละครึ่งช่องได้
   ไม่ใส่ gap เพราะเส้นคั่นเป็น border ของช่อง ถ้ามีช่องว่างคั่น เส้นตั้งกับเส้นนอนจะไม่บรรจบกัน */
@media (max-width: 1100px) and (min-width: 901px) {
  .ab-partners { grid-template-columns: repeat(8, 1fr); padding: 0.35rem 0.5rem; }
  .ab-partner-cell { grid-column: span 2; padding: 1.1rem 0.75rem; }
  .ab-partner-cell:nth-child(4n+1) { border-left: none; }
  /* เส้นคั่นแถววาดเป็น border-bottom ของแถวบน (ช่อง 1-4 กินครบ 8 คอลัมน์) ไม่ใช่ border-top ของแถวล่าง
     เพราะแถวล่างถูกเลื่อนไปกึ่งกลาง ถ้าวาดจากแถวล่างเส้นจะขาดไม่เต็มความกว้าง */
  .ab-partner-cell:nth-child(-n+4) { border-bottom: 1px solid var(--border-dark); }
  /* แถวล่างเหลือ 3 ช่อง ดันให้เริ่มที่คอลัมน์ 2 (กิน 2-7) จะอยู่กึ่งกลางพอดี */
  .ab-partner-cell:nth-child(5) { grid-column: 2 / span 2; }
}

@media (max-width: 900px) {
  .ab-hero { padding: 120px 0 2.5rem; }
  .ab-hero-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .ab-hero-logo { width: 112px; height: 112px; }

  /* ไม่ใส่ gap เพราะเส้นคั่นเป็น border ของช่อง ถ้ามีช่องว่างคั่น เส้นตั้งกับเส้นนอนจะไม่บรรจบกัน
     ระยะห่างระหว่างแถวใช้ padding ในช่องแทน เส้นคั่นจะได้อยู่กึ่งกลางระหว่างแถวพอดี */
  .ab-partners { grid-template-columns: repeat(2, 1fr); padding: 0.35rem 0.5rem; }
  .ab-partner-cell { padding: 1.1rem 0.75rem; }
  .ab-partner-cell:nth-child(odd) { border-left: none; }
  .ab-partner-cell:nth-child(n+3) { border-top: 1px solid var(--border-dark); }
  /* ช่องแคบ ป้าย "OFFICIAL DISTRIBUTOR" จะตกบรรทัดเป็นสองแถว ส่วนป้ายสั้นๆ อยู่แถวเดียว
     กันไว้สองบรรทัดเท่ากันทุกช่อง ความสูงแต่ละแถวจะเท่ากันและเส้นคั่นเรียงเป็นตารางสวยๆ */
  .ab-partner-cell span { min-height: 2.4em; }

  /* จำนวนช่องเป็นเลขคี่ ช่องสุดท้ายจะเหลือเดี่ยว ให้กินเต็มแถวไปเลย
     โลโก้จะอยู่กึ่งกลางและเส้นคั่นด้านบนลากเต็มความกว้าง ไม่ขาดครึ่งเดียว */
  .ab-partner-cell:last-child:nth-child(odd) { grid-column: 1 / -1; }

  .ab-timeline::before { display: none; }

  .ab-item {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .ab-when {
    flex-direction: row;
    align-items: baseline;
    gap: 0.6rem;
    width: auto;
    height: auto;
    padding: 0.5rem 1.15rem;
    border-radius: var(--radius-full);
    justify-self: start;
  }

  .ab-when strong { font-size: 1.2rem; }

  .ab-card,
  .ab-card.is-wide-photo { grid-template-columns: 1fr; }
  .ab-card-photo { min-height: 200px; order: -1; }
  .ab-card-photo::after {
    background: linear-gradient(0deg, var(--bg-card), rgba(21, 27, 24, 0) 110px);
  }

  .ab-pillars { grid-template-columns: repeat(2, 1fr); }
  .ab-today-head p { padding-left: 0; border-left: none; }
}

@media (max-width: 560px) {
  .ab-feats { grid-template-columns: 1fr; }
  .ab-pillars { grid-template-columns: 1fr; }
  .ab-card-body { padding: 1.35rem 1.25rem; }
  .ab-today { padding: 1.5rem 1.25rem; }
  /* จอเล็กเหลือแถวละ 3 อัน (9 อันลงตัวพอดี 3 แถว) ไม่ต้องเลื่อนแถวสุดท้าย */
  .ab-brands-row { grid-template-columns: repeat(6, 1fr); row-gap: 1.25rem; }
  .ab-brands-row img:nth-child(6) { grid-column: span 2; }
  .ab-brands-row img:nth-child(5n+1) { border-left: 1px solid var(--border-dark); }
  .ab-brands-row img:nth-child(3n+1) { border-left: none; }
}