/*
 * BLUEBERRY GROUP — Contact page
 * Clean page-specific styles. Shared tokens/header/footer live in
 * Shared foundations and shell components are enqueued before this file.
 */

/* 1. Page foundation */

.contact-page {
  background: var(--blueberry-white);
  color: var(--blueberry-ink);
}

.contact-page .shell {
  width: min(var(--blueberry-container), calc(100% - 48px));
  margin-inline: auto;
}

/* 2. Single-page hero */

.contact-hero {
  overflow: hidden;
  color: var(--blueberry-white);
  background:
    linear-gradient(90deg, var(--blueberry-overlay-strong), var(--blueberry-overlay-medium)),
    url("../../branding-profile/contact.webp") center 52% / cover;
}

.contact-hero-inner {
  display: flex;
  min-height: 400px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-block: 78px 88px;
}

.breadcrumb {
  display: flex;
  gap: 9px;
  margin-bottom: 0;
  color: var(--blueberry-on-dark);
  font-size: var(--blueberry-text-meta);
}

.breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.contact-hero h1 {
  max-width: 760px;
  margin: 24px 0 0;
  color: var(--blueberry-white);
  font-size: var(--blueberry-display-lg);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.06em;
}

.contact-hero h1 em {
  font-style: normal;
}

/* 3. Contact details */

.contact-main {
  display: grid;
  grid-template-columns: minmax(290px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(70px, 9vw, 130px);
  padding-block: var(--blueberry-space-section-desktop);
}

.contact-details {
  align-self: start;
}

.contact-details h2 {
  margin: 24px 0;
  color: var(--blueberry-deep);
  font-size: var(--blueberry-section-title);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.055em;
}

.contact-details > p {
  max-width: 450px;
  margin: 0;
  color: var(--blueberry-muted);
  line-height: var(--blueberry-leading-body);
}

.contact-methods {
  margin-top: 55px;
  border-top: 1px solid var(--blueberry-line);
}

.contact-method {
  display: grid;
  grid-template-columns: 50px 1fr 24px;
  gap: 18px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--blueberry-line);
  color: var(--blueberry-deep);
  text-decoration: none;
  transition: color 0.3s ease, padding 0.3s ease;
}

.contact-method:hover,
.contact-method:focus-visible {
  padding-inline: 10px;
  color: var(--blueberry-aqua);
  outline: none;
}

.contact-method > span:nth-child(2) {
  display: grid;
  gap: 3px;
}

.contact-method small,
.response-note span {
  color: var(--blueberry-muted);
  font-size: var(--blueberry-text-label);
}

.contact-method strong {
  color: inherit;
  font-size: var(--blueberry-text-body);
  font-weight: 500;
}

.contact-method-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(var(--blueberry-deep-rgb), 0.2);
  border-radius: 50%;
}

.response-note {
  display: grid;
  gap: 5px;
  margin-top: 36px;
  padding-left: 18px;
  border-left: 2px solid var(--blueberry-aqua);
}

.response-note strong {
  color: var(--blueberry-deep);
  font-weight: 500;
}

/* 4. Shared SVG icon masks */

