/* =====================================================================
   Metrpiva.cz – pages.css: společné prvky obsahových stránek (17. 10. 2026)
   Soubor na webu: user/documents/assets/css/pages.css (UTF-8, bez značek <style>).
   Načítá se v hlavičce po custom.css a před soubory stránek (shipping.css, contact.css…).

   HTML každé obsahové stránky začíná obalem:
     <div id="mp-page" class="mp-page mp-page--shipping"> … </div>
   Id #mp-page je nutné: šablona Apollo má na stránkách článků silná pravidla
   (.type-page .content-inner article …) a custom.css má html body #content p.
   Druhá třída (mp-page--shipping, mp-page--contact…) slouží souboru dané stránky.

   Rozvržení se řídí šířkou obsahu (container queries), ne šířkou okna: na desktopu
   je vedle článku panel kategorií a obsah má jen asi 770 px. Prohlížeč bez podpory
   container queries ukáže vše v jednom sloupci.

   Barvy a písma podle design systému „Schválený barevný vizuál metrpiva.cz“:
   hneda-900 #2A1E14 (text, ceny) · hneda-800 #3A2618 · jantar-700 #8F5E00 (odkazy)
   hnedoseda-500 #6B5A4A / -600 #5A4A3C · bezova-100 #EFE8DC / -200 #E6DCCB / -300 #D8CDBB
   pena-50 #F7F3EC · zlata-400 #F2B31B · krem-paticka #EADFCF · bila #FFFFFF
   radius-lg 20px · radius-md 8px · radius-pill 25px · stin-karta 0 6px 12px rgba(0,0,0,.08)
   Zelená chmel-500 se tu nepoužívá – v design systému patří jen nákupu.

   Komponenty (třídy mp-page__*):
   perex · pruh · rozcestnik · h2 · mrizka (--2, --3, --2-4, --siroka-uzka, --stejne) · sloupec · karta (+ karta-pata)
   cena · tabulka · ramecek (--tmavy) · stitek · udaje (+ udaj-hlavni) · hodiny · tipy (--3) · pozn · r · radek-zvyrazneny
   Ikony: třída mp-ico + mp-ico--název na kartě, pruhu nebo nadpisu h3 tabulky.
   Ikona patří sem, jakmile ji používají aspoň dvě stránky; jinak do souboru stránky.
   ===================================================================== */

/* ---------- Základ ---------- */
#mp-page{container-type:inline-size;max-width:1100px;color:#2A1E14;font-family:"Source Sans 3",system-ui,sans-serif;font-size:16px;line-height:24px;font-variant-numeric:tabular-nums;}
#mp-page *,#mp-page *::before,#mp-page *::after{box-sizing:border-box;}
#mp-page p{margin:0 0 12px;font-size:inherit;line-height:inherit;}
#mp-page p:last-child{margin-bottom:0;}
#mp-page a{color:#8F5E00;text-decoration:none;}
#mp-page a:hover{color:#3A2618;text-decoration:underline;}
#mp-page strong{font-weight:700;}

/* ---------- Nadpisy ---------- */
#mp-page .mp-page__h2{font-family:"Roboto Slab",Georgia,serif;font-size:26px;line-height:36px;font-weight:700;color:#2A1E14;margin:56px 0 18px;padding:0;scroll-margin-top:110px;}
#mp-page h3{font-family:"Roboto Slab",Georgia,serif;font-size:18px;line-height:24px;font-weight:700;color:#2A1E14;margin:0 0 8px;padding:0;}

/* ---------- Perex ---------- */
#mp-page .mp-page__perex{font-size:18px;line-height:29px;margin:0 0 22px;max-width:788px;}

/* ---------- Pruh se zvýrazněnou informací ---------- */
#mp-page .mp-page__pruh{display:flex;align-items:center;gap:14px;margin:0 0 22px;padding:14px 20px;background:#FFFFFF;border:1px solid #E6DCCB;border-left:4px solid #F2B31B;border-radius:8px;max-width:788px;}
#mp-page .mp-page__pruh p{margin:0;font-size:15px;line-height:22px;}
#mp-page .mp-page__pruh strong{font-size:17px;color:#2A1E14;}

