/* contact.css — หน้าติดต่อสหกรณ์ (contact.php) — ใช้คู่กับ detail.css + page.css (ตัวแปรสีชุดเดียวกับ site.css) */

.ct-org { margin: 4px 0 0; color: var(--muted); font-size: 1rem; }

/* การ์ดข้อมูลติดต่อ */
.ct-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0 0 28px; }
.ct-card { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--sky); }
.ct-card.ct-address { grid-column: 1 / -1; }
.ct-card .ico { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--blue); color: #fff; }
.ct-card .tx { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ct-card small { color: var(--muted); font-size: .8rem; line-height: 1.3; }
.ct-card b, .ct-card .v { font-weight: 600; color: var(--ink); line-height: 1.55; overflow-wrap: anywhere; }
.ct-card a.v { color: var(--blue); }
.ct-card a.v:hover { color: var(--navy); }

/* แผนที่ (อัตราส่วนคงที่ — ไม่ดัน layout ตอนโหลด) */
.ct-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 280px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--sky); }
.ct-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ct-route { margin: 14px 0 0; }

/* ช่องทางออนไลน์ (แถบข้าง) */
.ct-online { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ct-online a { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--sky); color: var(--navy); font-weight: 600; font-size: .95rem; line-height: 1.35; transition: transform .2s, box-shadow .2s, border-color .2s, background .2s; }
.ct-online a:hover { text-decoration: none; background: #fff; border-color: var(--blue-2); box-shadow: var(--shadow); transform: translateY(-2px); }
.ct-online .ico { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--blue); color: #fff; }
.ct-online .tx { flex: 1; min-width: 0; }
.ct-online > li > a > .ic:last-child { flex: none; color: var(--blue-2); }

@media (max-width: 680px) {
  .ct-cards { grid-template-columns: 1fr; }
  .ct-frame { aspect-ratio: 4 / 3; min-height: 240px; }
}
@media print {
  .ct-frame, .ct-route, .ct-online { display: none; }
  .ct-card { break-inside: avoid; background: none; }
}