/* Strona główna (tylko na niej; hero: makieta docs/makiety/hero-strona-glowna.html). Wspólne elementy w main.css. */

/* ---------- hero ---------- */
.hero{position:relative;padding:28px 0 64px}
.hero::before{content:"";position:absolute;z-index:0;width:1180px;height:1180px;border-radius:50%;background:var(--mist);right:-330px;top:-456px}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:40px;align-items:center;min-height:600px}
.hero .copy{min-width:0}
.hero h1{font-size:clamp(40px,5.1vw,66px);line-height:1.02;letter-spacing:-.035em;font-weight:700;margin-top:18px;max-width:12.5ch}
.hero .lede{font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--ink-2);margin-top:24px;max-width:31em}
.hero .lede b{color:var(--ink);font-weight:600}
.finder{margin-top:34px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) auto;align-items:stretch;background:#fff;border:1px solid var(--line);border-radius:18px;padding:7px;box-shadow:var(--shadow);max-width:600px}
.finder .field{display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:12px;min-width:0}
.finder .field + .field{border-left:1px solid var(--line);border-radius:0}
.finder .field > svg{width:20px;height:20px;flex:none;color:var(--apricot)}
.finder .field-txt{display:grid;min-width:0;flex:1}
.finder .field-txt small{font-size:12.5px;color:var(--muted);font-weight:500;line-height:1.2;white-space:nowrap}
.finder input,.finder select{border:0;outline:0;background:transparent;padding:2px 0 0;font-size:16.5px;font-weight:600;min-width:0;width:100%;appearance:none;cursor:pointer}
.finder input{cursor:text}
.finder input::placeholder{color:#A99FB6;font-weight:500}
.finder .field > svg.chev{width:16px;height:16px;color:var(--muted)}
.finder .btn{min-height:54px;padding:0 24px;font-size:16.5px}
.popular{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:20px;font-size:14.5px}
.popular > span{color:var(--muted);margin-right:4px}
.popular .chip{padding:7px 13px;font-size:14.5px}
.popular .all{font-weight:600;text-underline-offset:3px;margin-left:4px}
.art{position:relative;height:580px}
.art .disc{position:absolute;left:50%;top:50%;width:470px;height:470px;margin:-235px 0 0 -235px;border-radius:50%;background:var(--peach)}
.art .ring{position:absolute;left:50%;top:50%;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;border:1.5px dashed #EAD9E9}
.art .box{position:absolute;left:50%;top:50%;width:420px;height:auto;margin:-210px 0 0 -210px;transform:rotate(-9deg);filter:drop-shadow(0 34px 34px rgba(42,23,64,.28))}
.art .hero-mascot{position:absolute;width:210px;height:auto;left:-22px;bottom:-6px;transform:rotate(-4deg);filter:drop-shadow(0 14px 16px rgba(42,23,64,.18))}
.art .card{position:absolute;display:block;background:#fff;border-radius:18px;box-shadow:var(--shadow);border:1px solid rgba(236,229,241,.8);text-decoration:none;color:inherit}
.art a.card{transition:transform .15s}
.art a.card:hover{transform:translateY(-3px)}
.art .c-fresh{top:26px;left:34px;display:flex;align-items:center;gap:9px;padding:10px 15px;border-radius:999px;font-size:14px;font-weight:600}
.c-fresh .dot,.intro-date .dot{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(34,160,107,.15);display:inline-block;flex:none}
.c-fresh span{color:var(--muted);font-weight:500}
.c-k{display:block;font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:.01em}
.c-median{right:6px;bottom:30px;width:262px;padding:15px 16px 13px}
.c-median .big{display:flex;align-items:baseline;gap:8px;margin-top:6px}
.c-median .big b{font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1}
.c-median .big span{font-size:14px;color:var(--muted)}
.hbars{display:flex;align-items:end;gap:3px;height:46px;margin-top:12px}
.hbars i{flex:1;border-radius:3px 3px 1px 1px;background:#E6DDF6;min-height:3px}
.hbars i.m{background:var(--apricot)}
.c-median .hist-axis{font-size:12px;margin-top:5px}
.c-median .hist-note{display:block;font-size:12.5px;margin-top:6px;line-height:1.35}

/* pasek marek */
.proof{position:relative;z-index:1;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.proof .container{display:flex;align-items:center;gap:20px 36px;flex-wrap:wrap;padding:24px 0}
.proof .lbl{font-size:14.5px;color:var(--muted);font-weight:500}
.logos{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.logos > a{display:block;border-radius:10px;transition:transform .15s}
.logos > a:hover{transform:translateY(-2px)}
.logos .logo{width:76px;height:46px}
.logos .more{font-size:14.5px;font-weight:600;padding-left:4px;text-underline-offset:3px}
.proof .fair{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:14.5px}
.proof .fair svg{width:22px;height:22px;color:var(--violet);flex:none}
.proof .fair a{font-weight:600;text-underline-offset:3px}

/* ---------- czym jest Dietunio ---------- */
.intro-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:40px 64px;align-items:center}
.intro-text h2{font-size:clamp(30px,3.4vw,44px);letter-spacing:-.03em;line-height:1.08;margin-top:16px;max-width:19ch}
.intro-text .body{font-size:18px;line-height:1.65;color:var(--ink-2);margin-top:18px;max-width:40em}
.intro-stats{display:flex;flex-wrap:wrap;margin:32px 0 0;padding:20px 0 0;border-top:2px solid var(--ink)}
.intro-stats > div{padding:0 32px 0 0;margin-right:32px;border-right:2px dotted #D9CCE6}
.intro-stats > div:last-child{border-right:0;margin-right:0;padding-right:0}
.intro-stats dt{font-size:40px;font-weight:700;letter-spacing:-.04em;line-height:1}
.intro-stats dd{margin:6px 0 0;font-size:14.5px;color:var(--muted);font-weight:500}
.intro-date{display:flex;align-items:center;gap:10px;margin-top:22px;font-size:14.5px;color:var(--muted)}
.intro-art{position:relative;display:grid;justify-items:center;padding-top:24px}
.intro-art::before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:var(--peach);bottom:-10px;left:50%;margin-left:-150px}
.intro-art img{position:relative;width:260px;height:auto;transform:rotate(4deg);filter:drop-shadow(0 16px 18px rgba(42,23,64,.18))}

/* ---------- najtańsze pełne dni ---------- */
.seg a{display:inline-block;border-radius:9px;padding:7px 12px;font-weight:600;font-size:14.5px;white-space:nowrap;text-decoration:none}
.seg a:hover{background:#fff}
.seg a[aria-pressed=true]{background:var(--ink);color:#fff}
#najtansze .olist[hidden]{display:none}

/* ---------- ile kosztuje ---------- */
.ptags{display:flex;flex-wrap:wrap;gap:16px 22px;margin:4px 0 30px 6px}
.ptags .tagx{position:relative;padding-right:20px}
.ptags .tagx:nth-child(1){transform:rotate(-3deg)}
.ptags .tagx:nth-child(2){transform:rotate(2deg)}
.ptags .tagx:nth-child(3){transform:rotate(-1deg)}
.ptags .tagx:nth-child(2){background:var(--mist)}
.ptags .tagx:nth-child(3){background:var(--peach-2)}
.ptags .tagx.hot{background:var(--apricot)}
.ptags .tagx.hot span,.ptags .tagx.hot small{color:rgba(42,23,64,.75)}
.ptags .tagx.hot::before{background:rgba(255,255,255,.6)}
.mtext a{font-weight:600;text-underline-offset:3px}

/* ---------- miasta ---------- */
.cmap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:32px 56px;align-items:start}
.cmap-map{position:relative;max-width:620px}
.cmap-map img,.cmap-map svg{display:block;width:100%;height:auto}
.cmap-map svg{position:absolute;inset:0;overflow:visible}
.cmap-map circle{fill:var(--ink);stroke:#fff;stroke-width:1.5;transition:fill .15s}
.cmap-map a.big circle{fill:var(--apricot);stroke:var(--ink);stroke-width:2}
.cmap-map a:hover circle{fill:var(--violet)}
.cmap-map text{font:700 15px "Familjen Grotesk",sans-serif;fill:var(--ink);paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
.cmap-map a:hover text{fill:var(--violet)}
.cmap-list{background:var(--mist);border-radius:24px;padding:22px 26px 24px}
.cmap-list h3{font-size:19px;letter-spacing:-.01em;margin-bottom:6px}
.cmap-list h3 small{font-size:13.5px;font-weight:500;color:var(--muted);margin-left:6px;letter-spacing:0}
.cmap-list .bp small{font-size:13px;margin:0 0 0 2px}
.cmap-list .bitem:last-of-type{border-bottom:0}
.cmap-list .btn{margin-top:16px;width:100%}

/* ---------- jak liczymy ceny ---------- */
.method{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px) minmax(0,1fr);gap:28px 44px;align-items:center}
.mcol{display:grid;gap:30px;list-style:none;padding:0;margin:0}
.mnote{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:start}
.mnote h3{font-size:17.5px;letter-spacing:-.01em;line-height:1.25;margin-top:3px}
.mnote p{font-size:15px;line-height:1.55;color:var(--ink-2);margin-top:6px}
.mnum{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;font-weight:700;font-size:14px;flex:none;letter-spacing:0}
.ticket{position:relative;background:#fff;border:1.5px solid var(--ink);border-radius:20px;padding:22px 22px 18px;box-shadow:8px 10px 0 var(--peach);transform:rotate(-1.5deg)}
.tk-head{display:flex;align-items:center;gap:14px;padding-bottom:18px;border-bottom:2px dashed var(--line)}
.tk-head .logo{width:72px;height:44px}
.tk-b{display:block;font-size:13.5px;font-weight:600;color:var(--muted);text-decoration:none}
.tk-o{display:block;font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.2;text-decoration:none;margin-top:2px}
.tk-b:hover,.tk-o:hover{text-decoration:underline;text-underline-offset:3px}
.tk-price{display:flex;align-items:baseline;gap:10px;margin-top:18px}
.tk-price .mnum{align-self:center}
.tk-price b{font-size:40px;letter-spacing:-.04em;line-height:1}
.tk-price small{color:var(--muted);font-size:14.5px}
.tk-row,.tk-from{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:15px}
.tk-row > svg{width:18px;height:18px;color:var(--apricot);flex:none}
.tk-from{padding-top:14px;border-top:2px dashed var(--line);color:var(--muted)}
.tk-from small{display:block;font-size:13px}
.mlink{margin-top:34px;text-align:center}
.mlink a{font-weight:600;text-underline-offset:3px}

/* ---------- mniejsze ekrany ---------- */
@media (max-width:1100px){
  .method{grid-template-columns:minmax(0,1fr) minmax(0,340px)}
  .method .mcol:last-child{grid-column:1/-1;grid-template-columns:1fr 1fr}
}
@media (max-width:980px){
  .hero-grid{grid-template-columns:minmax(0,1fr);min-height:0;gap:8px}
  .hero::before{width:820px;height:820px;right:-420px;top:auto;bottom:-120px}
  .art{height:520px;max-width:560px;width:100%;margin:0 auto}
  .intro-grid{grid-template-columns:minmax(0,1fr)}
  .cmap{grid-template-columns:minmax(0,1fr)}
  .method{grid-template-columns:minmax(0,1fr);max-width:620px}
  .method .ticket{order:-1;max-width:380px;width:100%}
  .method .mcol:last-child{grid-column:auto;grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  .hero{padding-top:14px;padding-bottom:36px}
  .hero h1{margin-top:12px}
  .hero .lede{margin-top:16px}
  .finder{grid-template-columns:1fr;padding:6px;margin-top:26px}
  .finder .field{padding:11px 12px}
  .finder .field + .field{border-left:0;border-top:1px solid var(--line)}
  .finder .btn{margin-top:6px;width:100%}
  .popular{flex-wrap:nowrap;overflow-x:auto;margin-inline:-16px;padding-inline:16px;scrollbar-width:none}
  .popular::-webkit-scrollbar{display:none}
  .popular .chip,.popular .all{flex:none}
  .art{height:380px;margin-top:18px}
  .art .disc{width:300px;height:300px;margin:-150px 0 0 -150px}
  .art .ring{width:350px;height:350px;margin:-175px 0 0 -175px}
  .art .box{width:268px;margin:-134px 0 0 -134px}
  .art .hero-mascot{width:128px;left:-6px;bottom:-4px}
  .art .c-fresh{top:0;left:0;font-size:13px;padding:8px 12px}
  .c-fresh span{display:none}
  .art .c-median{bottom:6px;right:0;width:196px;padding:12px 13px}
  .c-median .big b{font-size:24px}
  .c-median .hbars,.c-median .hist-axis{display:none}
  .proof .container{padding:18px 0}
  .logos{gap:8px}
  .logos .logo{width:60px;height:36px}
  .logos > a:nth-child(n+5){display:none}
  .proof .fair{margin-left:0}
  .intro-text .body{font-size:16.5px}
  .intro-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .intro-stats > div{padding:0 10px 0 0;margin-right:10px}
  .intro-stats dt{font-size:28px}
  .intro-stats dd{font-size:12.5px;line-height:1.3}
  .intro-art{grid-template-columns:auto auto;align-items:center;justify-content:center;gap:4px;padding-top:0}
  .intro-art::before{width:150px;height:150px;margin-left:-20px;bottom:0}
  .intro-art img{width:140px;order:2}
  .bubble{margin:0;font-size:14.5px;max-width:170px;border-radius:18px 18px 4px 18px}
  .bubble::after{left:auto;right:0;border-width:10px 0 0 14px;border-color:var(--ink) transparent transparent transparent}
  .cmap-list .bitem:nth-of-type(n+7){display:none}
  #najtansze .sec-head .seg{width:100%}
  #najtansze .seg a{flex:1;text-align:center;padding:7px 8px}
  .ptags{gap:12px;margin-left:0}
  .ptags .tagx b{font-size:20px}
  .cmap-map text{font-size:21px}
  .cmap-list{padding:18px 16px 20px}
  .ticket{padding:18px 16px 16px}
  .tk-price b{font-size:34px}
}