/* Contact (step 4.16a): heading and intro beside two large direct-contact links (e-mail, phone). No form yet:
   the working form comes in 4.16b and takes the right column, the direct contacts then move under the intro.
   Footer: brand, note about the concept demos, contact, link back to the top, copyright. */
.contact { padding-block: var(--space-section); overflow-wrap: break-word; }
.contact h2 { overflow-wrap: anywhere; }
.contact-inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center; }
.contact-inner > * { min-width: 0; }

.contact-options { display: grid; gap: var(--space-4); padding: 0; list-style: none; }

.contact-option {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #ffffff0a, #ffffff03);
  color: var(--color-text);
  text-decoration: none;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
}
/* Same gradient ring as the service cards */
.contact-option::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: var(--gradient-accent);
  opacity: 0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: opacity 0.3s;
  pointer-events: none;
}
.contact-option:is(:hover, :focus-visible) { transform: translateY(-4px); box-shadow: 0 24px 60px -30px #8b5cf6aa; }
.contact-option:is(:hover, :focus-visible)::before { opacity: 1; }
.contact-option > * { min-width: 0; }

.contact-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--color-line-strong);
  border-radius: 14px;
  background: #8b5cf61f;
  color: var(--color-cyan);
}
.contact-phone .contact-icon { background: #22d3ee1a; color: var(--color-lime); }
.contact-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.contact-label { display: block; font-size: var(--text-sm); color: var(--color-muted); }
/* The e-mail address has no spaces: it breaks before the @ (<wbr>), with enlarged text anywhere instead of sticking out */
.contact-value { display: block; font: 700 clamp(1.125rem, 1rem + 0.6vw, 1.5rem) / 1.25 var(--font-display); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.contact-arrow { font-weight: 600; transition: transform var(--duration-fast); }
.contact-option:is(:hover, :focus-visible) .contact-arrow { transform: translateX(4px); }

/* Footer */
.site-footer { padding-block: var(--space-12); border-top: 1px solid var(--color-line); background: #07070ccc; }
.footer-inner { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-6) var(--space-12); align-items: start; }
.footer-inner > * { min-width: 0; }
.footer-brand .logo { font-size: 1rem; }
.footer-note, .footer-business, .footer-legal { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-muted); }
/* Business identification and copyright: a row of their own under brand, contact and the top link */
.footer-bottom { grid-column: 1 / -1; padding-top: var(--space-3); border-top: 1px solid var(--color-line); }
.footer-contact { display: grid; gap: var(--space-2); padding: 0; list-style: none; }
.site-footer a:not(.logo) { color: var(--color-text); text-underline-offset: 4px; overflow-wrap: anywhere; }
.footer-top { font-weight: 600; text-decoration: none; }
.footer-top:hover { text-decoration: underline; }

@media (max-width: 960px) {
  .contact-inner { grid-template-columns: 1fr; gap: var(--space-8); }
  /* Stacked under the intro the links would stretch across a tablet: they keep a comfortable width */
  .contact-options { max-width: 36rem; }
}
@media (max-width: 640px) {
  .contact-option { grid-template-columns: auto 1fr; padding: var(--space-4); }
  .contact-arrow { display: none; }
}
/* The footer stacks by text size, not by pixels (F3): with an enlarged browser text size the brand column would
   otherwise shrink under its words and run into the contact links. 40em = 640px at the default 16px. */
@media (max-width: 40em) {
  .footer-inner { grid-template-columns: 1fr; }
}

/* Reduced motion: the border still lights up, but nothing lifts or slides */
@media (prefers-reduced-motion: reduce) {
  .contact-option:is(:hover, :focus-visible),
  .contact-option:is(:hover, :focus-visible) .contact-arrow { transform: none; }
}