/* ---------- Proměnné ---------- */

:root {
  --night: #121110;
  --night-soft: #1d1b19;
  --champagne: #c9a96e;
  --text: #ece6dc;
  --muted: #9a9289;

  --font-heading: "Playfair Display", Georgia, serif;
  --font-text: "Jost", Arial, sans-serif;

  --content-width: 1180px;
}

/* ---------- Základ ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--night);
  color: var(--text);
  font-family: var(--font-text);
  font-weight: 300;
  line-height: 1.75;
}

img,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--champagne);
  font-size: 0.75rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
}

.button {
  display: inline-block;
  padding: 1em 2.2em;
  border: 1px solid var(--champagne);
  color: var(--champagne);
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
}

.button:hover {
  background: var(--champagne);
  color: var(--night);
}

.muted {
  color: var(--muted);
}

/* ---------- Hlavička ---------- */

/*
  Transparent logo with completed dots
  (Sources/logo/el-logo-transparent-full-dots.png) shown straight
  on the page background, without a plate (user's choice).
*/
.logo {
  display: block;
  line-height: 0;
}

/*
  Proportional scaling only: fixed height, computed width.
  The canvas (319×221) is larger than the original logo (232×156) because
  of the completed dots, so 79 px keeps the frame as big as before (56 px).
  The negative vertical margin lets the dots reach into the header padding,
  so the header keeps its height. Nothing is cropped.
*/
.logo img {
  width: auto;
  height: 79px;
  margin: -11.5px 0;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 40px;
  background: linear-gradient(rgba(18, 17, 16, 0.9), rgba(18, 17, 16, 0));
}

.nav {
  display: flex;
  gap: 32px;
}

.nav a,
.link-shop {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
}

.link-shop {
  color: var(--champagne);
}

/* Položka menu stránky, na které návštěvník právě je. */
.nav a.is-active {
  color: var(--champagne);
  border-bottom: 1px solid var(--champagne);
}

/* Odkazy v menu a tlačítka se nesmí lámat na víc řádků. */
.nav a,
.button,
.link-shop {
  white-space: nowrap;
}

/* ---------- Úvod ---------- */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  padding: 120px 40px 80px;
}

.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

/*
  Na širokých obrazovkách by fotka na výšku přes celou šířku ořízla hlavu nebo nohy.
  Proto tu stojí vpravo v plné výšce úvodu, takže je vidět celá postava.
  Okraje fotky se maskou plynule ztrácí do tmavého pozadí stránky.
*/
@media (min-width: 861px) {
  .hero__image {
    left: auto;
    right: 6%;
    width: auto;
    max-width: none;
    height: 100%;
    object-fit: contain;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  }
}

/* Ztmavení zleva, aby byl text čitelný i přes světlé části fotky. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(18, 17, 16, 0.85) 0%, rgba(18, 17, 16, 0.2) 70%);
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 560px;
}

.hero__title {
  margin: 0 0 20px;
  font-family: var(--font-heading);
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 400;
  line-height: 1.05;
}

.hero__title em {
  color: var(--champagne);
}

.hero__lead {
  margin: 0 0 36px;
  font-size: 1.1rem;
}

/* ---------- Podstránky ---------- */

/* Na podstránkách není fotka přes celou obrazovku, hlavička proto má plné pozadí. */
.header--solid {
  background: var(--night);
  border-bottom: 1px solid rgba(201, 169, 110, 0.25);
}

/* Hlavička je fixní, obsah podstránky proto začíná pod ní. */
.page {
  padding-top: 110px;
}

.page .section:first-child {
  padding-top: 48px;
}

/* ---------- Sekce ---------- */

.section {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 110px 40px;
}

.section--light {
  max-width: none;
  background: var(--night-soft);
}

.section--light > * {
  max-width: var(--content-width);
  margin: 0 auto;
}

.section--light > .tailor-intro {
  max-width: 760px;
}

.section--line {
  border-top: 1px solid rgba(201, 169, 110, 0.25);
}

.section__title {
  margin: 0 0 48px;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1.15;
}

