/* ==========================================================================
   infostock.bg - home page (v2)
   Loaded only on screens/home.jsp, in addition to css/v2/base.css.
   Everything is scoped under body.v2 and covers ONLY what base.css does not
   already provide:
     - the leading news block (WEB-INF/tags/v2/siteLeadingNews.tag)
     - the two column news-category grid (div.home_grid)
     - the "rich" news lists (announcements / calendar events)
     - the index quotes box specifics
     - the top-5 winners / losers twin tables
     - the live watch-list ticker box (JS driven, see js/ticker.js)
   The card look itself (.small_infobox), the heading pattern
   (div.heading > span + i.rule), ul.newslist and table.qt all come from
   base.css and are NOT restated here.

   NOTE on the .lead_* family, which also exists in css/v2/section.css:
   the two files are NEVER loaded together (home.css is linked only by
   screens/home.jsp; section.css only by the six section-home screens), so
   there is no cascade between them and neither file overrides the other.
   The differences are deliberate - the same tag class names are laid out
   two different ways.  See the header of css/v2/section.css for the full
   list; the short version is that here a.lead_main STACKS (display:block,
   image above the headline, .lead_grid always 2 columns) while section.css
   makes it a row (image left at 42%, 1 column unless .has_side).
   Do not "align" the two files: keep any change scoped to the layout it
   belongs to.
   ========================================================================== */

/* ==========================================================================
   1. LEADING NEWS
   ========================================================================== */
body.v2 .lead {
    background: #fff;
    border: 1px solid #dfe7f0;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(30, 66, 128, .06);
    padding: 16px 18px 18px;
    margin: 0 0 24px;
}
body.v2 .lead > .heading {
    display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
body.v2 .lead > .heading span {
    color: #1e4280;
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 19px;
    line-height: 24px;
    white-space: nowrap;
}
body.v2 .lead > .heading .rule {
    flex: 1 1 auto; height: 2px; min-width: 12px; background: #1e4280; opacity: .85;
}

/* main lead + secondary column */
body.v2 .lead_grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}
body.v2 a.lead_main { display: block; color: inherit; }
body.v2 a.lead_main:hover { text-decoration: none; }
body.v2 img.lead_img {
    /* source images are 310x170 (see docs/responsive-v2.md) - cap display
       at 2x natural so wide columns do not stretch them into mush */
    display: block;
    width: 100%;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    border-radius: 6px;
    margin-bottom: 12px;
}
body.v2 .lead_title {
    display: block;
    font-size: 23px;
    line-height: 1.28;
    font-weight: 700;
    color: #1a2740;
    letter-spacing: -.01em;
}
body.v2 a.lead_main:hover .lead_title { color: #1e4280; }
body.v2 .lead_text {
    display: block;
    margin-top: 8px;
    font-size: 16px;
    line-height: 1.55;
    color: #4a5566;
}

body.v2 .lead_side { display: flex; flex-direction: column; }
body.v2 a.lead_item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid #e8edf4;
    color: inherit;
}
body.v2 .lead_side a.lead_item:first-child { padding-top: 0; }
body.v2 .lead_side a.lead_item:last-child { border-bottom: 0; }
body.v2 a.lead_item:hover { text-decoration: none; }
body.v2 img.lead_thumb {
    flex: 0 0 110px;
    width: 110px;
    max-width: 40%;
    height: auto;
    border-radius: 4px;
    display: block;
}
body.v2 .lead_item_title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 600;
    color: #1a2740;
}
body.v2 a.lead_item:hover .lead_item_title { color: #1e4280; }

/* ==========================================================================
   2. NEWS CATEGORY GRID (replaces the old float pairs
      small_infobox / small_infobox_right)
   ========================================================================== */
body.v2 .home_grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}
body.v2 .home_grid > .small_infobox { margin: 0; }

/* ==========================================================================
   3. RICH NEWS LISTS (announcements + calendar events)
      ul.newslist gives the row/chevron; only the extra info is added here.
   ========================================================================== */
body.v2 ul.newslist_rich a { align-items: baseline; font-weight: 600; padding-bottom: 2px; }
body.v2 ul.newslist_rich li { padding-bottom: 10px; }
body.v2 span.additional_info {
    display: block;
    padding-left: 16px;
    font-size: 13px;
    line-height: 1.45;
    color: #6b7686;
}
body.v2 .ev_code {
    display: block;
    font-size: 13px;
    color: #6b7686;
    font-weight: 600;
}

/* ==========================================================================
   4. INDEX QUOTES BOX (right column)
   ========================================================================== */
body.v2 .index_box img { display: block; margin-bottom: 12px; border-radius: 4px; }
body.v2 .index_box table.qt td.first a { font-weight: 600; }

