/* Contact block (DS §7.6) — the two native contact actions on a fog panel.
   Inside the marine CTA banner the panel chrome drops away (mockup). */
@layer components {
  .pk-contact-block {
    background: var(--pk-fog);
    border: 1px solid var(--pk-mist);
    border-radius: var(--pk-radius-lg);
    padding: var(--pk-space-5);
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .pk-contact-block .btn {
    width: 100%;
  }

  @media (min-width: 720px) {
    .pk-contact-block {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      gap: 16px;
    }

    .pk-contact-block .btn {
      width: auto;
    }
  }

  .pk-cta .pk-contact-block {
    background: transparent;
    border: 0;
    padding: 0;
    border-radius: 0;
  }
}