/*

Theme Name: Frantisek Vyhnalek

Theme URI: https://www.frantisekvyhnalek.cz

Author: Frantisek Vyhnalek

Description: Minimalisticky one-page motiv pro sportovni a eventovou fotografii. Fotky se kategorizuji primo v Media Library pres "Kategorie fotek".

Version: 1.0

Requires PHP: 7.4

Text Domain: frantisek-vyhnalek

*/





  :root{

    --paper: #ffffff;

    --ink: #111111;

    --ink-muted: #6e6e6e;

    --accent: #4b5d3a;

    --line: rgba(17,17,17,0.12);

    --font-display: 'Fraunces', serif;

    --font-body: 'Inter', sans-serif;

    --font-mono: 'IBM Plex Mono', monospace;

  }

  *{ box-sizing:border-box; margin:0; padding:0; }

  html{ scroll-behavior:smooth; }

  body{

    background: var(--paper); color: var(--ink); font-family: var(--font-body);

    line-height: 1.6; -webkit-font-smoothing: antialiased;

  }

  img{ display:block; max-width:100%; -webkit-user-drag: none; user-select: none; }

  a{ color:inherit; text-decoration:none; }

  button{ font-family:inherit; cursor:pointer; }



  .skip-link{ position:absolute; left:-999px; top:0; background:var(--accent); color:#fff; padding:10px 16px; z-index:200; }

  .skip-link:focus{ left:16px; top:16px; }



  .container{ max-width: 1240px; margin:0 auto; padding: 0 32px; }



  /* HEADER — centered wordmark, quiet */

  header{

    padding: 40px 0 28px;

    text-align:center;

    border-bottom: 1px solid var(--line);

  }

  .logo{ display:inline-block; }

  .logo img{ width: 300px; height:auto; max-width: 82vw; }

  .tagline{

    display:block;

    font-family: var(--font-mono);

    font-size: 0.66rem;

    letter-spacing: 0.16em;

    text-transform: uppercase;

    color: var(--ink-muted);

    margin-top: 10px;

  }

  nav.quiet-nav{ margin-top: 22px; }

  nav.quiet-nav ul{

    list-style:none; display:flex; justify-content:center; gap: 30px;

  }

  nav.quiet-nav a{

    font-size: 0.82rem; font-weight: 500; color: var(--ink-muted);

    transition: color 0.2s ease;

  }

  nav.quiet-nav a:hover{ color: var(--accent); }



  /* PORTFOLIO — the hero */

  .portfolio-section{ padding: 56px 0 100px; }

  .filters{

    display:flex; justify-content:center; gap: 8px; margin-bottom: 44px; flex-wrap:wrap;

  }

  .filter-btn{

    font-size: 0.8rem; font-weight: 500; color: var(--ink-muted);

    background: transparent; border: 1px solid var(--line);

    padding: 9px 20px; transition: all 0.2s ease; border-radius: 2px;

  }

  .filter-btn:hover{ color: var(--ink); border-color: var(--ink-muted); }

  .filter-btn.active{ color: #fff; background: var(--accent); border-color: var(--accent); }



  .gallery{

    display:grid; grid-template-columns: repeat(3, 1fr); gap: 6px;

  }

  .gallery-item{ position:relative; overflow:hidden; cursor:pointer; background:#f2f2f2; }

  .gallery-item.wide{ grid-column: span 2; }

  .gallery-item img{

    width:100%; height:100%; aspect-ratio: 4/5; object-fit:cover;

    transition: transform 0.5s ease;

  }

  .gallery-item{

    transition: opacity 0.4s ease, transform 0.4s ease;

    opacity: 1; transform: translateY(0) scale(1);

  }

  .gallery-item.fading{

    opacity: 0; transform: translateY(14px) scale(0.98);

  }

  .gallery-item.wide img{ aspect-ratio: 16/10; }

  .gallery-item:hover img{ transform: scale(1.04); }

  .gallery-item .overlay-tag{

    position:absolute; left:14px; bottom:14px;

    font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em;

    text-transform:uppercase; color:#fff;

    background: rgba(17,17,17,0.55); padding: 5px 10px;

    opacity:0; transition: opacity 0.25s ease;

  }

  .gallery-item:hover .overlay-tag{ opacity:1; }

  .gallery-item[hidden]{ display:none; }



  /* ABOUT — photo + short text, no inflated stats */

  .about-section{

    padding: 90px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);

  }

  .about-grid{

    display:grid; grid-template-columns: 0.62fr 1fr; gap: 56px; align-items:center;

    max-width: 900px; margin: 0 auto;

  }

  .about-photo img{

    width:100%; aspect-ratio: 4/5; object-fit:cover; filter: grayscale(30%);

  }

  .about-text{ text-align:left; }

  .about-text p{

    font-family: var(--font-display);

    font-size: clamp(1.2rem, 2.1vw, 1.5rem);

    font-weight: 500;

    line-height: 1.5;

    color: var(--ink);

  }

  .about-text p em{ font-style: italic; color: var(--accent); }

  .specialties{

    display:flex; flex-wrap:wrap; gap: 10px 14px; margin-top: 26px;

  }

  .specialties span{

    font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em;

    text-transform: uppercase; color: var(--ink-muted);

    padding-bottom: 3px; border-bottom: 1px solid var(--line);

  }



  /* CONTACT */

  .contact-section{ padding: 80px 0 60px; text-align:center; }

  .contact-section .eyebrow{

    font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em;

    text-transform: uppercase; color: var(--accent); margin-bottom: 16px; display:block;

  }

  .contact-section h2{

    font-family: var(--font-display); font-weight: 600; font-size: clamp(1.7rem, 3.4vw, 2.4rem);

    margin-bottom: 34px;

  }

  .contact-links{

    display:flex; justify-content:center; gap: 36px; flex-wrap:wrap;

    list-style:none;

  }

  .contact-links li a{

    font-family: var(--font-body); font-weight: 600; font-size: 1.02rem;

    padding-bottom: 4px; border-bottom: 1px solid var(--line);

    transition: border-color 0.2s ease, color 0.2s ease;

  }

  .contact-links li a:hover{ color: var(--accent); border-color: var(--accent); }



  footer{ padding: 30px 0; text-align:center; }

  footer p{

    font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em;

    color: var(--ink-muted); text-transform: uppercase;

  }



  /* LIGHTBOX */

  .lightbox{

    position:fixed; inset:0; background: rgba(17,17,17,0.96); z-index:200;

    display:flex; align-items:center; justify-content:center;

    opacity:0; pointer-events:none; transition: opacity 0.3s ease;

  }

  .lightbox.open{ opacity:1; pointer-events:auto; }

  .lightbox img{ max-width:88vw; max-height:82vh; object-fit:contain; }

  .lightbox-close{

    position:absolute; top:28px; right:32px; background:none; border:none; color:#fff;

    font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform:uppercase;

  }

  .lightbox-close:hover{ color: #9db388; }

  .lightbox-nav{

    position:absolute; top:50%; transform:translateY(-50%);

    background:none; border:none; color:#fff; font-family: var(--font-display); font-size: 2.2rem;

    padding: 10px 16px; opacity:0.7;

  }

  .lightbox-nav:hover{ opacity:1; color:#9db388; }

  .lightbox-prev{ left:10px; }

  .lightbox-next{ right:10px; }



  @media (max-width: 720px){

    .container{ padding: 0 18px; }

    header{ padding: 28px 0 20px; }

    .gallery{ grid-template-columns: repeat(2, 1fr); gap: 4px; }

    .gallery-item.wide{ grid-column: span 2; }

    nav.quiet-nav ul{ gap: 18px; }

    nav.quiet-nav a{ display:inline-block; padding: 6px 2px; }

    .filter-btn{ padding: 12px 18px; }

    .contact-links{ gap: 16px; flex-direction: column; align-items:center; }

    .contact-links li a{ display:inline-block; padding: 8px 4px; }

    .about-grid{ grid-template-columns: 1fr; gap: 28px; text-align:center; }

    .about-text{ text-align:center; }

    .about-photo img{ max-width: 260px; margin: 0 auto; }

    .specialties{ justify-content:center; }

    .specialties span{ padding: 4px 2px; }

  }

  @media (max-width: 380px){

    .gallery{ grid-template-columns: 1fr; }

    .gallery-item.wide{ grid-column: span 1; }

  }

  @media (prefers-reduced-motion: reduce){

    *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }

  }