/* ---------------------------------------------------------------------------
   Sekce „Právní pomoc dětem“
   ---------------------------------------------------------------------------

   Samostatný soubor. Ve stávajících stylech (styles.css / styles.min.css /
   styles.scss) se nic nemění — ty se generují ze SCSS a projekt build nemá.

   Načítá se jen na třech stránkách sekce přes {block head} v šablonách
   app/modules/Front/Presenters/templates/PravniPomoc/.

   Paleta i typografie jsou převzaté z webu:
     primární barva  #812E87   ($PrimaryColor ve styles.scss)
     text            #6f6f6f   (body v plugins/default.css)
     nadpisy         #232323
     nadpisové písmo Montserrat (třída .alt-font), text Roboto
   Žádná nová barva ani rodina písma.

   Breakpointy odpovídají proměnným ze styles.scss:
     991px  $desk-xs-screen
     767px  $tablet-xs-screen
--------------------------------------------------------------------------- */


/* --- rozcestník: dlaždice na podstránky ---------------------------------- */

/* sloupce musí být flex, jinak se height:100% na dlaždici nemá o co opřít
   a dlaždice s kratším textem je nižší */
.pp-dlazdice > [class*="col-"] {
    display: flex;
}

.pp-dlazdice-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 40px 30px;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    background: #fff;
    color: #6f6f6f;
    transition: border-color .2s ease-in-out, box-shadow .2s ease-in-out;
}

.pp-dlazdice-item:hover,
.pp-dlazdice-item:focus {
    border-color: #812E87;
    box-shadow: 0 6px 20px rgba(129, 46, 135, .12);
    color: #6f6f6f;
}

.pp-dlazdice-item > i {
    display: block;
    margin-bottom: 20px;
    font-size: 40px;
    line-height: 1;
    color: #812E87;
}

.pp-dlazdice-item h4 {
    margin-bottom: 15px;
    color: #232323;
}

.pp-dlazdice-item p {
    margin-bottom: 25px;
}

/* tlačítko drží u spodní hrany, ať jsou obě dlaždice zarovnané */
.pp-dlazdice-item .butn {
    margin-top: auto;
}


/* --- filtr krajů --------------------------------------------------------- */

.pp-filtr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 30px;
}

.pp-filtr label {
    margin: 0 15px 15px 0;
    font-weight: 500;
    color: #232323;
}

.pp-filtr select {
    width: auto;
    min-width: 220px;
    margin: 0 15px 15px 0;
}

.pp-filtr .butn {
    margin: 0 15px 15px 0;
}

.pp-filtr-zrusit {
    margin-bottom: 15px;
    text-decoration: underline;
}


/* --- tabulka advokátů ---------------------------------------------------- */

.pp-tabulka th {
    border-top: none;
    border-bottom: 2px solid #812E87;
    color: #232323;
    font-weight: 600;
    white-space: nowrap;
}

.pp-tabulka td {
    vertical-align: top;
}

.pp-znacka-clen {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 10px;
    background: #812E87;
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    white-space: nowrap;
}

.pp-cak,
.pp-kraj {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #9a9a9a;
}


/* --- seznam dokumentů ---------------------------------------------------- */

