/* =====================================================================
   WE PRACHAR — CONTACT PAGE STYLES
   ways to reach us · office + map · quick FAQ · responsive
   ===================================================================== */
/* ---------- Ways to reach us: aligned cards ---------- */
.cways__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: stretch; }

.cway {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  min-height: 210px; padding: 24px; border-radius: var(--r-lg);
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
  transition: border-color .3s, box-shadow .3s;
}
.cway:hover { border-color: var(--accent); box-shadow: var(--shadow-lg); }

/* icon stays top-left, text block always sits at the bottom so all 4 cards line up */
.cway__ic { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: auto; transition: background .3s, color .3s; }
.cway:hover .cway__ic { background: var(--accent); color: #fff; }
.cway__ic .ic { width: 22px; height: 22px; }

.cway__t { margin-top: 18px; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.cway__v { font: 600 .98rem/1.3 var(--f-display); letter-spacing: -.02em; overflow-wrap: anywhere; }   /* email no longer breaks as "co / m" */
.cway__x { font-size: 13.5px; color: var(--muted); }

.cway__go { position: absolute; right: 18px; top: 18px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; transition: transform .4s var(--ease), background .3s, color .3s; }
.cway__go .ic { width: 15px; height: 15px; }
.cway:hover .cway__go { transform: rotate(45deg); background: var(--ink); color: #fff; border-color: var(--ink); }

/* the entrance animation left the cards rotated — keep them straight (hover lift instead of tilt) */
.cways__grid .cway { transform: none !important; }
@media (hover: hover) { .cways__grid .cway:hover { transform: translateY(-5px) !important; transition: transform .4s var(--ease), border-color .3s, box-shadow .3s; } }

.visit__grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 14px; }
.visit__info { display: grid; gap: 16px; align-content: start; justify-items: start; padding: clamp(24px, 4vw, 44px); border-radius: var(--r-xl); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.visit__addr { font-style: normal; color: var(--muted); line-height: 1.7; }
.visit__addr b { color: var(--ink); }
.visit__dl { display: grid; width: 100%; margin: 0; }
.visit__dl div { display: grid; grid-template-columns: 100px 1fr; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.visit__dl dt { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 13.5px; font-weight: 700; }
.visit__dl dt .ic { width: 16px; height: 16px; color: var(--accent); }
.visit__dl dd { margin: 0; }
.visit__dl a:hover { color: var(--accent); }
.visit__map { position: relative; min-height: 420px; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); }
.visit__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.3) sepia(.15); }
.visit__pin { position: absolute; left: 16px; top: 16px; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--accent); color: #fff; box-shadow: var(--shadow); pointer-events: none; }
.visit__pin .ic { width: 21px; height: 21px; }

.cfaq__grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(28px, 5vw, 70px); align-items: start; }

@media (max-width: 1100px) { .cways__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) { .visit__grid, .cfaq__grid { grid-template-columns: 1fr; } .visit__map { min-height: 320px; } }
@media (max-width: 520px) { .cways__grid { grid-template-columns: 1fr; } .cway__ic { margin-bottom: 10px; } }
.visit__ctas { display: flex; gap: 10px; flex-wrap: wrap; }