/* ==========================================================
   contact.css — Contact page ONLY  (style.css loads first)
   ==========================================================

   Sections:
   1. Contact cards (3 bordered, icon centered top, no circle)
   2. Locate us (map + address + direction link)
   ========================================================== */

/* ── 1. CONTACT CARDS ────────────────────────────────────── 
   Screenshot (list-1.jpg):
   · 3 bordered cards in a row, white bg, thin border
   · Large icon centred at top — NO circle border, just the icon itself
   · "Message" / "Phone" / "Email" bold label
   · Number below
   · Blue text link "Hey Hello ›" / "Call now ›" / "Email us ›"
   ──────────────────────────────────────────────────────── */
.ct-cards-section {
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}
.ct-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  max-width: 1054px;
  margin-left: auto;
  margin-right: auto;
}
.ct-card {
  border: 1px solid var(--border);
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 15px;
}
/* Icon — large, no border/circle, just the raw icon */
.ct-icon {
  font-size: 2rem;
  color: var(--black);
  line-height: 1;
  margin-bottom: .6rem;
}
.ct-label {
  font-size: 20px;
  font-weight: 700;
  color: var(--black);
}
.ct-value {
  font-size: 20px;
  font-weight: 500;
  color: var(--black);
  line-height: 36px;
}
/* Blue action link */
.ct-link {
  font-size: 16px;
  font-weight: 600;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  margin-top: .1rem;
  transition: gap .18s;
}
.ct-link:hover { gap: .4rem; }
.ct-link-arrow {
  font-size: .7rem;
}

/* Divider */
.ct-divider {
  height: 1px;
  background: var(--border);
  margin-block: clamp(2rem, 4vw, 3.5rem);
}

/* ── 2. LOCATE US ─────────────────────────────────────────── 
   Screenshot (list-2.jpg):
   · "Locate us" bold title centred
   · Wide, short map iframe (approx 16:5 ratio)
   · Address text centred below map
   · Blue "Get direction ›" link centred
   ──────────────────────────────────────────────────────── */
.ct-locate {
  text-align: center;
  max-width: 1054px;
  margin-left: auto;
  margin-right: auto;
}
.ct-map {
  width: 100%;
  aspect-ratio: 16 / 5;
  overflow: hidden;
  border: 1px solid var(--border);
  margin-block: 1.75rem 1rem;
}
.ct-map iframe {
  width: 100%; height: 100%;
  border: none; display: block;
}
.ct-address {
  font-size: .95rem;
  color: var(--black);
  line-height: 1.6;
  margin-bottom: .65rem;
}
.ct-direction {
  font-size: 16px;
  font-weight: 600;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  transition: gap .18s;
}
.ct-direction:hover { gap: .4rem; }

/* Responsive */
@media (max-width: 700px) {
  .ct-cards-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .ct-map        { aspect-ratio: 4 / 3; }
}