/* ---------------------------------------------------------------
   PermaTiles - blok dlaždic s vybranými produkty
   Barvy a rozměry řídí proměnné nastavené inline v šabloně.
   Vlastní jmenný prostor (.pjtiles / .pjtile), aby modul mohl běžet
   vedle PermaHero i PermaHero Slider bez kolize stylů.
   --------------------------------------------------------------- */

/* --- Blok jako samostatná sekce ---------------------------------- */

.pjtiles-block {
    /* O kolik se na mobilu zúží tlačítko proti šířce textové části dlaždice.
       Mezera kolem něj je pak vnitřní odsazení dlaždice (24-26px podle
       rozvržení) plus tato hodnota, od 1.5.10 dohromady zhruba 94px (24 + 70).
       Platí jen na mobilu do 767px. 0 = zpět přes celou šířku.

       Od 1.5.9 se proměnná jmenuje --pjt-mbtn-inset. Původní --pjt-btn-inset
       přepisovalo na 70px vlastní CSS tématu, takže se změny v modulu
       neprojevily. Starý název modul už nečte. */
    --pjt-mbtn-inset: 70px;

    /* Totéž pro počítač a tablet (od 768px). Mezera = odsazení dlaždice
       (24-26px) + tato hodnota. Tlačítko se pod 200px nezúží, aby
       se na tabletu se dvěma sloupci nezmenšilo na nečitelný proužek. */
    --pjt-dbtn-inset: 200px;

    box-sizing: border-box;
    margin: 0;
    padding: var(--pjt-pad, 60px) 0;
    background-color: var(--pjt-bg, transparent);
}

.pjtiles-block *,
.pjtiles-block *::before,
.pjtiles-block *::after {
    box-sizing: border-box;
}

/* Roztažení přes celou šířku i uvnitř kontejneru šablony.
   --pjt-sbw = šířka svislého posuvníku, dopočítá skript v šabloně,
   bez něj se použije 0 a chování je stejné jako u čistého 100vw. */
.pjtiles-block--fullwidth {
    width: calc(100vw - var(--pjt-sbw, 0px));
    max-width: calc(100vw - var(--pjt-sbw, 0px));
    margin-left: calc(50% - 50vw + var(--pjt-sbw, 0px) / 2);
    margin-right: calc(50% - 50vw + var(--pjt-sbw, 0px) / 2);
}

/* Šířka obsahu platí v obou režimech: u roztaženého bloku drží obsah
   na střed okna, u nezataženého ho udrží úzký i tehdy, když je místo,
   kam je blok vložený, přes celou šířku. --pjt-maxw = none znamená
   bez omezení, obsah pak vyplní celou dostupnou šířku jako dřív. */
.pjtiles-block__inner {
    width: 100%;
    max-width: var(--pjt-maxw, 1200px);
    margin: 0 auto;
}

/* Boční odsazení jen u roztaženého bloku; jinak ho má už kontejner tématu
   a druhé by obsah zbytečně odsadilo od zbytku stránky. */
.pjtiles-block--fullwidth .pjtiles-block__inner {
    padding: 0 15px;
}

/* --- Nadpis bloku ------------------------------------------------ */

.pjtiles-block__head {
    margin-bottom: 50px;
    text-align: center;
}

