/* =========================================================
   Viktória Mikušková — portfolio
   Palette & type reproduced from the original design
   ========================================================= */
:root{
  --cream:#FBEFE3;
  --terra:#C6673D;
  --olive:#676340;
  --btn:#666240;
  --sage:#ACB783;
  --peach:#F1CBAC;
  --dark:#011126;
  --ink:#1a1613;
  --muted:#4a453f;
  --content:1712px;
  --gutter:clamp(22px, 5.2vw, 100px);
  --serif:"Playfair Display", Georgia, serif;
  --sans:"Montserrat", "Segoe UI", Helvetica, Arial, sans-serif;

  /* ---- fluid type ----------------------------------------------------
     Sizes are anchored to the original design at a 1920px viewport and
     scale down gently on narrower screens, so live text stays in
     proportion with the hero artwork (which scales with the viewport). */
  --fs-nav:   clamp(14px,   0.52vw + 8.0px,  18px);   /* 1440→15.5 1920→18 */
  --fs-body:  clamp(14px,   0.31vw + 11.5px, 17px);   /* 1440→16.0 1920→17.4 */
  --fs-small: clamp(12px,   0.21vw + 9.5px,  13.5px);
  --fs-label: clamp(16px,   0.52vw + 10.5px, 21px);   /* section eyebrows */
  --fs-name:  clamp(32px,   2.30vw + 8.0px,  52px);   /* Mgr. Viktória …  */
  --fs-h2:    clamp(24px,   1.15vw + 10.0px, 32px);
  --fs-card:  clamp(18px,   0.42vw + 13.5px, 21px);

  /* ---- fluid vertical rhythm ---- */
  --sp-sect:  clamp(46px,   3.9vw + 4px,  86px);
  --sp-gap:   clamp(26px,   1.8vw + 6px,  42px);
  --measure:  68ch;                                   /* max text line length */
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}

.container{
  width:100%;
  max-width:calc(var(--content) + var(--gutter) * 2);
  margin:0 auto;
  padding:0 var(--gutter);
}

/* ======================= HEADER / NAV ======================= */
.site-header{
  background:var(--cream);
  padding:28px 0 26px;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo img{height:clamp(60px, 4.2vw, 80px);width:auto;}
.main-nav{
  display:flex;
  align-items:center;
  gap:clamp(24px, 2.9vw, 52px);
}
.main-nav a{
  font-size:var(--fs-nav);
  font-weight:400;
  letter-spacing:.13em;
  color:#0b0b0f;
  display:inline-flex;
  align-items:center;
  gap:9px;
  transition:color .2s ease;
}
.main-nav a:hover{color:var(--terra);}
.main-nav .has-caret svg{margin-top:2px;}

/* ---- dropdown ---- */
.nav-dropdown{position:relative;display:inline-flex;align-items:center;}
.nav-dropdown > .has-caret{cursor:pointer;}
.has-caret svg{transition:transform .24s ease;}
.dropdown-menu{
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%) translateY(6px);
  margin-top:16px;
  min-width:236px;
  background:#fff;
  border-radius:16px;
  box-shadow:0 22px 50px rgba(60,42,26,.20);
  padding:14px 0;
  display:flex;
  flex-direction:column;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
  z-index:80;
}
.dropdown-menu::before{content:"";position:absolute;top:-18px;left:0;right:0;height:18px;}
.dropdown-menu a{
  font-size:var(--fs-body);
  font-weight:400;
  letter-spacing:.01em;
  color:var(--dark);
  padding:11px 32px;
  display:block;
  transition:color .18s ease, background .18s ease;
}
.dropdown-menu a:hover{color:var(--terra);background:rgba(198,103,61,.08);}
.dropdown-menu a.active{color:var(--terra);font-weight:500;}
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.nav-dropdown:hover > .has-caret,
.nav-dropdown:focus-within > .has-caret{color:var(--terra);}
.nav-dropdown:hover > .has-caret svg,
.nav-dropdown:focus-within > .has-caret svg{transform:rotate(180deg);}

/* ---- hamburger ---- */
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  width:44px;
  height:44px;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width:26px;
  height:2px;
  background:var(--dark);
  border-radius:2px;
  transition:transform .25s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* ======================= HERO ======================= */
