/* Top bar job panel (issue-3190).

   The widget's two states -- a 293px strip that cycles one ad at a time, and
   the panel it opens into on hover -- still come from the .top_comparision
   rules in main.css. What lives here is everything those rules were never
   written for: a list of job ads instead of a list of numbers.

   New file rather than an append: main.css has mixed line endings and does not
   survive a round trip.

   The layout each open row draws:

       ┌──────────────────────────────────────────────┐
       │ [logo]  Job title.....................  44–52k€ │
       │         Company · Place · Work model   Destaque │
       └──────────────────────────────────────────────┘

   Two lines, always, whether or not the ad states a salary -- a reserved empty
   line is what made the rows jump around before. */

/* ---------------------------------------------------------------- the card */

/* One surface, not five: main.css gives every row its own border and the
   global `* { border-radius: 5px !important }` in main.css:17 rounds each of
   them, which read as five stacked cards.

   The card goes on the <ul>, not on the wrapper around it: main.css turns that
   same <ul> into the open panel (`.carousel-inner:hover` gets position:absolute
   and reveals the rows), so it is the one element that is the strip when closed
   and the panel when open. Clipping the wrapper instead would cut the panel off
   at the height of the strip. */
.tl-jobs-panel .comparison_lst,
.tl-jobs-panel .comparision_wrap:hover .comparison_lst {
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 10px !important;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

/* Open, main.css takes the <ul> out of the flow (position:absolute), which
   leaves it sizing to its content -- so long job titles ran past the card
   instead of ending in an ellipsis. A definite width gives the grid something
   to constrain, and the extra room over the 293px strip is room for the
   titles, which is what gets read. */
.tl-jobs-panel .comparision_wrap:hover .comparison_lst {
    width: 372px;
    min-width: 100%;
    /* the closed strip states its height to stay level with the search box;
       open, the panel has to grow to the rows again */
    height: auto;
    box-shadow: 0 10px 28px rgba(16, 24, 40, .14);
}

/* ---------------------------------------------------------------- the rows */

.tl-jobs-panel .comparison_lst li,
.tl-jobs-panel .comparision_wrap:hover .comparison_lst li {
    border: 0;
    border-radius: 0 !important;
    padding: 9px 12px;
    background: #fff;
    transition: background-color .12s ease;
}

/* main.css reveals the rows on hover with height:auto + min-height:54px;
   keep a floor of our own rather than dropping it, or they collapse */
.tl-jobs-panel .comparision_wrap:hover .comparison_lst li {
    min-height: 46px;
}

/* hairlines between rows, none around them */
.tl-jobs-panel .comparision_wrap:hover .comparison_lst li + li {
    border-top: 1px solid #eef0f3;
}

/* the row is a link: say so on hover, or nobody tries */
.tl-jobs-panel .comparision_wrap:hover .comparison_lst li:hover {
    background: #f6f9fc;
}

.tl-jobs-panel .comparison_lst li a {
    display: flex;
    align-items: center;
    color: inherit;
}

/* Collapsed the strip is one centered line. main.css only makes .summary a
   flex box between 768px and 1700px, so state it here for every width; the
   5px top margin main.css puts on its spans is what pushed the salary off
   the middle, so it goes. */
.tl-jobs-panel .comparison_lst li .summary {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}

.tl-jobs-panel .comparison_lst li .summary > div > span {
    margin: 0;
}

/* the featured ad, marked without shouting: a hairline accent instead of the
   block of colour a badge on its own line used to put in the middle of the row */
.tl-jobs-panel .comparision_wrap:hover .comparison_lst li.tl-jp-featured {
    box-shadow: inset 3px 0 0 #da3238;
    padding-left: 15px;
    background: #fffdfd;
}

.tl-jobs-panel .comparision_wrap:hover .comparison_lst li.tl-jp-featured:hover {
    background: #fff7f7;
}

/* --------------------------------------------------------------- the logo */

.tl-jobs-panel .comparison_lst li .ico_company_logo {
    border: 1px solid #eef0f3;
    border-radius: 6px !important;
    padding: 3px;
    margin-right: 10px;
    background: #fff;
    min-height: 0;
}

.tl-jobs-panel .comparison_lst li .tl-jp-logo {
    display: block;
    width: 22px;
    height: 16px;
    object-fit: contain;
}

.tl-jobs-panel .comparision_wrap:hover .comparison_lst li .tl-jp-logo {
    width: 26px;
    height: 20px;
}

/* ------------------------------------------------------------ the two lines */

/* open: title and salary on the first line, everything else on the second,
   with the salary pinned right where the eye lands after the title */
.tl-jobs-panel .comparision_wrap:hover .comparison_lst li .summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "title  salary"
        "meta   badge";
    column-gap: 10px;
    row-gap: 1px;
    align-items: center;
}

.tl-jobs-panel .comparision_wrap:hover .comparison_lst li .summary > .division { grid-area: title; }
.tl-jobs-panel .comparision_wrap:hover .comparison_lst li .summary > .tl-jp-meta { grid-area: meta; }
.tl-jobs-panel .comparision_wrap:hover .comparison_lst li .summary > .tl-jp-salary { grid-area: salary; }
.tl-jobs-panel .comparision_wrap:hover .comparison_lst li .summary > .tl-jp-badge { grid-area: badge; }

