/* ---------------------------------------------------------------
   Blog: Beriem / neberiem, 5 vecí v mojej kuchyni

   Rozloženie článku je vlastné, preto má samostatný súbor. Všetko je
   zúžené pod #anna-beriem, takže sa to nemôže rozliať na iné stránky.
   Farby aj písmo si berie z palety webu (style.css a fonts.css), nie
   z vlastných hodnôt, a nič sa nesťahuje z cudzích serverov.
   --------------------------------------------------------------- */
#anna-beriem { --an-cream:var(--bg); --an-lilac:var(--lavender); --an-green:var(--ink); --an-ink:var(--primary-dark); --an-lime:var(--lime); --an-white:var(--surface); width:100%; color-scheme:light; color:var(--an-green); background:var(--an-cream); font-family:var(--font-body); container-type:inline-size; }
#anna-beriem * { box-sizing:border-box; }
#anna-beriem .an-shell { width:min(100% - 48px,1080px); margin-inline:auto; }
#anna-beriem .an-header { display:flex; align-items:center; justify-content:space-between; min-height:76px; gap:24px; }
#anna-beriem .an-brand { display:flex; align-items:center; gap:8px; color:var(--an-green); text-decoration:none; }
#anna-beriem .an-mark { width:12px; height:12px; border-radius:50%; background:linear-gradient(135deg,#6a5bd0,var(--an-lilac)); }
#anna-beriem .an-name { font-family:var(--font-display); font-weight:500; font-size:18px; line-height:1.1; }
#anna-beriem .an-claim { display:block; margin-top:3px; font-family:var(--font-body); font-size:9px; line-height:1.4; font-weight:400; }
#anna-beriem .an-nav { display:flex; gap:21px; align-items:center; font-family:var(--font-display); font-size:14px; }
#anna-beriem .an-nav a { color:inherit; text-decoration:none; }
#anna-beriem .an-nav a:last-child { background:var(--an-lime); border-radius:6px; padding:8px 11px; font-weight:500; }
#anna-beriem .an-menu { display:none; position:relative; font-family:var(--font-display); }
#anna-beriem .an-menu summary { cursor:pointer; list-style:none; }
#anna-beriem .an-menu summary::-webkit-details-marker { display:none; }
#anna-beriem .an-menu-panel { position:absolute; z-index:20; top:calc(100% + 14px); right:0; width:min(275px,calc(100vw - 32px)); padding:12px; border:1px solid rgba(15,87,87,.16); border-radius:8px; background:var(--an-white); box-shadow:0 18px 40px rgba(10,61,61,.16); }
#anna-beriem .an-menu-panel a { display:block; padding:10px 8px; color:var(--an-green); text-decoration:none; }
#anna-beriem .an-menu-panel a:last-child { margin-top:5px; border-radius:6px; background:var(--an-lime); font-weight:500; }
#anna-beriem .an-hero { position:relative; overflow:hidden; background:var(--an-green); color:var(--an-cream); padding:68px 0 178px; }
#anna-beriem .an-orbit { position:absolute; width:310px; height:310px; border:1px solid rgba(193,255,114,.48); border-radius:48% 52% 45% 55%; right:-74px; top:-145px; transform:rotate(18deg); }
#anna-beriem .an-orbit::after { content:''; position:absolute; inset:24px; border:1px solid rgba(175,159,242,.56); border-radius:53% 47% 51% 49%; }
#anna-beriem .an-kicker { margin:0 0 17px; font-family:var(--font-display); font-size:12px; letter-spacing:.6px; text-align:center; color:var(--an-lime); }
#anna-beriem .an-title { max-width:760px; margin:0 auto 24px; text-align:center; text-wrap:balance; font-family:var(--font-display); font-weight:500; font-size:clamp(42px,7cqw,73px); line-height:1.04; letter-spacing:-.035em; color:var(--an-cream); }
#anna-beriem .an-title em { position:relative; z-index:0; font-style:italic; font-weight:400; }
#anna-beriem .an-title em::after { content:''; position:absolute; z-index:-1; left:-.08em; right:-.12em; bottom:.02em; height:.3em; background:var(--an-lilac); transform:rotate(-1.5deg); border-radius:50%; opacity:.96; }
#anna-beriem .an-deck { max-width:610px; margin:0 auto; text-align:center; font-size:16px; line-height:1.75; color:var(--an-cream); }
#anna-beriem .an-cover-wrap { margin-top:-126px; position:relative; z-index:2; }
#anna-beriem .an-cover { width:100%; height:430px; display:block; object-fit:cover; object-position:center 51%; border-radius:6px; box-shadow:0 22px 50px rgba(10,61,61,.14); }
#anna-beriem .an-credit { margin:8px 0 0; text-align:right; font-size:10px; line-height:1.5; color:rgba(15,87,87,.72); }
#anna-beriem .an-intro { max-width:735px; margin:72px auto 44px; }
#anna-beriem .an-intro h2 { margin:0 0 20px; color:var(--an-green); font-family:var(--font-display); font-weight:500; font-size:34px; line-height:1.2; text-wrap:balance; }
#anna-beriem .an-intro p { margin:0; color:var(--an-ink); font-size:15px; line-height:1.85; }
#anna-beriem .an-note { display:flex; gap:14px; align-items:flex-start; margin:32px 0 0; padding:18px 20px; border-left:3px solid var(--an-lilac); background:rgba(175,159,242,.13); color:var(--an-ink); font-size:13px; line-height:1.7; }
#anna-beriem .an-note strong { font-family:var(--font-display); color:var(--an-green); font-weight:500; }
#anna-beriem .an-list { margin:0 auto; }
#anna-beriem .an-item { display:grid; grid-template-columns:minmax(0,.93fr) minmax(0,1.07fr); gap:56px; align-items:center; padding:60px 0; border-top:1px solid rgba(15,87,87,.18); }
#anna-beriem .an-item:nth-child(even) .an-media { order:2; }
#anna-beriem .an-item:nth-child(even) .an-copy { order:1; }
#anna-beriem .an-media { margin:0; }
#anna-beriem .an-photo { width:100%; aspect-ratio:4 / 3; display:block; object-fit:cover; border-radius:6px; }
#anna-beriem .an-item:nth-child(2) .an-photo { object-position:center 53%; }
#anna-beriem .an-item:nth-child(3) .an-photo { object-position:center 44%; }
#anna-beriem .an-item:nth-child(4) .an-photo { object-position:center 43%; }
#anna-beriem .an-item:nth-child(5) .an-photo { object-position:center 48%; }
#anna-beriem .an-number { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; margin-bottom:17px; border-radius:50%; background:var(--an-lilac); color:var(--an-ink); font-family:var(--font-display); font-size:15px; font-weight:500; }
#anna-beriem .an-item h3 { margin:0 0 12px; color:var(--an-green); font-family:var(--font-display); font-size:31px; line-height:1.18; font-weight:500; text-wrap:balance; }
#anna-beriem .an-verdict { display:inline-block; margin-bottom:19px; padding:6px 10px; border:1px solid rgba(15,87,87,.3); border-radius:30px; color:var(--an-green); font-family:var(--font-display); font-size:11px; letter-spacing:.5px; text-transform:uppercase; }
#anna-beriem .an-copy p { margin:0 0 18px; color:var(--an-ink); font-size:14px; line-height:1.78; }
#anna-beriem .an-choice { margin-top:22px; padding:17px 19px; background:var(--an-lime); color:var(--an-ink); border-radius:6px; font-size:13px; line-height:1.7; }
#anna-beriem .an-choice strong { font-family:var(--font-display); font-weight:500; color:var(--an-green); }
#anna-beriem .an-sources { padding:54px 0 58px; border-top:1px solid rgba(15,87,87,.18); }
#anna-beriem .an-sources h2 { margin:0 0 13px; color:var(--an-green); font-family:var(--font-display); font-size:28px; font-weight:500; }
#anna-beriem .an-sources p { max-width:730px; margin:0 0 20px; color:var(--an-ink); font-size:13px; line-height:1.7; }
#anna-beriem .an-sources ol { margin:0; padding-left:20px; columns:2; column-gap:42px; color:var(--an-green); font-size:11px; line-height:1.7; }
#anna-beriem .an-sources li { break-inside:avoid; margin:0 0 10px; padding-left:4px; }
#anna-beriem .an-sources a { color:inherit; text-underline-offset:3px; }
#anna-beriem .an-related { background:var(--an-white); padding:58px 0; }
#anna-beriem .an-related-label { margin:0 0 9px; font-family:var(--font-display); font-size:11px; letter-spacing:.5px; }
#anna-beriem .an-related h2 { margin:0 0 27px; font-family:var(--font-display); font-size:31px; font-weight:500; color:var(--an-green); }
#anna-beriem .an-related-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(15,87,87,.18); }
#anna-beriem .an-link { display:block; padding:22px 26px 8px 0; color:var(--an-green); font-family:var(--font-display); font-size:18px; line-height:1.4; text-decoration:none; }
#anna-beriem .an-link + .an-link { border-left:1px solid rgba(15,87,87,.18); padding-left:26px; }
#anna-beriem .an-cta { background:var(--an-lilac); padding:62px 0; text-align:center; }
#anna-beriem .an-cta h2 { max-width:630px; margin:0 auto 22px; font-family:var(--font-display); font-size:37px; line-height:1.18; font-weight:500; color:var(--an-ink); text-wrap:balance; }
#anna-beriem .an-cta p { max-width:550px; margin:0 auto 27px; color:var(--an-ink); font-size:14px; line-height:1.7; }
#anna-beriem .an-button { display:inline-flex; min-height:46px; padding:12px 21px; align-items:center; justify-content:center; border-radius:6px; background:var(--an-lime); color:var(--an-green); font-family:var(--font-display); font-size:14px; font-weight:500; text-decoration:none; }
#anna-beriem .an-footer { background:var(--an-green); color:var(--an-cream); padding:34px 0; }
#anna-beriem .an-footer-row { display:flex; justify-content:space-between; gap:28px; align-items:flex-end; }
#anna-beriem .an-footer strong { display:block; margin-bottom:6px; font-family:var(--font-display); font-weight:500; }
#anna-beriem .an-footer small { font-size:10px; line-height:1.6; }
@container (max-width:760px) {
  #anna-beriem .an-shell { width:min(100% - 32px,1080px); }
  #anna-beriem .an-nav { display:none; }
  #anna-beriem .an-menu { display:block; }
  #anna-beriem .an-header { min-height:68px; }
  #anna-beriem .an-hero { padding:52px 0 120px; }
  #anna-beriem .an-title { font-size:44px; }
  #anna-beriem .an-deck { font-size:14px; }
  #anna-beriem .an-cover-wrap { margin-top:-84px; }
  #anna-beriem .an-cover { height:285px; }
  #anna-beriem .an-intro { margin:50px auto 34px; }
  #anna-beriem .an-intro h2 { font-size:29px; }
  #anna-beriem .an-item { display:flex; flex-direction:column; gap:28px; padding:44px 0; align-items:stretch; }
  #anna-beriem .an-item:nth-child(even) .an-media,#anna-beriem .an-item:nth-child(even) .an-copy { order:initial; }
  #anna-beriem .an-item h3 { font-size:28px; }
  #anna-beriem .an-media { order:initial; }
  #anna-beriem .an-copy { order:initial; }
  #anna-beriem .an-sources ol { columns:1; }
  #anna-beriem .an-related-grid { display:block; }
  #anna-beriem .an-link + .an-link { border-left:0; border-top:1px solid rgba(15,87,87,.18); padding-left:0; }
  #anna-beriem .an-cta h2 { font-size:30px; }
  #anna-beriem .an-footer-row { display:block; }
  #anna-beriem .an-footer small { display:block; margin-top:18px; }
}
@container (max-width:390px) {
  #anna-beriem .an-title { font-size:37px; }
  #anna-beriem .an-cover { height:238px; }
}