/* =========================================================
   Oilprint art — style.css
   Barvy: béžová / černá. Font inspirovaný logem (Courier Bold).
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400&display=swap');

:root{
  --color-beige:        #efe3c9;
  --color-beige-light:  #f8f1de;
  --color-beige-dark:   #d9c49b;
  --color-black:        #201d15;
  --color-black-soft:   #2c2820;
  --color-white:        #fffdf7;

  --font-main: 'Courier Prime', 'Courier New', monospace;

  --header-height: 152px;
  --max-width: 1200px;
  --ease: cubic-bezier(.4,0,.2,1);
}

@media (max-width: 600px){
  :root{ --header-height: 110px; }
}

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

html{ scroll-behavior: smooth; }

body{
  margin:0;
  font-family: var(--font-main);
  background: var(--color-beige);
  color: var(--color-black);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }

a{ color: inherit; }

h1,h2,h3{
  font-family: var(--font-main);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 1rem;
}

p{ margin: 0 0 1rem; }

.container{ max-width: var(--max-width); margin: 0 auto; padding: 0 max(5vw, 1.25rem); }

/* -----------------------------------------------------------
   Buttons
----------------------------------------------------------- */
.btn{
  display:inline-block;
  padding:.85rem 1.9rem;
  border:2px solid var(--color-black);
  background: var(--color-black);
  color: var(--color-beige-light);
  font-family: var(--font-main);
  font-weight:700;
  font-size:.9rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-decoration:none;
  cursor:pointer;
  transition: background .3s var(--ease), color .3s var(--ease), transform .2s var(--ease);
}
.btn:hover{ background: transparent; color: var(--color-black); transform: translateY(-2px); }

.btn--outline{ background: transparent; color: var(--color-black); }
.btn--outline:hover{ background: var(--color-black); color: var(--color-beige-light); }

.btn--light{ border-color: var(--color-beige-light); color: var(--color-beige-light); background:transparent; }
.btn--light:hover{ background: var(--color-beige-light); color: var(--color-black); }

/* -----------------------------------------------------------
   Header (shared: hlavní strana i podstránky)
----------------------------------------------------------- */
.site-header{
  position: fixed;
  top:0; left:0; right:0;
  height: var(--header-height);
  z-index: 1000;
  display:flex;
  align-items:center;
  justify-content:center;
  border-bottom: 3px solid var(--color-black);
  background-image: linear-gradient(rgba(18,16,10,.58), rgba(18,16,10,.58)), url('../img/hero-bg.jpg');
  background-size: cover;
  background-position: center 30%;
  transition: background-image .4s var(--ease), border-color .4s var(--ease);
}

/* Na hlavní straně header splývá s obrázkem v intru pod ním, dokud uživatel nescroluje */
body.has-hero .site-header{
  background-image: linear-gradient(180deg, rgba(10,9,6,.38) 0%, rgba(10,9,6,.04) 100%);
  border-bottom-color: transparent;
}
body.has-hero .site-header.is-scrolled{
  background-image: linear-gradient(rgba(18,16,10,.58), rgba(18,16,10,.58)), url('../img/hero-bg.jpg');
  background-size: cover;
  background-position: center 30%;
  border-bottom-color: var(--color-black);
}

.site-header .logo-link{
  display:flex; align-items:center; justify-content:center;
}
.site-header .logo-link img{
  height: calc(var(--header-height) - 46px);
  width: auto;
  max-width: min(70vw, 560px);
  object-fit: contain;
}

