/* ==========================================================================
   AUME SK – 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).

   Pozadí: #footer má background-color: var(--color-bg-light) až od 768 px,
   na mobilu je bílý a béžovou si nese sám blok .punc. Od tabletu výš pás
   béžovou přebírá, aby na #footer navázal; na mobilu je naopak bílý –
   béžová tam zůstává jen pod puncovní značkou (viz "Bílá na mobilu" níže).

   SLOVENSKÁ MUTACE (www.aume.sk): soubor je proti české verzi beze změny,
   žádný zákaznický text v něm není – všechny popisky vypisuje 11-...js.
   ========================================================================== */

: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 "bílá 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 */

    /* Od 768 px navazuje na béžovou z #footer, na mobilu se přepíná na
       bílou – 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í (zbyl jen "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;
}

/* --- Bílá na mobilu ------------------------------------------------------ */
/* Do 767 px je #footer bílý a béžovou nese jen blok .punc. Pás je tady
   proto taky bílý a béžová končí puncovní značkou. Rozhraní obou ploch
   musí sedět na pixel, jinak je to vidět – řeší se tři věci:

   1) Šířka. 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 pozadí bylo o padding containeru užší a béžová by po stranách
      vykukovala jako dva zuby. Zápornými okraji ho proto protáhneme přes
      padding a stejným paddingem vrátíme text na původní účaří.

   2) Mezera. Sloupec .custom-footer__banner45 má padding-bottom: 22px,
      který je už mimo béžové pozadí .punc. Kdyby zůstal, odsune bílý pás
      o 22 px níž a horní linka pásu se odlepí od béžového boxu – bude
      viset v bílé ploše a číst jako omyl. Odsazení přebírá padding-top
      pásu, proto ho tady nulujeme. Selektor s #footer má vyšší specificitu
      než pravidlo šablony.

   3) Barva. Bílou uvádíme napevno, ne přes proměnnou: #footer ani body
      nemají na mobilu žádnou vlastní proměnnou pro bílou a transparent by
      propustil béžovou z rodiče, kdyby šablona pozadí patičky někdy
      snížila pod 768 px. */
@media (max-width: 767px) {

    .aume-ft {
        background-color: #FFFFFF;

        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;
    }
}