/*
Theme Name: Pieśń Kozła
Theme URI: https://teatrpiesnkozla.pl
Author: Teatr Pieśń Kozła
Description: Motyw zbudowany na szkielecie makiety. Bez kontenerów, bez tytułów stron. Treść strony jest całą treścią.
Version: 3.1
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: piesn-kozla
*/

:root{
  /* czerń, grafit, złoto, biel */
  --obsidian:#170307;
  --smoke:#24060b;
  --stone:#300a13;
  --parchment:#f7efe6;
  --parch-dim:#cbb094;
  --muted:#9c8570;
  --gold:#cc9966;
  --gold-lit:#e8cba4;
  --oxblood:#b0202e;
  --patina:#a89089;
  --hair:rgba(204,153,102,.26);
  --red:#b0202e;
  --h:78px;
  --display:"Cinzel",Georgia,serif;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Inter","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--obsidian);color:var(--parchment);font:300 16px/1.7 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:1240px;margin:0 auto;padding:0 26px}
.lbl{font:500 10px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.lbl.red{color:var(--red)}
.skip{position:absolute;left:-9999px}
.skip:focus{position:fixed;top:10px;left:10px;z-index:200;background:var(--gold);color:#170307;padding:12px 20px}

/* ===== PASEK ===== */
.bar{position:sticky;top:0;z-index:60;background:var(--obsidian);border-bottom:1px solid var(--hair);height:var(--h);display:flex;align-items:center}
body.admin-bar .bar{top:32px}
@media screen and (max-width:782px){body.admin-bar .bar{top:46px}}
.bar .wrap{display:flex;align-items:center;gap:6px;width:100%}
.brand{margin-right:auto;display:flex;align-items:center}
.brand img{height:46px;width:auto}
.brand .brandtxt{font:500 20px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.menu{display:flex;gap:0;list-style:none;margin:0;padding:0}
.menu>li{position:relative}
.menu>li>a{display:block;font:500 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--parch-dim);padding:14px 15px;border-bottom:1px solid transparent}
.menu>li>a:hover,.menu>li.current-menu-item>a,.menu>li.current-menu-ancestor>a,.menu>li.current-page-ancestor>a{color:var(--gold);border-bottom-color:var(--gold)}
.sub-menu{display:none;position:absolute;top:100%;left:0;min-width:250px;background:var(--stone);border:1px solid var(--hair);padding:10px 0;list-style:none;margin:0}
.menu>li:hover .sub-menu,.menu>li:focus-within .sub-menu{display:block}
.sub-menu a{display:block;font:300 14px/1.5 var(--serif);letter-spacing:.02em;color:var(--parch-dim);padding:8px 20px}
.sub-menu a:hover{color:var(--gold);background:rgba(247,239,230,.05)}
.burger{display:none;background:none;border:1px solid var(--hair);color:var(--gold);padding:9px 12px;font:500 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
.searchbtn{background:none;border:0;color:var(--parch-dim);cursor:pointer;padding:10px 0 10px 18px;line-height:0}
.searchbtn:hover,.searchbtn.on{color:var(--gold)}
.searchpanel{display:none;position:absolute;top:var(--h);left:0;right:0;background:var(--stone);border-bottom:1px solid var(--hair);padding:30px 0}
.searchpanel.open{display:block}
.searchpanel input{width:100%;background:transparent;border:0;border-bottom:1px solid var(--hair);color:var(--parchment);font:300 30px/1.4 var(--serif);padding:6px 0}
.searchpanel input::placeholder{color:#7d6a5a}
.searchpanel input:focus{outline:none;border-bottom-color:var(--gold)}
.searchpanel .hint{margin-top:14px}

/* ===== WIDOKI ===== */
.view{display:block}

/* ===== SEKCJE ===== */
.ph{scroll-margin-top:calc(var(--h) + 8px);border-bottom:1px solid rgba(247,239,230,.07);padding:56px 0}
.ph:nth-child(even){background:var(--smoke)}
.ph .wrap{display:grid;grid-template-columns:250px 1fr;gap:40px;align-items:start}
.ph h2{margin:10px 0 0;font:400 25px/1.2 var(--display);letter-spacing:.08em;text-transform:uppercase}
.ph .note{margin:0;font:300 19px/1.6 var(--serif);color:var(--parch-dim);max-width:64ch}
.box{margin-top:18px;border:1px solid rgba(247,239,230,.12);background:rgba(247,239,230,.015);min-height:130px;display:flex;align-items:center;justify-content:center;color:#8a6f68;font:500 10px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase}
.box.tall{min-height:280px}
.cols{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}
.cols .box{margin:0;min-height:180px}

/* hero */
.hero{position:relative;min-height:84vh;display:flex;align-items:center;background:var(--obsidian);border-bottom:1px solid var(--hair);padding:80px 0}
.hero .wrap{position:relative;z-index:2;display:block;text-align:center}
.hero h2{font:400 clamp(38px,6.5vw,80px)/1.06 var(--display);letter-spacing:.1em;margin:22px 0 26px}
.hero .lead{font:300 22px/1.6 var(--serif);color:var(--parch-dim);max-width:56ch;margin:0 auto}
.hero .box{max-width:900px;margin:38px auto 0;min-height:210px}

/* sklejone kolumny spektakl + bilet */
.duo{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:18px;background:var(--hair);border:1px solid var(--hair)}
.duo .col{display:flex;flex-direction:column;background:var(--obsidian)}
.duo .top{flex:1;min-height:230px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:26px 18px;text-align:center}
.duo .top:hover{background:rgba(247,239,230,.03)}
.duo .top b{font:400 21px/1.2 var(--display);letter-spacing:.07em;text-transform:uppercase;color:var(--parchment)}
.duo .top em{font:300 16px/1.4 var(--serif);font-style:italic;color:var(--muted)}
.duo .buy{padding:16px;text-align:center;background:var(--gold);color:#170307;font:500 11px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.duo .buy:hover{background:var(--gold-lit)}
.badge{display:inline-block;font:500 9px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;background:var(--oxblood);color:var(--parchment);padding:5px 9px}

.nfilters{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.chip{background:none;border:1px solid rgba(247,239,230,.16);color:var(--parch-dim);font:500 10px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;padding:10px 16px;cursor:pointer}
.chip:hover{border-color:var(--gold);color:var(--gold)}
.chip.is-active{background:var(--gold);border-color:var(--gold);color:#170307}
.ngrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:18px;background:var(--hair);border:1px solid var(--hair)}
.ncard{display:flex;flex-direction:column;background:var(--obsidian)}
.ncard .pic{height:150px;background:#2b0910 center/cover no-repeat;filter:grayscale(.4);transition:filter .5s}
.ncard:hover .pic{filter:grayscale(0)}
.ncard .txt{padding:18px 18px 22px;flex:1;display:flex;flex-direction:column;gap:7px}
.ncard time{font:500 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.ncard h3{margin:0;font:400 17px/1.25 var(--display);letter-spacing:.05em;text-transform:uppercase;color:var(--parchment)}
.ncard p{margin:0;font:300 16px/1.45 var(--serif);color:var(--muted)}
@media (max-width:980px){.ngrid{grid-template-columns:1fr 1fr}}
@media (max-width:580px){.ngrid{grid-template-columns:1fr}}

/* lista wcześniejszych spektakli */
.past{margin-top:20px;border-top:1px solid rgba(247,239,230,.12)}
.past a.row{color:inherit}
.past a.row:hover h3{color:var(--gold)}
.past .row{display:grid;grid-template-columns:92px 1fr;gap:22px;padding:15px 0;border-bottom:1px solid rgba(247,239,230,.07);align-items:baseline}
.past .yr{font:400 17px/1 var(--display);color:var(--gold);letter-spacing:.05em}
.past .yr.q{color:var(--muted);font-size:12px;letter-spacing:.18em;font-family:var(--sans)}
.past h3{margin:0 0 3px;font:400 20px/1.25 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--parchment)}
.past p{margin:0;font:300 17px/1.5 var(--serif);color:var(--muted)}
.past .row:hover{background:rgba(247,239,230,.03)}

.lead-q{margin:0 0 18px;font:300 22px/1.5 var(--serif);color:var(--parchment);max-width:62ch}
.body{margin:0 0 14px;font:300 17px/1.7 var(--sans);color:var(--parch-dim);max-width:78ch}
.body a{color:var(--gold);border-bottom:1px solid rgba(204,153,102,.4)}
.sublbl{margin:26px 0 0;font:500 10px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.awards .row{grid-template-columns:80px 1fr;padding:11px 0}
.awards p{font:300 17px/1.45 var(--serif);color:var(--parch-dim);margin:0}
.ph.light .body{color:#4f463f}

.pgrid{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin-top:24px}
.ptile{background:#fff;border:1px solid rgba(0,0,0,.1);padding:12px 10px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.ptile:hover{border-color:#9a7a2e}
.plogo{width:100%;height:46px;background:#fff center/contain no-repeat}
.plogo-none{display:flex;align-items:center;justify-content:center;color:#b0a698;font:500 8px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;border:1px dashed rgba(0,0,0,.18)}
.pname{font:500 9px/1.25 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#3f372f}
.pdesc{display:none}
@media (max-width:1100px){.pgrid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:580px){.pgrid{grid-template-columns:repeat(3,1fr)}}

/* ===== PODSTRONA SPEKTAKLU ===== */
.dquote{margin:0 0 20px;font:300 21px/1.5 var(--serif);font-style:italic;color:var(--gold-lit);max-width:60ch}
.credits{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:22px}
.credits dl{margin:0}
.credits dt{font:500 10px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.credits div.line{display:grid;grid-template-columns:150px 1fr;gap:14px;padding:7px 0;border-bottom:1px solid rgba(247,239,230,.06);font:300 16px/1.4 var(--sans)}
.credits div.line span{color:var(--muted)}
.credits div.line b{font-weight:400;color:var(--parchment)}
.rev{border-left:2px solid var(--hair);padding:4px 0 4px 20px;margin:0 0 22px}
.rev p{margin:0 0 8px;font:300 18px/1.55 var(--serif);color:var(--parch-dim)}
.rev cite{font:400 12px/1.4 var(--sans);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.dbtn{display:inline-block;margin-top:18px;border:1px solid var(--gold);color:var(--gold);padding:13px 26px;font:500 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.dbtn:hover{background:var(--gold);color:#170307}
@media (max-width:860px){.credits{grid-template-columns:1fr}.credits div.line{grid-template-columns:120px 1fr}}

/* ===== BILETY, kolory Eventimu ===== */
.view.ev{background:#fff;color:#171310}
.ev .lbl{color:#9a6b2e}
.ev .ph,.ev .ph:nth-child(even){background:#fff;border-bottom:1px solid #ece4d9;padding:48px 0}
.ev .ph:nth-child(even),.ev .ph:nth-child(even) .evrow{background:#fbf7f1}
.ev .ph h2{color:#171310}
.ev .note{color:#5f544a}
.evrow{display:grid;grid-template-columns:96px 1fr auto;gap:24px;align-items:center;background:#fff;border:1px solid #ece4d9;border-radius:12px;padding:18px 22px;margin-bottom:12px;box-shadow:0 1px 2px rgba(60,20,10,.06)}
.evrow:hover{border-color:#e2c9b4;box-shadow:0 4px 14px rgba(60,20,10,.10)}
.evdate{text-align:center;line-height:1.2}
.evdate b{display:block;font:600 25px/1 var(--sans);color:#171310}
.evdate span{display:block;font:400 12px/1.5 var(--sans);color:#7a6b5f;text-transform:uppercase;letter-spacing:.05em}
.evinfo h3{margin:0 0 3px;font:600 16px/1.3 var(--sans);color:#171310;letter-spacing:0;text-transform:none}
.evinfo p{margin:0;font:400 12px/1.5 var(--sans);color:#7a6b5f;text-transform:uppercase;letter-spacing:.06em}
.evbuy{text-align:right;white-space:nowrap}
.evprice{display:block;font:600 14px/1 var(--sans);color:#8f1b26;margin-bottom:9px}
.evbtn{display:inline-block;background:var(--red);color:#fff;border-radius:12px;padding:11px 28px;font:600 13px/1 var(--sans)}
.evbtn:hover{background:#c9303e}
.evhint{font:400 12px/1.6 var(--sans);color:#8d7f72;margin-top:20px}
@media (max-width:580px){.evrow{grid-template-columns:70px 1fr}.evbuy{grid-column:2;text-align:left}}

/* sekcja newsletter w kolorze logo */
.ph.gold,.ph.gold:nth-child(even){background:var(--gold);color:#1a1710;border-bottom:1px solid rgba(0,0,0,.18)}
.ph.gold h2{color:#171310}
.ph.gold .lbl{color:#5c4a20}
.ph.gold .note{color:#3d3320}
.ph.gold .box{border:1px solid rgba(0,0,0,.28);background:rgba(247,239,230,.14);color:#5c4a20}

/* sekcje jasne: kadra i partnerzy */
.ph.light,.ph.light:nth-child(even){background:#f6f0e8;color:#171310;border-bottom:1px solid rgba(0,0,0,.1)}
.ph.light h2{color:#171310}
.ph.light .lbl{color:#9a7a2e}
.ph.light .note{color:#4f463f}
.ph.light .box{border:1px solid rgba(0,0,0,.16);background:rgba(0,0,0,.02);color:#8d8b88}
.ph.light .fund{color:#5e544b}
.ph.light .flogos{background:transparent;padding:14px 0 6px;gap:36px}

/* ===== STOPKA ===== */
.foot{background:var(--obsidian);border-top:1px solid var(--hair);padding:70px 0 26px;font-size:14px;line-height:1.75;scroll-margin-top:var(--h)}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.15fr;gap:44px}
.foot a{color:var(--parch-dim)}
.foot a:hover{color:var(--gold)}
.foot h4{margin:0 0 18px;font:500 10px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:10px;font-family:var(--serif);font-size:17px;font-weight:300}
.flogo{height:62px;margin-bottom:22px}
.foot address{font-style:normal;margin:0 0 14px;font-family:var(--serif);font-size:17px}
.foot address b{display:block;font-weight:400;color:var(--parchment);letter-spacing:.04em}
.fcontact{margin:0;font-family:var(--serif);font-size:17px}
.fpanels{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;margin-top:46px}
.fpanel{border:1px solid rgba(247,239,230,.12);padding:20px 26px;display:flex;align-items:center;gap:28px;min-height:86px}
.fpanel h4{margin:0;white-space:nowrap}
.fform{display:flex;gap:10px;flex:1;flex-wrap:wrap}
.fform input{flex:1;min-width:200px;background:transparent;border:1px solid rgba(247,239,230,.16);color:var(--parchment);padding:12px 14px;font:300 15px/1 var(--sans)}
.fform input::placeholder{color:#7d6a5a}
.fform input:focus{outline:none;border-color:var(--gold)}
.fform button{border:0;background:var(--gold);color:#170307;padding:12px 22px;font:500 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
.fform button:hover{background:var(--gold-lit)}
.social{display:flex;gap:16px;align-items:center;margin-left:auto}
.social a{display:flex;align-items:center;justify-content:center;color:var(--parch-dim);line-height:0}
.social a:hover{color:var(--gold)}
.fbottom{margin-top:44px;padding-top:26px;border-top:1px solid rgba(247,239,230,.1)}
.legal{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.15fr;gap:44px;align-items:start;font:400 12px/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.fcopy{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:24px;font-size:12px;color:#9c8570}
.fund{font:400 13px/1.6 var(--sans);color:var(--muted);margin:18px 0 14px;max-width:70ch}
.flogos{display:flex;align-items:center;gap:32px;flex-wrap:wrap;background:#fff;padding:16px 24px}
.flogos img{height:44px}

/* ===== ZWYKŁE WPISY I WYNIKI WYSZUKIWANIA ===== */
.plain{max-width:820px;margin:0 auto;padding:70px 26px}
.plain h1{margin:0 0 26px;font:400 34px/1.2 var(--display);letter-spacing:.06em;text-transform:uppercase}
.plain h2{margin:0 0 6px;font:400 21px/1.3 var(--display);letter-spacing:.05em;text-transform:uppercase}
.plain article{padding:20px 0;border-bottom:1px solid rgba(247,239,230,.08)}
.plain p{font:300 17px/1.7 var(--serif);color:var(--parch-dim)}

@media (max-width:980px){
  .menu{display:none;position:absolute;top:var(--h);left:0;right:0;background:var(--stone);flex-direction:column;padding:12px 0;border-bottom:1px solid var(--hair)}
  .menu.open{display:flex}
  .sub-menu{position:static;display:block;border:0;background:transparent;padding:0 0 10px 16px}
  .burger{display:block;margin-left:auto}
  .ph .wrap{grid-template-columns:1fr;gap:16px}
  .cols,.duo{grid-template-columns:1fr 1fr}
  .fgrid,.legal{grid-template-columns:1fr 1fr;gap:34px}
  .fpanels{grid-template-columns:1fr}
  .fpanel{flex-wrap:wrap;gap:14px}
  .social{margin-left:0;flex-wrap:wrap}
}
@media (max-width:580px){
  .cols,.duo,.fgrid,.fpanels,.legal{grid-template-columns:1fr}
  .legal{gap:10px}
  .past .row{grid-template-columns:1fr;gap:4px}
  .flogos img{height:32px}
  .brand img{height:38px}
}