/* ------------------------------------------------------------- 18/12/2023 - *
 * .b-portraitbox
 * -------------------------------------------------------------------------- * 

  HTML
  ----
  <div class="b-portraitbox-grid | .-flex-grow | .-testr"> 
    <div class="b-portraitbox | -medium">
      <div class="b-fotogroup">
        <div class="b-icon">
          <span class="tooltip tooltip--left" data-tooltip="Anrufen"><a href="tel:#"><i class="fas | fa-phone-volume"></i></a></span>
          <span class="tooltip tooltip--left" data-tooltip="WhatsApp"><a href="//wa.me/#" target="_blank" class="-noblank"><i class="fab | fa-whatsapp"></i></a></span>
          <span class="tooltip tooltip--left" data-tooltip="Admin bearbeiten"><a href="-admin/user/edit-userid?user_idn=<?= $pdoUserDetail['user_idn']; ?>"><i class="fas | fa-pen"></i></a></span>
        </div>
        <div class="b-foto" style="background-image: url('')"></div>
      </div>
      <div class="b-datagroup">
        <h4><b>medium</b></h4>
      </div>
    </div>
  </div>
 * -------------------------------------------------------------------------- */
.-tiny   { --size:  80px; } /* tiny */
.-small  { --size: 176px; } /* small */
.-medium { --size: 224px; } /* medium */
.-large  { --size: 304px; } /* large */

.b-portraitbox {
  position: relative; 
  overflow: hidden;
  width: var(--size);

  .b-fotogroup { 
    position: relative;
    overflow: hidden; 
    height: calc(var(--size) * 1.25);
    border-radius: 4px;
    box-shadow: 0 15px 10px -15px rgba(var(--text-rgb, Fuchsia), .3);    
  
    &:before {
      font: normal 600 400%/1 'Font Awesome 6 Free';
      content: '\f110'; /* fa-spinner */
      position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* absolute-center */
      opacity: .05;
    } /* before */
      
    .b-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* absolute-center */ }
    
    .b-icon {
      z-index: 1;
      position: absolute;
      bottom: 0;
      width: 100%;
      padding: 0 4px;
      text-align: right;
      
      span {
        display: inline-block;
        margin: 4px auto; 
        padding: 1px 8px;
        line-height: 2;
        background: rgba(White, .3);
        border-radius: 4px;
        opacity: .6;
        
        &:hover { 
          background: rgba(White, .9);
          opacity: 1;
        }
      } /* span */
      
      a { color: inherit; }
    } /* .b-icon */
    
    .b-foto {
      position: relative;
      display: block;
      height: 100%;
      background-size: cover;
      transition: .3s;
  
      &:hover { transform: scale(1.15); }
    } /* .-foto */
  } /* b-fotogroup */
  
  .b-datagroup {
    padding: 1em 0; 
    overflow: hidden;    
    mask-image: linear-gradient(90deg, var(--text-hex, Fuchsia) 80%, transparent); /* fadeOut Textüberlänge */  
    
    p { margin: 0; }
    span { white-space: nowrap; }
  } /* b-datagroup */

  a:hover { 
    opacity: 1;

    .b-foto { border: 4px solid var(--link-hex, Fuchsia); }
  } /* hover */
} /* b-portraitbox */


/* -------------------------------------------------------------------------- *
   .b-portraitbox-grid
 * -------------------------------------------------------------------------- */
.b-portraitbox-grid {
//border: 1px dotted;
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  
  &.-align-center { justify-content: center; }

	> * {
  //border: 1px dotted;
  	flex-shrink: 1;
  	flex-basis: var(--size); /* darunter brechen Kindelemente um */
    max-width: calc(50% - .5em); /* auf kleinen Display 2 nebeneinander */
	} /* Childs */
	
  &.-flex-grow > * { flex-grow: 1; }	
} /* .b-flex-container */