/**
 * @file
 * Layout-only styles for the Business profile entity.
 *
 * Kept intentionally minimal and theme-agnostic: it provides structure
 * (two-column default, teaser card) and responsive behaviour only, and
 * avoids restyling field internals so the active theme stays in control.
 */

/* Generic safeguards. */
.bprofile {
  box-sizing: border-box;
}

.bprofile img {
  max-width: 100%;
  height: auto;
}

/* ----------------------------------------------------------------------------
 * Default / full view: single column on mobile, two columns on desktop.
 * Left (main) column is wider; right (aside) holds map + working hours.
 * ------------------------------------------------------------------------- */
.bprofile--default .bprofile__layout {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.bprofile__main {
  min-width: 0;
}

.bprofile__aside {
  min-width: 0;
}

.bprofile__aside > * + * {
  margin-top: 1.5rem;
}

.bprofile__section {
  scroll-margin-top: 1rem;
}

@media (min-width: 62rem) {
  .bprofile--default.bprofile--has-aside .bprofile__layout {
    flex-direction: row;
    align-items: flex-start;
    gap: 2rem;
  }

  .bprofile--default.bprofile--has-aside .bprofile__main {
    flex: 1 1 auto;
    /* Wider left column. */
    width: 62%;
  }

  .bprofile--default.bprofile--has-aside .bprofile__aside {
    flex: 0 0 auto;
    width: 34%;
    position: sticky;
    top: 1rem;
  }
}

/* ----------------------------------------------------------------------------
 * Mobile action bar: app-like fixed buttons ("Map" + "Book appointment").
 * Hidden on desktop (the two-column layout already shows everything) and
 * hidden via JS once the booking section scrolls into view.
 * ------------------------------------------------------------------------- */
.bprofile__actionbar {
  display: none;
}

@media (max-width: 61.99rem) {
  .bprofile--has-aside {
    /* Keep last content clear of the fixed bar. */
    padding-bottom: 4.5rem;
  }

  .bprofile__actionbar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1000;
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
    background: var(--bprofile-bar-bg, #fff);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12);
    transition: transform 0.25s ease;
  }

  .bprofile__actionbar.is-hidden {
    transform: translateY(150%);
  }

  .bprofile__actionbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
  }

  .bprofile__actionbar-map {
    flex: 0 0 auto;
    border: 1px solid currentColor;
  }

  .bprofile__actionbar-book {
    flex: 1 1 auto;
    color: var(--bprofile-bar-book-color, #fff);
    background: var(--bprofile-bar-book-bg, #1976d2);
  }
}

/* ----------------------------------------------------------------------------
 * Header: logo left, name + address right (teaser and default).
 * ------------------------------------------------------------------------- */
.bprofile__header {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.bprofile__header-media {
  flex: 0 0 auto;
  display: block;
  width: 7.5rem;
  max-width: 30%;
}

.bprofile__header-media img {
  display: block;
  width: 100%;
  border-radius: 0.5rem;
  object-fit: cover;
}

.bprofile__header-text {
  flex: 1 1 auto;
  min-width: 0;
}

.bprofile__header-title {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  line-height: 1.3;
}

.bprofile__header .field--name-field-address > .field__label {
  display: none;
}

.bprofile__more {
  display: inline-block;
  margin-top: 0.75rem;
}

/* Teaser: entire card is one link to the full profile. */
.bprofile--teaser .bprofile__header {
  margin-bottom: 0;
}

.bprofile__teaser-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.bprofile__teaser-link:hover .bprofile__header-title,
.bprofile__teaser-link:focus-visible .bprofile__header-title {
  text-decoration: underline;
}