/* Podstránka /realizace/ (v6) – zakázky jako dvojice galerie + text, pod tím postup, recenze a kontakt.
   Sekce Realizace na homepage má vlastní realizace/style.css (widget). Štítky na fotkách jsou nahoře:
   fotky před/po i detail ze Železného Brodu mají text vlevo dole přímo v obrázku.
********************************************************************* */

/* Úvod: společné třídy .page-hero / .page-title / .page-lead / .page-stats v css/base.css */

/* Zakázky */
.real-project{
  display: grid;
  gap: 1.5rem;
  padding: clamp(2rem, 1.5rem + 2vw, 3.5rem) 0;
}

.real-project + .real-project{ border-top: 1px solid var(--c-line); }
.real-project:first-child{ padding-top: 0; }

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

.real-photo{
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--c-bg-tint);
  border-radius: var(--r-l);
  aspect-ratio: 4 / 3;
}

.real-photo img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.real-photo figcaption{
  position: absolute;
  top: .6rem;
  left: .6rem;
  max-width: calc(100% - 1.2rem);
  padding: .3rem .7rem;
  color: var(--c-ink);
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 650;
  line-height: 1.3;
}

/* 3 fotky: před a během nahoře, hotovo přes celou šířku */
.real-project--three .real-photo:last-child{
  grid-column: span 2;
  aspect-ratio: 16 / 10;
}

/* na výšku + na šířku vedle sebe, stejně vysoké */
.real-project--portrait .real-gallery{ grid-template-columns: minmax(0, 3fr) minmax(0, 4fr); }
.real-project--portrait .real-photo:first-child{ aspect-ratio: 3 / 4; }
.real-project--portrait .real-photo:last-child{ aspect-ratio: auto; }

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

.real-project--single .real-photo{ grid-column: span 2; }

.real-kicker{
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0 0 .6rem;
  color: var(--c-brand);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.real-body h2{
  margin: 0 0 .7rem;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
}

.real-body > p{
  max-width: 34rem;
  margin: 0 0 1rem;
  color: var(--c-text);
}

.real-done-title{
  margin: 1.25rem 0 .5rem !important;
  color: var(--c-ink) !important;
  font-weight: 700;
}

.real-done{
  display: grid;
  gap: .45rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.real-done li{
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  color: var(--c-ink);
  line-height: 1.45;
}

.real-done .ic{
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: #fff;
  background: var(--c-brand);
  border-radius: 50%;
  font-size: .65rem;
}

.real-links{
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.5rem;
  margin-top: 1.25rem !important;
}

.real-links a{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--c-brand);
  font-weight: 650;
  text-decoration: none;
}

.real-links a:hover{ color: var(--c-brand-700); }
.real-links .ic{ font-size: .8em; transition: transform var(--dur) var(--ease); }
.real-links a:hover .ic{ transform: translateX(3px); }

.real-more{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 2rem;
  margin-top: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--c-bg-tint);
  border-radius: var(--r-l);
}

.real-more p{
  margin: 0;
  color: var(--c-text);
}

@media (min-width: 992px){
  .real-project{
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: 3.5rem;
  }

  /* střídání stran */
  .real-project:nth-child(even) .real-gallery{ order: 2; }

  .real-gallery{ gap: .75rem; }
}