.nav-toggle{
  position:absolute; left: 1.1rem; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; padding:.5rem;
  display:flex; flex-direction:column; gap:5px; z-index:1001;
}
.nav-toggle span{
  width: 26px; height: 3px; background: var(--color-beige-light); display:block; border-radius:2px;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-toggle.is-open span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

.contact-quick{
  position:absolute; right:1.25rem; top:50%; transform:translateY(-50%);
  display:none;
}
@media (min-width: 720px){
  .contact-quick{ display:inline-block; }
}
/* Bez animace — jen změna barvy při najetí myší (specificita přebije .btn:hover) */
.site-header .contact-quick:hover{
  transform: translateY(-50%);
  background: var(--color-beige-light);
  color: var(--color-black);
}

.nav-overlay{
  position:fixed; inset:0; background: rgba(10,9,6,.55);
  z-index:1001; opacity:0; pointer-events:none; transition: opacity .35s var(--ease);
}
.nav-overlay.is-open{ opacity:1; pointer-events:auto; }

.nav-drawer{
  position:fixed; top:0; left:0; bottom:0;
  width: min(82vw, 360px);
  background: var(--color-black);
  color: var(--color-beige-light);
  z-index:1002;
  transform: translateX(-100%);
  transition: transform .4s var(--ease);
  padding: 5.25rem 2.25rem 2rem;
  overflow-y:auto;
}
.nav-drawer__logo{
  display:block;
  width:92px; height:92px;
  margin: 0 auto 2rem;
  border-radius:50%;
  box-shadow: 0 0 0 2px var(--color-beige-light);
}
.nav-drawer.is-open{ transform: translateX(0); }
.nav-drawer__close{
  position:absolute; top:1.4rem; right:1.4rem;
  background:none; border: 2px solid var(--color-beige-light); border-radius:50%;
  width:38px; height:38px; color:inherit; font-size:1.3rem; line-height:1; cursor:pointer;
}
.nav-drawer nav a{
  display:block; padding:1rem 0; border-bottom:1px solid rgba(239,227,201,.18);
  text-decoration:none; font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:1.02rem;
}
.nav-drawer nav a:hover{ color: var(--color-beige-dark); }
.nav-drawer__contact{ margin-top:2.5rem; font-size:.85rem; opacity:.85; }
.nav-drawer__contact p{ margin:.3rem 0; }

/* -----------------------------------------------------------
   Page body offset (podstránky nemají hero, jen odsazení pod headerem)
----------------------------------------------------------- */
main{ padding-top: var(--header-height); }
body.has-hero main{ padding-top: 0; }

/* -----------------------------------------------------------
   Hero / Intro (jen hlavní strana)
----------------------------------------------------------- */
.hero{
  position:relative;
  height: 100vh;
  min-height: 560px;
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0;
  background: url('../img/hero-bg.jpg') center / cover no-repeat;
}
.hero__scrim{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,9,6,.35) 0%, rgba(10,9,6,.08) 35%, rgba(10,9,6,.4) 100%);
}
.hero__fade{
  position:absolute; left:0; right:0; bottom:0; height:26vh;
  background: linear-gradient(to bottom, rgba(239,227,201,0), var(--color-beige));
  pointer-events:none;
}
.hero__grid{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center;
  width:50%; height:100%;
}

.hero__brand{
  position:relative;
  text-align:left;
  padding: .4rem .6rem .4rem 2cm;
  margin-top: -1cm;
}
/* Minimalistická záře — text-shadow kopíruje tvar jednotlivých písmen
   (na rozdíl od podkladové elipsy), takže září jen samo písmo, ne okolí. */
.hero__brand h1{
  margin:0;
  /* "Oilprint art" vždy na jednom řádku vedle sebe — velikost písma se
     dopočítává tak, aby se text vešel do dostupné šířky levé poloviny
     (nezávisle na vw se nikdy nezalomí na dva řádky). */
  font-size: clamp(1.8rem, calc(5.8vw - .69rem), 5.5rem);
  white-space: nowrap;
  line-height: 1;
  color: var(--color-black);
  text-shadow:
    0 0 4px var(--color-beige),
    0 0 10px var(--color-beige),
    0 0 18px rgba(239,227,201,.95),
    0 0 28px rgba(239,227,201,.75),
    0 0 40px rgba(239,227,201,.5);
}
.hero__brand p{
  margin: .05rem 0 0;
  font-size: clamp(1.596rem, 2.993vw, 2.095rem);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--color-black-soft);
  text-shadow:
    0 0 4px var(--color-beige),
    0 0 8px var(--color-beige),
    0 0 14px rgba(239,227,201,.95),
    0 0 22px rgba(239,227,201,.7),
    0 0 32px rgba(239,227,201,.45);
}

@media (max-width: 700px){
  .hero__grid{ width:100%; justify-content:center; }
  .hero__brand{ text-align:center; padding-left:.6rem; }
  .hero__brand h1{ font-size: clamp(1.6rem, calc(11.6vw - .21rem), 5rem); }
  .hero__brand p{ font-size: clamp(1.097rem, 5.985vw, 1.397rem); letter-spacing:.1em; }
}

/* -----------------------------------------------------------
   Content sections (homepage)
----------------------------------------------------------- */
.section{ padding: 5rem 0; }
.section--alt{ background: var(--color-beige-light); }

