/* ZÁKLADNÍ NASTAVENÍ A UTILITIES */
body {
  margin: 0;
  font-family: var(--font-main);
  background: var(--antracit);
  color: var(--beige-light);
  line-height: 1.7;
  
  padding: 0;
}

/* doporučeno globálně – aby padding šel do šířky prvků */
/* *, *::before, *::after { box-sizing: border-box; }

/* ukáže ti všechny boxy */
/** { outline: 1px solid red; } */

/* odsazení při kotvení na sekce kvůli sticky headeru */
/*
#uvod,
#omne,
#rty,
#oboci,
#permanentni-make-up,
#kosmetika,
#cenik,
#reference,
#kontakt {
  scroll-margin-top: 115px;
}*/
section[id] {
  scroll-margin-top: 115px;
  /* výška tvého headeru */
}

.dark-text {
  color: var(--antracit);
}

/* obecné sekce */
.section {
  margin: 0 auto;
  padding: 3rem 2rem;
  min-height: 450px;
}

.section-title {
  text-align: center;
  font-family: var(--font-title);
  font-size: 2rem;
  /*margin-bottom: 2.5rem;*/
  margin-top:0;
  letter-spacing: 1px;
}

/* mobilní úpravy základních prvků */
@media (max-width: 600px) {
  .section {
    padding: 1rem 0.6rem;
  }
}

/*====================  O MNĚ ===================*/
.about-grid {
  display: grid;
  grid-template-columns: 350px 1fr;
  /* fotka | text */
  grid-template-areas:
    "header header"
    "photo  body";
  column-gap: 2rem;
  row-gap: 1.25rem;
  max-width: 1000px;
  margin: 0 auto;
  align-items: start;
  /* přesně k začátku textu */
}

.about-header {
  grid-area: header;
}

.about-photo-box {
  grid-area: photo;
}

.about-body {
  grid-area: body;
}

/* box s fotkou */
.about-photo-box {
  width: 350px;
  height: 350px;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow:
    rgba(6, 24, 44, 0.4) 0 0 0 2px,
    rgba(6, 24, 44, 0.65) 0 4px 6px -1px,
    rgba(255, 255, 255, 0.08) 0 1px 0 inset;
}

.about-photo-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* drobná typografie */
.about-header h3 {
  margin: 0 0 .25rem 0;
}

.about-subtitle {
  margin: 0;
}

.about-body p:first-child {
  margin-top: 0;
}

/* =========================== FOOTER =========================== */
footer {
  background: var(--antracit);
  color: var(--beige);
  text-align: center;
  padding: 20px 1rem;
  font-size: 1rem;
  border-top: 2px solid var(--beige);
}




/* =============== Mobil: vše pod sebe, centrované =============*/
@media (max-width: 768px) {
  .about-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "photo"
      "body";
    text-align: center;
  }

  .about-photo-box {
    width: 250px;
    height: 250px;
    margin: 0 auto;
  }
    footer {
      padding: 10px 1rem;
      font-size: 0.75rem;
      border-top: 3px solid var(--beige);
    }
}