/* ==========================================================================
   AUME – 11) Možnosti dopravy, možnosti platby a hodnocení v patičce
   Pás se vkládá pod blok "Jsme registrováni u Puncovního úřadu…" (.punc),
   ještě uvnitř šedého pole patičky – tedy nad .footer-bottom.

   Rozvržení vychází z patičky denatura.cz:
   vlevo "Možnosti dopravy", uprostřed "Možnosti platby", vpravo badge
   s hodnocením (recykluje třídy .aume-rev ze snippetu 01).

   Pozor na šedé pole: #footer má background-color: var(--color-bg-light)
   až od 768 px, na mobilu je bílý a šedou si nese sám blok .punc.
   Proto má i tento pás vlastní background-color – aby na mobilu šedá
   plynule pokračovala a nevznikl bílý pruh.
   ========================================================================== */

:root {
    --aume-ft-border: #E8E1D6;   /* jemná linka v champagne tónu webu */
    --aume-ft-title: #222222;    /* barva nadpisů webu */
    --aume-ft-label: #555555;    /* stejný odstín jako text v .punc */

    /* Vodorovné odsazení .containeru v patičce – viz "šedá na mobilu" níže. */
    --aume-ft-bleed: 20px;
}

.aume-ft {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 26px 40px;

    padding-top: 24px;
    padding-bottom: 30px;       /* .footer-bottom má na mobilu jen 18px */

    /* Navazuje na šedou z .punc – viz komentář v hlavičce souboru. */
    background-color: var(--color-bg-light);
    border-top: 1px solid var(--aume-ft-border);
}

/* --- Nadpisy skupin ------------------------------------------------------ */
/* Používáme h3, aby sekce sedla do hierarchie ostatních sloupců patičky.
   Šablona ale dává #footer h3 velikost 24–34 px a margin-bottom 24–40 px,
   což je tu příliš. Selektor #footer .aume-ft__title má vyšší specificitu
   (id + class) než #footer h3 (id + type), takže !important není potřeba.

   Řez písma držíme stejný jako u nadpisů sloupců patičky (Salina, italika),
   jen menší – pás tak působí jako součást patičky, ne jako cizí blok.
   Uvádíme ho explicitně, aby výsledek nezávisel na dědění ze šablony.
   Pokud byste chtěli nadpisy spíš jako na denatura.cz (bezpatkové,
   půltučné), přepište tři řádky níže na:
       font-family: var(--template-font);
       font-weight: 600;
       font-style: normal; */
#footer .aume-ft__title {
    margin: 0 0 14px;
    font-family: "Salina", serif;
    font-weight: 200;
    font-style: italic;
    font-size: 20px;
    line-height: 1.2;
    color: var(--aume-ft-title);
}

/* --- Skupina (doprava / platba) ----------------------------------------- */
.aume-ft__col {
    /* Obě skupiny logotypů se na mobilu roztáhnou na celou šířku, badge
       se drží u své přirozené velikosti (viz --rev níže). */
    flex: 1 1 100%;
    min-width: 0;
}

.aume-ft__items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
}

/* --- Logotypy ----------------------------------------------------------- */
.aume-ft__logo {
    display: block;
    width: auto;
    max-width: 100%;
    /* Výšky odpovídají denatura.cz: doprava drobnější, platba o kousek větší.
       Konkrétní hodnoty přepisují modifikátory níže. */
    max-height: 22px;
}

.aume-ft__col--shipping .aume-ft__logo {
    max-height: 22px;
}

.aume-ft__col--payment .aume-ft__logo {
    max-height: 26px;
}

/* --- Textová varianta položky -------------------------------------------- */
/* Použije se u položek, které logotyp nemají ("Osobní odběr", "Bankovní
   převod"), a zároveň jako výchozí stav, dokud se logo nenačte.

   Záměrně bez rámečku a podbarvení: štítek s obrysem a border-radius
   vypadá jako tag nebo filtr, na který se dá kliknout, a vedle plochých
   logotypů čte jako cizí prvek. Samotný text vedle loga sedí přirozeně.

   Proto taky nekopírujeme řešení denatura.cz, která má na "Převodem"
   a "Dobírkou" vlastní PNG s vysázeným textem: text zapečený do obrázku
   se rozmazává na retina displejích, nedá se vybrat ani přečíst hlasovou
   čtečkou a při změně fontu webu se musí překreslit.

   Svislé zarovnání s logotypy řeší align-items: center na .aume-ft__items,
   takže text sedí na stejném optickém účaří sám. */
.aume-ft__label {
    font-size: 14px;
    line-height: 1.2;
    color: var(--aume-ft-label);
    white-space: nowrap;
}

