/* ==========================================================================
   BRAFFE — ICOON MET TEKST  →  wp-content/themes/<child>/assets/css/vc-icontext.css
   --------------------------------------------------------------------------
   Two directions:

     .br-it--row      icon left of the text, vertically centred on the block
     .br-it--column   icon above the text, everything centred

   Everything the element controls arrives as a custom property set on the
   wrapper, so the settings have exactly one place to live:

     --br-it-icon-h     height of the icon (width follows its own ratio)
     --br-it-title-fs   title size
     --br-it-sub-fs     subtext size
     --br-it-color      colour of title + subtext

   The fallbacks below are CSS-side only — no field in the builder is
   pre-filled, so an empty setting falls back to the design system rather
   than to a value the client has to notice and clear.

   The icon's colour is NOT touched anywhere in this file. It comes from the
   uploaded SVG, which is why it is an <img> rather than an inlined sprite.
   ========================================================================== */

.br-it{
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.3vw, 25px);
  color: var(--br-it-color, var(--br-ink, #272727));
}

.br-it--row   { flex-direction: row; }

.br-it--column{
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(10px, .9vw, 18px);
}


/* --------------------------------------------------------------------------
   ICON

   The box is a SQUARE of the set height, and the icon is contained inside
   it. That is the whole point: the icons are not the same shape — the two
   people icon is wider than it is tall, the lock is narrower — so if the
   box hugged the artwork, every block's text would start at a different x
   and the column would look ragged. A fixed square gives every block the
   same left edge for its text no matter what the file's ratio is.

   Consequence worth knowing: a wide icon now scales DOWN to fit the square,
   so it renders shorter than the height you set. That is the trade for the
   alignment. If a particular set of icons wants a box wider than it is
   tall, set --br-it-box on the element (or on a wrapper) and the width
   detaches from the height:

       .br-praktisch .br-it{ --br-it-box: 64px; }
   -------------------------------------------------------------------------- */
.br-it__icon{
  flex: 0 0 auto;
  box-sizing: border-box;
  width:  var(--br-it-box, var(--br-it-icon-h, 48px));
  height: var(--br-it-icon-h, 48px);
  display: grid;
  place-items: center;
  line-height: 0;              /* kill the inline-image descender gap */
}

/* max-* rather than a hard height: a wider-than-tall icon has to shrink to
   fit, and a hard height would push it out of the box sideways. */
.br-it__icon img{
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}


/* --------------------------------------------------------------------------
   TEXT
   -------------------------------------------------------------------------- */
.br-it__body{ min-width: 0; }

.br-it__title{
  margin: 0;
  font-family: var(--br-sans, sans-serif);
  font-weight: 400;
  font-size: var(--br-it-title-fs, var(--br-fs-22));
  line-height: 1.25;
  color: inherit;
}

.br-it__sub{
  margin: .15em 0 0;
  font-family: var(--br-sans, sans-serif);
  font-weight: 300;            /* the lighter cut of the same family */
  font-size: var(--br-it-sub-fs, var(--br-fs-18));
  line-height: 1.35;
  color: inherit;
}

.br-it__title:only-child,
.br-it__sub:only-child{ margin: 0; }


/* --------------------------------------------------------------------------
   RESPONSIVE
   A row stays a row — these blocks are short by nature and stacking them on
   a phone would read as a broken list. Only the gap tightens.
   -------------------------------------------------------------------------- */
@media (max-width: 640px){
  .br-it{ gap: 14px; }
}