.pjtiles-block .pjtiles-block__title {
    margin: 0 0 10px;
    color: var(--pjt-title-color, #2f5145);
    font-family: "Patrick Hand SC", cursive;
    font-size: var(--pjt-title-size, 40px);
    font-weight: 600;
    line-height: 1;
}

.pjtiles-block .pjtiles-block__lead {
    margin: 0;
    color: var(--pjt-lead-color, #5d6b64);
    font-size: 1.0625rem;
    line-height: 1.5;
}

/* --- Mřížka ----------------------------------------------------- */

.pjtiles {
    display: grid;
    grid-template-columns: repeat(var(--pjt-cols, 2), minmax(0, 1fr));
    gap: 28px;
}

.pjtile {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
}

a.pjtile:hover,
a.pjtile:focus {
    text-decoration: none;
}

.pjtile:focus-visible {
    outline: 3px solid var(--pjt-btn, #6c8478);
    outline-offset: 3px;
}

/* --- Fotka ------------------------------------------------------ */

.pjtile__photo {
    position: relative;
    display: block;
    overflow: hidden;
    background-color: #eceeed;
}

.pjtile__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.pjtile__badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    padding: 6px 14px;
    background-color: var(--pjt-panel, rgba(47, 81, 69, 0.78));
    color: var(--pjt-text, #fff);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
}

/* --- Ikonka dlaždice --------------------------------------------
   Nahrává se u každé dlaždice zvlášť, velikost a umístění řídí
   konfigurace modulu. Dlaždice bez ikonky vypadá jako dosud.
   ---------------------------------------------------------------- */

.pjtile__icon {
    display: block;
    width: auto;
    height: auto;
    max-width: var(--pjt-icon, 64px);
    max-height: var(--pjt-icon, 64px);
    margin-bottom: 14px;
}

/* Ikonka v rohu fotky leží nad překryvem varianty D i nad fotkou. */
.pjtile__icon--photo {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    margin: 0;
}

/* Ve variantě B a D začíná fotka až u okraje dlaždice, ikonka
   se drží stejného odsazení jako štítek. */
.pjtiles--overlay .pjtile__icon--photo,
.pjtiles--cover .pjtile__icon--photo {
    top: 24px;
    right: 24px;
}

/* Ve variantě D je obsah dlaždice na střed, ikonka se přizpůsobí. */
.pjtiles--cover .pjtile__body .pjtile__icon {
    margin-left: auto;
    margin-right: auto;
}

/* --- Text ------------------------------------------------------- */

.pjtile__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Obal nadpisu, ceny a popisku. Mimo variantu D se chová, jako by
   neexistoval, takže A, B a C vypadají stejně jako dřív. */
.pjtile__main {
    display: contents;
}

.pjtile__title {
    display: block;
    margin-bottom: 8px;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
}

.pjtile__price {
    display: block;
    margin-bottom: 10px;
    font-size: 1.15rem;
    font-weight: 700;
}

.pjtile__price-old {
    margin-left: 8px;
    font-size: 0.95rem;
    font-weight: 400;
    opacity: 0.7;
    text-decoration: line-through;
}

.pjtile__text {
    display: block;
    margin-bottom: 22px;
    font-size: 1rem;
    line-height: 1.5;
    opacity: 0.85;
}

/* --- Tlačítko: tvar shodný s PermaHero --------------------------- */

.pjtile__btn {
    display: inline-block;
    margin-top: auto;
    min-width: 200px;
    padding: 14px 30px;
    border: 2px solid var(--pjt-btn, #6c8478);
    border-radius: 5px;
    background-color: var(--pjt-btn, #6c8478);
    color: #fff;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

.pjtile:hover .pjtile__btn,
.pjtile__btn:hover,
.pjtile__btn:focus {
    background-color: var(--pjt-btn-hover, #384841);
    border-color: var(--pjt-btn-hover, #384841);
    color: #fff;
    text-decoration: none;
}

.pjtile__btn:focus-visible {
    outline: 3px solid var(--pjt-btn-hover, #384841);
    outline-offset: 3px;
}

/* ================================================================
   Varianta A - karta: fotka nahoře, text pod ní
   ================================================================ */

.pjtiles--card .pjtile {
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.pjtiles--card .pjtile__photo {
    aspect-ratio: 4 / 3;
}

/* Náhrada aspect-ratio pro starší prohlížeče. */
@supports not (aspect-ratio: 4 / 3) {
    .pjtiles--card .pjtile__photo {
        height: 0;
        padding-bottom: 75%;
    }

    .pjtiles--card .pjtile__img {
        position: absolute;
        top: 0;
        left: 0;
    }
}

.pjtiles--card .pjtile__body {
    flex: 1;
    padding: 26px 26px 28px;
}

.pjtiles--card .pjtile:hover .pjtile__img {
    transform: scale(1.04);
}

/* ================================================================
   Varianta B - text v panelu přes fotku
   ================================================================ */

.pjtiles--overlay .pjtile {
    position: relative;
    justify-content: flex-end;
    min-height: var(--pjt-height, 460px);
    background-color: #2f5145;
}

.pjtiles--overlay .pjtile__photo {
    position: absolute;
    inset: 0;
    background-color: transparent;
}

.pjtiles--overlay .pjtile__badge {
    top: 24px;
    left: 24px;
}

.pjtiles--overlay .pjtile__body {
    position: relative;
    z-index: 2;
    margin: 24px;
    padding: 28px 26px 30px;
    background-color: var(--pjt-panel, rgba(47, 81, 69, 0.78));
    color: var(--pjt-text, #fff);
}

.pjtiles--overlay .pjtile__text {
    opacity: 0.92;
}

/* Uvnitř barevného panelu je plné tlačítko příliš, obrysové drží
   pozornost na nadpisu. */
.pjtiles--overlay .pjtile__btn {
    background-color: transparent;
    border-color: currentColor;
    color: var(--pjt-text, #fff);
}

.pjtiles--overlay .pjtile:hover .pjtile__btn,
.pjtiles--overlay .pjtile__btn:hover,
.pjtiles--overlay .pjtile__btn:focus {
    background-color: var(--pjt-btn-hover, #384841);
    border-color: var(--pjt-btn-hover, #384841);
    color: #fff;
}

.pjtiles--overlay .pjtile:hover .pjtile__img {
    transform: scale(1.04);
}

/* ================================================================
   Varianta C - fotka vlevo, text vpravo
   ================================================================ */

.pjtiles--side .pjtile {
    flex-direction: row;
    align-items: stretch;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.pjtiles--side .pjtile__photo {
    flex: 0 0 42%;
}

.pjtiles--side .pjtile__body {
    flex: 1;
    justify-content: center;
    padding: 24px 24px 26px;
}

.pjtiles--side .pjtile__title {
    font-size: 1.2rem;
}

.pjtiles--side .pjtile__text {
    margin-bottom: 18px;
}

.pjtiles--side .pjtile__btn {
    min-width: 0;
    padding: 12px 22px;
    font-size: 0.95rem;
}

/* ================================================================
   Varianta D - fotka přes celou dlaždici
   V dlaždici zůstává nadpis, popisek a tlačítko, odkaz vede na produkt.
   Fotku překrývá barevná plocha se stejným nastavením jako panel
   u varianty B; při krytí 0 zůstane fotka nedotčená.
   ================================================================ */

.pjtiles--cover .pjtile {
    position: relative;
    justify-content: flex-end;
    min-height: var(--pjt-height-cover, 250px);
    background-color: #2f5145;

    /* Nadpis dlaždice a popisek pod ním. Popisek se počítá z nadpisu,
       takže se oba zmenšují společně a popisek si vůči nadpisu drží
       stálý poměr - nemůže tedy být širší než nadpis.

       Poměr je nižší než 0.6 v heru schválně: nadpis dlaždice běží
       v "Patrick Hand SC", ale popisek v písmu tématu ("Open Sans"),
       které je na stejnou velikost písma zhruba 1.71x širší. Poměr 0.53
       dává popisku ~90 % šířky nadpisu, tedy stejný odstup jako v heru
       (91,6 %). Mez, kdy by se šířky srovnaly, je 0.586.
       Pokud se změní písmo popisku nebo nadpisu, je potřeba poměr
       přeměřit - viz README.

       Velikost nadpisu je od 1.5.5 shodná s nadpisem v modulu
       pj_permahero na telefonu (2.1rem) a nezmenšuje se na mobilu:
       dlaždice je tam jednosloupcová, takže na to má místo. */
    --pjt-tile-title: 2.1rem;
    --pjt-tile-text-ratio: 0.53;
}

.pjtiles--cover .pjtile__photo {
    position: absolute;
    inset: 0;
    background-color: transparent;
}

/* Barevný překryv. Leží nad fotkou, ale pod textem. */
.pjtile__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    background-color: var(--pjt-panel, rgba(47, 81, 69, 0.78));
}

.pjtiles--cover .pjtile__body {
    position: relative;
    z-index: 2;
    flex: 1;
    align-items: center;
    justify-content: flex-end;
    padding: 26px 24px 28px;
    color: var(--pjt-text, #fff);
    text-align: center;
}

/* Nadpis s popiskem vyplní zbytek dlaždice a společně se v něm
   vycentrují, tlačítko tak zůstane dole uprostřed. */
.pjtiles--cover .pjtile__main {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 18px;
}

.pjtiles--cover .pjtile__title {
    margin-bottom: 0;
    font-size: var(--pjt-tile-title);
    line-height: 1.15;
}

/* Šablona přepsaná v tématu před verzí 1.5.2 obal .pjtile__main nemá,
   nadpis je přímo v těle dlaždice. Drží se proto původního centrování. */
.pjtiles--cover .pjtile__body > .pjtile__title {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.pjtiles--cover .pjtile__text {
    max-width: 32em;
    margin: 10px 0 0;
    /* Od 1.5.3 se velikost počítá z nadpisu dlaždice, ne z vlastní pevné
       hodnoty. Popisek tak drží vůči nadpisu stálý poměr a stačí měnit
       jedinou hodnotu - --pjt-tile-title. */
    font-size: calc(var(--pjt-tile-title) * var(--pjt-tile-text-ratio));
    opacity: 0.92;
}

/* Přepínatelné písmo nadpisu. Bez této třídy zdědí písmo tématu. */
.pjtiles--handwritten .pjtile__title {
    font-family: "Patrick Hand SC", cursive;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Tlačítko drží tvar i chování po najetí shodné s variantou C. */
.pjtiles--cover .pjtile__btn {
    margin-top: 0;
    min-width: 0;
    padding: 12px 22px;
    font-size: 0.95rem;
}

.pjtiles--cover .pjtile:hover .pjtile__img {
    transform: scale(1.04);
}

/* --- Responzivita ------------------------------------------------ */

@media (max-width: 1024px) {
    .pjtiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .pjtiles-block {
        padding: calc(var(--pjt-pad, 60px) * 0.6) 0;
    }

    .pjtiles-block__head {
        margin-bottom: 30px;
    }

    .pjtiles {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .pjtile__icon {
        margin-bottom: 10px;
    }

    .pjtiles--side .pjtile {
        flex-direction: column;
    }

    .pjtiles--side .pjtile__photo {
        flex: none;
        aspect-ratio: 16 / 9;
    }

    .pjtiles--overlay .pjtile {
        min-height: 340px;
    }

    .pjtiles--cover .pjtile {
        min-height: calc(var(--pjt-height-cover, 250px) * 0.85);
    }

    /* Tlačítko nesahá k okrajům dlaždice. min-width se ruší, aby se
       na úzkých telefonech nevzpíralo a nepřeteklo z textové části. */
    .pjtile__btn {
        min-width: 0;
        width: calc(100% - var(--pjt-mbtn-inset, 70px) * 2);
        margin-left: auto;
        margin-right: auto;
    }
}

/* Šířka tlačítka na počítači a tabletu, od 1.5.11. Do té doby mělo
   tlačítko šířku podle textu. */
@media (min-width: 768px) {
    .pjtile__btn {
        min-width: 0;
        width: max(calc(100% - var(--pjt-dbtn-inset, 200px) * 2), min(200px, 100%));
        margin-left: auto;
        margin-right: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pjtile__img {
        transition: none;
    }

    .pjtile:hover .pjtile__img {
        transform: none;
    }
}