.section__split{
  display:grid; grid-template-columns: 380px 1fr; gap: 3rem; align-items:center;
}
.section__photo img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border:4px solid var(--color-black);
}
.section__title{ font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.section__text{ max-width: 60ch; }

@media (max-width: 800px){
  .section__split{ grid-template-columns:1fr; }
}

.section-pair{
  display:grid; grid-template-columns: 1fr 1fr; gap: 2.5rem;
}
.pair-card{
  display:flex; gap:1.5rem; align-items:flex-start;
  background: var(--color-beige-light);
  border:2px solid var(--color-black);
  padding:1.75rem;
}
.pair-card__photo{ flex:0 0 auto; }
.pair-card__photo img{
  width:200px; height:280px; object-fit:cover; border:3px solid var(--color-black);
}
.pair-card > div:last-child{ flex:1 1 auto; min-width:0; }
.pair-card__title{ font-size:1.15rem; margin-bottom:.5rem; }
.pair-card__text{ font-size:.92rem; margin-bottom:1rem; }

@media (max-width: 800px){
  .section-pair{ grid-template-columns:1fr; }
}
@media (max-width: 560px){
  .pair-card{ flex-direction:column; }
  .pair-card__photo{ width:100%; }
  .pair-card__photo img{ width:100%; max-width:280px; height:auto; aspect-ratio:3/4; margin:0 auto; }
}

/* -----------------------------------------------------------
   Gallery section (homepage) — fotografický film
----------------------------------------------------------- */
.gallery-section{ text-align:center; padding: 5rem 0 6rem; }
.gallery-section__title{ font-size: clamp(1.5rem,2.6vw,2.1rem); }
.gallery-section__text{ max-width:60ch; margin-left:auto; margin-right:auto; }

.filmstrip{
  position:relative;
  width:100%;
  margin-top: 2.75rem;
  background: var(--color-black);
  overflow:hidden;
}

.filmstrip__track{
  display:flex;
  gap: 6px; /* černé mezery mezi snímky jako na klasickém kinofilmovém pásu */
  transition: transform 1s var(--ease);
  will-change: transform;
}
/* Rozměry perforace odpovídají skutečnému 35mm filmu (poměr díra/rozteč/
   okraje odměřen z referenčního snímku): díra je zaoblený obdélník na
   výšku, nad a pod obrázkem je nestejný okraj (větší vně, menší k obrázku).
   Spodní řada používá polohování od dolního okraje ("bottom 15px"), ne
   výpočet přes "calc(100% - …)" — ten se totiž u background-position počítá
   vůči (rozměr boxu - rozměr dlaždice), takže by spodní díru posunul výš a
   částečně schoval pod fotku. Díky "bottom 15px" je spodní perforace vždy
   naprosto stejná jako horní. */
.filmstrip__frame{
  position:relative;
  flex: 0 0 auto;
  background-color: var(--color-black);
  box-sizing: border-box;
  cursor: pointer;
  padding: 46px 0;
  background-repeat: repeat-x, repeat-x;
  background-size: 37px 20px, 37px 20px;
  background-position:
    left 9px top 15px,
    left 9px bottom 15px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='37' height='20'%3E%3Crect x='0' y='0' width='15' height='20' rx='3' ry='3' fill='%23efe3c9'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='37' height='20'%3E%3Crect x='0' y='0' width='15' height='20' rx='3' ry='3' fill='%23efe3c9'/%3E%3C/svg%3E");
}
.filmstrip__frame img{
  width:100%; height:210px; object-fit:cover; display:block;
}

@media (max-width: 600px){
  .filmstrip__track{ gap: 4px; }
  .filmstrip__frame{
    padding: 31px 0;
    background-size: 25px 14px, 25px 14px;
    background-position:
      left 6px top 10px,
      left 6px bottom 10px;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='14'%3E%3Crect x='0' y='0' width='10' height='14' rx='2' ry='2' fill='%23efe3c9'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='14'%3E%3Crect x='0' y='0' width='10' height='14' rx='2' ry='2' fill='%23efe3c9'/%3E%3C/svg%3E");
  }
  .filmstrip__frame img{ height:150px; }
}

/* -----------------------------------------------------------
   Subpage header banner (text pod hlavičkou)
----------------------------------------------------------- */
.page-hero{
  text-align:center;
  padding: 3.5rem 0 2.5rem;
}
.page-hero h1{ font-size: clamp(1.6rem, 3vw, 2.3rem); }
.page-hero p{ max-width:60ch; margin:0 auto; opacity:.85; }

.page-section{ padding: 1rem 0 4rem; }
.page-section__body{
  display:grid; grid-template-columns: 1fr 380px; gap:3rem; align-items:flex-start;
}
.page-section__body.reverse{ grid-template-columns: 380px 1fr; }
.page-section__body img{ border:4px solid var(--color-black); width:100%; aspect-ratio:4/3; object-fit:cover; }
@media (max-width: 800px){
  .page-section__body, .page-section__body.reverse{ grid-template-columns:1fr; }
  .page-section__body.reverse{ display:flex; flex-direction:column-reverse; }
}

.cta-block{
  text-align:center; padding: 3.5rem 0 5rem;
}

/* -----------------------------------------------------------
   Galerie (podstránka)
----------------------------------------------------------- */
.theme-section{ padding: 3.5rem 0; }
.theme-section__title{ text-align:center; font-size:1.5rem; margin-bottom:2.5rem; }

.mosaic{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 120px;
  gap:14px;
}
.mosaic__item{
  position:relative; overflow:hidden; border:3px solid var(--color-black);
  cursor:pointer; background:var(--color-black);
}
.mosaic__item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .5s var(--ease);
}
.mosaic__item:hover img{ transform: scale(1.08); }