.contact-method-icon::before,
.contact-method b::before,
.form-actions button span::before,
.office-copy > a span::before {
  display: block;
  width: 20px;
  height: 20px;
  background: currentColor;
  content: "";
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.contact-method:nth-child(1) .contact-method-icon::before {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 6.5h15v11h-15z' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'/%3E%3Cpath d='m5 7 7 6 7-6' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.contact-method:nth-child(2) .contact-method-icon::before {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.2 4.8 9.4 7c.6.6.6 1.5.1 2.1l-1 1.2c1.2 2.3 3 4.1 5.3 5.3l1.2-1c.6-.5 1.5-.5 2.1.1l2.1 2.1c.5.5.6 1.3.2 1.9-.7 1.1-1.9 1.8-3.2 1.6C9.5 19.4 4.6 14.5 3.7 7.8c-.2-1.3.5-2.5 1.6-3.2.6-.4 1.4-.3 1.9.2Z' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.contact-method b,
.form-actions button span,
.office-copy > a span {
  display: inline-grid;
  place-items: center;
  font-size: 0;
  line-height: 0;
}

.contact-method b::before,
.form-actions button span::before,
.office-copy > a span::before {
  width: 18px;
  height: 18px;
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 17 17 7' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M9 7h8v8' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 5. Enquiry form */

.enquiry-card {
  padding: clamp(32px, 5vw, 64px);
  border-radius: 16px;
  background: var(--blueberry-paper);
}

.enquiry-heading {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--blueberry-line);
}

.enquiry-heading h2 {
  margin: 14px 0 14px;
  color: var(--blueberry-deep);
  font-size: var(--blueberry-display-sm);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.055em;
}

.enquiry-heading p {
  margin: 0;
  color: var(--blueberry-muted);
  font-size: var(--blueberry-text-label);
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 24px;
  padding-top: 40px;
}

.contact-page .form-field {
  gap: 4px;
}

.contact-page .contact-form label {
  font-size: var(--blueberry-text-meta);
}

.contact-page .form-actions .contact-submit.button--form-submit {
  min-width: 0;
}

/* 6. Office and map */

.office-section {
  padding-block: var(--blueberry-space-section-desktop);
  color: var(--blueberry-deep);
  background: var(--blueberry-paper);
}

.office-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(60px, 8vw, 110px);
  align-items: center;
}

.office-copy h2 {
  margin: 25px 0 30px;
  font-size: var(--blueberry-display-lg);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.06em;
}

.office-copy > p {
  color: var(--blueberry-muted);
  font-size: var(--blueberry-text-body);
  line-height: var(--blueberry-leading-body);
}

.office-hours {
  display: grid;
  gap: 8px;
  margin: 40px 0;
  padding-top: 24px;
  border-top: 1px solid var(--blueberry-line);
}

.office-hours span {
  color: var(--blueberry-aqua);
  font-size: var(--blueberry-text-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.office-hours strong {
  font-weight: 400;
  line-height: 1.7;
}

.office-map {
  position: relative;
  height: 560px;
  overflow: hidden;
  border: 1px solid var(--blueberry-line);
  border-radius: 14px;
  background: var(--blueberry-white);
  box-shadow: 0 24px 60px rgba(var(--blueberry-deep-rgb), 0.1);
}

.office-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 7. Responsive */

@media (max-width: 900px) {
  .contact-hero-inner {
    min-height: 360px;
    padding-block: 62px 72px;
  }

  .contact-hero h1 {
    font-size: var(--blueberry-display-lg);
  }

  .contact-main,
  .office-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-main {
    gap: 55px;
  }

  .contact-main,
  .office-section {
    padding-block: var(--blueberry-space-section-tablet);
  }

  .office-layout {
    gap: 48px;
  }

  .office-map {
    height: 470px;
  }
}

@media (max-width: 600px) {
  .contact-page .shell {
    width: calc(100% - 40px);
  }

  .contact-main,
  .office-layout {
    grid-template-columns: 1fr;
  }

  .contact-main {
    gap: 65px;
    padding-block: var(--blueberry-space-section-mobile);
  }

  .contact-hero h1 {
    font-size: var(--blueberry-display-sm);
  }

  .contact-form {
    grid-template-columns: 1fr;
  }

  .contact-page .form-field-wide {
    grid-column: auto;
  }

  .contact-page .form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .contact-page .form-actions .contact-submit.button--form-submit {
    width: 100%;
  }

  .office-section {
    padding-block: var(--blueberry-space-section-mobile);
  }

  .office-map {
    height: 390px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .contact-page * {
    scroll-behavior: auto;
    transition-duration: 0.01ms;
  }
}