/* Босо лято – магазинна статия, рубрика „Тогава и сега“ */
:root{
  --okr:#967c2c;
  --okr-tm:#5f4e1c;
  --voda:#59a6c0;
  --cta:#224bc3;
  --hartia:#faf9f5;
  --pyasak:#f3efe2;
  --mastilo:#2d281b;
  --linia:rgba(45,40,27,.28);
  --serif:"Spectral",Georgia,"Times New Roman",serif;
  --sans:"Montserrat","Helvetica Neue",sans-serif;
  --shir:1180px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;background:var(--hartia);color:var(--mastilo);font-family:var(--sans);font-size:18px;line-height:1.7;
  min-height:100vh;display:flex;flex-direction:column;padding-bottom:84px}
main{flex:1}
img{max-width:100%;height:auto;display:block}
a{color:var(--cta)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--voda);outline-offset:3px}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.12;margin:0}
p{margin:0 0 1em}

/* ---------- лента горе ---------- */
.glava{border-bottom:1px solid var(--linia);background:var(--hartia)}
.glava-in{max-width:var(--shir);min-width:0;margin:0 auto;padding:10px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.ime{white-space:nowrap;display:inline-flex;align-items:center;gap:10px;font-family:var(--serif);font-style:italic;font-size:28px;color:var(--okr-tm);text-decoration:none;letter-spacing:.01em}
.ime svg{flex:0 0 auto}
.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;font-family:var(--sans);font-weight:600;
  background:var(--cta);color:#fff;border:0;border-radius:2px;cursor:pointer;line-height:1.25}
.btn:hover{background:#1a3a9a}
.glava .btn{min-height:50px;padding:10px 20px;font-size:16px}

/* ---------- титулна снимка ---------- */
.titulna{margin:0;overflow:hidden}
.titulna img{width:100%;height:clamp(240px,34vh,420px);object-fit:cover;object-position:40% 100%}
.titulna figcaption,.snimka figcaption{font-family:var(--serif);font-style:italic;font-size:16px;color:#5a523d;line-height:1.5}
.titulna figcaption{max-width:var(--shir);margin:0 auto;padding:8px 24px 0;text-align:right}

.uvod{max-width:var(--shir);margin:0 auto;padding:22px 24px 56px;display:grid;grid-template-columns:170px 1.35fr 1fr;gap:0 36px;align-items:start}
.rubrika{border-right:1px solid var(--linia);padding-right:24px;font-size:15px;line-height:1.5}
.rubrika b{display:block;font-family:var(--serif);font-size:20px;font-weight:600;color:var(--okr-tm);margin-bottom:4px}
.uvod h1{font-size:clamp(34px,3.6vw,50px);font-weight:300;letter-spacing:-.01em}
.uvod-dyasno{border-left:1px solid var(--linia);padding-left:28px}
.perex{font-size:19px;line-height:1.6;margin-bottom:18px}
.btn-glavno{min-height:84px;min-width:300px;width:100%;padding:16px 22px;font-size:22px}
.pod-btn{font-size:15px;margin:10px 0 0;color:#5a523d}

/* ---------- текст в колони ---------- */
.sekcia{padding:72px 24px}
.vytre{max-width:var(--shir);margin:0 auto}
.sekcia h2{font-size:clamp(32px,3.4vw,46px);margin-bottom:28px;max-width:20ch}
.kolony{column-count:2;column-gap:56px;column-rule:1px solid var(--linia)}
.kolony p{hyphens:auto;-webkit-hyphens:auto}
.kolony h3{font-size:25px;font-weight:600;margin:6px 0 10px;break-after:avoid}
.bukvica::first-letter{font-family:var(--serif);float:left;font-size:88px;line-height:.82;padding:6px 10px 0 0;color:var(--okr)}

/* плътна лента с цитата */
.lenta-tm{background:var(--okr-tm);color:var(--hartia)}
.lenta-tm .kolony{column-rule-color:rgba(250,249,245,.3)}
.citat{column-span:all;-webkit-column-span:all;margin:30px 0 34px;padding:26px 0;border-top:1px solid rgba(250,249,245,.55);border-bottom:1px solid rgba(250,249,245,.55);
  font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(30px,3.8vw,52px);line-height:1.18;color:#fff}
.citat p{margin:0;max-width:30ch}
.citat cite{display:block;margin-top:14px;font-family:var(--sans);font-style:normal;font-size:15px;color:#e9dfc0}

/* ---------- тогава и сега ---------- */
.sravnenie{border-top:1px solid var(--mastilo);margin:0}
.red{display:grid;grid-template-columns:200px 1fr 1fr;border-bottom:1px solid var(--linia)}
.red > *{padding:18px 20px 18px 0;margin:0}
.red dt{font-family:var(--serif);font-weight:600;font-size:19px;color:var(--okr-tm)}
.red dd + dd{border-left:1px solid var(--linia);padding-left:20px}
.red-glava{font-family:var(--serif);font-size:24px;font-style:italic}
.red-glava > *{padding-top:10px;padding-bottom:10px}
.ramka{border:1px solid var(--mastilo);padding:26px 30px;margin-top:44px;display:grid;grid-template-columns:240px 1fr;gap:20px 36px}
.ramka h3{font-size:26px}
.ramka p{margin:0 0 .6em}
.izvor{font-size:15px;color:#5a523d;font-style:italic}

/* ---------- вечер ---------- */
.lenta-pyasak{background:var(--pyasak)}
.vecer{display:grid;grid-template-columns:7fr 5fr;gap:44px;align-items:start}
.snimka{margin:0}
.snimka img{width:100%;border:1px solid var(--linia)}
.snimka figcaption{padding-top:8px;border-top:1px solid var(--linia);margin-top:10px}

.infokutia{margin-top:56px;border-top:1px solid var(--mastilo);border-bottom:1px solid var(--mastilo);padding:28px 0;display:grid;grid-template-columns:5fr 7fr;gap:36px;align-items:center}
.infokutia h3{font-size:30px;margin-bottom:12px}
.infokutia svg{width:100%;max-width:460px;height:auto;display:block}

/* ---------- предложение ---------- */
.lenta-voda{background:var(--voda);color:var(--mastilo)}
.predlozh{display:grid;grid-template-columns:1fr 380px;gap:48px;align-items:center}
.predlozh h2{margin-bottom:18px}
.predlozh p{font-size:19px}
.predlozh .btn-glavno{outline:1px solid var(--mastilo);outline-offset:5px}
.predlozh .pod-btn{color:var(--mastilo)}

/* ---------- читатели ---------- */
.chitateli{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--mastilo)}
.chitateli figure{margin:0;padding:22px 22px 6px 0}
.chitateli figure + figure{border-left:1px solid var(--linia);padding-left:22px}
.chitateli blockquote{margin:0 0 12px;font-family:var(--serif);font-style:italic;font-size:23px;line-height:1.35}
.chitateli figcaption{font-size:15px;color:#5a523d}

/* ---------- въпроси ---------- */
.vyprosi{display:grid;grid-template-columns:4fr 8fr;gap:40px}
.vyprosi details{border-bottom:1px solid var(--linia)}
.vyprosi details:first-child{border-top:1px solid var(--mastilo)}
.vyprosi summary{cursor:pointer;list-style:none;padding:18px 34px 18px 0;font-family:var(--serif);font-size:22px;position:relative}
.vyprosi summary::-webkit-details-marker{display:none}
.vyprosi summary::after{content:"+";position:absolute;right:4px;top:14px;font-family:var(--sans);font-size:26px;color:var(--okr)}
.vyprosi details[open] summary::after{content:"–"}
.vyprosi details p{margin:0 0 18px}

/* ---------- край ---------- */
.kray{display:grid;grid-template-columns:7fr 5fr;gap:44px;align-items:center}
.kray h2{margin-bottom:20px}

/* ---------- долу ---------- */
.pata{border-top:1px solid var(--mastilo);padding:28px 24px;font-size:15px}
.pata-in{max-width:var(--shir);margin:0 auto;display:flex;flex-wrap:wrap;gap:12px 28px;align-items:baseline;justify-content:space-between}
.pata .ime{font-size:22px}
.pata nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.pata nav a{color:var(--mastilo);font-size:14px}
.pata small{font-size:14px;color:#5a523d;flex-basis:100%}

/* ---------- подстраници ---------- */
.stranica{max-width:760px;margin:0 auto;padding:56px 24px 64px;width:100%}
.stranica h1{font-size:clamp(36px,4vw,50px);font-weight:300;margin-bottom:10px}
.stranica h2{font-size:26px;margin:32px 0 10px;padding-top:16px;border-top:1px solid var(--linia)}
.stranica .data{font-style:italic;font-family:var(--serif);color:#5a523d}
.formular{display:grid;gap:16px;margin-top:20px}
.formular label{display:grid;gap:6px;font-size:16px;font-weight:500}
.formular input,.formular textarea{font:inherit;padding:12px 14px;border:1px solid var(--mastilo);border-radius:0;background:#fff}
.formular textarea{min-height:150px}
.formular .btn{min-height:60px;font-size:18px;padding:12px 24px;justify-self:start}
#kontaktDakujeme{border:1px solid var(--mastilo);padding:20px;font-family:var(--serif);font-size:22px}

/* ---------- изскачащ прозорец и лента (engine) ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(36,31,18,.84);display:none;align-items:center;justify-content:center;padding:16px;z-index:1000}
.modal-overlay.show{display:flex}
.modal{position:relative;background:var(--hartia);width:min(640px,100%);max-height:94vh;overflow:auto;padding:44px 40px 36px;text-align:center;border:1px solid var(--mastilo);outline:1px solid var(--hartia);outline-offset:6px}
.modal .close{position:absolute;top:8px;right:10px;width:48px;height:48px;border:1px solid var(--linia);background:#fff;font-size:32px;line-height:1;cursor:pointer;color:var(--mastilo)}
.modal .badge{display:inline-block;font-size:16px;font-weight:600;color:var(--okr-tm);border-bottom:1px solid var(--okr);padding-bottom:4px;margin-bottom:14px}
.modal h3{font-family:var(--serif);font-size:48px;font-weight:600;color:var(--okr-tm);margin:0 0 6px}
.modal > p{font-size:22px;margin:0 0 16px}
.modal .offer{border-top:1px solid var(--linia);border-bottom:1px solid var(--linia);padding:14px 0 6px;margin-bottom:22px}
.modal .offer p{margin:0 0 8px;font-size:18px}
.modal .btn{white-space:normal}
.btn-cta-xl{min-height:84px;width:100%;padding:16px 20px;font-size:22px}
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:900;background:var(--mastilo);color:var(--hartia);display:flex;align-items:center;justify-content:center;gap:18px;padding:10px 16px;border-top:3px solid var(--okr)}
.sticky-cta > span{font-size:16px;line-height:1.35}
.sticky-cta .btn{flex:0 0 auto;min-height:60px;padding:10px 22px;font-size:18px}

/* ---------- мобилен изглед ---------- */
@media (max-width:980px){
  .uvod{grid-template-columns:1fr;gap:0}
  .rubrika{border-right:0;border-bottom:1px solid var(--linia);padding:0 0 8px;margin-bottom:12px;font-size:14px;display:flex;gap:10px;flex-wrap:wrap;align-items:baseline}
  .rubrika b{margin:0}
  .uvod-dyasno{border-left:0;padding-left:0;margin-top:16px;display:flex;flex-direction:column}
  .uvod-dyasno .btn-glavno{order:-1;margin-bottom:16px}
  .uvod-dyasno .pod-btn{order:-1;margin:-6px 0 14px}
  .predlozh,.vecer,.kray,.vyprosi,.infokutia{grid-template-columns:1fr;gap:28px}
  .chitateli{grid-template-columns:1fr 1fr}
  .chitateli figure:nth-child(3){border-left:0;padding-left:0}
}
@media (max-width:640px){
  body{font-size:17px;padding-bottom:118px}
  .glava-in{padding:8px 16px}
  .ime{font-size:22px}
  .rubrika b{font-size:17px}
  .titulna figcaption{font-size:14px}
  .glava .btn{padding:8px 12px;font-size:16px;max-width:56%;white-space:normal}
  .titulna img{width:165%;max-width:165%;margin-left:-22%;height:230px;object-position:40% 100%}
  .titulna figcaption{padding:6px 16px 0;text-align:left}
  .uvod{padding:16px 16px 44px}
  .uvod h1{font-size:33px}
  .perex{font-size:17px}
  .btn-glavno{min-width:0}
  .sekcia{padding:52px 16px}
  .kolony{column-count:1}
  .red{grid-template-columns:1fr 1fr}
  .red dt{grid-column:1/-1;padding-bottom:0}
  .red dd:first-of-type{padding-right:12px}
  .red dd + dd{padding-left:12px}
  .red-glava > :first-child{display:none}
  .ramka{grid-template-columns:1fr;padding:22px 18px}
  .chitateli{grid-template-columns:1fr}
  .chitateli figure + figure{border-left:0;padding-left:0;border-top:1px solid var(--linia)}
  .modal{padding:40px 18px 24px}
  .modal h3{font-size:38px}
  .sticky-cta{gap:10px}
  .sticky-cta > span{font-size:14px}
  .sticky-cta .btn{font-size:16px;padding:8px 14px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}