/* Realizace (v6) – mřížka fotek: dvojice před/po na výšku + dvě fotky na šířku
********************************************************************* */

.real-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.real-item{
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-l);
  background: var(--c-bg-tint);
}

.real-item img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* dvojice před/po: vždy celý poměr 3:4, ořez ukotvený dole – štítky PŘED/PO jsou v obrázku vlevo dole */
.real-pair{ aspect-ratio: 3 / 4; }
.real-pair img{ object-position: center bottom; }

.real-wide{
  grid-column: span 2;
  aspect-ratio: 4 / 3;
}

/* popisek – sklo na fotce */
.real-item figcaption{
  position: absolute;
  left: .6rem;
  right: auto;
  bottom: .6rem;
  max-width: calc(100% - 1.2rem);
  padding: .35rem .75rem;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.84);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--c-ink);
  font-size: var(--fs-xs);
  font-weight: 650;
  line-height: 1.3;
}

/* fotky před/po mají štítky PŘED/PO v obrázku vlevo dole -> popisek vpravo nahoře */
.real-pair figcaption{
  top: .6rem;
  bottom: auto;
}

.real-cta{
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 1.5rem;
  border-radius: var(--r-l);
  background: var(--c-dark);
  color: var(--c-on-dark-muted);
}

.real-cta-title{
  margin: 0 0 .35rem;
  color: #fff;
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.real-cta p:not(.real-cta-title){ margin: 0 0 1.25rem; }

@media (min-width: 992px){
  .real-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }

  /* 1. řádek: výšku určuje dvojice 3:4, fotka vedle ji vyplní; 2. řádek: fotka 16:10 + výzva */
  .real-wide{ aspect-ratio: 16 / 10; }
  .real-pair ~ .real-wide:nth-child(3){ aspect-ratio: auto; }
  .real-pair ~ .real-wide:nth-child(3) img{ position: absolute; inset: 0; }

  .real-cta{ padding: 2.25rem; }
  .real-cta-title{ font-size: 1.75rem; }

  .real-item figcaption{ left: .9rem; bottom: .9rem; font-size: var(--fs-sm); }
  .real-pair figcaption{ top: .9rem; bottom: auto; }
}