/* =======================================================
   Hledané nabídky práce — Fajn Práce
   Layout převzatý z fajn-brigady.cz/hledane-brigady,
   přebarvený do modré palety Fajn Práce.
   BEM, prefix .hn — nezasahuje do kontejneru.
   ======================================================= */

/* Styly hlavičky + patičky z homepage Fajn Práce (hvb-*) */
@import url('homepage-verze-b.css');

/* Výchozí kontejnerová hlavička/patička se nepoužije — místo nich
   používáme hvb hlavičku/patičku z homepage. Vypneme je a zrušíme
   horní padding kontejneru (stejný postup jako homepage-varianty.css). */
body .header,
body .footer { display: none !important; }

main.container { padding-top: 0 !important; }

:root {
    --hn-modra:        #0074ff;   /* primární modrá Fajn Práce */
    --hn-modra-tmava:  #005fd1;   /* tmavší modrá (hover) */
    --hn-modra-svetla: #e6f1ff;   /* velmi světlé pozadí bloků */
    --hn-oranz:        #ff8c00;   /* akcentní oranžová Fajn Práce */
    --hn-oranz-tmava:  #e67e00;   /* tmavší oranžová (hover) */
    --hn-seda-text:    #6b7280;
    --hn-seda-bg:      #f7f7f7;
    --hn-seda-bg-2:    #f5f5f5;
}

/* ---- Hlavní nadpis ---- */
.hn__title {
    text-align: center;
    color: var(--hn-modra);
    font-size: 46px;
    line-height: 54px;
    font-weight: 500;
    margin: 42px 0 60px;
}

/* ---- Holder = barevný pruh sekce ---- */
.hn__holder {
    padding: 20px 0;
    background-color: var(--hn-seda-bg);
    position: relative;
    margin-bottom: 60px;
    border-radius: 14px;
}

.hn__holder--second {
    background: #fff;
    padding-top: 40px;
    margin-bottom: 0;
}

