/* YABI 2.0 v3 – Blog (zoznam + článok). Návrh: Blog / Desktop + mobil, Blog article / Desktop + mobil. */
.b-hero .b-hero__icon{width:123px;height:96px}
.b-content{max-width:1440px;margin:0 auto;padding:48px var(--gutter) 48px;display:flex;flex-direction:column;gap:72px}
.b-content--nl{padding-top:96px}

/* Zástupný obrázok so záhybom rohu (papier) */
/* Roh sa reálne odreže clip-pathom (rovnaký princíp ako .k-form) – biely ::before trojuholník sa pri
   zaoblenom orezaní kreslil cez fotku a zostával po ňom tenký obrys. */
.ph-img{--fold:40px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--paper-dark);border-radius:var(--r-main);clip-path:polygon(0 0,calc(100% - var(--fold)) 0,100% var(--fold),100% 100%,0 100%)}
.ph-img::after{content:"";position:absolute;top:0;right:0;width:var(--fold);height:var(--fold);background:rgba(0,11,22,.14);clip-path:polygon(0 0,100% 100%,0 100%);border-bottom-left-radius:6px}
.ph-img--featured{--fold:56px;width:720px;max-width:100%;aspect-ratio:720/460;flex:none}
.ph-img--card{width:100%;aspect-ratio:410/296}
.ph-img--hero{--fold:72px;width:100%;height:600px}
.ph-img--fig{--fold:56px;width:100%;aspect-ratio:1040/560}
.ph-img>img,.ph-img>source+img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ph-img>img{z-index:0}
.ph-img::after{z-index:1;pointer-events:none}


.btags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start;align-self:flex-start}

.btags li{border:1px solid var(--ink);border-radius:var(--r-chip);padding:4px 12px;font-size:14px;line-height:20px;letter-spacing:-.14px;font-weight:500}

/* Featured */
.b-featured{display:flex;gap:56px;align-items:flex-start}
.b-featured__copy{display:flex;flex-direction:column;gap:24px;align-items:flex-start;flex:1;min-width:0;padding-top:32px}
.b-featured__meta{display:flex;align-items:center;gap:12px;font-size:14px;line-height:20px;color:var(--ink-gray)}
.b-badge{background:var(--orange);color:var(--ink);border-radius:var(--r-chip);padding:4px 12px;font-weight:500}
.b-featured__title{font-size:64px;line-height:64px;letter-spacing:-2.56px}
.b-featured__soon{font-weight:500;color:var(--ink-gray)}

/* Grid */
.b-list{display:flex;flex-direction:column;gap:48px}
.b-list__title{font-size:48px;line-height:48px;letter-spacing:-2.16px}
.b-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:48px 24px}
.bcard,.bcard__link{display:flex;flex-direction:column;gap:20px;color:inherit;text-decoration:none}
.bcard__body{display:flex;flex-direction:column;gap:12px}
.bcard__title{font-size:24px;line-height:26px;letter-spacing:-.7px}
.bcard__link:hover .bcard__title,.bcard__link:focus-visible .bcard__title{color:var(--primary)}
.bcard__link:focus-visible{outline:2px solid var(--primary);outline-offset:4px;border-radius:var(--r-main)}
.bcard[data-placeholder] .placeholder{margin-right:6px}

