/* ================================================
   PROFIDOOR – Hlavný stylesheet
   Verzia: 2025
   Autor: Na mieru pre Profidoor s.r.o.
================================================ */

/* --- RESET & VARS --- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --oak:       #C8A97E;
  --oak-dark:  #8B6A3E;
  --oak-light: #F0E6D6;
  --coal:      #1C1C1A;
  --coal-m:    #2A2A27;
  --coal-l:    #3A3A36;
  --warm:      #FAF8F4;
  --cream:     #F2EDE3;
  --muted:     #7A7670;
  --border:    rgba(200,169,126,0.22);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'DM Sans', system-ui, sans-serif;
  --ease: cubic-bezier(0.23,1,0.32,1);
}

html { scroll-behavior:smooth; font-size:16px; }
body { font-family:var(--sans); background:var(--warm); color:var(--coal); overflow-x:hidden; line-height:1.6; }
img  { display:block; max-width:100%; height:100%; object-fit:cover; }
a    { text-decoration:none; color:inherit; }

/* --- TYPOGRAPHY --- */
.serif   { font-family:var(--serif); }
.eyebrow {
  display:flex; align-items:center; gap:.85rem;
  font-size:.72rem; letter-spacing:.25em; text-transform:uppercase; color:var(--oak);
  margin-bottom:1rem;
}
.eyebrow::before { content:''; display:block; width:32px; height:1px; background:var(--oak); flex-shrink:0; }

h1,h2,h3 { font-family:var(--serif); font-weight:300; line-height:1.12; }

/* --- BUTTONS --- */
.btn {
  display:inline-block; font-family:var(--sans); font-size:.78rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; border-radius:2px; cursor:pointer;
  transition:background .28s var(--ease), color .28s var(--ease), transform .2s;
  border:none;
}
.btn-dark  { background:var(--coal); color:var(--warm); padding:.95rem 2.4rem; }
.btn-dark:hover  { background:var(--oak); transform:translateY(-2px); }
.btn-oak   { background:var(--oak); color:var(--warm); padding:.95rem 2.4rem; }
.btn-oak:hover   { background:var(--oak-dark); transform:translateY(-2px); }
.btn-ghost { color:var(--coal); padding-bottom:3px; border-bottom:1px solid var(--coal); font-size:.78rem; font-weight:400; letter-spacing:.11em; text-transform:uppercase; transition:color .25s,border-color .25s; }
.btn-ghost:hover { color:var(--oak); border-color:var(--oak); }

/* --- NAV --- */
#nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.05rem 5rem;
  background:rgba(250,248,244,0.94);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  transition:box-shadow .3s;
}
#nav.scrolled { box-shadow:0 2px 28px rgba(28,28,26,.09); }

.logo { font-family:var(--serif); font-size:1.65rem; font-weight:300; letter-spacing:.1em; color:var(--coal); }
.logo span { color:var(--oak); }

.nav-links { list-style:none; display:flex; align-items:center; gap:2.4rem; }
.nav-links a { font-size:.76rem; font-weight:400; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); transition:color .25s; }
.nav-links a:hover, .nav-links a.active { color:var(--oak); }
.nav-links .nav-cta { background:var(--coal); color:var(--warm); padding:.55rem 1.4rem; border-radius:2px; font-size:.73rem; }
.nav-links .nav-cta:hover { background:var(--oak); color:var(--warm); }

/* Hamburger */
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:4px; }
.hamburger span { display:block; width:26px; height:1.5px; background:var(--coal); transition:all .3s; }
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(4px,4px); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(4px,-4px); }

.mob-menu {
  display:none; position:fixed; top:68px; left:0; right:0;
  background:var(--warm); border-bottom:1px solid var(--border);
  z-index:999; flex-direction:column; gap:0;
}
.mob-menu.open { display:flex; }
.mob-menu a { padding:1rem 2rem; font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; border-bottom:1px solid rgba(200,169,126,.12); color:var(--coal); transition:color .2s,background .2s; }
.mob-menu a:hover { color:var(--oak); background:var(--cream); }

