/*
Theme Name:  Vinology
Theme URI:   https://vinology.pl
Author:      Vinology
Description: Butikowy motyw dla Vinology — agencja wina. Eventy, marketing, wprowadzanie marek na rynek polski.
Version:     1.0.0
License:     Private
Text Domain: vinology
*/

/* =========================================================== */
/* Vinology — shared styles                                     */
/* =========================================================== */

:root {
  --bg:               #f5f1e8;
  --bg-2:             #ece6d7;
  --paper:            #fbf8f1;
  --ink:              #1a1612;
  --ink-2:            #3a342c;
  --muted:            #8a8378;
  --hairline:         #d8d1c2;
  --hairline-strong:  #b6ad9a;
  --wine:             oklch(0.34 0.10 20);
  --wine-deep:        oklch(0.26 0.09 22);
  --accent:           var(--wine);

  --font-serif: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
  --font-sans:  "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:  "Geist Mono", ui-monospace, Menlo, monospace;

  --maxw:       1440px;
  --gutter:     clamp(20px, 4vw, 56px);
  --section-y:  clamp(80px, 11vw, 160px);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  background:     var(--bg);
  color:          var(--ink);
  font-family:    var(--font-sans);
  font-size:      16px;
  line-height:    1.5;
  font-weight:    400;
  letter-spacing: -0.005em;
  overflow-x:     hidden;
}

img    { display: block; max-width: 100%; height: auto; }
a      { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }

/* ---------- Layout ---------- */
.wrap {
  max-width: var(--maxw);
  margin:    0 auto;
  padding:   0 var(--gutter);
}
.section       { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.section-tight { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); }

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
@media (max-width: 760px) {
  .grid-12 { grid-template-columns: repeat(6, 1fr); gap: 16px; }
}

.hairline { height: 1px; background: var(--hairline); width: 100%; border: 0; margin: 0; }

/* ---------- Typography ---------- */
.eyebrow {
  font-family:    var(--font-sans);
  font-size:      11px;
  font-weight:    500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--muted);
  display:        inline-flex;
  align-items:    baseline;
  gap:            10px;
}
.eyebrow .num {
  font-family:    var(--font-mono);
  letter-spacing: 0.06em;
  color:          var(--wine);
}

.display {
  font-family:    var(--font-serif);
  font-weight:    400;
  line-height:    0.95;
  letter-spacing: -0.025em;
  font-size:      clamp(54px, 9.2vw, 152px);
  margin:         0;
  text-wrap:      balance;
}
.display em        { font-style: italic; font-feature-settings: "ss01"; }
.display .wine     { color: var(--wine); }

.h1 { font-family: var(--font-serif); font-weight: 400; line-height: 1.0;  letter-spacing: -0.02em;  font-size: clamp(42px, 6.5vw, 96px); margin: 0; text-wrap: balance; }
.h1 em { font-style: italic; }

.h2 { font-family: var(--font-serif); font-weight: 400; line-height: 1.04; letter-spacing: -0.018em; font-size: clamp(34px, 4.6vw, 64px); margin: 0; text-wrap: balance; }
.h2 em { font-style: italic; }

.h3 { font-family: var(--font-serif); font-weight: 400; line-height: 1.1;  letter-spacing: -0.012em; font-size: clamp(24px, 2.4vw, 32px); margin: 0; }
.h3 em { font-style: italic; }

.lead {
  font-family: var(--font-sans);
  font-size:   clamp(17px, 1.4vw, 21px);
  line-height: 1.5;
  color:       var(--ink-2);
  max-width:   56ch;
  text-wrap:   pretty;
}
.body         { font-size: 16px; line-height: 1.62; color: var(--ink-2); text-wrap: pretty; }
.body p + p   { margin-top: 1em; }

.meta {
  font-family:    var(--font-mono);
  font-size:      12px;
  letter-spacing: 0.04em;
  color:          var(--muted);
}

/* ---------- Nav ---------- */
.nav {
  position:   sticky;
  top:        0;
  z-index:    50;
  background: color-mix(in oklch, var(--bg) 88%, transparent);
  backdrop-filter:         blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition:    border-color .3s ease, background .3s ease;
}
.nav.scrolled { border-bottom-color: var(--hairline); }