/* --- Badge s hodnocením -------------------------------------------------- */
.aume-ft__col--rev {
    /* Badge nemá nadpis, takže by ho align-items: flex-end zvedl na účaří
       nadpisů vedle. Necháme mu jen jeho obsah. */
    flex: 0 0 auto;
}

/* Snippet 01 badge v hlavičce na mobilu stlačuje (max-width: 104px,
   menší písmo, zlomený podtitulek). V patičce je místa dost, proto
   modifikátor tyto úpravy ruší a badge naopak o kousek zvětšuje.
   !important je nutné jen tam, kde ho použila i pravidla snippetu 01. */
.aume-rev--footer {
    max-width: none !important;
    padding: 0 !important;
    gap: 3px !important;
}

/* Badge v patičce je odkaz na celý pás, ne tlačítko v liště – podbarvení
   při hoveru by tu působilo jako omylem. Zvýrazníme jen podtržením. */
.aume-rev--footer:hover,
.aume-rev--footer:focus-visible {
    background-color: transparent;
}

.aume-rev--footer:hover .aume-rev__sub {
    text-decoration: underline;
}

.aume-rev--footer .aume-rev__row {
    gap: 8px !important;
}

.aume-rev--footer .aume-rev__pct {
    font-size: 20px !important;
}

.aume-rev--footer .aume-rev__star {
    width: 16px !important;
    height: 16px !important;
}

.aume-rev--footer .aume-rev__sub {
    font-size: 12px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
}

/* --- Šedá na mobilu ------------------------------------------------------ */
/* Do 767 px je #footer bílý a šedou nese jen blok .punc. Aby na sebe obě
   šedé plochy navázaly, musí pás vyřešit dvě věci:

   1) Šířku. Box .punc sahá přes celou šířku .containeru (0–375 px u 390px
      displeje), protože leží v .row se zápornými okraji; jeho text drží
      odsazení až vnitřní .col-*. Náš pás je přímé dítě .containeru, takže
      by jeho šedá byla o padding containeru užší a na okrajích by vznikly
      dva bílé zuby. Zápornými okraji ji proto protáhneme přes padding
      a stejným paddingem vrátíme text na původní účaří.

   2) Mezeru. Sloupec .custom-footer__banner45 má padding-bottom: 22px,
      který je už mimo šedé pozadí .punc – prosvítal by jako bílý pruh.
      Odsazení přebírá padding-top pásu, proto ho tady nulujeme.
      Selektor s #footer má vyšší specificitu než pravidlo šablony. */
@media (max-width: 767px) {

    .aume-ft {
        margin-left: calc(-1 * var(--aume-ft-bleed));
        margin-right: calc(-1 * var(--aume-ft-bleed));
        padding-left: var(--aume-ft-bleed);
        padding-right: var(--aume-ft-bleed);
    }

    #footer .custom-footer__banner45 {
        padding-bottom: 0;
    }
}

/* --- Tablet a výš -------------------------------------------------------- */
@media (min-width: 768px) {

    .aume-ft {
        /* Od 768 px je šedé pole už na #footer, pás nemusí řešit navázání
           a stačí mu odsazení. .footer-bottom si přidá 30–40 px sám. */
        padding-top: 28px;
        padding-bottom: 10px;
    }

    .aume-ft__col {
        /* Doprava a platba se srovnají do jednoho řádku, badge doprava. */
        flex: 0 1 auto;
    }

    #footer .aume-ft__title {
        margin-bottom: 18px;
        font-size: 24px;
    }
}

/* --- Desktop ------------------------------------------------------------- */
@media (min-width: 1200px) {

    .aume-ft {
        padding-top: 34px;
    }

    .aume-ft__items {
        gap: 12px 26px;
    }

    .aume-ft__col--shipping .aume-ft__logo {
        max-height: 26px;
    }

    .aume-ft__col--payment .aume-ft__logo {
        max-height: 30px;
    }

    /* O kousek větší, aby text vedle 26–30px logotypů opticky neztrácel. */
    .aume-ft__label {
        font-size: 15px;
    }
}

/* --- Úzké displeje ------------------------------------------------------- */
@media (max-width: 480px) {

    .aume-ft__items {
        /* Text bez rámečku splývá s logem vedle sebe víc než štítek,
           proto tu vodorovnou mezeru nestahujeme tak nízko. */
        gap: 10px 16px;
    }

    .aume-ft__label {
        font-size: 13px;
    }

    .aume-rev--footer .aume-rev__pct {
        font-size: 18px !important;
    }
}