.pp-dokumenty {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pp-dokumenty > li {
    padding: 18px 0;
    border-bottom: 1px solid #e4e4e4;
}

.pp-dokumenty > li:first-child {
    border-top: 1px solid #e4e4e4;
}

.pp-dokumenty-nazev {
    font-weight: 500;
    color: #232323;
}

.pp-dokumenty-nazev:hover,
.pp-dokumenty-nazev:focus {
    color: #812E87;
}

.pp-dokumenty-nazev > i {
    margin-right: 8px;
    color: #812E87;
}

.pp-dokumenty-meta {
    margin-left: 10px;
    font-size: 12px;
    text-transform: uppercase;
    color: #9a9a9a;
    white-space: nowrap;
}

.pp-dokumenty-popis {
    margin: 6px 0 0;
}


/* --- responzivita -------------------------------------------------------- */

@media screen and (max-width: 991px) {
    .pp-dlazdice-item {
        padding: 30px 25px;
    }
}

@media screen and (max-width: 767px) {
    .pp-filtr select,
    .pp-filtr .butn {
        width: 100%;
        margin-right: 0;
    }

    .pp-dokumenty-meta {
        display: block;
        margin-left: 0;
        margin-top: 4px;
    }
}


/* --- odolnost tabulky advokátů --------------------------------------------

   Šířky sloupců určuje <colgroup> v šabloně a table-layout: fixed. Bez toho
   si rozvržení počítá prohlížeč z obsahu a jeden dlouhý název kanceláře,
   e-mail nebo poznámka rozhodí celou tabulku.

   min-width drží tabulku čitelnou na mobilu — místo aby se sloupce zmáčkly
   na pár znaků, obalující .table-responsive nabídne vodorovné posouvání.
-------------------------------------------------------------------------- */

.pp-tabulka {
    table-layout: fixed;
    min-width: 760px;
}

/* dlouhé slovo bez mezer (e-mail, adresa webu) se zalomí uvnitř buňky
   místo aby přeteklo do vedlejšího sloupce */
.pp-tabulka th,
.pp-tabulka td {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.pp-tabulka .pp-kancelar {
    font-size: 13px;
    line-height: 1.5;
    color: #6f6f6f;
}


/* --- výpis advokátů: společné prvky --------------------------------------

   Jeden záznam se rozpadá do víc řádků místo do tabulkových sloupců. Data
   jsou nestejně dlouhá (jeden advokát má kancelář a web, jiný jen město
   a telefon) a v tabulce po tom zůstávaly prázdné buňky.
-------------------------------------------------------------------------- */

.pp-jmeno {
    margin: 0 0 4px;
    font-size: 17px;
    line-height: 1.4;
    color: #232323;
}

.pp-cak {
    margin: 0 0 10px;
    font-size: 12px;
    color: #9a9a9a;
}

.pp-kancelar {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.5;
    color: #6f6f6f;
}

.pp-adresa {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.6;
}

.pp-adresa > i,
.pp-kontakt > li > i {
    width: 16px;
    margin-right: 6px;
    color: #812E87;
}

.pp-kontakt {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    line-height: 1.9;
}

.pp-kontakt a {
    word-break: break-word;
}

/* kraje jako štítky */
.pp-kraje {
    margin: 10px 0 0;
}

.pp-kraje-popisek,
.pp-rozsah-popisek {
    display: block;
    margin-bottom: 5px;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #9a9a9a;
}

.pp-kraj-znacka {
    display: inline-block;
    margin: 0 4px 4px 0;
    padding: 2px 9px;
    border: 1px solid #e0cfe2;
    border-radius: 11px;
    background: #faf7fb;
    color: #812E87;
    font-size: 12px;
    line-height: 18px;
}

/* rozsah právní pomoci */
.pp-rozsah {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.7;
}


/* --- rozvržení záznamu ---------------------------------------------------- */

.pp-zaznamy {
    border-top: 1px solid #e4e4e4;
}

.pp-zaznam {
    padding: 22px 0;
    border-bottom: 1px solid #e4e4e4;
}

.pp-zaznam .pp-rozsah {
    padding-left: 12px;
    border-left: 3px solid #e0cfe2;
}


/* --- responzivita výpisu -------------------------------------------------- */

@media screen and (max-width: 767px) {
    /* ve sloupcovém rozpadu potřebují kraje odsadit od kontaktů nad nimi */
    .pp-zaznam .pp-kraje {
        margin-top: 14px;
    }
}


/* --- záhlaví výpisu a přepínání popisků ----------------------------------

   Popisek „Okresy, pro které je služba poskytována“ se opakoval u každého
   záznamu. Na širokém okně, kde záznam stojí ve třech sloupcích, ho teď
   nese záhlaví nad výpisem. Na mobilu se sloupce poskládají pod sebe,
   záhlaví by nedávalo smysl — tam zůstávají popisky u jednotlivých bloků.
-------------------------------------------------------------------------- */

.pp-zahlavi {
    padding-bottom: 10px;
    border-bottom: 2px solid #812E87;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #9a9a9a;
}

/* záhlaví nahrazuje horní linku bloků, jinak by byly dvě pod sebou */
.pp-zahlavi + .pp-zaznamy {
    border-top: none;
}

.pp-jen-mobil {
    display: none;
}

@media screen and (max-width: 767px) {
    .pp-jen-desktop {
        display: none;
    }

    .pp-jen-mobil {
        display: block;
    }

    .pp-zahlavi + .pp-zaznamy {
        border-top: 1px solid #e4e4e4;
    }
}


/* --- volba řazení výpisu -------------------------------------------------

   Přepínač, ne věta. Obě volby jsou stejně velká tlačítka vedle sebe
   v jednom rámečku, zvolená je plná — aby bylo na první pohled vidět,
   že jde o dvě možnosti a podle které se zrovna řadí.
-------------------------------------------------------------------------- */

.pp-razeni {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 0 22px;
}

.pp-razeni-popisek {
    margin-right: 12px;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #9a9a9a;
}

/* rámeček kolem obou voleb drží pohromadě to, co patří k sobě */
.pp-razeni-volby {
    display: inline-flex;
    border: 1px solid #e0cfe2;
    border-radius: 4px;
    overflow: hidden;
}

.pp-razeni-volba {
    padding: 6px 18px;
    background: #fff;
    color: #812E87;
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
}

/* dělicí čára mezi volbami */
.pp-razeni-volba + .pp-razeni-volba {
    border-left: 1px solid #e0cfe2;
}

.pp-razeni-volba:hover,
.pp-razeni-volba:focus {
    background: #faf7fb;
    color: #812E87;
}

.pp-razeni-volba.aktivni,
.pp-razeni-volba.aktivni:hover,
.pp-razeni-volba.aktivni:focus {
    background: #812E87;
    color: #fff;
    font-weight: 500;
    cursor: default;
}

@media screen and (max-width: 575px) {
    .pp-razeni-popisek {
        width: 100%;
        margin: 0 0 6px;
    }
}


/* --- poznámka u advokáta -------------------------------------------------

   Doplněk k rozsahu právní pomoci, proto drobnějším písmem a bez svislé
   linky — ta patří rozsahu, aby šlo obojí od sebe rozeznat.
-------------------------------------------------------------------------- */

.pp-poznamka {
    margin: 10px 0 0;
    padding-left: 15px;
    font-size: 13px;
    line-height: 1.6;
    color: #6f6f6f;
}

.pp-poznamka-popisek {
    display: block;
    margin-bottom: 3px;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #9a9a9a;
}


/* --- rozsah a poznámka vedle sebe ----------------------------------------

   Na monitoru stojí v jednom řádku na polovinu šířky. Na mobilu se
   bootstrapovské col-md- sloupce samy poskládají pod sebe.
-------------------------------------------------------------------------- */

.pp-doplnky {
    margin-top: 12px;
}

/* oba bloky mají odsazení shora z .row, vlastní už nepotřebují */
.pp-doplnky .pp-rozsah,
.pp-doplnky .pp-poznamka {
    margin-top: 0;
}

@media screen and (max-width: 767px) {
    /* ve sloupcovém rozpadu je potřeba mezera mezi nimi */
    .pp-doplnky > [class*="col-"] + [class*="col-"] {
        margin-top: 12px;
    }
}