/* ---------- Galerie ---------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: -16px 0 40px;
}

.filter {
  padding: 0.6em 1.4em;
  border: 1px solid rgba(201, 169, 110, 0.45);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-family: var(--font-text);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}

.filter:hover {
  border-color: var(--champagne);
}

.filter.is-active {
  border-color: var(--champagne);
  background: var(--champagne);
  color: var(--night);
}

/*
  Mřížka „masonry“ přes CSS sloupce: fotky různé výšky na sebe navazují bez mezer.
  Pořadí jde shora dolů po sloupcích, proto jsou fotky v HTML promíchané podle kategorií.
*/
.gallery {
  columns: 3 280px;
  column-gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gallery__item {
  break-inside: avoid;
  margin-bottom: 16px;
  animation: gallery-appear 0.5s ease both;
}

/* Skryté položky po filtrování (atribut hidden nastavuje script.js). */
.gallery__item[hidden] {
  display: none;
}

.gallery__link {
  position: relative;
  display: block;
  overflow: hidden;
}

.gallery__link img {
  width: 100%;
  height: auto;
  transition: transform 0.6s ease, filter 0.6s ease;
}

/* Jemný přechod zespodu, na kterém je čitelný popisek. */
.gallery__link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 17, 16, 0) 55%, rgba(18, 17, 16, 0.75) 100%);
  opacity: 0;
  transition: opacity 0.4s;
}

.gallery__caption {
  position: absolute;
  left: 20px;
  bottom: 16px;
  z-index: 1;
  color: var(--champagne);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s, transform 0.4s;
}

.gallery__link:hover img,
.gallery__link:focus-visible img {
  transform: scale(1.04);
  filter: brightness(1.05);
}

.gallery__link:hover::after,
.gallery__link:focus-visible::after,
.gallery__link:hover .gallery__caption,
.gallery__link:focus-visible .gallery__caption {
  opacity: 1;
  transform: none;
}

.gallery__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 24px;
  margin: 56px 0 0;
  color: var(--muted);
  text-align: center;
}

@keyframes gallery-appear {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

/* ---------- Prohlížeč fotek ---------- */

.lightbox {
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(10, 9, 8, 0.96);
  color: var(--text);
}

.lightbox::backdrop {
  background: rgba(10, 9, 8, 0.9);
}

.lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
  padding: 56px 72px 32px;
}

.lightbox__image {
  max-width: 100%;
  max-height: calc(100vh - 140px);
  object-fit: contain;
}

