/* itispm.css — doplňky webu nad šablonou Namari (style.css se nemění).
   Cache-buster ?v= v partials/head.php zvyšovat při každé změně. */

/* Reference: výřez s kariérní osou z pokorni.cz (vlastimil/osa/).
   Výška odpovídá ose s projekty a navigací; uvnitř se posouvá sama. */
.osa-vyrez {
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.osa-vyrez iframe {
    display: block;
    width: 100%;
    /* výchozí výška, než vložená stránka ohlásí skutečnou (site.js) */
    height: 560px;
    border: 0;
    /* Výřez na 90 %: nižší a osa má uvnitř víc místa na šířku. Výška
       z vložené stránky (site.js) je ve vnitřních px, zoom ji přepočítá sám. */
    zoom: 0.9;
}
/* Odkazy pod nadpisem sedí u spodní hrany výřezu: řádek je flex, sloupce
   stejně vysoké, popisek se v levém sloupci odsune dolů (margin-top: auto). */
#clients .row {
    display: flex;
    align-items: stretch;
}
#clients .col-3 {
    display: flex;
    flex-direction: column;
    float: none;
}
#clients .col-2-3 {
    float: none;
}
.osa-vyrez-popisek {
    margin-top: auto;
    padding-top: 16px;
    font-size: 0.9em;
    /* spodní okraj odstavce ze šablony posouval odkazy 14 px nad hranu výřezu */
    margin-bottom: 0;
}
@media only screen and (max-width: 768px) {
    #clients .row { display: block; }
    #clients .col-3 { display: block; }
}

/* Šablona dává odkazům v #clients bílou (loga klientů); popisek pod výřezem je text. */
#clients .osa-vyrez-popisek a {
    display: inline;
    text-align: left;
    text-transform: none;
    font-weight: normal;
    color: #B96E09;
}
#clients .osa-vyrez-popisek a:hover {
    text-decoration: underline;
}

/* O nás: druhý odstavec pod logem – stejný tón jako text v prostředním sloupci. */
.about-pod-logem {
    margin-top: 28px;
    text-align: left;
}

@media only screen and (max-width: 768px) {
    .about-pod-logem { margin-top: 16px; }
}

/* Co děláme: bloky služeb po dvou vedle sebe. Šablona je plave (float) a při
   různé výšce se třetí blok zasekne pod druhým a čtvrtý spadne o řádek níž;
   flex s obalováním drží dvojice zarovnané na nejvyšší blok. */
#services .col-2-3 {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
#services .col-2-3 .icon-block {
    float: none;
}
@media only screen and (max-width: 768px) {
    #services .col-2-3 .icon-block { width: 100%; }
}

/* Mezery mezi sekcemi: šablona dává každému řádku 75 px nahoře i dole, tedy
   190 px prázdna mezi sekcemi, a O nás má spodek vypnutý – nejednotné.
   Jednotná výplň 50 px, O nás stejně jako ostatní, a „Jak vám pomáháme"
   se drží Co děláme jako jeho pokračování. Na mobilu platí 15 px ze šablony. */
.row {
    padding: 50px 0;
}
#about .row {
    padding-bottom: 50px;
}
#services .row + .row {
    padding-top: 0;
}

/* Reference: odstavec do bloku jako ostatní text webu (O nás má .obsah-text). (dvě id: inline styl v hlavičce dává #content .section-subtitle inherit a je ve zdroji později) */
#content #clients .section-subtitle {
    text-align: justify;
}

/* Detail období z vložené osy: panel přes odstavec v levém sloupci. */
#clients .col-3 {
    position: relative;
}
.osa-detail-panel {
    position: absolute;
    left: 20px;
    right: 20px;
    z-index: 5;
    background: #fff;
    border-left: 3px solid #B96E09;
    border-radius: 0 6px 6px 0;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
    padding: 16px 40px 16px 18px;
    font-size: 0.95em;
    line-height: 1.5;
    color: #333;
}
.osa-detail-zavrit {
    position: absolute;
    top: 6px;
    right: 8px;
    background: none;
    border: 0;
    font-size: 24px;
    line-height: 1;
    color: #999;
    cursor: pointer;
    padding: 4px 8px;
}
.osa-detail-zavrit:hover { color: #333; }
/* Mobil: panel leží přes osu uvnitř výřezu (.osa-vyrez má overflow hidden,
   proto se ořízne na jeho hranu – to je záměr). */
.osa-vyrez { position: relative; }
.osa-detail-panel.je-mobil {
    left: 8px;
    right: 8px;
    max-height: 70vh;
    overflow: auto;
    z-index: 6;
}
.osa-detail-obsah .obdobi {
    font-size: 0.8em;
    font-weight: 700;
    color: #B96E09;
    letter-spacing: 0.03em;
}
.osa-detail-obsah .org { font-weight: 700; color: #111; font-size: 1.05em; }
.osa-detail-obsah .role { color: #111; }
.osa-detail-obsah .zam { color: #777; font-size: 0.92em; margin-top: 4px; }
.osa-detail-obsah ul { margin: 8px 0 0; padding-left: 18px; font-size: 0.9em; }
.osa-detail-obsah ul .kdy { color: #B96E09; font-weight: 700; }
.osa-detail-obsah .ramec { color: #777; font-size: 0.85em; }

/* Orientační sazby: boxy stejně vysoké (flex) a kompaktní – šablona je
   dimenzuje na ceník s dlouhými seznamy, tady jsou tři položky. */
#pricing .row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}
#pricing .section-heading {
    flex: 0 0 100%;
}
#pricing .pricing-block {
    float: none;
    display: flex;
}
#pricing .pricing-block-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 14px 0 18px;
    border-width: 6px;
}
#pricing .pricing-block h3 {
    font-size: 16px;
}
#pricing .pricing-sub {
    margin: 0 18px 14px;
    font-size: 14px;
    line-height: 1.4;
}
#pricing .pricing {
    padding: 12px 16px;
}
#pricing .price {
    font-size: 38px;
}
#pricing .price span {
    font-size: 16px;
    left: -14px;
}
#pricing .pricing-block ul {
    margin: 10px 0 14px;
}
#pricing .pricing-block li {
    padding: 7px 0;
}
#pricing .pricing-block .button {
    margin-top: auto;
    align-self: center;
}

/* Kontakt: pár řádků nepotřebuje půl obrazovky. */
#contact .section-heading {
    padding-bottom: 0;
}
#contact .section-subtitle {
    margin-bottom: 6px;
}
#contact .obsah-text p {
    margin: 4px 0;
}
#contact .kontakt-blok {
    margin: 12px 30px 0;
}
#contact .kontakt-blok h3 {
    padding: 4px 0 2px;
}