/* --- HERO (home) --- */
.hero {
  min-height:100vh; padding-top:72px;
  display:grid; grid-template-columns:1fr 1fr;
}
.hero-left { display:flex; flex-direction:column; justify-content:center; padding:5rem 4rem 5rem 5rem; }
.hero-title { font-size:clamp(3rem,4.8vw,5.2rem); color:var(--coal); margin:1rem 0 2rem; }
.hero-title em { font-style:italic; color:var(--oak); }
.hero-desc { font-size:1.05rem; font-weight:300; color:var(--muted); line-height:1.85; max-width:400px; margin-bottom:3rem; }
.hero-actions { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.hero-right { position:relative; overflow:hidden; background:var(--coal-m); min-height:600px; }
.hero-right img { width:100%; height:100%; object-fit:cover; }
.hero-badge {
  position:absolute; bottom:2.5rem; right:2.5rem;
  background:var(--oak); color:var(--warm);
  width:104px; height:104px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  box-shadow:0 4px 24px rgba(200,169,126,.4);
}
.hero-badge strong { font-family:var(--serif); font-size:2.2rem; font-weight:300; line-height:1; }
.hero-badge small  { font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; margin-top:2px; }

/* --- STATS BAR --- */
.stats-bar {
  background:var(--coal); padding:2.8rem 5rem;
  display:flex; justify-content:center; align-items:center; flex-wrap:wrap;
}
.stat { text-align:center; padding:0 4.5rem; position:relative; }
.stat+.stat::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:34px; background:rgba(200,169,126,.22); }
.stat-num   { font-family:var(--serif); font-size:2.5rem; font-weight:300; color:var(--oak); line-height:1; margin-bottom:.35rem; }
.stat-label { font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(250,248,244,.42); }

/* --- PAGE HERO (inner pages) --- */
.page-hero {
  padding:9rem 5rem 5rem;
  background:var(--coal);
  min-height:340px;
  display:flex; flex-direction:column; justify-content:flex-end;
  position:relative; overflow:hidden;
}
.page-hero::before {
  content:'';
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(-45deg, transparent, transparent 40px, rgba(200,169,126,.025) 40px, rgba(200,169,126,.025) 41px);
}
.page-hero-bg { position:absolute; inset:0; z-index:0; }
.page-hero-bg img { width:100%; height:100%; object-fit:cover; opacity:.18; }
.page-hero-content { position:relative; z-index:1; }
.page-hero .eyebrow { color:var(--oak); }
.page-hero h1 { font-size:clamp(2.5rem,5vw,4.5rem); color:var(--warm); margin:.7rem 0 1rem; }
.page-hero p  { font-size:1.05rem; font-weight:300; color:rgba(250,248,244,.55); max-width:520px; line-height:1.8; }

/* --- GENERIC SECTION --- */
.section { padding:7rem 5rem; }
.section-sm { padding:5rem 5rem; }
.section-dark { background:var(--coal); }
.section-cream { background:var(--cream); }
.section-oak  { background:var(--oak-light); }

.section-header { margin-bottom:4.5rem; }
.section-title  { font-size:clamp(2rem,3.5vw,3.2rem); color:var(--coal); margin-top:.7rem; }
.section-dark .section-title { color:var(--warm); }

/* --- CARDS GRID 3-col --- */
.cards-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); }
.cards-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--border); }

.card {
  background:var(--warm); display:flex; flex-direction:column;
  overflow:hidden; cursor:pointer; transition:background .3s var(--ease);
  position:relative;
}
.card:hover { background:#F0EAE0; }
.card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:var(--oak); transform:scaleX(0); transition:transform .4s var(--ease); }
.card:hover::after { transform:scaleX(1); }

.card-img { width:100%; aspect-ratio:4/3; overflow:hidden; background:var(--cream); position:relative; }
.card-img img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.card:hover .card-img img { transform:scale(1.05); }
.card-img-ph { width:100%; height:100%; min-height:200px; display:flex; align-items:center; justify-content:center; color:rgba(200,169,126,.3); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; }

