/* =============================================================
   editagollova.cz — shared stylesheet
   Design tokens + mobile-first layout. Breakpoint: 1000px
   (matches the original isWide/isNarrow split).
   ============================================================= */

@import url('../fonts/poppins.css');

:root {
  /* palette */
  --cream: #f4efe9;
  --ink: #3a3936;
  --warm: #48453f;
  --muted: #8b8378;
  --muted-2: #6a655d;
  --taupe: #a8967c;
  --taupe-2: #b2a48d;
  --line: #c3b49a;
  --line-2: #cdc2b1;
  --hair: #d6ccbd;
  --gold: #8c7a5e;
  --inactive: #a49b8d;

  --font: 'Poppins', 'Century Gothic', 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;

  --bp: 1000px;
}

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

html,
body {
  margin: 0;
  padding: 0;
}

html {
  background: var(--cream);
}

body {
  min-height: 100vh;
  background: var(--cream);
  font-family: var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a:hover {
  color: var(--gold);
}

img {
  max-width: 100%;
}

/* Accessible skip link */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 8px 14px;
  background: var(--ink);
  color: var(--cream);
  font-size: 13px;
  letter-spacing: 0.1em;
}

.skip:focus {
  left: 8px;
  top: 8px;
  color: var(--cream);
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------
   Shared shell
   --------------------------------------------------------------- */

.stage {
  position: relative;
  min-height: 100vh;
  width: 100%;
}

/* Ink wash layer (fixed behind content). The image is set inline-safe via
   image-set so WebP is used where supported, PNG as fallback. */
.ink {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 0;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
  background-image: url('../ink-left.png');
  background-image: -webkit-image-set(url('../ink-left.webp') type('image/webp'), url('../ink-left.png') type('image/png'));
  background-image: image-set(url('../ink-left.webp') type('image/webp'), url('../ink-left.png') type('image/png'));
}

.ink__fade {
  position: absolute;
  inset: 0;
}

.content {
  position: relative;
  z-index: 1;
}

/* Mobile: keep the content column comfortably narrow. On sub-pages the back
   link, title and prose share the same 320px column (centered as a block, text
   still left-aligned) so their left edges line up. */
@media (max-width: 999px) {
  #main,
  .page .back,
  .page .title,
  .page .rule {
    width: 100%;
    max-width: 320px;
  }

  /* The rule spans the full 320px text column, but only its first 54px is
     painted (then transparent), so the hairline starts at the text's left
     edge and lines up with the copy above/below it. */
  .page .rule {
    background: linear-gradient(to right, var(--taupe-2) 54px, transparent 54px);
  }
}

/* Language switcher */
.lang {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.2em;
}

.lang a {
  color: var(--inactive);
}

.lang a:hover {
  color: var(--ink);
}

.lang [aria-current="true"] {
  color: var(--ink);
}

.lang .sep {
  width: 1px;
  height: 11px;
  background: var(--line);
}

/* Hairline rules */
.rule {
  width: 54px;
  height: 1px;
  background: var(--taupe-2);
  border: 0;
}

/* Contact / footer */
.contact {
  display: flex;
  align-items: center;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

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

.contact a:hover {
  color: var(--warm);
}

.contact .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--line);
}

/* ===============================================================
   HOME
   =============================================================== */

/* Ink — mobile: faint wide wash bleeding off the left, no fade overlay.
   Shared by the home and the sub-pages so their backgrounds match. */
.home .ink,
.page .ink {
  left: -90px;
  width: calc(60% + 90px);
}

.home .ink__fade {
  display: none;
}

.home .content {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 66px 22px 44px;
}

.home .lang {
  position: absolute;
  top: 18px;
  right: 22px;
}

.brand {
  margin: 0;
  font-weight: 200;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-align: center;
  font-size: clamp(32px, 10vw, 54px);
}

.home .rule {
  width: 44px;
  margin: 22px auto 18px;
}

.tagline {
  margin: 0;
  font-weight: 500;
  letter-spacing: 0.28em;
  color: var(--warm);
  font-size: 15px;
  text-align: center;
}

/* Services — mobile: stacked rows */
.services {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  margin-top: 34px;
  background: var(--cream);
  padding-left: 14px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}

.service {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 4px;
  min-height: 44px;
  transition: color 0.25s ease;
  border-bottom: 1px solid var(--hair);
}

.services .service:last-of-type {
  border-bottom: 0;
}

.service:hover {
  color: var(--gold);
}

.service__body {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.service__num {
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--taupe);
}

.service__label {
  font-size: 19px;
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 1.3;
}

.service__label br {
  display: none;
}

