/* ==========================================================================
   BRAFFE — FOTOMOZAÏEK   →  wp-content/themes/<child>/assets/css/vc-mosaic.css
   --------------------------------------------------------------------------
   From the XD (homepage y7612, detailpagina's y3636):

     3 columns × 536 px, 16 px gutter, block height 991 px
     Every column sums to 991:
         617 + 16 + 358  =  991
         381 + 16 + 594  =  991
         991             =  991
     Total width 536·3 + 16·2 = 1640 = the content column.

   HOW THE PROPORTIONS HOLD  —  and why this was rewritten
   --------------------------------------------------------------------------
   The first version gave the block aspect-ratio: 1640/991 and let flex-grow
   divide that height between the photos. Elegant, and broken in Safari.

   Every photo here is an absolutely positioned <img> inside an empty box, and
   with flex-basis: 0 the boxes contribute nothing either — so the whole
   mosaic had NO content height. Its height came from aspect-ratio alone.
   Safari does not resolve aspect-ratio when sizing that kind of box, so the
   block collapsed and all five photos disappeared. Proved rather than
   assumed: forcing aspect-ratio: auto in Chrome takes the block from 782 px
   to 16 px, which is exactly the reported symptom.

   So the sizing now uses the technique aspect-ratio replaced: an empty
   ::before with a percentage padding-top. Percentage padding resolves against
   the element's own WIDTH, which is always definite here — it is the grid
   column — so there is no circular dependency for an engine to disagree
   about, and it is a real in-flow box when rows are being sized.

   The percentages are just the design heights over the design width, 536:

       617 / 536 = 115.1119%      381 / 536 =  71.0821%
       358 / 536 =  66.7910%      594 / 536 = 110.8209%

   The tall photo is the exception. 991/536 = 184.8881% is right only when
   the gutter is 16/536 of the width, and the gutter is a FIXED 16 px at
   every width — so at a 421 px column the tall photo came out 4 px short of
   its neighbours. It is defined as "the other column's two photos plus the
   gutter between them" instead, which stays exact at any width.

   DO NOT put aspect-ratio back on these boxes. Two mechanisms fighting over
   the same axis is what produced the second bug: with BOTH set, Safari sized
   the card from the ratio against the spacer's height instead of stretching
   it to the column, and the cards came out at roughly half width.
   ========================================================================== */

.br-mosaic{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--br-gutter, 16px);
  align-items: stretch;
}

.br-mosaic__col{
  display: flex;
  flex-direction: column;
  gap: var(--br-gutter, 16px);
  min-height: 0;
}

.br-mosaic__item{
  position: relative;
  overflow: hidden;
  margin: 0;
  flex: 0 0 auto;                         /* height comes from ::before now */
  background: var(--br-cream, #F5F4EE);   /* shows while the photo loads */
}

/* The sizer. Percentage padding is against the item's own width. */
.br-mosaic__item::before{
  content: "";
  display: block;
}

.br-mosaic__item--617::before{ padding-top: 115.1119%; }   /* 617 / 536 */
.br-mosaic__item--358::before{ padding-top:  66.7910%; }   /* 358 / 536 */
.br-mosaic__item--381::before{ padding-top:  71.0821%; }   /* 381 / 536 */
.br-mosaic__item--594::before{ padding-top: 110.8209%; }   /* 594 / 536 */

/* = 115.1119% + 66.7910% + one gutter, so column 3 always matches columns
   1 and 2 exactly, whatever the column width. */
.br-mosaic__item--991::before{
  padding-top: calc(181.9029% + var(--br-gutter, 16px));
}

.br-mosaic__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;   /* Betheme forces img{height:auto} at (0,1,1) */
  object-fit: cover;
  display: block;
}


/* --------------------------------------------------------------------------
   TABLET — 2 columns
   The 991 grid stops making sense below three columns, so the block becomes
   a simple two-up with each photo keeping its own design ratio. Each item is
   now an independent grid cell, so the tall one goes back to its own
   proportion rather than matching a column that no longer exists.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px){
  .br-mosaic{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .br-mosaic__col{ display: contents; }   /* items become grid children */

  .br-mosaic__item--991::before{ padding-top: 184.8881%; }   /* 991 / 536 */
}


/* --------------------------------------------------------------------------
   PHONE
   Handled in braffe-design-system.css (the MOBILE section, ≤ 767): two
   columns of 4:5 photos with the tall one as a full-width 16:10 band. It
   lives there because it was decided as part of the mobile pass, and its
   selectors are one class more specific so they win over this file
   regardless of enqueue order.
   -------------------------------------------------------------------------- */