/* ==========================================================================
   TimLuks – about.css
   Sekcia „O nás“ (#o-nas): nadpis na stred + krátky úvodný text, pod nimi skutočné stĺpcové
   ("murárske"/masonry) rozloženie – 5 stĺpcov (.about__col) vedľa seba, každý vlastný zvislý
   zásobník (fotky, videá, slogany), kde dlaždice nadväzujú priamo jedna na druhú (len malý gap,
   žiadna umelá medzera). Medzery medzi stĺpcami vznikajú LEN hore, prirodzene – prvá dlaždica
   v každom stĺpci má inú výšku (fotka 9/16 vysoká, video 16/9 nízke, slogan stredný), takže vrch
   pôsobí ako schody, presne na výslovnú žiadosť; zvyšok stĺpca už na to bez medzery nadväzuje
   (na rozdiel od predošlej verzie s 3 samostatnými riadkami + margin-top hackmi).

   Slogan (.about__item--slogan) má rovnaké pozadie ako stránka a žiadny okraj – nevyzerá ako
   kartička, len text s veľkými zelenými úvodzovkami hneď pred prvým a za posledným písmenom
   (::before/::after na .about__item-slogan-text). 2 z 3 slogan dlaždíc majú skutočný text
   (dodal používateľ), 1 je zatiaľ placeholder – TODO komentár v index.html.

   Video je len tlačidlo – samotný súbor (desiatky MB) sa nesťahuje, kým naň niekto neklikne
   (assets/js/about-video.js).
   ========================================================================== */

.about__lead {
  max-width: 46em;
  margin-top: calc(clamp(28px, 4vw, 56px) * -1 + 14px);   /* pritiahne text bližšie k nadpisu než default u section__title */
  margin-inline: auto;
  margin-bottom: clamp(28px, 4vw, 48px);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  text-align: center;
  color: var(--muted);
}

/* ---------- 5 stĺpcov, masonry ---------- */

.about__gallery {
  display: flex;
  flex-wrap: wrap;   /* na úzkych obrazovkách sa 5 stĺpcov zalomí do viacerých riadkov (po 2), inak by pretiekli */
  justify-content: center;
  align-items: flex-start;   /* stĺpce môžu byť rôzne dlhé, zarovnané k vrchu */
  gap: clamp(16px, 3vw, 20px) clamp(8px, 1.4vw, 14px);
}

.about__col {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.6vw, 16px);   /* medzera MEDZI dlaždicami v tom istom stĺpci – jediná "medzera" v strede/dole galérie */
  width: clamp(130px, 16vw, 195px);   /* spoločná šírka stĺpca (aj videí); zmenšené oproti prvému pokusu (18vw/220px), lebo 5× 220px + gapy sa na 1280px šírke tesne nezmestilo a 5. stĺpec sa zalomil dole */
}

.about__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--line);
}

.about__photo { aspect-ratio: 9 / 16; }
.about__video { aspect-ratio: 16 / 9; }

.about__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}

@media (hover: hover) {
  .about__photo:hover img { transform: scale(1.06); }
}

/* ---------- Mobile (<600px): namiesto celej galérie len úzky, ručne vybraný výber 7 dlaždíc –
   2 fotky / video / slogan / 2 fotky / video – nech to nie je na telefóne preplnené. Rovnaká
   hranica (599.98px) ako .hero__actions v base.css. ---------- */

.about__gallery-mobile { display: none; }

@media (max-width: 599.98px) {
  .about__gallery {
    display: none;
  }

  .about__gallery-mobile {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 3vw, 16px);
  }

  .about__gallery-mobile__row {
    display: flex;
    gap: clamp(10px, 3vw, 16px);
  }

  .about__gallery-mobile__row > .about__photo {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* ---------- Slogan (2 skutočný text, 1 placeholder – TODO v index.html) ---------- */

.about__item--slogan {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 2.6vw, 28px) clamp(4px, 1vw, 10px);
  text-align: center;
  background: var(--bg);   /* rovnaké ako pozadie stránky – žiadna "kartička" */
  border: none;
}

.about__item-slogan-text {
  font-family: var(--font-headline);
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  font-weight: 800;
  line-height: 1.3;
  color: var(--ink);
}

/* Veľké zelené úvodzovky hneď pred prvým a hneď za posledným písmenom textu (nie samostatne nad ním). */
.about__item-slogan-text::before,
.about__item-slogan-text::after {
  font-family: var(--font-headline);
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  font-weight: 800;
  color: var(--accent);
  line-height: 0;   /* veľká úvodzovka nesmie natiahnuť výšku riadku (medzera nad posledným riadkom) */
}

.about__item-slogan-text::before { content: "\201C"; }
.about__item-slogan-text::after { content: "\201E"; }    /* spodná úvodzovka na konci */

/* ---------- Video (klik na prehratie – pozri assets/js/about-video.js) ---------- */

.about__video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about__video-play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  border: 0;
  /* Tmavý prechod nad náhľadovou fotkou, nech je tlačidlo na prehratie čitateľné na hocijakom obrázku. */
  background: linear-gradient(180deg, rgba(5, 6, 8, 0.18), rgba(5, 6, 8, 0.62) 70%);
  color: #f5f4f0;
  text-align: center;
  cursor: pointer;
}

.about__video-icon {
  display: grid;
  place-items: center;
  width: 42px;   /* spolu s dlaždicou o kúsok väčšie (predtým 34px, pôvodne 52px) */
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}
/* Samotná trojuholníková dráha v SVG (pozri index.html) má bounding box presne vycentrovaný
   v 24×24 viewBoxe (M6.5 5v14l11-7z), takže stačí len vycentrovať celé SVG v kruhu – žiadny
   dodatočný posun netreba (predtým tu bol margin, čo to naopak vychyľovalo). */
.about__video-icon svg {
  display: block;
  width: 15px;
  height: 15px;
}

@media (hover: hover) {
  .about__video-play:hover .about__video-icon {
    background: var(--accent);
    color: var(--ink-fixed);
    transform: scale(1.08);
  }
}

.about__video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}