/* =========================================================
   MC ABOUT v2 – oprava šířky, lámání textu a překrývání prvků
   ========================================================= */

/* Vytáhne stránku z úzkého článkového sloupce Shoptetu */
.mc-about {
  width: min(1180px, calc(100vw - 72px)) !important;
  max-width: none !important;
  margin-left: 50% !important;
  margin-right: 0 !important;
  transform: translateX(-50%) !important;
  overflow: visible !important;
}

/* Bez nechtěného lámání slov po písmenech */
.mc-about h1,
.mc-about h2,
.mc-about h3,
.mc-about p,
.mc-about a,
.mc-about strong,
.mc-about span {
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* Hero – trochu klidnější rozložení */
.mc-about-hero {
  grid-template-columns: minmax(0, 1fr) minmax(340px, .95fr) !important;
  align-items: center !important;
}

.mc-about-title {
  font-size: clamp(34px, 4.2vw, 56px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.035em !important;
}

/* Všechny grid položky smějí být užší, aby nepřetékaly přes sebe */
.mc-about-grid > *,
.mc-about-hero > *,
.mc-about-people > *,
.mc-about-story-strip > * {
  min-width: 0 !important;
}

/* Fotky – i kdyby zůstaly uvnitř placeholderu, budou se chovat jako fotky */
.mc-about-photo {
  border: 0 !important;
  background: #fff !important;
  overflow: hidden !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.12) !important;
}

.mc-about-photo-placeholder {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: inherit !important;
  padding: 0 !important;
}

.mc-about-photo-placeholder span {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
}

.mc-about-photo img,
.mc-about-photo-placeholder img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* Konkrétní poměry fotek */
.mc-about-hero .mc-about-photo {
  min-height: 420px !important;
  aspect-ratio: 4 / 5 !important;
}

.mc-about-people .mc-about-photo {
  min-height: 460px !important;
  aspect-ratio: 4 / 5 !important;
}

.mc-about-story-strip .mc-about-photo {
  min-height: 330px !important;
  aspect-ratio: 4 / 3 !important;
}

.mc-about-grid-2 .mc-about-photo {
  min-height: 300px !important;
  aspect-ratio: 16 / 10 !important;
}

/* Sekce kdo za tím stojí – bez překrývání */
.mc-about-people {
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr) !important;
  gap: 24px !important;
  align-items: stretch !important;
}

/* Černý rodinný blok – bez přetékání fotky mimo kartu */
.mc-about-story-strip {
  grid-template-columns: minmax(0, 1fr) minmax(0, .95fr) !important;
  overflow: hidden !important;
}

/* Proces – na užším desktopu raději 2+2 než čtyři úzké nudle */
@media (max-width: 1180px) {
  .mc-about-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .mc-about-hero {
    grid-template-columns: 1fr !important;
  }

  .mc-about-title {
    font-size: clamp(34px, 6vw, 52px) !important;
  }

  .mc-about-hero .mc-about-photo {
    aspect-ratio: 16 / 9 !important;
    min-height: 340px !important;
  }
}

/* Mobil */
@media (max-width: 680px) {
  .mc-about {
    width: calc(100vw - 24px) !important;
    padding: 18px 0 38px !important;
  }

  .mc-about-hero,
  .mc-about-people,
  .mc-about-story-strip {
    grid-template-columns: 1fr !important;
  }

  .mc-about-trust,
  .mc-about-grid-4,
  .mc-about-grid-3,
  .mc-about-grid-2,
  .mc-about-media-list {
    grid-template-columns: 1fr !important;
  }

  .mc-about-title {
    font-size: clamp(34px, 12vw, 46px) !important;
    line-height: 1.08 !important;
  }

  .mc-about-head h2,
  .mc-about-story-strip h2,
  .mc-about-final h2 {
    font-size: clamp(28px, 9vw, 38px) !important;
  }

  .mc-about-hero .mc-about-photo,
  .mc-about-people .mc-about-photo,
  .mc-about-story-strip .mc-about-photo,
  .mc-about-grid-2 .mc-about-photo {
    min-height: 260px !important;
    aspect-ratio: 4 / 3 !important;
  }
}