/* The "detailed" provider card (partials/shared/provider-card.php with variant 'detailed'):
   "Accepting New Patients" on the photo, a "Specialties" label over the bubbles and a
   "View Profile" button in the footer. Any page that renders the variant includes this file;
   it is keyed only on the variant's own classes, so it never touches the compact cards on the
   home page or Our Services. The base card rules it builds on live in style.css. */

/* style.css gives the item height:100%, which (against the auto-height slider track) disables
   flex stretching; the home page hides that behind a fixed 750px card. Auto lets the items
   stretch to the tallest card, so every footer sits on the same line. */
.provider-card-item--detailed {
  height: auto;
}

/* The compact card is only fully framed under .homeproviders (style.css); the detailed one
   carries its own frame, with auto height so the extra label and button always fit. */
.provider-card--detailed {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 24px;
  background: var(--color-white);
  border: 1px solid rgba(16, 25, 31, 0.08);
  box-shadow: 1px 1px 5px rgba(16, 25, 31, 0.1);
}

.provider-card--detailed .provider-image {
  position: relative;
  border-radius: 0;
}

.provider-card--detailed .provider-content {
  border-top: 0;
  backdrop-filter: none;
  background: var(--color-white);
}

.provider-card--detailed .provider-card-headline {
  font-size: 14px;
  letter-spacing: 0.4px;
}

.provider-card--detailed .provider-divider {
  display: none;
}

.provider-card--detailed .provider-subtext {
  font-size: 16px;
  line-height: 24px;
  color: #2b3138;
}

.provider-card--detailed .provider-accepting-pill {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: var(--color-white);
  color: var(--color-dark-green);
  font-family: var(--font-intel);
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 1px 4px rgba(16, 25, 31, 0.15);
}

.provider-card--detailed .provider-accepting-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-brand-primary-50);
  flex: 0 0 auto;
}

.provider-card--detailed .provider-specialties-label {
  margin: 12px 0 0;
  font-family: var(--font-intel);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--colors-text-text-tertiary-600);
}

.provider-card--detailed .provider-bubbles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0 12px;
}

.provider-card--detailed .provider-bubble {
  min-height: 0;
  padding: 8px 16px;
  font-size: 15px;
}

/* flex-direction is restated because style.css stacks the footer between 600 and 800px for
   the compact card's two labels; here the footer is one label and a button, side by side. */
.provider-card--detailed .provider-card-footer {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: 0;
}

.provider-card--detailed .footer-item {
  padding: 0;
}

.provider-card--detailed .provider-view-profile {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  background: var(--bg-base-green);
  color: var(--color-white) !important;
  font-family: var(--font-intel);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
}

.provider-card--detailed .provider-view-profile:hover,
.provider-card--detailed .provider-view-profile:focus-visible {
  background: var(--accent-brand-primary-50);
}