.hero{
  position:relative;
  line-height:0;
}
.hero-img{
  width:100%;
  height:auto;
}
.hero-btn{
  position:absolute;
  left:10.2%;
  top:67.5%;
  background:var(--btn);
  color:#fff;
  font-size:clamp(11px, 1.05vw, 20px);
  letter-spacing:.16em;
  font-weight:400;
  line-height:1;
  padding:clamp(10px,1vw,18px) clamp(16px,1.8vw,32px);
  border-radius:34px;
  transition:transform .2s ease, background .2s ease;
}
.hero-btn:hover{background:#54502f;transform:translateY(-2px);}

/* ======================= SLUŽBY ======================= */
.services{padding:var(--sp-sect) 0;}
.services-row{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:clamp(20px, 1.9vw, 30px);
}
.service{
  position:relative;
  display:flex;
  align-items:center;
  gap:15px;
}
.service:not(:last-child)::after{
  content:"";
  position:absolute;
  right:-13px;
  top:50%;
  transform:translateY(-50%);
  width:1px;
  height:66px;
  background:rgba(120,105,90,.34);
}
.service-icon{
  width:clamp(72px, 5.4vw, 96px);
  height:clamp(72px, 5.4vw, 96px);
  flex:0 0 auto;
}
.service-text{display:flex;flex-direction:column;gap:3px;}
.service-title{
  font-size:clamp(15px, 0.42vw + 10px, 18px);
  font-weight:600;
  letter-spacing:.03em;
  color:#20201c;
}
.service-sub{
  font-size:var(--fs-small);
  font-weight:400;
  color:var(--muted);
  letter-spacing:.01em;
}

/* ======================= VYBRANÉ PROJEKTY ======================= */
.projects{padding:var(--sp-sect) 0 var(--sp-gap);}
.section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
}
.projects-title{
  margin:0;
  font-family:var(--sans);
  font-size:var(--fs-label);
  font-weight:500;
  letter-spacing:.16em;
  color:var(--olive);
}
.projects-link{
  font-size:var(--fs-label);
  font-weight:500;
  letter-spacing:.05em;
  color:var(--terra);
  white-space:nowrap;
  transition:opacity .2s ease;
}
.projects-link:hover{opacity:.72;}

/* ======================= O MNE ======================= */
.about{padding:var(--sp-sect) 0;}
.about-grid{
  display:grid;
  grid-template-columns:0.94fr 1fr;
  gap:clamp(30px, 4.4vw, 84px);
  align-items:start;
}
.about-photo{align-self:start;}
.about-photo img{
  width:100%;
  max-width:700px;
  margin:0 auto;
}
.about-text{max-width:var(--measure);}

.eyebrow{
  margin:0 0 10px;
  font-size:var(--fs-label);
  font-weight:400;
  letter-spacing:.12em;
}
.eyebrow-olive{color:var(--olive);}
.eyebrow-dark{
  color:var(--dark);
  font-size:var(--fs-label);
  font-weight:500;
  letter-spacing:.08em;
  display:inline-block;
}
.eyebrow-rule{
  display:block;
  width:56px;
  height:3px;
  background:var(--terra);
  margin-top:9px;
}
.about-name{
  margin:8px 0 26px;
  font-family:var(--serif);
  font-weight:500;
  font-size:var(--fs-name);
  line-height:1.08;
  color:var(--dark);
  letter-spacing:.002em;
}
.about-name em{
  font-style:italic;
  color:var(--terra);
  font-weight:500;
}
.lead{
  margin:0 0 16px;
  font-size:var(--fs-body);
  font-weight:700;
  color:#000;
  line-height:1.6;
}
.para{
  margin:0 0 20px;
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.72;
  color:#000;
}
.para-en{color:var(--terra);}
.para-en em{font-style:italic;}

.soft-rule{
  border:0;
  border-top:1px solid rgba(120,105,90,.32);
  margin:var(--sp-gap) 0 calc(var(--sp-gap) * 0.75);
}
.tools{
  width:100%;
  max-width:690px;
  height:auto;
  margin-top:6px;
}

/* ======================= MOJA KREATÍVNA CESTA ======================= */
.journey{margin-top:6px;}
.role{
  margin:0 0 7px;
  font-size:var(--fs-body);
  font-weight:700;
  letter-spacing:.02em;
  color:var(--terra);
}
.role:not(:first-child){margin-top:26px;}
.role-sub{font-weight:400;font-style:italic;}
.journey ul{
  list-style:none;
  margin:0;
  padding:0;
}
.journey li{
  font-size:var(--fs-body);
  line-height:1.68;
  color:#000;
  padding-left:15px;
  position:relative;
}
.journey li::before{
  content:"-";
  position:absolute;
  left:0;
}