.card-body { padding:2rem 2.2rem 2.4rem; flex:1; display:flex; flex-direction:column; }
.card-num   { font-family:var(--serif); font-size:.78rem; color:var(--oak); letter-spacing:.1em; margin-bottom:.5rem; }
.card-title { font-family:var(--serif); font-size:1.6rem; font-weight:300; color:var(--coal); line-height:1.2; margin-bottom:.7rem; }
.card-desc  { font-size:.85rem; font-weight:300; color:var(--muted); line-height:1.75; flex:1; margin-bottom:1.4rem; }
.card-link  { display:inline-flex; align-items:center; gap:.5rem; font-size:.73rem; letter-spacing:.12em; text-transform:uppercase; color:var(--oak-dark); font-weight:500; transition:gap .3s var(--ease); }
.card:hover .card-link { gap:.9rem; }

/* dark card variant */
.card-dark { background:var(--coal-m); }
.card-dark:hover { background:var(--coal-l); }
.card-dark .card-title { color:var(--warm); }
.card-dark .card-desc  { color:rgba(250,248,244,.45); }

/* --- GALLERY GRID --- */
.gallery-masonry { display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:auto auto; gap:6px; }
.g-item { overflow:hidden; background:var(--coal-m); position:relative; cursor:pointer; }
.g-item img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.g-item:hover img { transform:scale(1.05); }
.g-large { grid-row:1/3; min-height:520px; }
.g-small { min-height:257px; }
.g-ph    { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:rgba(200,169,126,.22); font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; }

/* Gallery lightbox */
.lightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:9999; align-items:center; justify-content:center; }
.lightbox.open { display:flex; }
.lightbox img { max-width:90vw; max-height:90vh; object-fit:contain; border-radius:2px; }
.lb-close { position:fixed; top:1.5rem; right:2rem; color:rgba(255,255,255,.6); font-size:2rem; cursor:pointer; line-height:1; transition:color .2s; }
.lb-close:hover { color:var(--oak); }
.lb-prev,.lb-next { position:fixed; top:50%; transform:translateY(-50%); color:rgba(255,255,255,.5); font-size:2.5rem; cursor:pointer; transition:color .2s; padding:1rem; line-height:1; }
.lb-prev { left:1rem; }
.lb-next { right:1rem; }
.lb-prev:hover,.lb-next:hover { color:var(--oak); }

/* --- PROCESS STEPS --- */
.process-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:2.5rem; margin-top:4.5rem; position:relative; }
.process-steps::before { content:''; position:absolute; top:26px; left:calc(12.5% + 10px); right:calc(12.5% + 10px); height:1px; background:var(--oak); opacity:.28; }
.p-step { text-align:center; }
.p-circle { width:52px; height:52px; border-radius:50%; border:1px solid rgba(200,169,126,.4); background:var(--warm); display:flex; align-items:center; justify-content:center; margin:0 auto 1.4rem; font-family:var(--serif); font-size:1.2rem; font-weight:300; color:var(--oak-dark); }
.section-oak .p-circle { background:var(--oak-light); }
.p-title { font-family:var(--serif); font-size:1.1rem; font-weight:400; color:var(--coal); margin-bottom:.6rem; }
.p-desc  { font-size:.84rem; font-weight:300; color:var(--muted); line-height:1.75; }

/* --- TESTIMONIALS --- */
.testimonials { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--border); }
.testimonial  { background:var(--warm); padding:2.5rem 2.2rem; }
.stars { display:flex; gap:3px; margin-bottom:1.2rem; }
.star  { width:13px; height:13px; background:var(--oak); clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.t-text   { font-family:var(--serif); font-size:1.1rem; font-weight:300; font-style:italic; color:var(--coal); line-height:1.7; margin-bottom:1.5rem; }
.t-author { font-size:.77rem; font-weight:500; letter-spacing:.08em; color:var(--oak-dark); text-transform:uppercase; }
.t-loc    { font-size:.74rem; color:var(--muted); margin-top:2px; }

/* --- CONTACT SECTION --- */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:7rem; align-items:start; }
.contact-title { font-family:var(--serif); font-size:clamp(2rem,3vw,3rem); font-weight:300; color:var(--warm); line-height:1.15; margin:.7rem 0 1.5rem; }
.contact-desc  { font-size:.98rem; font-weight:300; color:rgba(250,248,244,.5); line-height:1.85; margin-bottom:2.8rem; }
.c-info-list   { display:flex; flex-direction:column; gap:1rem; }
.c-row         { display:flex; align-items:flex-start; gap:1.2rem; }
.c-label       { font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--oak); font-weight:500; min-width:72px; padding-top:1px; }
.c-val         { font-size:.94rem; font-weight:300; color:rgba(250,248,244,.7); line-height:1.6; }
.c-val a       { color:rgba(250,248,244,.7); transition:color .25s; }
.c-val a:hover { color:var(--oak); }

