/* =========================================================
   fg-byline.css   Byline row (avatar + author + updated) / Строка автора
   RU: Аккуратное выравнивание на ПК + красивая сетка на мобилке
   EN: Clean desktop alignment + mobile grid layout
   ========================================================= */

.fg-byline-row{
  display: flex;
  flex-wrap: wrap;               /* RU: перенос если мало места / EN: safe wrap */
  align-items: center;           /* RU: вертикальный центр / EN: vertical center */
  gap: 10px;
}

.fg-byline-row p{
  margin: 0 !important;
  line-height: 1.25;
}

.fg-byline-row .wp-block-uagb-icon{
  display: flex;
  align-items: center;
  margin: 0 !important;
}

.fg-byline-row .wp-block-uagb-icon svg{
  display: block;                /* RU: убирает baseline-провал / EN: kills baseline drop */
}

/* RU: Мобилка — делаем 2 строки и убираем некрасивые переносы
   EN: Mobile — 2-row grid so it looks neat */
@media (max-width: 560px){
  .fg-byline-row{
    display: grid !important;
    grid-template-columns: 56px 20px 1fr; /* avatar | icon | text */
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 6px;
    align-items: center;
  }

  /* avatar */
  .fg-byline-row > .wp-block-uagb-image{
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
  }

  /* author line */
  .fg-byline-row > p:first-of-type{
    grid-column: 2 / 4;
    grid-row: 1;
    font-size: 14px;
  }

  /* check icon */
  .fg-byline-row > .wp-block-uagb-icon{
    grid-column: 2;
    grid-row: 2;
    transform: translateY(-1px);
  }

  /* updated date */
  .fg-byline-row > p:last-of-type{
    grid-column: 3;
    grid-row: 2;
    font-size: 13px;
    opacity: .9;
  }
}