/* ---------- Rozcestník (vedlejší tlačítka v malé velikosti) ---------- */
#mp-page .mp-page__rozcestnik{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px;}
#mp-page .mp-page__rozcestnik a{display:inline-flex;align-items:center;height:40px;padding:0 16px;border:1px solid #8F5E00;border-radius:25px;color:#8F5E00;font-size:14px;line-height:17px;white-space:nowrap;transition:background-color .15s,color .15s;}
#mp-page .mp-page__rozcestnik a:hover{background:#8F5E00;color:#FFFFFF;text-decoration:none;}

/* ---------- Poznámka, zarovnání ---------- */
#mp-page .mp-page__pozn{display:block;font-size:13px;line-height:18px;color:#6B5A4A;font-weight:400;margin-top:2px;}
#mp-page .mp-page__pozn strong{color:#2A1E14;}

/* ---------- Mřížky (výchozí jeden sloupec) ---------- */
#mp-page .mp-page__mrizka{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start;}
#mp-page .mp-page__mrizka--stejne{align-items:stretch;}
#mp-page .mp-page__sloupec{min-width:0;}
#mp-page .mp-page__sloupec>*+*{margin-top:20px;}
#mp-page .mp-page__sloupec>.mp-page__h2+*{margin-top:0;}

/* ---------- Karta ---------- */
#mp-page .mp-page__karta{display:flex;flex-direction:column;background:#FFFFFF;border-radius:20px;box-shadow:0 6px 12px rgba(0,0,0,.08);padding:26px 22px 22px;}
#mp-page .mp-page__karta p{font-size:15px;line-height:22px;}
#mp-page .mp-page__karta-pata{margin-top:auto;padding-top:12px;border-top:1px solid #E6DCCB;}
#mp-page .mp-page__karta p.mp-page__karta-pata{font-size:14px;line-height:19px;color:#6B5A4A;}
#mp-page .mp-page__karta p.mp-page__cena{font-size:28px;line-height:36px;font-weight:700;color:#2A1E14;margin:2px 0 10px;}
#mp-page .mp-page__cena small{font-size:16px;font-weight:400;color:#6B5A4A;}

/* ---------- Tabulka (ceník) ---------- */
#mp-page .mp-page__tabulka{background:#FFFFFF;border:1px solid #E6DCCB;border-radius:20px;overflow:hidden;}
#mp-page .mp-page__tabulka h3{display:flex;align-items:center;margin:0;padding:16px 20px;border-bottom:1px solid #E6DCCB;}
#mp-page table{width:100%;margin:0;border:0;border-collapse:separate;border-spacing:0;background:transparent;font-size:15px;line-height:21px;}
#mp-page table th,#mp-page table td{padding:13px 20px;text-align:left;vertical-align:top;border:0;border-bottom:1px solid #E6DCCB;background:transparent;color:#2A1E14;font-weight:400;}
#mp-page table tbody tr:last-child th,#mp-page table tbody tr:last-child td{border-bottom:0;}
#mp-page table thead th{background:#EFE8DC;font-size:13px;line-height:18px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#5A4A3C;padding-top:10px;padding-bottom:10px;}
#mp-page table .mp-page__r{text-align:right;white-space:nowrap;}
#mp-page table td.mp-page__r{font-weight:700;font-size:16px;}
#mp-page .mp-page__radek-zvyrazneny td{background:#F7F3EC;}

/* ---------- Rámeček ---------- */
#mp-page .mp-page__ramecek{background:#EFE8DC;border-radius:20px;padding:24px 26px;}
#mp-page .mp-page__ramecek p{font-size:15px;line-height:23px;}
#mp-page .mp-page__ramecek--tmavy{background:#3A2618;color:#EADFCF;}
#mp-page .mp-page__ramecek--tmavy h3{color:#FFFFFF;}
#mp-page .mp-page__ramecek--tmavy p:not(.mp-page__stitek){color:#EADFCF;}
#mp-page .mp-page__ramecek--tmavy strong{color:#F2B31B;}
#mp-page .mp-page__ramecek--tmavy a{color:#F2B31B;}
#mp-page .mp-page__stitek{display:inline-flex;align-items:center;height:24px;padding:0 10px;margin:0 0 10px;border-radius:25px;background:#F2B31B;color:#2A1E14;font-size:12px;line-height:1;font-weight:700;text-transform:uppercase;letter-spacing:.04em;}
#mp-page p.mp-page__stitek{font-size:12px;line-height:1;}

