html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

:root {
  --margin: 16px;
  --gutter: 16px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background: #fff;
  color: #847B6C;
  font-family: 'JetBrains Mono', monospace;
  line-height: 1.3;
}


/* === OBAL SEKCE === */
.grid-wrap {
  position: relative;
  margin: var(--margin);
}

/* === SEKCE === */
.first-section  { height: 100vh; }
.second-section { padding-top: 40px; padding-bottom: 40px; }

/* nová fotosekce mezi 2 a 3 */
.photo-section-2-5 { padding-top: 0; padding-bottom: 160px; }

.third-section  { padding-top: 0; padding-bottom: 0; }
.fourth-section { padding-top: 40px; padding-bottom: 160px; }
.six-section    { padding-top: 160px; padding-bottom: 160px; }

/* === POZADÍ MŘÍŽKY === */
.grid-bg {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
  pointer-events: none;
  z-index: 0;
}
.bg-col { background: rgba(255, 0, 0, 0.0); }

/* === SKUTEČNÝ GRID === */
.grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
  align-content: center;
  min-height: 100%;
}

/* === TEXTOVÉ BOXY === */
.text-box {
  font-size: 13.25px;
  font-weight: 500;
  grid-column: 1 / span 3;
  justify-self: start;
}

/* centrování vybraných sekcí */
.first-section .text-box,
.five-section  .text-box,
.six-section   .text-box {
  grid-column: 1 / -1;
  text-align: center;
  justify-self: center;
}

/* Sekce 1 – skutečný střed */
.first-section .grid {
  min-height: 100vh;
  display: grid;
  align-content: center;
  justify-items: center;
}

@media (max-width: 768px) {
  .first-section .grid {
    padding-bottom: 10vh;          /* posune text výš (můžeš změnit třeba na 10vh nebo 20vh) */
  }
}


/* Sekce 3 – 2.–4. sloupec */
.start-2-span-3 { grid-column: 2 / span 3; }

/* === NOVÁ FOTOSEKCE (mezi 2 a 3) === */
.photo-section-2-5 .photos-grid { 
  align-content: start; 
  row-gap: var(--gutter);
}

/* společné pro foto boxy */
.photo-box {
  margin: 0;
  width: 100%;
  background-position: center;
  background-size: cover;
  background-color: #c5c5c5;
  overflow: hidden;
}

/* Poměry stran */
.landscape { aspect-ratio: 4 / 3; }
.portrait  { aspect-ratio: 3 / 4; }

/* Rozložení 3 fotek mezi 2 a 3 (f1–f3) */
.photo-section-2-5 .f1 { grid-column: 2 / span 3; }
.photo-section-2-5 .f2 { grid-column: 1 / span 2; }
.photo-section-2-5 .f3 { grid-column: 3 / span 2; }

/* Backgroundy pro 3 fotky (změň cesty dle potřeby) */
.photo-section-2-5 .f1 { background-image: url("assets/photos/photo-2-1.jpg"); }
.photo-section-2-5 .f2 { background-image: url("assets/photos/photo-2-2.jpg"); }
.photo-section-2-5 .f3 { background-image: url("assets/photos/photo-2-3.jpg"); }

/* === PŮVODNÍ FOTOGALERIE (p1–p5) – nechávám, jen bez duplicit === */
.photos-grid { align-content: start; }

.p1 { grid-column: 2 / span 3; background-image: url("assets/photos/photo-1.jpg"); }
.p2 { grid-column: 1 / span 2; background-image: url("assets/photos/photo-2.jpg"); }
.p3 { grid-column: 2 / span 3; background-image: url("assets/photos/photo-3.jpg"); }
.p4 { grid-column: 2 / span 2; background-image: url("assets/photos/photo-4.jpg"); }
.p5 { grid-column: 3 / span 2; background-image: url("assets/photos/photo-5.jpg"); }

/* === SEKCE 6 – srdíčko větší === */
.six-section .text-box .heart {
  display: block;
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
  margin-top: 2px;
}

/* === LINKY === */
.email-link,
.map-link,
.link {
  color: #847B6C;
  font-weight: 600;
  transition: opacity 0.2s;
  }
.email-link:hover,
.map-link:hover,
.link:hover { opacity: 0.6; }

/* Centrovaná stránka */
.main-wrapper {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}

/* Papírové pozadí */
body {
  background-image:
    url("assets/paper-tile.jpg"),
    radial-gradient(120% 120% at 50% 20%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.0) 100%);
  background-repeat: repeat, no-repeat;
  background-size: 600px 600px, 100% 100%;
  background-position: top left, center;
  background-blend-mode: multiply;
}

/* Filtry (globální selektory) – nechávám podle tvého nastavení */
:is(h1,h2,h3,h4,h5,h6,p,span,em,strong,small,li,blockquote,code,pre,.text-box,.heart) {
  filter: url(#ink-reveal-text);
  will-change: filter;
}
a, .email-link, .map-link, .link {
  filter: url(#ink-reveal-link);
  will-change: filter;
}

/* === FONT SIZE PRO DESKTOP === */
@media (min-width: 769px) {
  body {
    font-size: 15px; /* můžeš změnit na jakoukoli hodnotu */
  }
  .text-box {
    font-size: 15px; /* přepíše to i text uvnitř boxů */
  }
}