/*
 * Book a call or send a message (enquiry-options-bnr): on cream, the white card with the "Book a call" and "Send a
 * message" tabs, beside "Talk to us directly" and "What happens on the call". The section's top rises 88px over the
 * introduction above it, as in the wireframe.
 *
 * - Laptops and up: the card and the two smaller cards sit side by side, with the smaller cards 320px wide.
 * - Tablets: the card takes the full width, with the two smaller cards side by side under it.
 * - Phones: everything stacks.
 */

.wp-block-group.enquiry-pattern.enquiry-pattern--options-bnr {
  display: flow-root;
  margin: 0;
  padding: 0;
  background: #f4f3ee;
}

.enquiry-pattern--options-bnr .wp-block-group__inner-container {
  display: contents;
}

.enquiry-pattern--options-bnr .enquiry-pattern__options-bnr-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  margin-top: -88px;
  padding: 0 clamp(24px, 5vw, 64px) 56px;
}

/* The tabs' card */

.enquiry-pattern--options-bnr .enquiry-pattern__options-bnr-card {
  min-width: 0;
  padding: 32px;
  border: 1px solid #e8ebe5;
  border-radius: 20px;
  background: var(--white);
}

/* The two smaller cards */

.enquiry-pattern--options-bnr .enquiry-pattern__options-bnr-aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.enquiry-pattern--options-bnr .enquiry-pattern__options-bnr-direct,
.enquiry-pattern--options-bnr .enquiry-pattern__options-bnr-call {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  border-radius: 20px;
}

.enquiry-pattern--options-bnr .enquiry-pattern__options-bnr-direct {
  border: 1px solid #e8ebe5;
  background: var(--white);
}

.enquiry-pattern--options-bnr .enquiry-pattern__options-bnr-call {
  gap: 12px;
  background: #0d3d39;
  color: #f4f3ee;
}

.enquiry-pattern--options-bnr .enquiry-pattern__options-bnr-direct-heading,
.enquiry-pattern--options-bnr .enquiry-pattern__options-bnr-call-heading {
  margin: 0;
  color: #0d3d39;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  text-transform: none;
}

.enquiry-pattern--options-bnr .enquiry-pattern__options-bnr-call-heading {
  color: var(--white);
}

/* What happens on the call: each point with a teal tick */

.enquiry-pattern--options-bnr .enquiry-pattern__options-bnr-call-points {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  color: var(--teal-light);
  font-size: 15px;
  line-height: 1.5;
  list-style: none;
}

.enquiry-pattern--options-bnr .enquiry-pattern__options-bnr-call-points li {
  display: flex;
  gap: 10px;
}

.enquiry-pattern--options-bnr .enquiry-pattern__options-bnr-call-points li::before {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234fb9af' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
}

/* Tablets: the two smaller cards side by side under the tabs */

@media (min-width: 701px) and (max-width: 999px) {
  .enquiry-pattern--options-bnr .enquiry-pattern__options-bnr-aside {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
}

/* Laptops and up: the tabs and the smaller cards side by side */

@media (min-width: 1000px) {
  .enquiry-pattern--options-bnr .enquiry-pattern__options-bnr-inner {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
}

/* Phones */

@media (max-width: 700px) {
  .enquiry-pattern--options-bnr .enquiry-pattern__options-bnr-inner {
    padding: 0 16px 40px;
  }

  .enquiry-pattern--options-bnr .enquiry-pattern__options-bnr-card {
    padding: 20px;
  }

  .enquiry-pattern--options-bnr .enquiry-pattern__options-bnr-direct,
  .enquiry-pattern--options-bnr .enquiry-pattern__options-bnr-call {
    padding: 24px;
  }
}