.nav-inner {
  display:               grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:           center;
  height:                72px;
  gap:                   24px;
}
.brand {
  font-family:    var(--font-serif);
  font-size:      22px;
  letter-spacing: -0.01em;
  display:        inline-flex;
  align-items:    baseline;
  gap:            8px;
}
.brand .dot {
  width:        6px;
  height:       6px;
  background:   var(--wine);
  border-radius: 50%;
  transform:    translateY(-3px);
  display:      inline-block;
}
.nav-links {
  display:         flex;
  gap:             36px;
  justify-content: center;
  font-size:       13.5px;
  letter-spacing:  -0.005em;
}
.nav-links a { color: var(--ink-2); position: relative; padding: 4px 0; }
.nav-links a::after {
  content:          "";
  position:         absolute;
  left:             0; right: 0; bottom: -2px;
  height:           1px;
  background:       var(--wine);
  transform:        scaleX(0);
  transform-origin: left center;
  transition:       transform .35s cubic-bezier(.6,.2,.1,1);
}
.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); }
.nav-links a.active        { color: var(--ink); }

.nav-right { display: flex; justify-content: flex-end; align-items: center; gap: 20px; }
.lang-toggle {
  display:     inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size:   12px;
  letter-spacing: 0.06em;
  color:       var(--muted);
  border:      1px solid var(--hairline);
  border-radius: 999px;
  padding:     2px;
  background:  var(--paper);
}
.lang-toggle button { padding: 5px 12px; border-radius: 999px; color: var(--muted); transition: color .2s, background .2s; }
.lang-toggle button.active { background: var(--ink); color: var(--paper); }

@media (max-width: 760px) {
  .nav-inner { grid-template-columns: 1fr auto; }
  .nav-links  { display: none; }
}

/* ---------- Buttons / Links ---------- */
.link-arrow {
  display:     inline-flex;
  align-items: center;
  gap:         10px;
  font-size:   14px;
  letter-spacing: -0.005em;
  border-bottom: 1px solid var(--hairline-strong);
  padding-bottom: 4px;
  color:       var(--ink);
  transition:  gap .25s ease, border-color .25s ease;
}
.link-arrow:hover { gap: 16px; border-color: var(--wine); }
.link-arrow .arrow { width: 14px; height: 1px; background: currentColor; position: relative; }
.link-arrow .arrow::after {
  content:   "";
  position:  absolute;
  right:     0; top: -3px;
  width:     7px; height: 7px;
  border-top:   1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

.btn-primary {
  display:     inline-flex;
  align-items: center;
  gap:         12px;
  background:  var(--ink);
  color:       var(--paper);
  padding:     14px 22px;
  border-radius: 999px;
  font-size:   14px;
  transition:  background .25s ease, transform .25s ease;
}
.btn-primary:hover { background: var(--wine); }

/* ---------- Footer ---------- */
.footer {
  border-top:  1px solid var(--hairline);
  padding-top: 72px;
  padding-bottom: 32px;
  margin-top:  var(--section-y);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap:    40px;
  padding-bottom: 80px;
}
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
.footer h4 {
  font-family:    var(--font-sans);
  font-size:      11px;
  font-weight:    500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--muted);
  margin:         0 0 18px 0;
}
.footer ul         { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.footer ul a       { color: var(--ink-2); }
.footer ul a:hover { color: var(--wine); }
.footer-display {
  font-family:    var(--font-serif);
  font-size:      clamp(40px, 6vw, 80px);
  line-height:    0.95;
  letter-spacing: -0.02em;
  margin:         0 0 24px 0;
}
.footer-display em { font-style: italic; color: var(--wine); }
.footer-legal {
  border-top:      1px solid var(--hairline);
  padding-top:     24px;
  display:         flex;
  justify-content: space-between;
  font-family:     var(--font-mono);
  font-size:       11px;
  letter-spacing:  0.05em;
  color:           var(--muted);
  text-transform:  uppercase;
}
@media (max-width: 760px) {
  .footer-legal { flex-direction: column; gap: 12px; }
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity:   0;
  transform: translateY(22px);
  transition: opacity 1.1s cubic-bezier(.2,.6,.1,1), transform 1.1s cubic-bezier(.2,.6,.1,1);
  transition-delay: var(--rd, 0ms);
}
.reveal.in { opacity: 1; transform: translateY(0); }

.reveal-img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.4s cubic-bezier(.6,.05,.1,1);
  transition-delay: var(--rd, 0ms);
}
.reveal-img.in { clip-path: inset(0 0 0 0); }