/* the uptrend credit under the market tables */
body.v2 .quotes_source { font-size: 13px; line-height: 1.5; color: #6b7686; }
body.v2 .quotes_source img { max-width: 100%; height: auto; margin-top: 6px; }

/* ==========================================================================
   5. TOP 5 - advancing / declining twin tables
   ========================================================================== */
body.v2 .top5_grid {
    /* 320px sidebar cannot fit two tables side by side - stack them;
       below 860px the sidebar is full-width and two columns fit again */
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}
@media (max-width: 860px) and (min-width: 481px) {
    body.v2 .top5_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
body.v2 .top5_lbl {
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #5b6675;
    font-weight: 700;
    margin-bottom: 4px;
}
body.v2 .top5_col table.qt td { height: 34px; }

/* ==========================================================================
   6. LIVE TICKER / WATCH LIST BOX
      js/ticker.js rewrites the inner HTML of #v_ticker_div on every refresh
      (table#ticker_header_table for the head row + table#ticker_data_table
      for the rows) with hard coded width / cellpadding attributes, so the
      styling has to work on ANY table inside #v_ticker_div and has to
      neutralise those inline widths.
   ========================================================================== */
body.v2 .ticker .heading { margin-bottom: 8px; }
body.v2 div.ticker_controls {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 0 6px -6px;
}
body.v2 div.ticker_controls a {
    display: block;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 18px 18px;
    opacity: .85;
}
body.v2 div.ticker_controls a:hover { background-color: #f0f3f6; opacity: 1; }
body.v2 div.ticker_controls a#settings {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231e4280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9c.14.36.42.65.77.83.24.12.51.18.78.17H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
}
body.v2 div.ticker_controls a#new_window {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231e4280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14L21 3'/%3E%3C/svg%3E");
}

/* Five columns (code, price, change %, bid, ask) in a card whose inner width
   is 282px. Left to auto layout with nowrap cells the row is wider than the
   card and the box grows a horizontal scrollbar, so the columns are given
   fixed shares instead, the way the year-on-year box does it (base.css,
   table.qt_yoy). The head row and the data rows are two separate tables,
   so the fixed shares are also what keeps the headings above their column.
   The code column is the only one allowed to wrap: a dual listing such as
   "GR6 / GR6" breaks at the slash rather than pushing the figures out.
   Columns are addressed by position, not class: the head row js/ticker.js
   writes carries no "first" class, and the widths are !important because
   base.css neutralises the JS width attributes on right-col tables with
   "width: auto !important" (which this box needs everywhere else). */
body.v2 #v_ticker_div { width: 100%; overflow-x: auto; }
body.v2 #v_ticker_div table {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}
body.v2 #v_ticker_div th {
    width: 19% !important;
    border-bottom: 2px solid #739fcc;
    color: #5b6675;
    font-size: 12px;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    padding: 0 0 6px 2px;
    background: none;
}
body.v2 #v_ticker_div td {
    width: 19% !important;
    font-size: 13.5px;
    height: 36px;
    padding: 0 0 0 4px;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    border-bottom: 1px solid #eef2f7;
    background: none;
}
/* code | price | change % | bid | ask = 22 + 19 + 20 + 19 + 20. The change
   column carries the widest figure ("-12.34" plus its arrow), the ask column
   the widest heading (the Bulgarian "ask" label, seven letters). overflow:
   hidden on the cells
   is the safety net: a clipped glyph on some unforeseen value is better than
   the scrollbar that overflow of the whole box would grow. */
body.v2 #v_ticker_div th:nth-child(3),
body.v2 #v_ticker_div td:nth-child(3),
body.v2 #v_ticker_div th:nth-child(5),
body.v2 #v_ticker_div td:nth-child(5) { width: 20% !important; }
body.v2 #v_ticker_div th:first-child,
body.v2 #v_ticker_div td:first-child {
    width: 22% !important;
    text-align: left;
    padding-left: 0;
}
body.v2 #v_ticker_div tr:last-child td { border-bottom: 0; }
body.v2 #v_ticker_div tr.evenrow td { background: #f6f8fb; }
body.v2 #v_ticker_div td:first-child {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.2;
}
body.v2 #v_ticker_div td.first a { color: #1e4280; font-weight: 600; }
body.v2 #v_ticker_div tr.invisible { display: none; }
body.v2 #v_ticker_div #ticker_full_link td { text-align: right; font-size: 14px; }

/* ==========================================================================
   7. HOME ONLY RESPONSIVE TWEAKS
   ========================================================================== */
@media (max-width: 860px) {
    body.v2 .lead_grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    body.v2 .lead_side a.lead_item:first-child { padding-top: 12px; border-top: 1px solid #e8edf4; }
}
@media (max-width: 1000px) and (min-width: 641px) {
    /* tablet: the lead follows the side-item pattern - image left, text
       right - just bigger; a stacked 700px-wide 310x170 source looks bad */
    body.v2 a.lead_main { display: flex; gap: 18px; align-items: flex-start; }
    body.v2 img.lead_img { flex: 0 0 310px; width: 310px; margin: 0; }
    body.v2 .lead_main_txt { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
    body.v2 .lead_title { font-size: 22px; line-height: 1.3; }
    body.v2 .lead_text { font-size: 15px; line-height: 1.55; }
    body.v2 img.lead_thumb { flex-basis: 170px; width: 170px; }
    body.v2 .lead_side a.lead_item { gap: 14px; font-size: 17px; }
}
@media (max-width: 640px) {
    body.v2 .home_grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    body.v2 .lead { padding: 14px 14px 16px; }
    body.v2 .lead_title { font-size: 21px; }
    body.v2 img.lead_thumb { flex-basis: 96px; width: 96px; }
    body.v2 #v_ticker_div td { height: 42px; }
    body.v2 div.ticker_controls a { width: 40px; height: 40px; }
    body.v2 .top5_grid { gap: 12px; }
}