/*
Theme Name: Fotografujem.com
Theme URI: https://www.fotografujem.com
Author: Peter Kutálek
Author URI: https://www.fotografujem.com
Description: Vlastný motív pre fotografujem.com — event, svadobná a športová fotografia. Filmový/kontaktný hárok dizajn.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: fotografujem
*/


  :root{
    --ink:#171613;
    --ink-soft:#211f1b;
    --ink-soft-2:#2a2722;
    --paper:#EDE6D8;
    --bone:#F4EFE4;
    --safelight:#C4432A;
    --silver:#8C897F;
    --border: rgba(244,239,228,0.14);
    --maxw: 1180px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--ink);
    color:var(--bone);
    font-family:'Inter', sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
  a{color:inherit; text-decoration:none;}
  h1,h2,h3{font-family:'Fraunces', serif; font-weight:500; letter-spacing:-0.01em;}
  .eyebrow{
    font-family:'Space Mono', monospace;
    font-size:12px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--safelight);
  }
  .frame-num{
    font-family:'Space Mono', monospace;
    font-size:12px;
    color:var(--silver);
    letter-spacing:0.05em;
  }

  /* grain overlay */
  .grain{
    position:fixed; inset:0; pointer-events:none; z-index:999;
    opacity:0.045; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* NAV */
  header{
    position:sticky; top:0; z-index:100;
    background:rgba(23,22,19,0.88);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--border);
  }
  nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 0;
  }
  .logo{font-family:'Fraunces', serif; font-size:19px; font-weight:600;}
  .logo span{color:var(--safelight);}
  .navlinks{display:flex; gap:32px; font-size:14px;}
  .navlinks a{color:var(--silver); transition:color .2s;}
  .navlinks a:hover{color:var(--bone);}
  .navlinks a.cta{
    color:var(--ink); background:var(--bone);
    padding:8px 16px; border-radius:2px; font-weight:500;
  }
  .navlinks a.cta:hover{background:var(--safelight); color:var(--bone);}
  .menu-btn{display:none; background:none; border:none; color:var(--bone); font-size:22px; cursor:pointer;}
  .social-icons{display:flex; gap:14px; align-items:center;}
  .social-icons a{color:var(--silver); display:flex;}
  .social-icons a:hover{color:var(--safelight);}
  .social-icons svg{width:18px; height:18px;}

  /* contact sheet strip (signature element) */
  .filmstrip{
    display:flex; gap:0; overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  }
  .filmstrip .track{display:flex; animation:scroll 38s linear infinite;}
  @media (prefers-reduced-motion:reduce){ .filmstrip .track{animation:none;} }
  @keyframes scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
  .fframe{
    width:96px; height:64px; flex:none;
    border-left:1px solid var(--border);
    background:
      repeating-linear-gradient(115deg, var(--ink-soft) 0 6px, var(--ink-soft-2) 6px 12px);
    position:relative;
  }
  .fframe::before, .fframe::after{
    content:''; position:absolute; left:0; right:0; height:6px; background:var(--ink);
  }
  .fframe::before{top:0;} .fframe::after{bottom:0;}

  /* HERO */
  .hero{padding:96px 0 64px;}
  .hero h1{
    font-size:clamp(44px, 8vw, 92px);
    line-height:0.98;
    margin-top:18px;
  }
  .hero .tagline{
    margin-top:22px; max-width:520px; color:var(--silver); font-size:17px;
  }
  .hero-actions{display:flex; gap:16px; margin-top:36px; flex-wrap:wrap;}
  .btn{
    font-family:'Space Mono', monospace; font-size:13px; letter-spacing:0.04em;
    padding:14px 24px; border-radius:2px; display:inline-block; transition:.2s;
  }
  .btn-primary{background:var(--safelight); color:var(--bone);}
  .btn-primary:hover{background:#d95840;}
  .btn-outline{border:1px solid var(--border); color:var(--bone);}
  .btn-outline:hover{border-color:var(--bone);}

  /* SECTION generic */
  section{padding:88px 0;}
  .section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:48px; flex-wrap:wrap;}
  .section-head h2{font-size:clamp(28px,4vw,42px);}

  /* PORTFOLIO TEASER (homepage) */
  .delivery-tag{
    font-family:'Space Mono', monospace; font-size:11px; letter-spacing:0.04em;
    color:var(--ink); background:var(--bone); padding:5px 10px; border-radius:2px;
    display:inline-block; margin:10px 0;
  }
  .portfolio-teaser{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border);}
  .teaser-tile{display:block; background:var(--ink); color:inherit;}
  .teaser-photo{
    aspect-ratio:4/5; background:var(--ink-soft); background-size:cover; background-position:center;
    display:flex; align-items:center; justify-content:center; text-align:center;
  }
  .teaser-empty{font-family:'Space Mono', monospace; font-size:12px; color:var(--silver); padding:0 24px;}
  .teaser-caption{padding:22px 24px 26px;}
  .teaser-caption h3{font-size:21px; margin-top:8px;}
  .teaser-count{display:block; margin-top:12px; font-family:'Space Mono', monospace; font-size:12px; color:var(--silver);}
  .teaser-tile:hover .teaser-count{color:var(--safelight);}

  /* O MNE */
  .about{display:grid; grid-template-columns:1.2fr 1fr; gap:64px; align-items:start;}
  .about p{color:var(--silver); max-width:480px; margin-bottom:16px;}
  .spec{border:1px solid var(--border); padding:28px;}
  .spec-row{display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--border); font-family:'Space Mono', monospace; font-size:13px;}
  .spec-row:last-child{border-bottom:none;}
  .spec-row .k{color:var(--silver);}

  /* CB SPRACOVANIE / GRAFICKE PRACE - shared "steps" grid */
  .darkroom{
    background:var(--ink-soft);
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
  }
  .steps{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); margin-top:40px;}
  .step{background:var(--ink-soft); padding:28px 24px;}
  .step .frame-num{color:var(--safelight); display:block; margin-bottom:14px;}
  .step h4{font-family:'Fraunces',serif; font-size:19px; font-weight:500; margin-bottom:8px;}
  .step p{color:var(--silver); font-size:14px;}
  #graficke .steps{background:var(--border);}
  #graficke .step{background:var(--ink);}

  /* PRICING TABLES */
  .price-block{margin-top:48px;}
  .price-block:first-of-type{margin-top:40px;}
  .price-block-head{display:flex; align-items:baseline; gap:14px; margin-bottom:16px;}
  .price-block-head h3{font-size:22px;}
  .price-table-wrap{overflow-x:auto; border:1px solid var(--border);}
  .price-table{width:100%; border-collapse:collapse; min-width:720px;}
  .price-table th{
    background:var(--ink-soft); color:var(--silver); text-align:left;
    font-family:'Space Mono', monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.06em;
    padding:12px 16px; border-bottom:1px solid var(--border);
  }
  .price-table td{
    padding:14px 16px; border-bottom:1px solid var(--border); font-size:14px; color:var(--paper); vertical-align:top;
  }
  .price-table tr:last-child td{border-bottom:none;}
  .price-cell-accent{color:var(--safelight); font-family:'Space Mono', monospace; white-space:nowrap;}
  .price-note{color:var(--silver); font-size:13px; margin-top:12px;}

  /* GALERIA page — expandable categories */
  .gallery-block{margin-bottom:24px; border:1px solid var(--border);}
  .gallery-cover{display:flex; cursor:pointer; align-items:stretch;}
  .gallery-cover-photo{
    width:240px; flex:none; aspect-ratio:4/3; background:var(--ink-soft);
    background-size:cover; background-position:center;
    display:flex; align-items:center; justify-content:center; text-align:center;
  }
  .gallery-cover-caption{padding:24px 28px; flex:1; display:flex; flex-direction:column; justify-content:center;}
  .gallery-cover-caption h2{font-size:26px; margin-top:8px;}
  .gallery-cover.active .teaser-count{color:var(--safelight);}
  .gallery-panel{max-height:0; overflow:hidden; transition:max-height .4s ease;}
  .gallery-panel.open{max-height:6000px;}
  .gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:24px;}
  .gallery-item{aspect-ratio:3/4; overflow:hidden; background:var(--ink-soft);}
  .gallery-item img{width:100%; height:100%; object-fit:cover; display:block;}

  /* CONTACT */
  .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px;}
  form{display:flex; flex-direction:column; gap:16px;}
  label{font-family:'Space Mono', monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--silver); margin-bottom:6px; display:block;}
  input, select, textarea{
    width:100%; background:transparent; border:none; border-bottom:1px solid var(--border);
    color:var(--bone); padding:10px 0; font-family:'Inter',sans-serif; font-size:15px;
  }
  input:focus, select:focus, textarea:focus{outline:none; border-bottom-color:var(--safelight);}
  textarea{resize:vertical; min-height:90px;}
  form .btn{align-self:flex-start; border:none; cursor:pointer; margin-top:8px;}
  .contact-info{color:var(--silver);}
  .contact-info a{color:var(--bone); border-bottom:1px solid var(--border);}
  .contact-info .row{margin-bottom:20px;}
  .contact-info .k{font-family:'Space Mono', monospace; font-size:11px; text-transform:uppercase; color:var(--safelight); letter-spacing:0.08em; display:block; margin-bottom:4px;}

  footer{border-top:1px solid var(--border); padding:40px 0; color:var(--silver); font-size:13px;}
  .footer-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
  .footer-links{display:flex; gap:20px;}
  .footer-links a:hover{color:var(--bone);}

  a:focus-visible, button:focus-visible, input:focus-visible{outline:2px solid var(--safelight); outline-offset:2px;}

  @media (max-width: 860px){
    .navlinks{display:none;}
    .menu-btn{display:block;}
    .about, .contact-grid{grid-template-columns:1fr; gap:40px;}
    .steps{grid-template-columns:repeat(2,1fr);}
    .portfolio-teaser{grid-template-columns:1fr;}
    .gallery-cover{flex-direction:column;}
    .gallery-cover-photo{width:100%; aspect-ratio:16/9;}
    .gallery-grid{grid-template-columns:repeat(3,1fr);}
  }
  @media (max-width: 520px){
    section{padding:64px 0;}
    .gallery-grid{grid-template-columns:repeat(2,1fr);}
  }