@charset "UTF-8";
/* ==========================================================================
   L’Eterna Promessa – stránka O nás (/o-nas), design v2
   Doplněk k /css/site.css (úvod s fotkou, pás fotek a tmavá sekce jsou tam).
     1. Kdo jsme: text a dvě fotky přes sebe
     2. Tým: skleněné karty na tmavé sekci
     3. Kontakt: karta s fotkou
   ========================================================================== */

/* ---------- 1. Kdo jsme ---------- */
.on-kdo__mrizka {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
}

.on-kdo .lp-stitek {
  justify-content: flex-start;
}

.on-fotky {
  position: relative;
  padding: 0 0 clamp(3rem, 8vw, 5rem) clamp(1.5rem, 6vw, 4rem);
}

.on-fotky__hlavni {
  --odhal-r: var(--r-l);
  border-radius: var(--r-l);
}

.on-fotky__hlavni img {
  aspect-ratio: 4 / 5;
}

.on-fotky__mala {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48%;
  border: 6px solid var(--krem);
  border-radius: var(--r);
  box-shadow: var(--stin-karty-vetsi);
}

.on-fotky__mala img {
  aspect-ratio: 4 / 3;
}

.on-fotky__motto {
  position: absolute;
  right: 0;
  bottom: 0.4rem;
  max-width: 48%;
  margin: 0;
  font-size: 0.7rem;
  text-align: right;
  color: var(--lp-inkoust-3, var(--tlumena));
}

@media (min-width: 56rem) {
  .on-kdo__mrizka {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 55.99rem) {
  .on-fotky__hlavni img {
    aspect-ratio: 4 / 3;
  }
}

.on-fotopas {
  margin-top: calc(-1 * var(--sekce) / 2);
}

/* ---------- 2. Tým ----------
   ul.lp-tym.on-tym > li.lp-oddeleni (karta) > .lp-oddeleni__text:
   číslo, h3, dl.on-lide (role = dt, jména = dd) a popis. */
.on-tym-sekce .lp-hlavicka-sekce h2 {
  color: #FFFFFF;
}

.on-tym.lp-tym {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 48rem) {
  .on-tym.lp-tym {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.on-tym .lp-oddeleni {
  color: var(--na-tmave);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: none;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: background-color 0.5s var(--ease-out), border-color 0.5s var(--ease-out);
}

.on-tym .lp-oddeleni:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(142, 197, 232, 0.45);
}

.on-tym .lp-oddeleni__text {
  padding: clamp(1.6rem, 3.5vw, 2.4rem);
}

.on-tym__cislo {
  display: block;
  margin-bottom: 1rem;
  font: italic 300 2.4rem/1 var(--f-titul);
  color: var(--led-svetla);
}

.on-tym .lp-oddeleni h3 {
  margin: 0 0 0.25rem;
  font-size: clamp(1.6rem, 1.35rem + 0.8vw, 2rem);
  color: #FFFFFF;
}

.on-tym .lp-oddeleni__text > p {
  margin: 0;
  color: var(--na-tmave-2);
}

/* kdo je v oddělení (dt = role, dd = jména) */
.on-lide {
  display: grid;
  gap: 0.85rem;
  margin: 1.1rem 0 1.25rem;
  padding: 1.1rem 0;
  border-block: 1px solid rgba(255, 255, 255, 0.12);
}

.on-lide > div {
  display: grid;
  gap: 0.15rem;
}

.on-lide dt {
  font: 500 0.7rem/1.4 var(--f-text);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--led-svetla);
}

.on-lide dd {
  margin: 0;
  font: 400 1.35rem/1.3 var(--f-titul);
  color: #FFFFFF;
}

/* ---------- 3. Kontakt ---------- */
.on-kontakt .lp-stitek {
  justify-content: flex-start;
}

.on-karta {
  overflow: hidden;
  background: var(--bila);
  border-radius: var(--r-l);
  box-shadow: var(--stin-karty-vetsi);
}

.on-karta__foto {
  border-radius: 0;
}

.on-karta__foto img {
  aspect-ratio: 16 / 8;
}

.on-karta .lp-kontakt {
  margin: 0;
  padding: 0.5rem clamp(1.25rem, 3vw, 2rem) 1rem;
  border-bottom: 0;
}

.on-karta .lp-kontakt > div:first-child {
  border-top: 0;
}

/* tlačítka „Kontakt a poptávka“ a „Instagram“ pod sebou stejně široká */
@media (min-width: 56rem) {
  .on-kontakt-akce {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
  }
}

/* ---------- Vysoký kontrast (Windows) ---------- */
@media (forced-colors: active) {
  .on-tym .lp-oddeleni,
  .on-karta {
    border: 1px solid CanvasText;
  }
}