/*
Theme Name: Do Pytlova
Theme URI: https://dopytlova.cz
Author: OpenAI pro Zuzanu Vávrovou
Description: Jednostránková prezentace leknínů a vodních rostlin z Pytlova s poptávkovým formulářem.
Version: 1.0.0
Text Domain: dopytlova
*/

:root {
  --forest: #153d34;
  --forest-dark: #0b2d27;
  --cream: #f6f0e4;
  --paper: #fffaf1;
  --berry: #ad3d68;
  --berry-dark: #852849;
  --terracotta: #b76143;
  --ink: #263128;
  --muted: #667069;
  --line: #dcd5c8;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
h1, h2, h3, p { margin-top: 0; }

.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  display: flex;
  min-height: 84px;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(24px, 5vw, 76px);
  border-bottom: 1px solid rgba(21,61,52,.12);
  background: rgba(255,250,241,.94);
  backdrop-filter: blur(16px);
}
.brand, .footer-brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  display: grid;
  width: 43px;
  height: 43px;
  border-radius: 50%;
  background: var(--forest);
  color: #f0c8d6;
  font-size: 22px;
  place-items: center;
}
.brand-copy { display: grid; gap: 2px; }
.brand strong, .footer-brand strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 25px;
  font-weight: 500;
  letter-spacing: .06em;
}
.brand small, .footer-brand small {
  color: var(--terracotta);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
}
.nav { display: flex; align-items: center; gap: clamp(22px,3vw,45px); font-size: 14px; font-weight: 700; }
.nav a:hover { color: var(--berry); }
.nav .nav-contact { padding: 12px 19px; border: 1px solid rgba(21,61,52,.4); border-radius: 999px; }
.menu-toggle { display: none; border: 0; background: transparent; color: var(--forest); font-size: 29px; cursor: pointer; }

