/* =========================================================
   TOPINAVI HOME reference layout v8
   Reference: supplied TOPINAVI mockup.

   Rules:
   - The centered news area is one fixed parent container.
   - Hero, ticker, category row and lower news grid share one left edge.
   - The lower right ranking column starts on exactly the same grid line
     as the upper right promo column.
   - Existing visual design/CSS is not modified; this file only locks
     horizontal structure and grid lines.
   ========================================================= */

/* One horizontal reference for the entire center news area. */
.tn5-news-box,
.tn5-main{
  position:relative;
  width:100%;
  max-width:none;
  min-width:0;
  margin-left:auto;
  margin-right:auto;
  padding-left:0;
  padding-right:0;
}

/* Every major block starts from the exact same left edge. */
.tn5-main > .tn5-lead-grid,
.tn5-main > .tn5-ticker,
.tn5-main > .tn5-category-grid,
.tn5-main > .tn5-lower-grid{
  width:100%;
  max-width:none;
  min-width:0;
  margin-left:0 !important;
  margin-right:0 !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;
  box-sizing:border-box;
}

/* Use one shared 3-column geometry for upper and lower areas. */
.tn5-lead-grid,
.tn5-lower-grid{
  grid-template-columns:minmax(0,1.55fr) minmax(0,.72fr) minmax(250px,.95fr);
  column-gap:var(--tn5-gap);
}

/* Upper: large article | two small articles | promo. */
.tn5-lead-main{grid-column:1}
.tn5-lead-sub{grid-column:2}
.tn5-promo--hero{grid-column:3}

/* Lower: Yamagata/news area spans the first two columns.
   Ranking stays in the same right column as the upper promo. */
.tn5-lower-main{
  grid-column:1 / 3;
  min-width:0;
  margin-left:0 !important;
}
.tn5-lower-side{
  grid-column:3;
  min-width:0;
  margin-left:0 !important;
}

/* The news panel box itself starts on the same line as the hero box. */
.tn5-lower-main > .tn5-panel{
  width:100%;
  max-width:none;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* Never let a child define a wider horizontal reference than its parent. */
.tn5-lead-grid > *,
.tn5-ticker > *,
.tn5-category-grid > *,
.tn5-lower-grid > *{
  min-width:0;
  max-width:100%;
}

/* Preserve the existing responsive behavior while keeping one shared edge. */
@media (max-width:1080px){
  .tn5-lead-grid{
    grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr);
  }
  .tn5-lead-main{grid-column:1}
  .tn5-lead-sub{grid-column:2}
  .tn5-promo--hero{grid-column:1 / -1}

  .tn5-lower-grid{
    grid-template-columns:1fr;
  }
  .tn5-lower-main,
  .tn5-lower-side{
    grid-column:1;
  }
}

@media (max-width:820px){
  .tn5-lead-grid,
  .tn5-lower-grid{
    grid-template-columns:1fr;
  }
  .tn5-lead-main,
  .tn5-lead-sub,
  .tn5-promo--hero,
  .tn5-lower-main,
  .tn5-lower-side{
    grid-column:1;
  }
}