/* Form */
.form-wrap  { background:rgba(255,255,255,.04); border:1px solid rgba(200,169,126,.18); border-radius:4px; padding:2.8rem 2.5rem; }
.form-title { font-family:var(--serif); font-size:1.4rem; font-weight:300; color:var(--warm); margin-bottom:2rem; }
.form       { display:flex; flex-direction:column; gap:1.4rem; }
.form-row   { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.form-group { display:flex; flex-direction:column; gap:.4rem; }
.form-label { font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(250,248,244,.38); font-weight:400; }
.form-input, .form-select, .form-textarea {
  background:transparent; border:none; border-bottom:1px solid rgba(250,248,244,.18);
  padding:.75rem 0; font-family:var(--sans); font-size:.95rem; font-weight:300;
  color:var(--warm); outline:none; transition:border-color .25s; width:100%;
  appearance:none; -webkit-appearance:none;
}
.form-input::placeholder, .form-textarea::placeholder { color:rgba(250,248,244,.25); }
.form-select option { background:var(--coal-m); color:var(--warm); }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color:var(--oak); }
.form-textarea { resize:vertical; min-height:88px; }
.form-note  { font-size:.73rem; color:rgba(250,248,244,.25); margin-top:.3rem; }

/* --- MAP PLACEHOLDER --- */
.map-wrap { width:100%; height:360px; background:var(--coal-m); border:1px solid var(--border); border-radius:4px; overflow:hidden; position:relative; }
.map-wrap iframe { width:100%; height:100%; border:none; }

/* --- MATERIALS GRID --- */
.mat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.mat-card { background:var(--warm); border:1px solid var(--border); border-radius:4px; padding:1.8rem 1.5rem; text-align:center; transition:border-color .3s, transform .3s var(--ease); }
.mat-card:hover { border-color:var(--oak); transform:translateY(-4px); }
.mat-swatch { width:60px; height:60px; border-radius:50%; margin:0 auto 1rem; border:1px solid var(--border); }
.mat-name { font-family:var(--serif); font-size:1.1rem; font-weight:400; color:var(--coal); margin-bottom:.4rem; }
.mat-desc { font-size:.8rem; font-weight:300; color:var(--muted); line-height:1.7; }

/* --- ACCORDION --- */
.accordion { display:flex; flex-direction:column; gap:2px; }
.acc-item   { background:var(--warm); border:1px solid var(--border); border-radius:2px; overflow:hidden; }
.acc-head   { display:flex; justify-content:space-between; align-items:center; padding:1.4rem 1.8rem; cursor:pointer; transition:background .2s; }
.acc-head:hover { background:var(--cream); }
.acc-title  { font-family:var(--serif); font-size:1.15rem; font-weight:400; color:var(--coal); }
.acc-icon   { width:20px; height:20px; position:relative; flex-shrink:0; }
.acc-icon::before, .acc-icon::after { content:''; position:absolute; background:var(--oak); border-radius:1px; transition:transform .3s; }
.acc-icon::before { width:2px; height:16px; top:2px; left:9px; }
.acc-icon::after  { width:16px; height:2px; top:9px; left:2px; }
.acc-item.open .acc-icon::before { transform:rotate(90deg) scaleY(0); }
.acc-body   { display:none; padding:0 1.8rem 1.5rem; font-size:.92rem; font-weight:300; color:var(--muted); line-height:1.8; }
.acc-item.open .acc-body { display:block; }