/* collapsed there is one line and 293px: the job and the number, nothing else */
.tl-jobs-panel .comparison_lst li .summary > .division {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.tl-jobs-panel .comparison_lst li .summary > .tl-jp-salary {
    flex: 0 0 auto;
    margin-left: 8px;
}

/* -------------------------------------------------------------- typography */

/* the extra class outweighs main.css's `.summary > div > span { display: flex }`
   -- a flex box does not ellipsis its own text, so titles were being cut off
   mid-word against the edge of the card instead of ending in a "…" */
.tl-jobs-panel .comparison_lst li .summary .division > .tl-jp-title {
    display: block;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: #1c2b3a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tl-jobs-panel .comparision_wrap:hover .comparison_lst li:hover .tl-jp-title {
    color: #2f6fb0;
}

/* one line whatever the company and the work model are called, so five rows
   keep the same height and the eye can run down them */
.tl-jobs-panel .comparison_lst li .tl-jp-meta {
    display: none;
    font-size: 11px;
    color: #7a838f;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tl-jobs-panel .comparision_wrap:hover .comparison_lst li .tl-jp-meta {
    display: block;
}

/* the extra class outweighs main.css, which lays every span in a row out as a
   flex block and would stack these one per line */
.tl-jobs-panel .comparison_lst li .summary .tl-jp-meta > span {
    display: inline;
    font-size: 11px;
}

/* padding, not margin: these sit inside a line main.css lays out with flex
   rules, and padding is the one that survives it on an inline span */
.tl-jobs-panel .comparison_lst li .summary .tl-jp-meta > .tl-jp-sep {
    padding: 0 5px;
    color: #ccd2d9;
}

/* kept from the salaries this panel replaced: when an ad states a range it is
   the first thing readers look for, and it is why they click */
.tl-jobs-panel .comparison_lst li .summary .tl-jp-salary {
    margin-top: 0;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    color: #1c2b3a;
}

/* a paid placement should say so, quietly */
.tl-jobs-panel .comparison_lst li .tl-jp-badge {
    display: none;
    justify-self: end;
    align-self: center;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #b03a3f;
    white-space: nowrap;
}

.tl-jobs-panel .comparision_wrap:hover .comparison_lst li .tl-jp-badge {
    display: block;
}

/* ------------------------------------------------------ header and footer */

.tl-jobs-panel .more_bx .btn_area .latest-salaries-shared,
.tl-jobs-panel .more_bx .btn_area .more_link {
    border: 0;
    border-radius: 0 !important;
    padding: 10px 14px;
    background: #fbfcfd;
}

.tl-jobs-panel .more_bx .btn_area .latest-salaries-shared {
    border-bottom: 1px solid #eef0f3;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #55606c;
    cursor: default;
}

.tl-jobs-panel .more_bx .btn_area .latest-salaries-shared .icon {
    font-size: 1.1em;
    color: #da3238;
}

.tl-jobs-panel .more_bx .btn_area .latest-salaries-shared .text {
    font-size: 1em;
    margin-left: .6em;
}

.tl-jobs-panel .more_bx .btn_area .more_link {
    border-top: 1px solid #eef0f3;
    font-size: 11px;
    letter-spacing: .02em;
    transition: background-color .12s ease;
}

.tl-jobs-panel .more_bx .btn_area .more_link:hover {
    background: #f2f5f8;
    text-decoration: none;
}

/* the live job count, next to the header label: it is what turns
   "VER TODAS AS VAGAS" from a link into a promise */
.tl-jobs-panel .more_bx .btn_area .latest-salaries-shared .tl-jp-count {
    float: right;
    font-size: 1em;
    font-weight: 700;
    color: #8d97a2;
    letter-spacing: 0;
}

/* Nothing on the closed strip said it opens, so the four ads behind the first
   one were only ever found by accident. A caret at the rest of the row's edge
   is the convention for "there is more under here"; it steps aside once the
   panel is open and the rows need the width. */
.tl-jobs-panel .comparision_wrap::after {
    content: "\f107";
    font-family: FontAwesome;
    position: absolute;
    right: 9px;
    top: 50%;
    /* the box is as tall as the line, not 16px: centre it off its own height */
    transform: translateY(-50%);
    font-size: 13px;
    line-height: 1;
    color: #b6bec7;
    pointer-events: none;
    transition: color .12s ease;
}

.tl-jobs-panel .comparision_wrap:hover::after {
    display: none;
}

.tl-jobs-panel .comparision_wrap {
    position: relative;
}

/* room for it, so the salary never sits under the caret */
.tl-jobs-panel .comparison_lst li {
    padding-right: 24px;
}

/* Closed, the strip sits beside the search box and has to end on the same
   line: the input is 34px tall, so the row gives up the vertical padding it
   only needs when the panel is open and the rows are a list. The height is
   stated rather than left to the content, so the two stay level whatever the
   logo or the font end up measuring. */
.tl-jobs-panel .comparison_lst {
    height: 34px;
}

.tl-jobs-panel .comparison_lst li {
    padding-top: 5px;
    padding-bottom: 5px;
}

.tl-jobs-panel .comparision_wrap:hover .comparison_lst li {
    padding: 9px 12px;
}
