/* ===== Contact page (group design language) ===== */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-card { text-align: center; }
.contact-card .card-icon { margin-inline: auto; }
.contact-card .contact-value {
  display: block;
  font-weight: 600;
  color: var(--heading);
  margin-top: 0.25rem;
  word-break: break-word;
}
.contact-card a.contact-value:hover { color: var(--accent); }
.contact-card .contact-hint { font-size: 0.8438rem; margin-top: 0.5rem; }

.contact-action {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent-dark);
  background: var(--accent-soft);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.contact-action:hover {
  border-color: var(--accent);
  color: #fff;
  background: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 0 0 3px var(--accent-soft), 0 4px 12px rgba(199, 154, 62, 0.28);
}

/* WhatsApp panel */
.whatsapp-panel {
  background:
    radial-gradient(ellipse 70% 100% at 50% 130%, rgba(37, 211, 102, 0.1), transparent),
    var(--bg-deep);
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 6vw, 4rem);
  text-align: center;
  margin-bottom: 2.5rem;
}
.whatsapp-panel h2 { color: #fff; margin-bottom: 0.75rem; }
.whatsapp-panel p { color: rgba(255, 255, 255, 0.7); max-width: 520px; margin: 0 auto 2rem; }
.whatsapp-panel .btn-whatsapp { font-size: 1.0625rem; padding: 1rem 2.5rem; }

.hours-note {
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin-top: 2rem;
}
.hours-note strong { color: var(--heading); }
/* ============================================================
   PRACTICAL DETAILS
   The page was three cards and a lot of air. These panels carry
   hours, location, the brand enquiry lines and a quoting
   checklist, in the same card language as the rest of the site.
   ============================================================ */
.contact-grid { margin-bottom: 2rem; }

/* Cards read better with the accent on top rather than centred air */
.contact-card {
  text-align: left;
  border-top: 2px solid var(--accent);
  display: flex;
  flex-direction: column;
}
.contact-card .card-icon { margin-inline: 0; }
.contact-card h3 { margin-bottom: 0.375rem; }
.contact-card .contact-value { font-size: 1.0625rem; letter-spacing: -0.01em; }
.contact-card .contact-hint { flex: 1; }
.contact-card .contact-action { align-self: flex-start; }

.info-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}
.info-split-spaced { margin-top: 1.25rem; }
@media (max-width: 860px) { .info-split { grid-template-columns: minmax(0, 1fr); } }

.info-panel { display: flex; flex-direction: column; }
.info-panel h3 {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1.0625rem;
  padding-bottom: 0.875rem;
  margin-bottom: 1.125rem;
  border-bottom: 1px solid var(--border);
}
.info-panel h3 i { color: var(--accent); font-size: 0.9375rem; }
.info-panel > p { font-size: 0.9375rem; }

/* Definition rows: label left, value right, dotted leader between */
.hours-list { display: flex; flex-direction: column; gap: 0.75rem; margin: 0; }
.hours-list > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
}
.hours-list dt {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-light);
}
.hours-list > div::after {
  content: "";
  flex: 1 1 1.5rem;
  min-width: 1rem;
  height: 1px;
  border-bottom: 1px dotted var(--border);
}
.hours-list dd {
  order: 3;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: right;
}
.hours-list dd.is-closed { color: var(--text-light); font-weight: 500; }
@media (max-width: 480px) {
  .hours-list > div::after { display: none; }
  .hours-list dd { text-align: left; width: 100%; }
}

.info-foot {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 1.125rem;
  font-size: 0.8438rem;
  color: var(--text-light);
  line-height: 1.6;
}
.info-foot i { color: var(--accent); margin-top: 0.2rem; flex-shrink: 0; }

.info-btn { align-self: flex-start; margin-top: auto; }
.info-panel .hours-list + .info-btn,
.info-panel .hours-list + .info-foot { margin-top: 1.5rem; }

/* Brand enquiry addresses */
.enquiry-list { list-style: none; display: flex; flex-direction: column; gap: 0.875rem; margin: 0; padding: 0; }
.enquiry-list li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.75rem 1rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius);
}
.enquiry-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-light);
}
.enquiry-list a {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--accent-dark);
  overflow-wrap: anywhere;
}
.enquiry-list a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.info-panel .check-list { margin-top: 0.75rem; }

/* Stacked variant: long values (addresses, coverage) need the full width
   rather than a right-aligned column behind a dotted leader. */
.hours-list-stack > div { display: block; }
.hours-list-stack > div::after { display: none; }
.hours-list-stack dt { margin-bottom: 0.15rem; }
.hours-list-stack dd { text-align: left; font-weight: 500; }

/* ============================================================
   CONTACT PHONE PASS
   "Chat on WhatsApp" is set at 17px inside 40px of side padding,
   which needs about 247px. Inside the panel, inside the phone
   gutter, a 320px screen offers 240px, so the label wrapped
   inside the pill. It drops to the standard action size here and
   takes the full panel width instead.

   The brand enquiry rows are the page's only remaining small
   targets: a 15px address inside a bordered row, with nothing
   around the link itself.
   ============================================================ */

@media (max-width: 600px) {
  .whatsapp-panel .btn-whatsapp {
    width: 100%;
    font-size: 1rem;
    padding: 0.8125rem 1.25rem;
  }
  .whatsapp-panel h2 { font-size: 1.375rem; }
  .whatsapp-panel p { margin-bottom: 1.5rem; }

  .contact-grid { gap: 1rem; margin-bottom: 1.5rem; }
  .info-split { gap: 1rem; }
  .info-split-spaced { margin-top: 1rem; }

  .contact-card .contact-action { align-self: stretch; justify-content: center; }
  .contact-card .contact-value { overflow-wrap: anywhere; }

  .enquiry-list { gap: 0.625rem; }
  .enquiry-list li { padding: 0.5rem 0.875rem; }
  .enquiry-list a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  .info-panel h3 { padding-bottom: 0.75rem; margin-bottom: 0.875rem; }
  .info-panel .hours-list + .info-btn,
  .info-panel .hours-list + .info-foot { margin-top: 1.125rem; }
  .info-btn { align-self: stretch; }
  .hours-note { margin-top: 1.5rem; }
}