/* ======================= FOOTER ======================= */
.site-footer{padding:0 0 clamp(46px, 3.6vw, 72px);}
.footer-rule{
  border:0;
  border-top:1px solid rgba(198,103,61,.45);
  margin:var(--sp-gap) 0 calc(var(--sp-gap) * 1.1);
}
.footer-inner{
  display:flex;
  align-items:center;
  gap:clamp(28px, 2.8vw, 46px);
}
.footer-logo img{height:clamp(92px, 7vw, 122px);width:auto;}
.footer-contact{
  display:flex;
  flex-direction:column;
  gap:13px;
  margin-left:6px;
}
.footer-contact a{
  display:inline-flex;
  align-items:center;
  gap:14px;
  font-size:clamp(16px, 0.52vw + 8px, 21px);
  color:#111;
  transition:color .2s ease;
}
.footer-contact a:hover{color:var(--terra);}
.footer-contact .ci{color:var(--terra);flex:0 0 auto;}

.footer-social{
  display:flex;
  align-items:center;
  gap:20px;
  margin-left:auto;
}
.soc{
  width:44px;
  height:44px;
  border-radius:11px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  transition:transform .2s ease, filter .2s ease;
}
.soc:hover{transform:translateY(-3px);filter:brightness(1.05);}
.soc-ig{background:#b8336a;}
.soc-in{background:#1275b1;}
.soc-tt{background:#050505;}

/* ======================= HOME: PORTFOLIO CATEGORY TILES ======================= */
.category-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:26px;
  margin-top:38px;
}
.category-tile{
  background:#fff;
  border-radius:18px;
  padding:34px 24px 28px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  box-shadow:0 10px 30px rgba(90,66,42,.08);
  transition:transform .25s ease, box-shadow .25s ease;
}
.category-tile:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(90,66,42,.16);}
.category-tile img{width:clamp(62px, 4.6vw, 80px);height:clamp(62px, 4.6vw, 80px);margin-bottom:16px;}
.category-tile h3{
  margin:0 0 9px;
  font-family:var(--serif);
  font-weight:600;
  font-size:var(--fs-card);
  color:var(--dark);
}
.category-tile p{
  margin:0 0 18px;
  font-size:var(--fs-small);
  line-height:1.62;
  color:var(--muted);
  flex:1;
}
.category-tile .tile-link{
  font-size:calc(var(--fs-small) * 0.95);
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--terra);
}

/* ======================= PORTFOLIO SUBPAGE ======================= */
.cat-hero{padding:calc(var(--sp-sect) * 0.7) 0 8px;}
.breadcrumb{
  font-size:var(--fs-small);
  letter-spacing:.05em;
  color:var(--muted);
  margin:0 0 var(--sp-gap);
}
.breadcrumb a{color:var(--muted);transition:color .2s ease;}
.breadcrumb a:hover{color:var(--terra);}
.breadcrumb .sep{margin:0 9px;opacity:.6;}
.breadcrumb .current{color:var(--terra);}
.cat-hero-inner{
  display:flex;
  align-items:center;
  gap:clamp(24px, 2.4vw, 40px);
}
.cat-hero-icon{
  width:clamp(84px, 6.6vw, 116px);
  height:clamp(84px, 6.6vw, 116px);
  flex:0 0 auto;
}
.cat-eyebrow{
  margin:0 0 8px;
  font-size:var(--fs-small);
  letter-spacing:.22em;
  color:var(--olive);
  text-transform:uppercase;
}
.cat-title{
  margin:0 0 16px;
  font-family:var(--serif);
  font-weight:500;
  font-size:var(--fs-name);
  line-height:1.06;
  color:var(--dark);
}
.cat-desc{
  margin:0;
  font-size:var(--fs-body);
  line-height:1.72;
  color:#000;
  max-width:60ch;
}