/* ---------- Údaje (číslo účtu, IČ, e-mail…) ---------- */
#mp-page .mp-page__udaje{margin:0;padding:0;display:grid;grid-template-columns:auto;gap:0;}
#mp-page .mp-page__udaje dt{margin:8px 0 0;font-size:13px;line-height:18px;color:#6B5A4A;font-weight:400;}
#mp-page .mp-page__udaje dt:first-child{margin-top:0;}
#mp-page .mp-page__udaje dd{margin:0;font-size:16px;line-height:22px;font-weight:700;color:#2A1E14;}
#mp-page .mp-page__udaje dd.mp-page__udaj-hlavni{font-size:20px;line-height:28px;user-select:all;}

/* ---------- Otevírací doba ---------- */
#mp-page .mp-page__hodiny{margin-top:20px;padding-top:18px;border-top:1px solid #E6DCCB;}
#mp-page .mp-page__hodiny h4{margin:0 0 4px;padding:0;font-size:13px;line-height:18px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#5A4A3C;font-family:"Source Sans 3",system-ui,sans-serif;}
#mp-page .mp-page__hodiny table{font-size:16px;line-height:24px;}
#mp-page .mp-page__hodiny th,#mp-page .mp-page__hodiny td{padding:10px 0;border-bottom-color:#E6DCCB;font-weight:700;}
#mp-page .mp-page__hodiny th{width:38%;}
#mp-page .mp-page__hodiny td{text-align:right;}

/* ---------- Dobré vědět ---------- */
#mp-page .mp-page__tipy{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:stretch;}
#mp-page .mp-page__tipy>div{background:#FFFFFF;border-radius:20px;box-shadow:0 6px 12px rgba(0,0,0,.08);padding:22px 22px 20px;}
#mp-page .mp-page__tipy h3{font-size:17px;line-height:22px;}
#mp-page .mp-page__tipy p{font-size:15px;line-height:22px;color:#5A4A3C;}

/* ---------- Ikony (hnědá linka + zlatá, v béžovém kruhu) ---------- */
#mp-page .mp-ico::before{content:"";flex:none;display:block;border-radius:50%;background-color:#EFE8DC;background-repeat:no-repeat;background-position:center;}
#mp-page .mp-page__karta.mp-ico::before{width:56px;height:56px;background-size:34px 34px;margin:0 0 16px;}
#mp-page .mp-page__pruh.mp-ico::before{width:40px;height:40px;background-size:26px 26px;}
#mp-page h3.mp-ico::before{width:36px;height:36px;background-size:24px 24px;margin:0 10px 0 0;}
#mp-page .mp-ico--obchod::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%233A2618' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M10 22v18h28V22'/%3E%3Cpath d='M7 10h34l3 9c0 2.5-2.2 4-4.5 4S35 21.5 35 19c0 2.5-2.2 4-4.5 4S26 21.5 26 19c0 2.5-2.2 4-4.5 4S17 21.5 17 19c0 2.5-2.2 4-4.5 4S8 21.5 8 19z' fill='%23F2B31B'/%3E%3Cpath d='M20 40V30h8v10'/%3E%3C/svg%3E");}
#mp-page .mp-ico--pin::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%233A2618' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M24 43s-13-12.5-13-23a13 13 0 0 1 26 0c0 10.5-13 23-13 23z' fill='%23F2B31B'/%3E%3Ccircle cx='24' cy='20' r='5' fill='%23FFFFFF'/%3E%3C/svg%3E");}
#mp-page .mp-ico--cas::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%233A2618' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Ccircle cx='24' cy='24' r='17' fill='%23F2B31B'/%3E%3Cpath d='M24 14v10l7 5'/%3E%3C/svg%3E");}
#mp-page .mp-ico--karta::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%233A2618' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='5' y='11' width='38' height='26' rx='4'/%3E%3Cpath d='M5 17h38v6H5z' fill='%23F2B31B'/%3E%3Cpath d='M11 31h9'/%3E%3C/svg%3E");}
#mp-page .mp-ico--banka::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%233A2618' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M6 18 24 7l18 11z' fill='%23F2B31B'/%3E%3Cpath d='M10 22v13M19 22v13M29 22v13M38 22v13M6 40h36'/%3E%3C/svg%3E");}
#mp-page .mp-ico--hotove::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%233A2618' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='5' y='13' width='38' height='22' rx='3'/%3E%3Ccircle cx='24' cy='24' r='6' fill='%23F2B31B'/%3E%3Cpath d='M10 18v0M38 30v0'/%3E%3C/svg%3E");}

