/* ============================================================
   CONTACT PAGE  (contact.html only)

   SCOPE: every selector below is prefixed .cn- and lives in this
   file alone. The older .contact-grid / .contact-card /
   .shop-info-line rules in pages.css are still used by index.html
   and about.html, so they are deliberately left untouched.
   ============================================================ */

/* ---------- Hero: copy left, real shop photo right ---------- */
.cn-hero-grid{ grid-template-columns:1.5fr 1fr; gap:44px; align-items:center; }
.cn-hero-copy p{
  color:var(--charcoal-soft); font-size:1.02rem;
  line-height:1.75; max-width:54ch; margin-top:14px;
}
.cn-hero-photo{ display:flex; justify-content:center; }
/* Shown whole - height:auto with no object-fit - so the Sunroof King signage
   and the vehicles are never cropped at any screen size. */
.cn-hero-photo img{
  width:100%; max-width:440px; height:auto; display:block;
  border-radius:18px;
  box-shadow:0 12px 30px rgba(23,20,18,0.15);
}

/* ---------- Visit Our Shop / Contact information ---------- */
.cn-panel{
  display:grid; grid-template-columns:1.35fr 1fr; gap:0;
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.cn-details{ padding:34px 36px; }
.cn-details h2{ font-size:1.35rem; margin-bottom:22px; }

.cn-line{ display:flex; gap:14px; align-items:flex-start; margin-bottom:20px; }
.cn-line:last-child{ margin-bottom:0; }
.cn-line svg{
  width:22px; height:22px; color:var(--red);
  flex-shrink:0; margin-top:2px;
}
.cn-line > div{
  font-size:0.97rem; color:var(--charcoal-soft); line-height:1.6;
}
.cn-label{
  display:block; font-family:var(--font-sans);
  font-size:0.78rem; font-weight:800; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--charcoal); margin-bottom:3px;
}

/* Plain contact-information block. Deliberately NOT the promotional
   .ct-banner artwork, which stays in the header and footer only. */
.cn-reach{
  background:var(--gray-light); border-left:1px solid var(--line);
  padding:34px 32px;
  display:flex; flex-direction:column; justify-content:center;
}
.cn-reach-label{
  font-family:var(--font-sans); font-size:0.78rem; font-weight:800;
  letter-spacing:0.06em; text-transform:uppercase;
  color:var(--charcoal-soft); margin-bottom:6px;
}
.cn-phone{
  font-family:var(--font-sans); font-weight:800;
  font-size:1.7rem; color:var(--black);
  line-height:1.2; margin-bottom:20px;
}
.cn-phone:hover{ color:var(--red); }

.cn-actions{ display:flex; flex-direction:column; gap:11px; }
.cn-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 22px; border-radius:8px;
  font-family:var(--font-sans); font-size:0.95rem; font-weight:700;
  border:2px solid var(--red); white-space:nowrap;
  transition:transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.cn-btn svg{ width:18px; height:18px; flex-shrink:0; }
.cn-btn--solid{ background:var(--red); color:var(--white); }
.cn-btn--solid:hover{
  background:var(--red-dark); border-color:var(--red-dark);
  color:var(--white); transform:translateY(-2px);
}
.cn-btn--outline{ background:var(--white); color:var(--black); }
.cn-btn--outline:hover{
  background:var(--black); border-color:var(--black);
  color:var(--white); transform:translateY(-2px);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .cn-hero-grid{ grid-template-columns:1fr; gap:30px; }
  .cn-hero-copy{ order:1; }   /* text first on tablet + mobile */
  .cn-hero-photo{ order:2; }
  .cn-panel{ grid-template-columns:1fr; }
  .cn-reach{
    border-left:0; border-top:1px solid var(--line);
    align-items:flex-start;
  }
}

@media (max-width: 640px){
  .cn-details{ padding:26px 22px; }
  .cn-reach{ padding:26px 22px; }
  .cn-phone{ font-size:1.55rem; }
  .cn-actions{ width:100%; }
  .cn-btn{ width:100%; padding:15px 20px; }  /* full-width, easy tap targets */
}