/* custom-about.css — Modern About Page */
/* ===== About: single row modern card (self-contained) ===== */
@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&display=swap");

:root{
  --abt-g1:#fff0f4; --abt-g2:#ffe2ea;     /* gradient อ่อน */
  --abt-border:#e5e7eb; --abt-text:#0b1220; --abt-muted:#6b7280;
  --abt-brand:#EC5A87; --abt-brand-2:#d84a77;
  --abt-shadow:0 16px 48px rgba(124,10,61,.08), 0 1px 0 rgba(0,0,0,.02);
}

.abt-root{ font-family:"Kanit",system-ui,"Noto Sans Thai",sans-serif; color:var(--abt-text); }
.abt-card{
  background:#fff; border:1px solid var(--abt-border); border-radius:18px;
  box-shadow:var(--abt-shadow); overflow:hidden;
}

/* HERO */
.abt-hero{
  background:linear-gradient(135deg,var(--abt-g1),var(--abt-g2));
  border-bottom:1px solid var(--abt-border);
  padding:22px 24px;
}
.abt-title{ margin:0; font-size:1.9rem; font-weight:700; letter-spacing:.2px; }
.abt-sub{ margin:6px 0 0; font-size:1.08rem; color:var(--abt-muted); font-weight:500; }

/* BODY */
.abt-body{ padding:22px 24px; }
.abt-body p{ margin:0 0 14px; font-size:1.05rem; line-height:1.8; }
.abt-body em, .abt-body small{ color:var(--abt-muted); }

/* SECTION (เช่น ข้อมูลติดต่อ) */
.abt-section{ margin:0 24px 22px; border:1px dashed #ffc7d5; border-radius:14px; }
.abt-section-head{
  background:linear-gradient(135deg,var(--abt-brand),var(--abt-brand-2));
  color:#fff; padding:12px 16px; font-weight:700; border-radius:14px 14px 0 0;
}

/* CONTACT: two-column grid + responsive */
.abt-section-grid{
  display:grid;
  grid-template-columns: 1fr 1.2fr;  /* ซ้ายแคบ/ขวากว้างขึ้นเล็กน้อย */
  gap:16px;
  padding:14px 16px;
}
.abt-section-body address{ margin:0 0 8px; line-height:1.6; }
.abt-section-body .info{ font-weight:600; color:var(--abt-muted); }

/* MAP (responsive 16:9) */
.abt-map{
  position:relative; width:100%; padding-bottom:56.25%;
  background:#f8f9fa; border-radius:12px; overflow:hidden;
  box-shadow:0 2px 14px rgba(0,0,0,.05);
}
.abt-map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.abt-map__link{ margin:6px 0 0; }

/* มือถือ: ซ้อนเป็นคอลัมน์เดียว */
@media (max-width: 767px){
  .abt-section-grid{ grid-template-columns: 1fr; }
}