/* ---------- Rozvržení podle šířky obsahu ---------- */
@container (min-width:520px){
  #mp-page .mp-page__mrizka--2-4{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@container (min-width:620px){
  #mp-page .mp-page__mrizka--2{grid-template-columns:repeat(2,minmax(0,1fr));}
  #mp-page .mp-page__mrizka--siroka-uzka{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);}
}
@container (min-width:520px){
  #mp-page .mp-page__tipy{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@container (min-width:680px){
  #mp-page .mp-page__tipy--3{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@container (min-width:720px){
  #mp-page .mp-page__mrizka--3{grid-template-columns:repeat(3,minmax(0,1fr));}
  #mp-page .mp-page__mrizka--3>.mp-page__karta>h3{min-height:48px;}
}
@container (min-width:1000px){
  #mp-page .mp-page__mrizka--2-4{grid-template-columns:repeat(4,minmax(0,1fr));}
}
/* Úzké zobrazení: ikona karty vedle nadpisu (u 3 sloupců do 719 px, jinak do 519 px) */
@container (max-width:719px){
  #mp-page .mp-page__mrizka--3>.mp-page__karta.mp-ico{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:14px;align-items:center;}
  #mp-page .mp-page__mrizka--3>.mp-page__karta.mp-ico>*{grid-column:1 / -1;}
  #mp-page .mp-page__mrizka--3>.mp-page__karta.mp-ico::before{grid-column:1;grid-row:1;width:48px;height:48px;background-size:30px 30px;margin:0;}
  #mp-page .mp-page__mrizka--3>.mp-page__karta.mp-ico>h3{grid-column:2;grid-row:1;margin:0;}
  #mp-page .mp-page__mrizka--3>.mp-page__karta.mp-ico>h3+*{margin-top:12px;}
}
@container (max-width:519px){
  #mp-page .mp-page__karta.mp-ico{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:14px;align-items:center;}
  #mp-page .mp-page__karta.mp-ico>*{grid-column:1 / -1;}
  #mp-page .mp-page__karta.mp-ico::before{grid-column:1;grid-row:1;width:48px;height:48px;background-size:30px 30px;margin:0;}
  #mp-page .mp-page__karta.mp-ico>h3{grid-column:2;grid-row:1;margin:0;}
  #mp-page .mp-page__karta.mp-ico>h3+*{margin-top:12px;}
}

/* ---------- Mobil (šířka okna) ---------- */
@media (max-width:767px){
  #mp-page .mp-page__h2{font-size:22px;line-height:30px;margin:40px 0 14px;scroll-margin-top:130px;}
  #mp-page .mp-page__perex{font-size:16px;line-height:26px;}
  #mp-page .mp-page__rozcestnik a{height:36px;padding:0 13px;font-size:13px;}
  #mp-page .mp-page__mrizka,#mp-page .mp-page__tipy{gap:14px;}
  #mp-page .mp-page__karta,#mp-page .mp-page__tipy>div{padding:22px 20px;}
  #mp-page .mp-page__ramecek{padding:20px;}
  #mp-page table th,#mp-page table td{padding:12px 16px;}
  #mp-page .mp-page__tabulka h3{padding:14px 16px;font-size:17px;}
  #mp-page .mp-page__karta.mp-ico::before{width:48px;height:48px;background-size:30px 30px;}
}