.lightbox__caption {
  margin-top: 16px;
  color: var(--champagne);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.lightbox__button {
  position: absolute;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(201, 169, 110, 0.45);
  border-radius: 50%;
  background: rgba(18, 17, 16, 0.6);
  color: var(--champagne);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.lightbox__button:hover {
  background: var(--champagne);
  color: var(--night);
}

.lightbox__button--close {
  top: 16px;
  right: 16px;
}

.lightbox__button--prev,
.lightbox__button--next {
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__button--prev {
  left: 16px;
}

.lightbox__button--next {
  right: 16px;
}

@media (prefers-reduced-motion: reduce) {
  .gallery__item {
    animation: none;
  }

  .gallery__link img,
  .gallery__caption {
    transition: none;
  }
}
/* ---------- Krejčovství ---------- */

.tailor {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  gap: 64px;
}

.tailor img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.tailor__contact {
  margin: -24px 0 28px;
  padding: 0;
  list-style: none;
  line-height: 2;
}

.tailor__contact a {
  color: var(--champagne);
  text-decoration: none;
}

.tailor__contact a:hover {
  text-decoration: underline;
}

.tailor-intro {
  max-width: 760px;
  text-align: center;
}

.tailor-intro .section__title {
  margin-bottom: 24px;
}

.services {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}

.services__title {
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(201, 169, 110, 0.35);
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 400;
}

.services__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Položky seznamu s drobnou šampaňskou tečkou místo běžné odrážky. */
.services__list li {
  position: relative;
  padding: 6px 0 6px 22px;
}

.services__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--champagne);
}

.services__closing {
  max-width: 760px;
  margin: 64px auto 0;
  color: var(--muted);
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-style: italic;
  text-align: center;
}

/* Fotky z dílny: stejná mřížka jako v galerii, jen tři sloupce bez filtru. */
.gallery--tailor {
  columns: 3 240px;
}

/* ---------- Prodejny ---------- */

/* Stránka prodejen je širší, aby se do řádku vešla fotka, údaje i mapa. */
.section--wide {
  max-width: 1400px;
}

.stores {
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Jedna prodejna = jeden řádek: fotka obchodu | údaje | mapa. */
.store {
  display: grid;
  grid-template-columns: 0.9fr 1fr 1.2fr;
  min-height: 300px;
  overflow: hidden;
  border: 1px solid rgba(201, 169, 110, 0.2);
  background: var(--night-soft);
  transition: border-color 0.3s;
}

.store:hover {
  border-color: rgba(201, 169, 110, 0.6);
}

.store__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.store__body {
  display: flex;
  flex-direction: column;
  padding: 24px 28px;
  font-size: 0.95rem;
  line-height: 1.6;
}

.store__body p {
  margin: 0;
}

.store__city {
  color: var(--champagne);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.store__name {
  margin: 6px 0 4px;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.2;
}

.store__note {
  color: var(--champagne);
  font-style: italic;
}

.store__address {
  margin: 12px 0 6px;
  font-style: normal;
}

.store__phone a {
  color: var(--text);
  text-decoration: none;
}

.store__phone a:hover {
  color: var(--champagne);
}

.store__hours,
.store__operator {
  color: var(--muted);
  font-size: 0.85rem;
}

/* Odkazy jsou vždy dole, i když má karta méně textu. */
.store__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: auto;
  padding-top: 16px;
}

.store__links a {
  color: var(--champagne);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
}

.store__links a:hover {
  text-decoration: underline;
}

.store__map {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 300px;
  border: 0;
  border-left: 1px solid rgba(201, 169, 110, 0.2);
  /* Tmavší mapa, aby ladila se stránkou. */
  filter: grayscale(0.4) brightness(0.9);
}

/* Užší obrazovka: nahoře fotka a údaje vedle sebe, mapa přes celou šířku pod nimi. */
@media (max-width: 1100px) {
  .store {
    grid-template-columns: 1fr 1fr;
  }

  .store__map {
    grid-column: 1 / -1;
    height: 260px;
    min-height: 0;
    border-left: 0;
    border-top: 1px solid rgba(201, 169, 110, 0.2);
  }
}

/* Mobil: všechno pod sebou. */
@media (max-width: 600px) {
  .store {
    grid-template-columns: 1fr;
  }

  .store__photo {
    aspect-ratio: 16 / 10;
    height: auto;
  }

  .store__body {
    padding: 20px;
  }

  .store__map {
    height: 240px;
  }
}
/* ---------- Patička ---------- */

.footer {
  padding: 40px;
  border-top: 1px solid rgba(201, 169, 110, 0.25);
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
}

.footer p {
  margin: 4px 0;
}

/* Dva subjekty vedle sebe, na mobilu pod sebou. */
.footer__companies {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 820px;
  margin: 0 auto;
}

.footer__company {
  font-style: normal;
  line-height: 1.8;
}

.footer__company strong {
  display: block;
  margin-bottom: 4px;
  font-size: 0.95rem;
}

@media (max-width: 600px) {
  .footer__companies {
    grid-template-columns: 1fr;
  }
}

/* ---------- Responzivita ---------- */

@media (max-width: 860px) {
  .tailor,
  .services {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 860px) {
  .header {
    flex-wrap: wrap;
    padding: 12px 16px;
  }

  .nav {
    order: 3;
    width: 100%;
    gap: 20px;
    overflow-x: auto;
  }

  /* Na úzké obrazovce je hlavička dvouřádková, tedy vyšší. */
  .page {
    padding-top: 130px;
  }

  .hero {
    padding: 140px 16px 48px;
  }

  .section {
    padding: 64px 16px;
  }

  /* Na mobilu dva sloupce i popisky viditelné, protože tam není najetí myší. */
  .gallery {
    columns: 2;
    column-gap: 10px;
  }

  .gallery__item {
    margin-bottom: 10px;
  }

  .gallery__caption {
    left: 10px;
    bottom: 8px;
    font-size: 0.6rem;
    opacity: 1;
    transform: none;
  }

  .gallery__link::after {
    opacity: 1;
  }

  .lightbox__figure {
    padding: 64px 8px 24px;
  }

  .lightbox__button--prev,
  .lightbox__button--next {
    top: auto;
    bottom: 16px;
    transform: none;
  }
}