/* --- FOOTER --- */
footer {
  background:#141412;
  padding:0;
}
.footer-top { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; padding:4rem 5rem; }
.footer-logo { font-family:var(--serif); font-size:1.55rem; font-weight:300; letter-spacing:.1em; color:rgba(250,248,244,.75); margin-bottom:1rem; }
.footer-logo span { color:var(--oak); }
.footer-tagline { font-size:.84rem; font-weight:300; color:rgba(250,248,244,.35); line-height:1.7; max-width:260px; }
.footer-col-title { font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--oak); font-weight:500; margin-bottom:1.2rem; }
.footer-links-list { list-style:none; display:flex; flex-direction:column; gap:.65rem; }
.footer-links-list a { font-size:.84rem; font-weight:300; color:rgba(250,248,244,.4); transition:color .25s; }
.footer-links-list a:hover { color:var(--oak); }
.footer-contact-item { font-size:.84rem; font-weight:300; color:rgba(250,248,244,.4); margin-bottom:.5rem; line-height:1.6; }
.footer-contact-item a { color:rgba(250,248,244,.4); transition:color .25s; }
.footer-contact-item a:hover { color:var(--oak); }
.footer-bottom { padding:1.4rem 5rem; border-top:1px solid rgba(200,169,126,.1); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer-copy   { font-size:.73rem; color:rgba(250,248,244,.22); }
.footer-legal  { display:flex; gap:1.8rem; }
.footer-legal a { font-size:.73rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(250,248,244,.28); transition:color .25s; }
.footer-legal a:hover { color:var(--oak); }

/* --- BREADCRUMB --- */
.breadcrumb { display:flex; align-items:center; gap:.6rem; font-size:.75rem; letter-spacing:.06em; color:rgba(250,248,244,.35); margin-bottom:2rem; }
.breadcrumb a { color:rgba(250,248,244,.4); transition:color .2s; }
.breadcrumb a:hover { color:var(--oak); }
.breadcrumb span { color:rgba(250,248,244,.2); }

/* --- REVEAL --- */
.reveal { opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s var(--ease); }
.reveal.visible { opacity:1; transform:none; }
.d1 { transition-delay:.08s; }
.d2 { transition-delay:.16s; }
.d3 { transition-delay:.24s; }
.d4 { transition-delay:.32s; }

/* --- RESPONSIVE --- */
@media (max-width:1100px) {
  #nav { padding:1rem 2.5rem; }
  .nav-links { display:none; }
  .hamburger { display:flex; }
  .hero { grid-template-columns:1fr; }
  .hero-right { min-height:52vw; }
  .hero-left { padding:3rem 2.5rem; }
  .stats-bar { padding:2rem; }
  .stat { padding:1rem 2.5rem; }
  .section, .section-sm { padding:5rem 2.5rem; }
  .page-hero { padding:8rem 2.5rem 4rem; }
  .cards-3 { grid-template-columns:1fr 1fr; }
  .cards-2 { grid-template-columns:1fr; }
  .gallery-masonry { grid-template-columns:1fr 1fr; }
  .g-large { grid-row:auto; min-height:240px; }
  .g-small { min-height:180px; }
  .process-steps { grid-template-columns:repeat(2,1fr); }
  .process-steps::before { display:none; }
  .testimonials { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; gap:3.5rem; }
  .footer-top { grid-template-columns:1fr 1fr; gap:2rem; }
  .footer-bottom { padding:1.2rem 2.5rem; }
  .mat-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:640px) {
  .cards-3, .cards-2 { grid-template-columns:1fr; }
  .gallery-masonry { grid-template-columns:1fr; }
  .process-steps { grid-template-columns:1fr; }
  .hero-title { font-size:2.6rem; }
  .stats-bar { flex-direction:column; align-items:center; }
  .stat+.stat::before { display:none; }
  .footer-top { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .mat-grid { grid-template-columns:1fr 1fr; }
}