.service__cap {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.service__arrow {
  font-size: 19px;
  color: var(--muted-2);
  line-height: 1;
}

.svc-sep {
  display: none;
}

.home .contact {
  flex-direction: column;
  gap: 12px;
  margin-top: 38px;
}

.home .contact .dot {
  display: none;
}

/* HOME — desktop */
@media (min-width: 1000px) {
  .home .ink,
  .page .ink {
    left: 0;
    width: 44%;
  }

  .home .ink__fade {
    display: block;
    background: linear-gradient(90deg, rgba(244, 239, 233, 0) 62%, rgba(244, 239, 233, 0.6) 88%, var(--cream) 100%);
  }

  .home .content {
    margin-left: 44%;
    justify-content: center;
    padding: 0 4vw;
  }

  .home .lang {
    top: 30px;
    right: 3vw;
  }

  .brand {
    font-size: clamp(48px, 6.6vw, 104px);
    line-height: 1.06;
    letter-spacing: 0.07em;
    white-space: nowrap;
  }

  .home .rule {
    width: 54px;
    margin: 34px auto 26px;
  }

  .tagline {
    font-size: clamp(16px, 1.25vw, 22px);
    font-weight: 500;
    letter-spacing: 0.34em;
    text-align: center;
  }

  /* Services — desktop: horizontal columns with dividers */
  .services {
    flex-direction: row;
    align-items: stretch;
    align-self: auto;
    justify-content: center;
    margin-top: clamp(40px, 6vh, 76px);
    background: transparent;
    padding-left: 0;
    border-radius: 0;
    border: 0;
  }

  .service {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 0 clamp(16px, 2.2vw, 46px);
    min-width: 166px;
    border: 0;
  }

  .services .service:last-of-type {
    border: 0;
  }

  .service__body {
    align-items: center;
    gap: 16px;
  }

  .service__num {
    font-size: 13px;
  }

  .service__label {
    font-size: clamp(17px, 1.35vw, 23px);
    line-height: 1.45;
    letter-spacing: 0.04em;
    text-align: center;
    white-space: nowrap;
  }

  .service__label br {
    display: revert;
  }

  .service__rule {
    width: 26px;
    height: 1px;
    background: var(--line);
  }

  .service__arrow {
    font-size: 18px;
  }

  .svc-sep {
    display: block;
    width: 1px;
    background: var(--line-2);
  }

  .home .contact {
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
    flex-direction: row;
    justify-content: center;
    gap: 22px;
    margin-top: 0;
    font-size: 12.5px;
    letter-spacing: 0.1em;
  }

  .home .contact .dot {
    display: block;
  }
}

/* On mobile the service two-line label collapses to one line; the small rule
   between label and caption is only shown on desktop. */
.service__rule {
  display: none;
}

@media (min-width: 1000px) {
  .service__rule {
    display: block;
  }
}

/* ===============================================================
   SUB-PAGE (barevná typologie)
   =============================================================== */

.page .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(34px, 5vw, 76px) clamp(24px, 5vw, 88px) 64px;
}

.page .lang {
  position: absolute;
  top: 20px;
  right: 22px;
  z-index: 2;
}

@media (min-width: 1000px) {
  .page .lang {
    top: 30px;
    right: 3vw;
  }
}

.back {
  display: inline-block;
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--warm);
  margin-bottom: clamp(38px, 7vh, 78px);
  transition: color 0.25s ease;
}

.back:hover {
  color: var(--ink);
}

.eyebrow {
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--taupe);
}

.title {
  margin: 16px 0 0;
  font-weight: 200;
  font-size: clamp(38px, 5vw, 72px);
  line-height: 1.1;
  letter-spacing: 0.06em;
}

.page .rule {
  margin: 30px 0 0;
}

/* Intro / perex prose */
.lead {
  max-width: 620px;
  margin-top: clamp(30px, 5vh, 46px);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.lead p {
  margin: 0;
  font-weight: 300;
  font-size: clamp(16.5px, 1.4vw, 20px);
  line-height: 1.8;
  letter-spacing: 0.01em;
  color: var(--warm);
}

/* Booking call-to-action */
.cta {
  display: inline-block;
  margin-top: clamp(32px, 5vh, 48px);
  padding: 15px 40px;
  border-radius: 14px;
  background: var(--hair);
  color: var(--ink);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.cta:hover {
  background: var(--ink);
  color: var(--cream);
}

.blocks {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 44px;
  max-width: 760px;
}

.block {
  border: 1px dashed var(--line);
  padding: 26px 28px;
  background: rgba(255, 255, 255, 0.32);
}

.block__k {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--taupe);
}

.block__v {
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
  color: #948a7d;
}

/* Footer — same treatment as the home page: centered, stacked on mobile
   (no dots) and a centered row with dots on desktop. */
.page .contact {
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 56px;
}

.page .contact .dot {
  display: none;
}

/* Sub-page — desktop: centered content column in the cream area,
   clear of the 44% ink wash */
@media (min-width: 1000px) {
  .page .content {
    margin-left: 44%;
    padding: clamp(34px, 5vw, 76px) 4vw 64px;
    align-items: flex-start;
  }

  .page .contact {
    flex-direction: row;
    justify-content: center;
    gap: 22px;
    font-size: 12.5px;
    letter-spacing: 0.1em;
  }

  .page .contact .dot {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}