.cat-projects{padding:var(--sp-sect) 0 var(--sp-gap);}
.cat-projects-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid rgba(120,105,90,.28);
  padding-top:var(--sp-gap);
  margin-bottom:6px;
}
.cat-projects-head .eyebrow{margin:0;}
.cat-count{font-size:var(--fs-small);letter-spacing:.05em;color:var(--muted);}
.project-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(26px, 2.4vw, 38px) clamp(22px, 2vw, 32px);
  margin-top:var(--sp-gap);
}
.project-card{
  display:flex;
  flex-direction:column;
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(90,66,42,.09);
  transition:transform .25s ease, box-shadow .25s ease;
}
.project-card:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(90,66,42,.17);}
.project-thumb{
  position:relative;
  aspect-ratio:4/3;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.thumb-sage-a{background:linear-gradient(140deg,#bccb9c 0%,#a3b27c 100%);}
.thumb-sage-b{background:linear-gradient(140deg,#ced7b2 0%,#adb888 100%);}
.thumb-peach-a{background:linear-gradient(140deg,#f4cfb1 0%,#e9b78f 100%);}
.thumb-peach-b{background:linear-gradient(140deg,#f0d9c6 0%,#e5bd9d 100%);}
.thumb-glyph{width:clamp(46px,3.6vw,60px);height:clamp(46px,3.6vw,60px);color:#fff;opacity:.62;}
.thumb-num{
  position:absolute;
  right:16px;
  bottom:6px;
  font-family:var(--serif);
  font-size:clamp(52px,4.4vw,70px);
  font-weight:600;
  color:#fff;
  opacity:.24;
  line-height:1;
  pointer-events:none;
}
.project-tag{
  position:absolute;
  top:15px;
  left:15px;
  background:rgba(255,255,255,.86);
  color:var(--dark);
  font-size:calc(var(--fs-small) * 0.86);
  letter-spacing:.09em;
  text-transform:uppercase;
  padding:5px 13px;
  border-radius:20px;
  backdrop-filter:blur(2px);
}
.project-body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1;}
.project-body h3{
  margin:0 0 7px;
  font-family:var(--serif);
  font-weight:600;
  font-size:var(--fs-card);
  color:var(--dark);
}
.project-body .ptype{
  margin:0 0 12px;
  font-size:calc(var(--fs-small) * 0.9);
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--olive);
}
.project-body p{
  margin:0 0 18px;
  font-size:var(--fs-small);
  line-height:1.65;
  color:var(--muted);
  flex:1;
}
.project-link{
  font-size:var(--fs-small);
  letter-spacing:.05em;
  font-weight:600;
  color:var(--terra);
  align-self:flex-start;
}

/* ---- CTA band ---- */
.cat-cta{padding:var(--sp-gap) 0 var(--sp-sect);}
.cat-cta-inner{
  background:var(--btn);
  border-radius:22px;
  padding:clamp(38px,3.4vw,58px) clamp(28px,4.6vw,66px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  flex-wrap:wrap;
}
.cat-cta-inner h2{
  margin:0 0 9px;
  font-family:var(--serif);
  font-weight:500;
  font-size:var(--fs-h2);
  color:#fff;
}
.cat-cta-inner p{margin:0;font-size:var(--fs-body);color:rgba(255,255,255,.82);}
.cta-btn{
  background:var(--cream);
  color:var(--btn);
  font-size:var(--fs-small);
  letter-spacing:.09em;
  font-weight:600;
  text-transform:uppercase;
  padding:16px 34px;
  border-radius:32px;
  white-space:nowrap;
  transition:transform .2s ease, background .2s ease;
}
.cta-btn:hover{transform:translateY(-2px);background:#fff;}

/* ======================= RESPONSIVE ======================= */
@media (max-width:1100px){
  :root{--content:100%;}
  .about-grid{grid-template-columns:1fr;gap:36px;}
  .about-photo img{max-width:480px;}
  .about-text{max-width:none;}
  .services-row{grid-template-columns:repeat(3,1fr);row-gap:34px;}
  .service:not(:last-child)::after{display:none;}
  .category-grid{grid-template-columns:repeat(3,1fr);}
  .project-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:760px){
  .site-header{padding:16px 0;position:relative;}
  .logo img{height:60px;}
  .nav-toggle{display:flex;}
  .main-nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--cream);
    padding:6px 0 18px;
    box-shadow:0 22px 42px rgba(60,42,26,.16);
    display:none;
    z-index:90;
  }
  .main-nav.open{display:flex;}
  .main-nav > a,
  .nav-dropdown > .has-caret{
    font-size:16px;
    letter-spacing:.12em;
    padding:14px var(--gutter);
  }
  .nav-dropdown{position:static;display:block;}
  .nav-dropdown > .has-caret{justify-content:space-between;}
  .dropdown-menu{
    position:static;
    transform:none;
    margin:0;
    min-width:0;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    background:transparent;
    box-shadow:none;
    border-radius:0;
    padding:0 0 8px;
  }
  .dropdown-menu a{padding:10px var(--gutter) 10px calc(var(--gutter) + 24px);}
  .services-row{grid-template-columns:repeat(2,1fr);}
  .service{flex-direction:column;text-align:center;gap:10px;}
  .service-icon{width:84px;height:84px;}
  .footer-inner{flex-wrap:wrap;gap:24px;justify-content:center;text-align:center;}
  .footer-social{margin:0 auto;}
  .hero-btn{font-size:13px;padding:12px 20px;left:8%;}
  .category-grid{grid-template-columns:repeat(2,1fr);gap:18px;}
  .cat-hero-inner{flex-direction:column;align-items:flex-start;gap:20px;}
  .cat-cta-inner{flex-direction:column;align-items:flex-start;text-align:left;}
}
@media (max-width:480px){
  .services-row{grid-template-columns:1fr;}
  .hero-btn{font-size:11px;padding:9px 14px;border-radius:22px;}
  .category-grid{grid-template-columns:1fr;}
  .project-grid{grid-template-columns:1fr;}
}