.hero {
  position: relative;
  display: grid;
  min-height: 760px;
  overflow: hidden;
  align-items: center;
  background: var(--forest-dark);
}
.hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero:after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,rgba(7,35,29,.76),rgba(7,35,29,.2) 65%,rgba(7,35,29,.05));
  content: "";
}
.hero-panel {
  position: relative;
  z-index: 2;
  width: min(680px,calc(100% - 48px));
  margin-left: clamp(24px,5vw,76px);
  padding: clamp(34px,4vw,58px);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 28px;
  background: rgba(13,47,40,.75);
  color: #fff;
  box-shadow: 0 30px 85px rgba(0,0,0,.24);
  backdrop-filter: blur(15px);
}
.eyebrow {
  margin-bottom: 18px;
  color: #f2bfd1;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.eyebrow.dark { color: var(--terracotta); }
.hero h1, .section h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: 1.02;
}
.hero h1 { margin-bottom: 22px; font-size: clamp(47px,5.3vw,76px); }
.hero h1 em { display: block; color: #f6dbe4; font-weight: 400; }
.hero-copy { max-width: 555px; color: rgba(255,255,255,.82); font-size: 17px; line-height: 1.65; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button {
  display: inline-flex;
  min-height: 55px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 25px;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  font-weight: 800;
  transition: transform .2s, background .2s;
}
.button:hover { transform: translateY(-2px); }
.button.berry { background: var(--berry); color: #fff; box-shadow: 0 14px 30px rgba(133,40,73,.25); }
.button.berry:hover { background: var(--berry-dark); }
.button.glass { border: 1px solid rgba(255,255,255,.48); background: rgba(255,255,255,.08); color: #fff; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 25px; }
.hero-tags span { padding: 11px 13px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(255,255,255,.08); font-size: 13px; }
.hero-note { margin: 22px 0 0; color: rgba(255,255,255,.76); font-size: 13px; font-weight: 700; }

.intro-band {
  display: grid;
  padding: 32px clamp(24px,7vw,110px);
  grid-template-columns: repeat(3,1fr);
  background: var(--forest);
  color: #fff;
}
.intro-band div { display: grid; gap: 8px; padding: 5px 38px; border-right: 1px solid rgba(255,255,255,.16); }
.intro-band div:first-child { padding-left: 0; }
.intro-band div:last-child { border: 0; }
.intro-band strong { color: #f7d6e0; font-family: Georgia,serif; font-size: 20px; font-weight: 400; }
.intro-band span { color: rgba(255,255,255,.68); font-size: 13px; line-height: 1.5; }

.section { padding: 105px clamp(24px,7vw,110px); }
.section-heading {
  display: grid;
  max-width: 1250px;
  margin: 0 auto 52px;
  align-items: end;
  gap: 70px;
  grid-template-columns: 1.1fr .9fr;
}
.section h2 { margin-bottom: 0; font-size: clamp(39px,4.8vw,64px); }
.section-heading > p, .contact-heading > p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.plant-grid { display: grid; max-width: 1250px; margin: 0 auto; gap: 20px; grid-template-columns: repeat(3,1fr); }
.plant-card { overflow: hidden; border: 1px solid var(--line); border-radius: 21px; background: #fff; box-shadow: 0 16px 50px rgba(44,55,43,.06); }
.plant-card img { width: 100%; height: 290px; object-fit: cover; transition: transform .4s; }
.plant-card:hover img { transform: scale(1.035); }
.plant-copy { padding: 28px; }
.plant-card h3 { margin-bottom: 10px; font-family: Georgia,serif; font-size: 29px; font-weight: 400; }
.plant-card p { min-height: 72px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.plant-card a { color: var(--berry); font-size: 14px; font-weight: 800; }
.season-note { max-width: 1250px; margin: 22px auto 0; padding: 20px 25px; border-radius: 13px; background: #ece5d6; }
.season-note strong { font-family: Georgia,serif; font-size: 20px; font-weight: 400; }
.season-note span { margin-right: 16px; color: var(--terracotta); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

.story {
  display: grid;
  align-items: center;
  gap: clamp(55px,8vw,120px);
  grid-template-columns: 1.1fr .9fr;
  background: var(--forest-dark);
  color: #fff;
}
.story-gallery { position: relative; min-height: 650px; }
.story-main { position: absolute; inset: 0 70px 60px 0; overflow: hidden; border-radius: 120px 24px 120px 24px; }
.story-main img, .story-flower img { width: 100%; height: 100%; object-fit: cover; }
.story-flower { position: absolute; right: 0; bottom: 0; width: 44%; height: 42%; overflow: hidden; border: 8px solid var(--forest-dark); border-radius: 50% 50% 14px 50%; }
.story-badge { position: absolute; z-index: 2; right: 34px; top: 40px; display: grid; padding: 15px 19px; border-radius: 10px; background: rgba(246,240,228,.92); color: var(--forest); }
.story-badge strong { font-family: Georgia,serif; font-size: 20px; }
.story h2 { margin-bottom: 25px; }
.story-lead { color: #f0d6df; font-family: Georgia,serif; font-size: 23px; line-height: 1.5; }
.story-copy > p:not(.eyebrow):not(.story-lead) { color: rgba(255,255,255,.72); font-size: 15px; line-height: 1.75; }
.checks { margin: 28px 0; padding: 0; list-style: none; }
.checks li { margin: 10px 0; color: rgba(255,255,255,.84); }

.how { background: var(--cream); }
.center-heading { max-width: 740px; margin: 0 auto 60px; text-align: center; }
.steps { display: grid; max-width: 1150px; margin: 0 auto; gap: 22px; grid-template-columns: repeat(3,1fr); }
.steps article { padding: 36px 31px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); }
.steps b { display: block; margin-bottom: 35px; color: var(--berry); font-family: Georgia,serif; font-size: 26px; font-weight: 400; }
.steps h3 { font-family: Georgia,serif; font-size: 23px; font-weight: 400; }
.steps p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }

.order {
  display: grid;
  gap: clamp(50px,8vw,120px);
  grid-template-columns: .78fr 1.22fr;
  background: radial-gradient(circle at 5% 10%,rgba(173,61,104,.15),transparent 28%),var(--forest);
  color: #fff;
}
.order-intro > p:not(.eyebrow) { color: rgba(255,255,255,.72); font-size: 16px; line-height: 1.75; }
.quick-contact { display: grid; gap: 12px; margin-top: 32px; }
.quick-contact a { max-width: 320px; padding: 16px; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; background: rgba(255,255,255,.06); font-weight: 800; }
.order-form { padding: clamp(26px,4vw,46px); border-radius: 22px; background: var(--paper); color: var(--ink); box-shadow: 0 30px 80px rgba(0,0,0,.18); }
.form-grid { display: grid; gap: 17px; grid-template-columns: 1fr 1fr; }
.form-grid label { display: grid; gap: 8px; color: #505c53; font-size: 12px; font-weight: 800; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid input, .form-grid select, .form-grid textarea { width: 100%; border: 1px solid #d8d1c3; border-radius: 8px; outline: 0; background: #fff; color: var(--ink); }
.form-grid input, .form-grid select { min-height: 49px; padding: 0 13px; }
.form-grid textarea { padding: 13px; resize: vertical; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { border-color: var(--berry); box-shadow: 0 0 0 3px rgba(173,61,104,.1); }
.consent { display: flex; gap: 9px; margin: 18px 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.submit { width: 100%; }
.notice { margin-bottom: 18px; padding: 14px; border-radius: 8px; background: #e8f4e8; color: #246c36; font-size: 13px; font-weight: 700; }
.notice.error { background: #fae7e7; color: #922c2c; }

.contact { display: grid; align-items: center; gap: 70px; grid-template-columns: .8fr 1.2fr; }
.contact-cards { display: grid; gap: 12px; }
.contact-cards a { padding: 21px 23px; border: 1px solid var(--line); border-radius: 13px; background: #fff; font-weight: 800; }
.contact-cards small { display: block; margin-bottom: 4px; color: var(--muted); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.faq { background: var(--cream); }
.faq-grid { display: grid; max-width: 1050px; margin: 0 auto; gap: 12px; grid-template-columns: 1fr 1fr; }
.faq details { border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.faq summary { padding: 21px 23px; cursor: pointer; font-family: Georgia,serif; font-size: 18px; }
.faq details p { margin: 0; padding: 0 23px 23px; color: var(--muted); font-size: 14px; line-height: 1.65; }

footer { display: grid; padding: 70px clamp(24px,7vw,110px) 28px; gap: 25px; background: var(--forest-dark); color: #fff; grid-template-columns: 1fr 1fr; }
.footer-brand .brand-mark { background: #f3d6df; color: var(--berry); }
.footer-brand div { display: grid; }
footer > p { color: rgba(255,255,255,.6); font-size: 14px; line-height: 1.65; }
.footer-links { display: grid; align-self: end; justify-self: end; gap: 8px; font-weight: 800; text-align: right; }
.footer-bottom { display: flex; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.45); font-size: 12px; justify-content: space-between; grid-column: 1/-1; }

@media (max-width: 1000px) {
  .menu-toggle { display: block; }
  .nav { position: absolute; top: 84px; right: 0; left: 0; display: none; padding: 18px 24px 28px; background: var(--paper); box-shadow: 0 20px 35px rgba(0,0,0,.1); flex-direction: column; }
  .nav.open { display: flex; }
  .plant-grid { grid-template-columns: 1fr 1fr; }
  .plant-card:last-child { grid-column: 1/-1; }
  .story, .order, .contact { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .site-header { min-height: 72px; padding: 0 18px; }
  .brand strong { font-size: 20px; }
  .nav { top: 72px; }
  .hero { min-height: 800px; align-items: end; }
  .hero-image { object-position: 58% center; }
  .hero:after { background: linear-gradient(0deg,rgba(7,35,29,.93),rgba(7,35,29,.52) 66%,rgba(7,35,29,.05)); }
  .hero-panel { width: auto; margin: 260px 16px 16px; padding: 27px 22px; border-radius: 20px; }
  .hero h1 { font-size: 42px; }
  .actions .button { width: 100%; }
  .intro-band, .plant-grid, .steps, .form-grid, .faq-grid { grid-template-columns: 1fr; }
  .intro-band div { padding: 18px 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); }
  .section { padding: 75px 20px; }
  .section-heading { gap: 22px; grid-template-columns: 1fr; }
  .plant-card:last-child { grid-column: auto; }
  .story-gallery { min-height: 460px; }
  .story-main { inset: 0 35px 45px 0; border-radius: 70px 18px 70px 18px; }
  .story-badge { right: 10px; top: 20px; }
  .story h2, .section h2 { font-size: 40px; }
  .form-grid .full { grid-column: auto; }
  footer { grid-template-columns: 1fr; }
  .footer-links { justify-self: start; text-align: left; }
}