/* Newsletter – obálka; rozmery v cqw z rámu 1280 × 500 */
.nl-wrap{container-type:inline-size;width:100%;max-width:1280px;margin:0 auto}
.nl{position:relative;width:100%;height:39.0625cqw}
.nl>img{position:absolute;display:block;max-width:none;pointer-events:none}
.nl__back{left:-2.8125cqw;top:7.6563cqw;width:105.625cqw;height:36.09cqw}
.nl__flap{left:1.7188cqw;top:-.7813cqw;width:96.5625cqw;height:9.375cqw}
.nl__front,.nl__light{left:0;top:23.4375cqw;width:100cqw;height:15.625cqw}
.nl__letter{position:absolute;left:11.28cqw;top:8.9cqw;width:76.5625cqw;height:23.4375cqw;transform:rotate(2deg);background:var(--paper);border-radius:12px;box-shadow:0 8px 20px -4px #000a17;padding:3.75cqw 4.375cqw 0;display:flex;flex-direction:column;gap:1.25cqw;overflow:hidden}
.nl__title{font-size:5cqw;line-height:1;letter-spacing:-.04em;max-width:56.875cqw}
.nl__stamp{position:absolute;left:65.94cqw;top:1.72cqw;width:7.5cqw;height:8.85cqw;transform:rotate(-6deg);background:var(--orange);border:4px dashed var(--paper);border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:14px;font-weight:500;line-height:1}
.nl__stamp img{width:3.6cqw;height:auto}
.nl__form{position:absolute;left:31.68cqw;top:30.7cqw;display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;color:var(--paper);z-index:1}
.nl__field{display:flex;flex-direction:column;gap:8px;width:max(28.125cqw,200px)}
.nl__field span{color:var(--paper)}
.nl__field input{font:inherit;font-size:14px;line-height:20px;padding:13px 16px;border:1px solid var(--field-border);border-radius:var(--r-btn);background:var(--paper);color:var(--ink);width:100%}
.nl__field input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.nl__status{position:absolute;top:100%;left:0;margin-top:8px;color:var(--paper);white-space:nowrap}

/* Článok */
.art-hero{display:flex;flex-direction:column;align-items:center;padding:142px var(--gutter) 0;max-width:1440px;margin:0 auto}
.art-hero .ph-img--hero{margin-bottom:-120px}
.art-hero__card{position:relative;width:1000px;max-width:100%;background:var(--paper);border-radius:var(--r-main);box-shadow:0 -12px 32px -12px rgba(0,10,23,.1);padding:48px;display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.art-hero__title{font-size:64px;line-height:64px;letter-spacing:-2.56px}
.art-hero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;color:var(--ink-gray)}
.art-dot{width:4px;height:4px;border-radius:2px;background:var(--ink)}
.art-back{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-size:16px;font-weight:500;letter-spacing:-.16px}
.art-back:hover{color:var(--primary)}
.art-body{display:flex;flex-direction:column;align-items:center;gap:56px;padding:32px var(--gutter) 96px}
.art-sec{width:760px;max-width:100%;display:flex;flex-direction:column;gap:24px}
.art-sec h2{font-size:48px;line-height:48px;letter-spacing:-2.16px}
.art-lead{font-size:24px;line-height:26px;letter-spacing:-.7px}
.art-sec p:not(.art-lead){font-size:18px;line-height:24px;letter-spacing:-.36px}
.art-sec strong{font-weight:600}
.art-fig{width:1040px;max-width:100%}
.art-takeaway{width:760px;max-width:100%;background:var(--paper-dark);border-radius:var(--r-main);padding:32px;display:flex;flex-direction:column;gap:12px}
.art-takeaway__text{font-size:24px;line-height:26px;letter-spacing:-.7px}
.art-foot{width:760px;max-width:100%;border-top:1px solid var(--ink);padding-top:24px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.art-share{display:flex;gap:16px;align-items:center;font-size:14px;line-height:20px;font-weight:500}
.art-share a{color:var(--ink)}
.art-copy{font:inherit;background:none;border:0;padding:0;color:var(--ink);text-decoration:underline;cursor:pointer}
.art-related{background:var(--paper-dark)}
.art-related__inner{max-width:1440px;margin:0 auto;padding:96px var(--gutter);display:flex;flex-direction:column;gap:48px}
.art-related__head{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.art-related .ph-img{background:var(--paper)}
/* 20 článkov (BRIEF-blog-20): podnadpis, odkazy v texte, CTA, featured ako odkaz */
.art-hero__sub{font-size:24px;line-height:26px;letter-spacing:-.7px}
.art-sec a:not(.btn){color:var(--primary);text-decoration:underline;text-underline-offset:2px}
.art-sec a:not(.btn):hover{text-decoration-thickness:2px}
.art-cta{padding-top:8px}
.art-cta .btn{white-space:normal;text-align:center}
.b-featured__img{display:block;width:720px;max-width:100%;flex:none}
.b-featured__img .ph-img--featured{width:100%}
.b-featured__title a:hover,.b-featured__title a:focus-visible{color:var(--primary)}

@media (max-width:1279px){
  .b-featured{gap:40px}
  .b-featured__img{width:56%}
  .b-featured__title,.art-hero__title{font-size:48px;line-height:48px;letter-spacing:-2px}
}
@media (max-width:1023px){
  .b-grid{grid-template-columns:repeat(2,1fr)}
  .b-featured{flex-direction:column;align-items:stretch}
  .b-featured__img{width:100%}
  .b-featured__copy{max-width:none}
  .ph-img--hero{height:420px}
}
@media (max-width:767px){
  .b-content{padding:24px var(--gutter) 40px;gap:48px}
  .b-content--nl{padding-top:64px}
  .b-grid{grid-template-columns:1fr;gap:40px}
  .bcard__title{font-size:30px;line-height:32px;letter-spacing:-1.2px}
  .b-list{gap:32px}
  .b-list__title,.art-sec h2{font-size:32px;line-height:32px;letter-spacing:-1.2px}
  .b-featured__title,.art-hero__title{font-size:40px;line-height:40px;letter-spacing:-1.6px}
  .ph-img--hero{--fold:48px;height:200px}
  .art-hero{padding-top:100px}
  .art-hero .ph-img--hero{margin-bottom:-24px}
  .art-hero__card{padding:24px;width:calc(100% - 24px)}
  .art-body{gap:40px;padding:24px var(--gutter) 64px}
  .art-lead,.art-takeaway__text,.art-hero__sub{font-size:20px;line-height:24px}
  .art-sec p:not(.art-lead){font-size:16px;line-height:24px}
  .art-takeaway{padding:24px}
  .art-related__inner{padding:64px var(--gutter)}
  /* Newsletter mobil: obálka ako modrá karta, list nad formulárom */
  .nl{height:auto;background:var(--primary);border-radius:var(--r-main);padding:32px 20px 28px;display:flex;flex-direction:column;gap:28px;overflow:hidden}
  .nl>img{display:none}
  .nl__letter{position:relative;left:auto;top:auto;width:100%;height:auto;padding:28px 20px 32px;gap:12px;transform:rotate(-2deg)}
  .nl__title{font-size:32px;line-height:32px;letter-spacing:-1.2px;max-width:70%}
  .nl__stamp{left:auto;right:16px;top:16px;width:64px;height:76px;font-size:12px}
  .nl__stamp img{width:30px}
  .nl__form{position:relative;left:auto;top:auto;flex-direction:column;align-items:stretch}
  .nl__field{width:100%}
  .nl__status{position:static;white-space:normal;margin-top:0}
}
.art-chips{list-style:none;margin:0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.nl__field input::placeholder{color:var(--ink-gray);opacity:1}

.art-copy{font-size:16px;line-height:24px}

/* ================================================================
   PATCH → append to the very END of css/blog.css
   Newsletter envelope animation support. No visual change at rest:
   the flap gets its hinge (bottom edge) as transform origin for the gentle unfold in blog.js.
   The open state defined above stays the final state (no-JS, reduced motion, print, focus).
   ================================================================ */
.nl__flap{transform-origin:50% 100%}
/* PATCH → append to the very END of css/blog.css. NÁVRH – pixelovo neoverené.
   Newsletter consent checkbox + hidden honeypot. The envelope (images, letter, stamp) and its animation are unchanged.
   Desktop: the consent sits as a third item to the right of the button, bottom-aligned with it, so the form keeps its
   current height inside the envelope. Mobile (<768px, form is a column): below the button, full width. */
.nl__consent{display:flex;align-items:flex-start;gap:10px;flex:1 1 240px;max-width:360px;color:var(--paper);cursor:pointer}
.nl__consent input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--paper);cursor:pointer}
.nl__consent input:focus-visible{outline:2px solid var(--paper);outline-offset:2px}
.nl__consent span{color:var(--paper)}
.nl__consent input[aria-invalid="true"]{outline:2px solid var(--orange);outline-offset:2px}
/* Honeypot: off-screen for people, still in the form for bots. */
.nl__hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
@media (max-width:767px){
  .nl__consent{flex:none;max-width:none;width:100%}
}
/* Tablet envelope pocket grows with its form. Artwork and animation coordinates
   stay at their existing cqw positions; the blue pocket extends in normal flow. */
@media (min-width:768px) and (max-width:1279px){
  .nl{height:auto;padding:calc(30.7cqw + 12px) 24px 24px}
  .nl__front,.nl__light{display:none}
  .nl::after{content:"";position:absolute;top:23.4375cqw;left:0;right:0;bottom:0;z-index:0;border-radius:0 0 var(--r-main) var(--r-main);background:#1472ff;clip-path:polygon(0 0,50% 6.25cqw,100% 0,100% 100%,0 100%);pointer-events:none}
  .nl__form{position:relative;left:auto;top:auto;width:100%;align-items:flex-end;color:var(--paper)}
  .nl__field{flex:1 1 220px;width:auto;min-width:0}
  .nl__consent{flex:1 1 260px;max-width:none}
  .nl__status{position:static;flex-basis:100%;margin-top:0;white-space:normal;overflow-wrap:anywhere;color:var(--paper)}
}

/* Desktop keeps the original form position and V-shaped front. The pocket grows
   by the measured status height, so even a wrapped error stays inside blue. */
@media (min-width:1280px){
  .nl{height:calc(39.0625cqw + var(--nl-status-space, 0px))}
  .nl__front,.nl__light{display:none}
  .nl::after{content:"";position:absolute;top:23.4375cqw;left:0;right:0;bottom:0;z-index:0;border-radius:0 0 var(--r-main) var(--r-main);background:#1472ff;clip-path:polygon(0 0,50% 6.25cqw,100% 0,100% 100%,0 100%);pointer-events:none}
  .nl__status{top:100%;left:0;right:0;margin-top:8px;white-space:normal;overflow-wrap:anywhere;color:var(--paper)}
}

/* Mobile: real open envelope, with a flowing V pocket rather than a blue card.
   Both form and status are in the pocket's grid row, so it grows without JS. */
@media (max-width:767px){
  .nl{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;padding:56px 20px 28px;background:none;overflow:visible;isolation:isolate}
  .nl::before{content:"";position:absolute;inset:56px 0 0;background:var(--primary);border-radius:var(--r-main);z-index:-1;box-shadow:0 20px 30px -16px #000a1729}
  .nl>.nl__flap{display:block;left:0;top:0;width:100%;height:64px;z-index:-1}
  .nl__letter{grid-area:1/1;min-width:0;z-index:0}
  .nl::after{content:"";grid-area:2/1;position:relative;z-index:0;margin:-56px -20px -28px;background:#1472ff;border-radius:0 0 var(--r-main) var(--r-main);clip-path:polygon(0 0,50% 40px,100% 0,100% 100%,0 100%);pointer-events:none}
  .nl__form{grid-area:2/1;min-width:0;z-index:1}
  .nl__status{overflow-wrap:anywhere}
}
/* Desktop: consent below the email/button row; status follows in normal flow.
   Pocket height is content-driven, including long translated error messages. */
@media (min-width:1280px){
  .nl{height:auto;padding:30.7cqw 24px 28px 31.68cqw}
  .nl__form{position:relative;left:auto;top:auto;display:grid;grid-template-columns:minmax(0,360px) 120px;gap:12px;align-items:end;width:100%}
  .nl__field{width:100%;min-width:0}
  .nl__consent{grid-column:1/-1;max-width:none;width:100%;margin-top:0}
  .nl__status{position:static;grid-column:1/-1;white-space:normal;margin:0;overflow-wrap:anywhere}
}

@media (min-width:1280px){.nl__form>button{width:120px;min-width:0}.nl__consent,.nl__status{min-width:0}.nl__form>noscript{grid-column:1/-1}}

/* Current Figma Newsletter/Mobile816:57302: 350px reference, flap40/110,
   letter128/300, pocket330 with70px V, form429. Extra copy grows the pocket. */
@media (max-width:767px){
 .nl{padding:128px 24px 24px;gap:1px}
 .nl::before{top:150px}
 .nl>.nl__flap{left:22px;top:40px;width:calc(100% - 44px);height:110px}
 .nl__letter{min-height:300px;padding:28px 24px 32px;gap:12px}
 .nl__title{font-size:32px;line-height:36px;letter-spacing:-.8px;max-width:100%}
 .nl__letter>.t-eyebrow{font-size:12px}
 .nl__stamp{right:24px;top:20px;width:52px;height:61px;font-size:10px;border-width:3px}
 .nl__stamp img{width:25px}
 .nl::after{margin:-99px -24px -24px;clip-path:polygon(0 0,50% 70px,100% 0,100% 100%,0 100%)}
}
@media(max-width:767px){
 .nl__title{max-width:254px}
 :lang(en) .nl__title{max-width:100%;padding-top:32px}
 .nl>.nl__flap{filter:brightness(.8)}
}
@media(max-width:389px){.nl__title{padding-top:32px}}