/* layout.css — container และระยะห่างของ section (DESIGN.md ข้อ 4)
 * breakpoint: sm 640px / md 768px / lg 1024px
 */

/* ระยะขอบซ้าย-ขวา: 1.25rem → sm 2rem → md 2.5rem */
/* --container-pad = ระยะขอบซ้ายขวาของกล่องเนื้อหา — ไอคอนประดับ About ใช้ค่าเดียวกันเพื่ออ้างขอบกล่องเนื้อหา */
.container {
  --container-pad: var(--space-2);
  padding-inline: var(--container-pad);
}

/* ระยะบน-ล่าง: 5rem → sm 6rem → md 8rem */
.section {
  padding-block: 5rem;
}

@media (min-width: 640px) {
  .container {
    --container-pad: var(--space-3);
  }

  .section {
    padding-block: var(--space-6);
  }
}

@media (min-width: 768px) {
  /* ความกว้างสูงสุด 90rem (1440px) จัดกึ่งกลาง — ทำด้วยระยะขอบที่เพิ่มขึ้นเอง ไม่ใช่ max-width
     เพราะ .container อยู่ที่ตัว section: ถ้าใช้ max-width พื้นขาวของ Services และเส้นคั่น Footer จะหดตาม
     (100% - 90rem) / 2 = ส่วนที่เกิน 1440px แบ่งซ้ายขวา + ระยะขอบเดิม 2.5rem → เนื้อหาไม่กว้างเกิน 1440px รวมระยะขอบ */
  .container {
    --container-pad: max(var(--space-4), calc((100% - 90rem) / 2 + var(--space-4)));
  }

  .section {
    padding-block: var(--space-7);
  }
}