/* ---- Wrapper (kvůli plovoucímu štítku headline) ---- */
.hn__wrapper {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ---- Plovoucí štítek nad sekcí ---- */
.hn__headline {
    border-radius: 20px 20px 0 0;
    background: var(--hn-oranz);
    padding: 10px 18px;
    position: absolute;
    left: 28px;
    top: -65px;
    color: #fff;
    z-index: 1;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: .04em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.hn__headline--second {
    background: var(--hn-oranz);
}

.hn__headline-ico {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: block;
}

/* ---- Mřížka bloků (Oblíbené) — kompaktní, stejně velké karty ---- */
.hn__content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
}

/* Sekce „Podle oboru" — Grid se 3 stejnými sloupci.
   Grid dá všem rámečkům v řádku stejnou šířku i výšku. */
.hn__content--second {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding-bottom: 40px;
}

/* ---- Blok ---- */
.hn__block {
    position: relative;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* V gridu šířku řídí sloupec, ne flex/width — vypneme je. */
.hn__content--second .hn__block {
    width: auto;
    flex-grow: 0;
    background: var(--hn-seda-bg-2);
    box-shadow: none;
}

/* ---- Nadpis bloku ---- */
.hn__block-title {
    display: flex;
    align-items: center;
    margin-bottom: 0;
}

/* Ikona oblíbeného v modrém kolečku (bílá ikona uvnitř) */
.hn__block-ikona {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--hn-modra);
    color: #fff;
}

.hn__block-ikona svg {
    width: 20px;
    height: 20px;
}

.hn__block-link {
    font-size: 16px;
    color: var(--hn-modra);
    font-weight: 500;
    padding-left: 10px;
    line-height: 1.2;
    text-decoration: none;
}

.hn__block-link:hover {
    color: var(--hn-modra-tmava);
    text-decoration: underline;
}

/* ---- Nadpis kategorie (gray varianta) ---- */
.hn__block-title--gray {
    margin: 0 0 16px 0;
}

.hn__block-cat {
    display: inline-block;
    padding-left: 0;
    margin: 0;
    font-size: 20px;
    line-height: 24px;
    font-weight: 500;
    color: var(--hn-modra);
    text-decoration: none;
}

.hn__block-cat:hover {
    color: var(--hn-modra-tmava);
    text-decoration: underline;
}

/* ---- Seznam odkazů v kategorii ---- */
.hn__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hn__list-item {
    margin-bottom: 14px;
}

.hn__list-item:last-child {
    margin-bottom: 0;
}

.hn__list-item--hidden {
    display: none;
}

.hn__item-link {
    display: block;
    color: var(--hn-modra);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.3;
    text-decoration: none;
}

.hn__item-link:hover {
    color: var(--hn-modra-tmava);
    text-decoration: underline;
}

/* ---- Toggler „zobrazit více" (akcentní oranžová) ---- */
.hn__toggler {
    color: var(--hn-oranz);
    font-weight: 500;
    font-size: 15px;
    cursor: pointer;
    margin-top: 14px;
    user-select: none;
}

.hn__toggler:hover {
    color: var(--hn-oranz-tmava);
    text-decoration: underline;
}

/* =======================================================
   RESPONZIVITA
   ======================================================= */
@media (max-width: 900px) {
    .hn__block {
        width: calc(50% - 10px);
    }
    .hn__content--second {
        grid-template-columns: repeat(2, 1fr);
    }
    .hn__title {
        font-size: 36px;
        line-height: 42px;
        margin: 30px 0 60px;
    }
}

@media (max-width: 600px) {
    .hn__block {
        width: 100%;
    }
    .hn__content--second {
        grid-template-columns: 1fr;
    }
    .hn__title {
        font-size: 28px;
        line-height: 34px;
        margin: 20px 0 55px;
    }
    .hn__headline {
        left: 12px;
        top: -58px;
        font-size: 14px;
        padding: 9px 14px;
    }
    .hn__wrapper {
        padding: 0 10px;
    }
    .hn__holder {
        padding: 16px 0;
    }
}

/* =======================================================
   HLAVIČKA — sjednoceno 1:1 podle detail-clanku.css
   ======================================================= */
/* Build style.css má obecné pravidlo `.container ul li:before`, které přidává
   modrou odrážku před KAŽDÉ <li> v .container. To je určené jen pro seznamy
   v textu článku — ale „uniká" to na <li> v hlavičce (nav) a patičce (portály,
   menu, sociální sítě). Tam odrážku vypneme; v článku ji ponecháme. */
.hvb-header li::before,
.hvb-mob li::before,
.pv-variant li::before,
.pv-d li::before {
	content: none !important;
	display: none !important;
}

/* Pozadí stránky stejné jako u detailu inzerátu — barvu dáme na body
   I .content-holder (stejně jako homepage-varianty.css), aby seděla i plocha
   za obsahem, ne jen samotný obal. */
body,
.content-holder {
	background: #f9fbff !important;
}

/* =======================================================
   IZOLACE HLAVIČKY/PATIČKY od build style.css
   Build (kvůli obsahu) přidává globály na holé elementy uvnitř .container,
   hlavně `.container ul li { margin-bottom:16px; padding-left:20px;
   font-size:1rem; line-height:1.5rem }` + `img{width:100%}` + `p{...}` +
   `h1-6{font-weight:400}`. Hlavička/patička jsou uvnitř .container, takže to
   na ně přetéká a rozbíjí navigaci, logo, claim. Detail inzerátu build
   nenačítá → čistá hlavička. Tady ty leaky v hlavičce/patičce vynulujeme
   a vrátíme přesné hodnoty z homepage-verze-b.css.
   ======================================================= */

/* --- <li> v hlavičce/mobilním menu/patičce: build mu dával margin/padding/font → nuly --- */
.hvb-header li,
.hvb-mob li,
.pv-variant li,
.pv-d li {
	margin: 0 !important;
	padding: 0 !important;
	font-size: inherit !important;
	line-height: inherit !important;
	position: static !important;
}

/* --- <ul> --- */
.hvb-header ul,
.hvb-mob ul,
.pv-variant ul,
.pv-d ul {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* --- obrázky (logo, ikony, loga portálů) --- */
.hvb-header img,
.hvb-mob img,
.pv-variant img,
.pv-d img {
	width: auto !important;
	max-width: 100% !important;
}

/* --- odstavce BEZ vlastní třídy (jen build leak na holé <p>) ---
   POZOR: cílíme jen na <p> bez class, aby tenhle reset NEPŘEBÍJEL
   vlastní třídy jako .hvb-header__logo-tagline nebo .hvb-login__sekce-nadpis
   (ty jsou taky <p> uvnitř hlavičky a obecný `.hvb-header p` by je díky
   vyšší specificitě přebil). */
.hvb-header p:not([class]),
.hvb-mob p:not([class]),
.pv-variant p:not([class]),
.pv-d p:not([class]) {
	margin: 0 !important;
	font-size: inherit !important;
	line-height: inherit !important;
}

/* --- nadpisy v patičce --- */
.hvb-header h1, .hvb-header h2, .hvb-header h3, .hvb-header h4,
.pv-variant h1, .pv-variant h2, .pv-variant h3, .pv-variant h4,
.pv-d h1, .pv-d h2, .pv-d h3, .pv-d h4 {
	font-weight: inherit !important;
}

/* =======================================================
   DOSAZENÍ PŘESNÝCH HODNOT HLAVIČKY (z homepage-verze-b.css)
   ======================================================= */

/* Flexové centrování celé hlavičky i navigace */
.hvb-header__obsah {
	display: flex !important;
	align-items: center !important;
}

.hvb-header__nav ul {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}

/* Logo */
.hvb-header__logo img {
	max-width: 75px !important;
	width: auto !important;
	height: auto !important;
}
@media (min-width: 992px) {
	.hvb-header__logo img { max-width: 140px !important; }
}
@media (min-width: 1200px) {
	.hvb-header__logo img { max-width: 160px !important; }
}

/* Claim „Tady se najdete" — na PC 19px (na mobilu níže přebito na 12px) */
.hvb-header__logo-tagline {
	display: block !important;
	margin: 0 !important;
	font-size: 19px !important;
	line-height: 22px !important;
	font-weight: 600 !important;
	color: #77787b !important;
}

/* Claim na mobilu menší — 12px */
@media (max-width: 767px) {
	.hvb-header__logo-tagline {
		font-size: 12px !important;
		line-height: 14px !important;
	}
}

/* Odkazy v navigaci */
.hvb-header__nav .hvb-header__link {
	display: inline-block !important;
	padding: 4px 16px !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: normal !important;
	white-space: nowrap !important;
	color: #333 !important;
}

/* Aktivní + hover odkaz zůstává modrý (nepřebít šedou) */
.hvb-header__nav .hvb-header__link--active,
.hvb-header__nav .hvb-header__link:hover,
.hvb-header__nav .hvb-header__link:focus {
	color: #0074ff !important;
}

/* =======================================================
   Přihlašovací dropdown (login) v hlavičce — velikosti písma
   ======================================================= */
/* Nadpis sekce („Jsem uchazeč" / „Jsem firma / inzerent") */
.hvb-login__sekce-nadpis {
	font-size: 13px !important;
}

/* Texty loginů (E-mail, Gmail, Facebook, Seznam, Apple) */
.hvb-login__soc {
	font-size: 13px !important;
}

/* Tlačítko „Přihlásit do firemní administrace" */
.hvb-login__firma-btn {
	font-size: 13.5px !important;
}

/* Další text (podtitulky + „Nemáte ještě účet? Registrovat firmu") */
.hvb-login__sekce-podtitulek,
.hvb-login__firma-vse {
	font-size: 12px !important;
}