/*============================================================================
   12-utilities.css — eyebrow, breadcrumbs, badge, pill + annotation banner (preview only)
============================================================================*/

/*============================================================================
   07 — UTILITY KLÁSY (.eyebrow, .pill, .badge, .breadcrumbs…)
============================================================================*/

/* Row-full — Divi Row bez omezení šířky. Použij na Row, jejíž Code modul
   obsahuje vlastní <div class="container"> (header, homepage sekce). */
.et_pb_row.row-full {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
.row-full .et_pb_module,
.row-full .et_pb_code {
    margin: 0 !important;
}

/* Container — pro náš vlastní markup (shortcode header, homepage sekce).
   Stejná metrika jako Divi .et_pb_row (width 80 %, max-width 1320, bez
   horizontálního paddingu) → obsah v Code modulech lícuje s Divi obsahem
   (footer, ostatní stránky) na všech šířkách viewportu. */
.container {
    width: 80%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0;
}
@media (max-width: 780px) {
    .container { width: 90%; } /* mobil — víc využité šířky (Divi rows stejně, viz 99-responsive) */
}
/* Divi quirk: Divi má VLASTNÍ třídu .container a na body:not(.et-tb) jí dává
   padding-top: 58px (divi-style …line-css) — trefuje to i naše containery
   v Code modulech uvnitř #main-content. Vynulovat. */
#main-content .container {
    padding-top: 0 !important;
}
/* …a ::before na témže containeru kreslí 1px svislou linku sidebaru.
   Nikdy ji nechceme — globálně pryč. */
#main-content .container::before {
    display: none !important;
}

/* Eyebrow — malý uppercase nadpisek nad h1/h2 (berry barva) */
.eyebrow {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--berry);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    font-family: 'Inter', sans-serif;
}
.eyebrow--yellow { color: var(--yellow); }
.eyebrow--teal { color: var(--teal-deep); }
.eyebrow--center {
    justify-content: center;
    display: inline-flex;
}

/* Breadcrumbs — typicky v cream hero nebo cream stripu nad obsahem */
.breadcrumbs {
    font-size: .85rem;
    color: var(--ink-soft);
    font-weight: 500;
    margin-bottom: 22px;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.breadcrumbs a { color: var(--ink-soft); }
.breadcrumbs a:hover { color: var(--berry); }
.breadcrumbs .sep { color: var(--muted); }
.breadcrumbs .current { color: var(--ink); font-weight: 600; }

/* Bílá varianta breadcrumbs — pro full color hero (Premium) */
.breadcrumbs--white { color: rgba(255,255,255,.85); }
.breadcrumbs--white a { color: rgba(255,255,255,.85); }
.breadcrumbs--white a:hover { color: #fff; }
.breadcrumbs--white .sep { color: rgba(255,255,255,.5); }
.breadcrumbs--white .current { color: #fff; }

/* Badge — malá uppercase plaketka (Nové, Premium, atd.) */
.badge {
    display: inline-block;
    padding: 5px 10px;
    border-radius: var(--radius-pill);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-family: 'Inter', sans-serif;
}
.badge--berry { background: var(--berry); color: #fff; }
.badge--yellow { background: var(--yellow); color: var(--ink); }
.badge--teal { background: var(--teal); color: #fff; }
.badge--lilac { background: var(--lilac); color: #fff; }
.badge--white { background: #fff; color: var(--ink); }
.badge--new { background: var(--berry); color: #fff; }
.badge--premium { background: var(--yellow); color: var(--ink); }
.badge--popular { background: var(--teal); color: #fff; }

/* Pill chip — utility kontejner */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--cream);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-pill);
    font-size: .82rem;
    font-weight: 500;
    color: var(--ink-soft);
    transition: all var(--t-fast);
}
.pill:hover { background: var(--berry); border-color: var(--berry); color: #fff; }

/*============================================================================
   22 — ANNOTATION BANNER (jen pro design preview, v produkci odstranit)

   Pokud se v produkci objeví na nějaké stránce, vývojář ji zapomněl smazat.
   V mockupech jí používáme pro review notes.
============================================================================*/
.annotation-banner {
    background: var(--lilac);
    color: #fff;
    padding: 12px 32px;
    text-align: center;
    font-size: .82rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.annotation-banner strong { color: var(--yellow); }
.annotation-banner em { font-style: normal; color: #fff; font-weight: 500; opacity: .9; }

/* Stránky bez Divi builderu (Košík, Pokladna, Obchod…) — globální reset
   padding-top na #main-content .container je nechtěně lepil titulek na
   header; #left-area mají jen Divi default šablony (naše PHP šablony ne),
   takže odstup od headeru i patičky vracíme tady */
body #main-content #left-area {
    padding-top: 48px;
    padding-bottom: 72px;
}