/* หน้ารวมฝากขาย/เช่า (consign.php · rh_consign_list.php · 2026-10-25) · คลาสขึ้นต้น rcl- · สีตามแบรนด์ (กรม/น้ำเงิน/ขาว) · การ์ดคลิกได้ทั้งใบ (ลิงก์ชื่อขยายคลุมการ์ด) */
.rcl { --c-navy:#0E1E3D; --c-navy2:#1B2E57; --c-blue1:var(--color-navy-deep, #0A1630); --c-blue2:var(--color-navy, #0E1E3D); --c-muted:#4A5470; --c-border:#E3E6EE; --c-alt:#F4F5F8;
	display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:24px; margin:4px 0 32px; font-family:'Sarabun',sans-serif; color:var(--c-navy); }
.rcl *, .rcl *::before, .rcl *::after { box-sizing:border-box; }
.rcl-card { position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--c-border); border-radius:18px; overflow:hidden; box-shadow:0 1px 3px rgba(14,30,61,.06); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.rcl-card:hover { transform:translateY(-4px); box-shadow:0 10px 26px rgba(14,30,61,.14); border-color:var(--color-border-strong, #C9CFDC); }
.rcl-top { position:relative; overflow:hidden; flex:none; display:grid; place-items:center; height:132px; background:radial-gradient(circle at 88% 12%, rgba(255,255,255,.14) 0 24%, transparent 24.5%), radial-gradient(circle at 18% 120%, rgba(255,255,255,.09) 0 22%, transparent 22.5%), linear-gradient(130deg, var(--c-navy), var(--c-navy2)); }
.rcl-rent .rcl-top { background:radial-gradient(circle at 88% 12%, rgba(255,255,255,.16) 0 24%, transparent 24.5%), radial-gradient(circle at 18% 120%, rgba(255,255,255,.10) 0 22%, transparent 22.5%), linear-gradient(130deg, var(--c-blue1), var(--c-blue2)); }
.rcl-top svg { width:58px; height:58px; fill:none; stroke:#fff; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.rcl-body { flex:1; display:flex; flex-direction:column; gap:8px; padding:18px 20px 22px; }
.rcl .rcl-a { color:var(--c-navy); font-size:19px; line-height:1.35; font-weight:700; text-decoration:none; padding-right:44px; }
.rcl .rcl-a::after { content:""; position:absolute; inset:0; }   /* ลิงก์ชื่อขยายคลุมทั้งการ์ด (การ์ดเป็นตำแหน่งอ้างอิง) = คลิกตรงไหนก็เข้า */
.rcl .rcl-a:hover, .rcl .rcl-a:focus { color:var(--c-navy); text-decoration:none; }
.rcl-card:focus-within { outline:3px solid var(--color-border-strong, #C9CFDC); outline-offset:2px; }
.rcl-d { margin:0; color:var(--c-muted); font-size:15px; line-height:1.6; display:-webkit-box; -webkit-line-clamp:4; line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }   /* ข้อความอยู่ครบใน HTML · ตัดแค่การแสดงผล 4 บรรทัด */
.rcl-go { position:absolute; right:18px; top:148px; width:34px; height:34px; border-radius:50%; background:var(--c-alt); display:grid; place-items:center; font-style:normal; transition:background .18s ease; }
.rcl-go::before { content:"\2192"; content:"\2192" / ""; color:var(--c-navy); font-size:17px; line-height:1; }
.rcl-card:hover .rcl-go { background:var(--c-navy); } .rcl-card:hover .rcl-go::before { color:#fff; }
@media (max-width:991px) { .rcl { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px; } }
@media (max-width:767px) {
	.rcl { grid-template-columns:minmax(0, 1fr); gap:12px; margin-bottom:24px; }
	.rcl-card { flex-direction:row; border-radius:16px; }
	.rcl-top { width:84px; height:auto; min-height:112px; }
	.rcl-top svg { width:40px; height:40px; }
	.rcl-body { padding:14px 14px 16px; gap:6px; }
	.rcl .rcl-a { font-size:17px; padding-right:40px; }
	.rcl-d { font-size:14.5px; -webkit-line-clamp:3; line-clamp:3; }
	.rcl-go { right:12px; top:12px; width:30px; height:30px; }
}
@media (prefers-reduced-motion: reduce) { .rcl-card, .rcl-go { transition:none; } .rcl-card:hover { transform:none; } }