/**
 * Contact page — details panel and lead form, split 50/50.
 *
 * The left panel is full-bleed oxblood and runs the height of the section; the
 * right sits on the warm page background. Neither is a container-width column,
 * so the split reads edge to edge.
 */

.deka-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: calc(100vh - var(--deka-header-height));
}

/* ==========================================================================
   Left — details
   ========================================================================== */

.deka-contact__aside {
  display: flex;
  flex-direction: column;
  gap: var(--deka-space-2xl);
  padding: var(--deka-space-3xl) clamp(var(--deka-space-lg), 5vw, 5rem);
  background: var(--deka-oxblood-700);
  color: var(--deka-white);
}

.deka-contact__title {
  margin: 0;
  font-family: var(--deka-font-display);
  font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem);
  font-weight: var(--deka-weight-bold);
  line-height: 1.05;
  letter-spacing: var(--deka-tracking-tight);
}

.deka-contact__subtitle {
  margin: var(--deka-space-md) 0 0;
  font-size: var(--deka-text-md);
  font-weight: var(--deka-weight-regular);
  line-height: var(--deka-leading-normal);
  color: rgb(255 255 255 / 88%);
}

/* Two columns of contact blocks, dropping to one when the panel narrows. */
.deka-contact__details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--deka-space-xl) var(--deka-space-lg);
  margin-top: auto;
}

.deka-contact__block-title {
  margin: 0 0 var(--deka-space-2xs);
  font-family: var(--deka-font-display);
  font-size: var(--deka-text-base);
  font-weight: var(--deka-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--deka-tracking-wide);
  color: var(--deka-white);
}

.deka-contact__block-body {
  margin: 0;
  font-size: var(--deka-text-sm);
  line-height: var(--deka-leading-relaxed);
  color: rgb(255 255 255 / 78%);
}

/* Only the opening-hours lines stack. A blanket `span { display: block }` here
   also caught the "|" between the two phone numbers and put it on its own row. */
.deka-contact__line { display: block; }

.deka-contact__block-body a {
  color: inherit;
  text-decoration: none;
  transition: color var(--deka-duration-base) var(--deka-ease-out);
}

.deka-contact__block-body a:hover { color: var(--deka-white); }

.deka-contact__sep {
  margin-inline: var(--deka-space-3xs);
  opacity: 0.5;
}

.deka-contact__social {
  display: flex;
  gap: var(--deka-space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.deka-contact__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--deka-white);
  transition: opacity var(--deka-duration-base) var(--deka-ease-out),
              transform var(--deka-duration-base) var(--deka-ease-out);
}

.deka-contact__social-link:hover {
  opacity: 0.75;
  transform: translateY(-2px);
}

.deka-contact__social-icon {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

/* ==========================================================================
   Right — form
   ========================================================================== */

.deka-contact__form {
  display: flex;
  align-items: center;
  padding: var(--deka-space-3xl) clamp(var(--deka-space-lg), 4vw, 4rem);
  background: var(--deka-surface-page);
}

.deka-contact__form > * { width: 100%; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 60rem) { /* 960 — stack */
  .deka-contact {
    /* minmax(0, …), not 1fr: a bare 1fr column grows to its widest content,
       which made the page 379px wide on a 375px phone and zoomed it out. */
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .deka-contact__aside {
    gap: var(--deka-space-xl);
    padding-block: var(--deka-space-2xl);
  }

  .deka-contact__details { margin-top: 0; }
  .deka-contact__form { padding-block: var(--deka-space-2xl); }
}

@media (prefers-reduced-motion: reduce) {
  .deka-contact__social-link:hover { transform: none; }
}