/* ---------- Lang toggle: hide non-active ---------- */
html[data-lang="pl"] [data-lang-en],
html[data-lang="en"] [data-lang-pl] { display: none !important; }

/* ---------- Figures ---------- */
.figure {
  position:   relative;
  overflow:   hidden;
  background: var(--bg-2);
}
.figure img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.4s cubic-bezier(.2,.6,.1,1); }
.figure:hover img { transform: scale(1.03); }
.figure .caption {
  position:   absolute;
  left: 16px; bottom: 14px;
  font-family:    var(--font-mono);
  font-size:      11px;
  letter-spacing: 0.06em;
  color:          var(--paper);
  text-transform: uppercase;
  background: color-mix(in oklch, var(--ink) 55%, transparent);
  padding:    5px 10px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}

/* ---------- Marquee ---------- */
.marquee {
  overflow:  hidden;
  border-top:    1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding:   28px 0;
  white-space: nowrap;
}
.marquee-track {
  display:    inline-flex;
  gap:        64px;
  animation:  scroll-x 38s linear infinite;
  font-family: var(--font-serif);
  font-size:  clamp(28px, 3.8vw, 56px);
  letter-spacing: -0.01em;
}
.marquee-track span { display: inline-flex; align-items: center; gap: 64px; }
.marquee-track .sep { color: var(--wine); }
@keyframes scroll-x { to { transform: translateX(-50%); } }

/* ---------- Utilities ---------- */
.italic { font-style: italic; }
.wine   { color: var(--wine); }
.muted  { color: var(--muted); }
.uc     { text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  padding-top:    clamp(72px, 10vw, 140px);
  padding-bottom: clamp(64px, 8vw, 120px);
}

/* ---------- Events page ---------- */
.event-stats {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:        32px;
  border-top: 1px solid var(--hairline);
  padding-top: 28px;
}
.stat-num {
  font-family:    var(--font-serif);
  font-size:      clamp(44px, 5.4vw, 76px);
  line-height:    1;
  letter-spacing: -0.02em;
  margin-bottom:  8px;
}
.stat-num.small { font-size: clamp(36px, 4.4vw, 56px); }

.filter-bar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:          24px;
  border-top:    1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding:       20px 0;
  flex-wrap:     wrap;
}
.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 8px 16px;
  font-size: 13px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--ink-2);
  transition: background .2s, color .2s, border-color .2s;
}
.chip:hover { border-color: var(--ink); }
.chip.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.events-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   32px 24px;
}
@media (max-width: 1100px) { .events-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width:  760px) { .events-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width:  480px) { .events-grid { grid-template-columns: 1fr; } }

.event-card             { display: flex; flex-direction: column; gap: 18px; }
.event-card .event-meta { display: flex; flex-direction: column; gap: 6px; }
.event-card.hidden      { display: none; }

.case-stats {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:         24px;
  margin-top:  40px;
  border-top:  1px solid var(--hairline);
  padding-top: 24px;
}

/* ---------- Services page ---------- */
.list-formats, .list-checks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.list-formats li, .list-checks li { display: flex; gap: 12px; align-items: baseline; font-size: 15px; color: var(--ink-2); }
.list-formats li::before { content: "—"; color: var(--wine); font-family: var(--font-serif); flex-shrink: 0; }
.list-checks  li::before { content: "✓"; color: var(--wine); font-family: var(--font-sans); font-size: 12px; flex-shrink: 0; margin-top: 3px; }

/* ---------- Contact page ---------- */
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.form-field input,
.form-field textarea,
.form-field select {
  background:    var(--paper);
  border:        1px solid var(--hairline);
  border-radius: 4px;
  padding:       14px 16px;
  font-family:   var(--font-sans);
  font-size:     15px;
  color:         var(--ink);
  width:         100%;
  transition:    border-color .2s;
  outline:       none;
}
.form-field input:focus,
.form-field textarea:focus { border-color: var(--wine); }
.form-field textarea { min-height: 140px; resize: vertical; }
.form-submit .btn-primary { width: 100%; justify-content: center; }

/* CF7 resets */
.wpcf7 input[type="submit"]  { appearance: none; }
.wpcf7 .wpcf7-not-valid-tip  { font-size: 12px; color: var(--wine); margin-top: 4px; }
.wpcf7 .wpcf7-response-output { border-radius: 4px; padding: 12px 16px; font-size: 14px; margin-top: 20px; }