.mosaic__item--a{ grid-column: span 3; grid-row: span 2; }
.mosaic__item--b{ grid-column: span 2; grid-row: span 3; }
.mosaic__item--c{ grid-column: span 2; grid-row: span 2; }
.mosaic__item--d{ grid-column: span 3; grid-row: span 3; }
.mosaic__item--e{ grid-column: span 2; grid-row: span 2; }

@media (max-width: 800px){
  .mosaic{ grid-template-columns: repeat(4,1fr); grid-auto-rows:100px; }
  .mosaic__item--a,.mosaic__item--b,.mosaic__item--c,.mosaic__item--d,.mosaic__item--e{ grid-column:span 2; grid-row:span 2; }
}
@media (max-width: 480px){
  .mosaic{ grid-template-columns: repeat(2,1fr); grid-auto-rows:150px; }
  .mosaic__item--a,.mosaic__item--b,.mosaic__item--c,.mosaic__item--d,.mosaic__item--e{ grid-column:span 1; grid-row:span 1; }
}

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:2000;
  background: rgba(10,9,6,.94);
  display:none; align-items:center; justify-content:center; padding: 2rem;
}
.lightbox.is-open{ display:flex; }
.lightbox__img{ max-width:88vw; max-height:80vh; border:6px solid var(--color-beige-light); }
.lightbox__btn{
  position:absolute; background: none; border:2px solid var(--color-beige-light);
  color: var(--color-beige-light); border-radius:50%; width:46px; height:46px;
  cursor:pointer; font-size:1.3rem; display:flex; align-items:center; justify-content:center;
}
.lightbox__close{ top:1.5rem; right:1.5rem; }
.lightbox__prev{ left:1.5rem; top:50%; transform:translateY(-50%); }
.lightbox__next{ right:1.5rem; top:50%; transform:translateY(-50%); }
@media (max-width:600px){
  .lightbox__prev{ left:.5rem; } .lightbox__next{ right:.5rem; }
  .lightbox__btn{ width:40px; height:40px; }
}

/* -----------------------------------------------------------
   Kontakty
----------------------------------------------------------- */
.contact-info{ text-align:center; padding-bottom:1rem; }
.contact-info p{ margin:.3rem 0; }

.contact-form-wrap{ max-width:640px; margin:0 auto; padding: 2.5rem 0 5rem; }
.contact-form-wrap h2{ text-align:center; }
.contact-form{ display:flex; flex-direction:column; gap:1.3rem; margin-top:2rem; }
.form-group label{
  display:block; font-weight:700; margin-bottom:.45rem;
  text-transform:uppercase; font-size:.8rem; letter-spacing:.08em;
}
.form-group input, .form-group textarea{
  width:100%; padding:.8rem .9rem; border:2px solid var(--color-black);
  background: var(--color-white); font-family: var(--font-main); font-size:.95rem;
}
.form-group textarea{ resize:vertical; min-height:130px; }
.contact-form .btn{ align-self:flex-start; }
.form-status{ margin-top:1rem; font-weight:700; }
.form-status[data-state="ok"]{ color:#3a6b3a; }
.form-status[data-state="error"]{ color:#8a2b2b; }

/* -----------------------------------------------------------
   Footer (shared)
----------------------------------------------------------- */
.site-footer{
  background: var(--color-black);
  color: var(--color-beige-light);
}
.footer__inner{
  padding: 3rem 0 1.5rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:2rem; align-items:center;
}
.footer__contacts{ display:flex; align-items:center; gap:1.1rem; }
.footer__logo{
  width:56px; height:56px; flex:0 0 auto;
  border-radius:50%;
  box-shadow: 0 0 0 2px var(--color-beige-light);
}
.footer__contacts p{ margin:.35rem 0; }
@media (max-width: 420px){
  .footer__contacts{ gap:.85rem; }
  .footer__logo{ width:46px; height:46px; }
}
.footer__social{ display:flex; gap:1rem; }
.footer__social a{
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; border:2px solid var(--color-beige-light); border-radius:50%;
  transition: background .3s, transform .2s;
}
.footer__social a:hover{ background: var(--color-beige-light); transform: translateY(-2px); }
.footer__social a:hover svg{ fill: var(--color-black); }
.footer__social svg{ width:20px; height:20px; fill: var(--color-beige-light); }
.footer__bottom{
  text-align:center; padding: 1rem 0 1.5rem; font-size:.78rem; opacity:.65;
  border-top: 1px solid rgba(239,227,201,.15);
}

/* utility */
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}