/* ---------------------------------------------------------------
   Blog: V čom ješ a piješ? 20 vecí, ktoré som ako nutriciológ vyhodila
   Doplnky k /assets/css/beriem-neberiem.css (základné rozloženie
   článku). Všetko je zúžené pod #anna-beriem a berie farby z webu.
   --------------------------------------------------------------- */
#anna-beriem .an-item .an-tip { margin-top:14px; font-size:13px; line-height:1.7; color:var(--an-ink); }
#anna-beriem .an-item .an-tip strong { font-family:var(--font-display); font-weight:500; color:var(--an-green); }

#anna-beriem .an-part { padding:64px 0 8px; border-top:1px solid rgba(15,87,87,.18); }
#anna-beriem .an-part-label { margin:0 0 9px; font-family:var(--font-display); font-size:11px; letter-spacing:.6px; color:var(--an-green); }
#anna-beriem .an-part h2 { margin:0 0 12px; color:var(--an-green); font-family:var(--font-display); font-weight:500; font-size:34px; line-height:1.2; }
#anna-beriem .an-part > p { max-width:640px; margin:0; color:var(--an-ink); font-size:15px; line-height:1.8; }

#anna-beriem .an-watch { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; padding:34px 0 64px; }
#anna-beriem .an-card { padding:26px 26px 22px; background:var(--an-white); border:1px solid rgba(15,87,87,.12); border-radius:8px; }
#anna-beriem .an-card .an-number { width:32px; height:32px; margin-bottom:14px; font-size:13px; }
#anna-beriem .an-card h3 { margin:0 0 10px; color:var(--an-green); font-family:var(--font-display); font-size:22px; line-height:1.25; font-weight:500; }
#anna-beriem .an-card p { margin:0 0 14px; color:var(--an-ink); font-size:14px; line-height:1.75; }
#anna-beriem .an-card .an-better { margin:0; padding:12px 14px; border-radius:6px; background:rgba(193,255,114,.55); font-size:13px; line-height:1.65; }
#anna-beriem .an-card .an-better strong { font-family:var(--font-display); font-weight:500; color:var(--an-green); }

#anna-beriem .an-box { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; margin:0 0 64px; border-radius:8px; overflow:hidden; background:var(--an-green); color:var(--an-cream); }
#anna-beriem .an-box > div { padding:32px 30px; }
#anna-beriem .an-box > div + div { border-left:1px solid rgba(244,241,232,.2); }
#anna-beriem .an-box .an-part-label { color:var(--an-lime); }
#anna-beriem .an-box h3 { margin:0 0 16px; font-family:var(--font-display); font-size:24px; font-weight:500; line-height:1.25; color:var(--an-cream); }
#anna-beriem .an-box ul { margin:0; padding:0; list-style:none; }
#anna-beriem .an-box li { margin:0 0 12px; padding-left:18px; position:relative; font-size:14px; line-height:1.7; }
#anna-beriem .an-box li::before { content:''; position:absolute; left:0; top:.62em; width:8px; height:8px; border-radius:50%; background:var(--an-lilac); }
#anna-beriem .an-box li.an-bad::before { background:#ff9b8a; }
#anna-beriem .an-box strong { font-family:var(--font-display); font-weight:500; }

#anna-beriem .an-swap { padding:0 0 64px; }
#anna-beriem .an-swap h2 { margin:0 0 20px; color:var(--an-green); font-family:var(--font-display); font-weight:500; font-size:34px; line-height:1.2; }
#anna-beriem .an-swap table { width:100%; border-collapse:collapse; font-size:15px; }
#anna-beriem .an-swap th { text-align:left; padding:0 12px 12px 0; font-family:var(--font-display); font-weight:500; font-size:11px; letter-spacing:.6px; color:var(--an-green); border-bottom:2px solid var(--an-green); }
#anna-beriem .an-swap td { padding:14px 12px 14px 0; border-bottom:1px solid rgba(15,87,87,.16); color:var(--an-ink); line-height:1.5; vertical-align:top; }
#anna-beriem .an-swap td:first-child { color:rgba(15,87,87,.72); }
#anna-beriem .an-swap td:last-child { font-weight:600; color:var(--an-green); }

#anna-beriem .an-calm { margin:0 0 64px; padding:36px 34px; border-radius:8px; background:rgba(175,159,242,.18); }
#anna-beriem .an-calm h2 { margin:0 0 14px; color:var(--an-green); font-family:var(--font-display); font-weight:500; font-size:30px; line-height:1.2; }
#anna-beriem .an-calm p { max-width:720px; margin:0 0 12px; color:var(--an-ink); font-size:15px; line-height:1.8; }
#anna-beriem .an-calm p:last-child { margin:0; }

@container (max-width:760px) {
#anna-beriem .an-part h2, #anna-beriem .an-swap h2 { font-size:28px; }
#anna-beriem .an-watch { grid-template-columns:1fr; gap:14px; }
#anna-beriem .an-box { grid-template-columns:1fr; }
#anna-beriem .an-box > div + div { border-left:0; border-top:1px solid rgba(244,241,232,.2); }
#anna-beriem .an-swap table { font-size:14px; }
#anna-beriem .an-calm { padding:28px 22px; }
#anna-beriem .an-calm h2 { font-size:25px; }
}

/* Oblasti a karty */
#anna-beriem .an-toc { display:flex; flex-wrap:wrap; gap:8px; margin:28px 0 0; }
#anna-beriem .an-toc a { padding:8px 13px; border:1px solid rgba(15,87,87,.28); border-radius:30px; color:var(--an-green); font-family:var(--font-display); font-size:13px; text-decoration:none; }
#anna-beriem .an-toc a:hover { background:var(--an-lime); border-color:var(--an-lime); }
#anna-beriem .an-cat { padding-top:56px; border-top:1px solid rgba(15,87,87,.18); scroll-margin-top:90px; }
#anna-beriem .an-cat-head { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:44px; align-items:end; }
#anna-beriem .an-cat-head--plain { grid-template-columns:1fr; }
#anna-beriem .an-cat-head h2 { margin:0 0 6px; color:var(--an-green); font-family:var(--font-display); font-weight:500; font-size:40px; line-height:1.1; }
#anna-beriem .an-cat-media { margin:0; }
#anna-beriem .an-cat-media img { width:100%; aspect-ratio:16 / 8; display:block; object-fit:cover; border-radius:6px; }
#anna-beriem .an-card-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
#anna-beriem .an-card-top .an-number { margin:0; }
#anna-beriem .an-card .an-verdict { margin:0; padding:5px 9px; font-size:10px; }
#anna-beriem .an-card .an-cardtip { margin:12px 0 0; font-size:13px; line-height:1.65; }
#anna-beriem .an-card .an-cardtip strong { font-family:var(--font-display); font-weight:500; color:var(--an-green); }
#anna-beriem .an-box--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
#anna-beriem .an-swap { scroll-margin-top:90px; }
@container (max-width:760px) {
#anna-beriem .an-cat { padding-top:44px; }
#anna-beriem .an-cat-head { grid-template-columns:1fr; gap:20px; }
#anna-beriem .an-cat-head h2 { font-size:32px; }
#anna-beriem .an-box--3 { grid-template-columns:1fr; }
#anna-beriem .an-box--3 > div + div { border-left:0; border-top:1px solid rgba(244,241,232,.2); }
}