/**
 * Unit hero CTA — Reserve + Book a viewing buttons
 */
.unit-hero-cta-block {
  .m-hero-ctas {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;

    .a-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      height: 40px;
      margin: 0;
      padding: 0 20px;
      border: 2px solid #000;
      border-radius: 4px;
      background: #fff;
      color: #000;
      font-size: 16px;
      line-height: 16px;
      font-weight: 500;
      text-transform: none;
      text-decoration: none;
      white-space: nowrap;
      transition: all 0.3s ease;

      .a-icn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        flex-shrink: 0;

        svg {
          width: 100%;
          height: 100%;

          /* Recolour only the visible icon paths to follow the button text
             colour; the mask's white clip path is left untouched. */
          path[fill="#130F26"] {
            fill: currentColor;
          }
        }
      }

      &.btn-outline {
        background: #fff;
        color: #000;

        &:hover,
        &:focus {
          background: #000;
          color: #fff;
        }
      }

      &.btn-black {
        background: #000;
        color: #fff;
        border-color: #000;

        &:hover,
        &:focus {
          background: #fff;
          color: #000;
        }
      }
    }
  }

  /* Mobile: stack the buttons as a full-width column instead of a row. */
  @media (max-width: 767px) {
    .m-hero-ctas {
      flex-direction: column;
      align-items: stretch;

      .a-btn {
        width: 100%;
      }
    }
  }

  /* Tablet/desktop: the buttons share the row when it is wide enough, but each
     grows to full width when there isn't room to show both side by side. The
     170px basis wraps at ~352px, just above the buttons' combined minimum. */
  @media (min-width: 768px) {
    .m-hero-ctas .a-btn {
      flex: 1 1 170px;
    }
  }
}