/* ============================================================
   HAIDANGLUXE V82 — HOME EVENTS / INVASION / NEWS 3-COLUMN ALIGNMENT
   Layout-only refinement: equal columns, equal header blocks, equal card rows.
   Existing module data, effects, hover, countdown and JavaScript are preserved.
   ============================================================ */

.home-three-column-board{
  margin-top:30px;
  padding:16px;
  overflow:hidden;
}

.home-three-column-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  align-items:stretch;
}

.home-three-column-panel{
  min-width:0;
  position:relative;
  display:flex;
  padding:0 14px;
}

.home-three-column-panel > section,
.home-three-column-panel > .bj-events-clean,
.home-three-column-panel > .bj-invasions-section{
  width:100%;
  min-width:0;
}

/* One centered divider between equal thirds. */
.home-three-column-panel + .home-three-column-panel::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:1px;
  background:var(--line);
  opacity:.72;
  pointer-events:none;
}

/* Remove only the old full-width section spacing. */
.home-three-column-board .bj-events-clean,
.home-three-column-board .bj-invasions-section,
.home-three-column-board .home-news-section{
  margin-top:0!important;
  min-width:0;
}

/* Every module becomes one vertical list with the exact same row rhythm. */
.home-three-column-board .bj-event-grid,
.home-three-column-board .bj-invasions-grid,
.home-three-column-board .home-news-grid{
  grid-template-columns:1fr!important;
  gap:12px!important;
  align-content:start;
}

/* ============================================================
   DESKTOP — SAME HEADER HEIGHT + SAME CARD HEIGHT
   ============================================================ */
@media(min-width:981px){
  .home-three-column-board .sectionhead{
    position:relative;
    display:block!important;
    height:122px!important;
    min-height:122px!important;
    margin:0 0 14px!important;
    padding:0!important;
    box-sizing:border-box;
  }

  .home-three-column-board .sectionhead > div{
    min-width:0;
    width:100%;
  }

  /* One typography scale for the three main tab titles. */
  .home-three-column-board .sectionhead h2{
    margin:0!important;
    font-size:24px!important;
    line-height:1.15!important;
    font-weight:900!important;
    letter-spacing:-.015em;
  }

  /* Events has a kicker; use that as the common top row. */
  .home-three-column-events .bj-events-head .kicker{
    display:block;
    min-height:22px;
    margin:0 0 7px!important;
    line-height:22px;
  }

  .home-three-column-events .bj-events-head h2{
    margin:0 0 7px!important;
  }

  .home-three-column-events .bj-events-head p{
    margin:0!important;
    line-height:1.4;
  }

  /* Invasion has no kicker in its HTML, reserve the exact same top row. */
  .home-three-column-invasions .bj-invasions-heading{
    padding-top:29px!important;
  }

  .home-three-column-invasions .bj-invasions-heading h2{
    margin:0 0 7px!important;
  }

  .home-three-column-invasions .bj-invasions-subtitle{
    margin:0!important;
    line-height:1.4;
  }

  .home-three-column-invasions .bj-invasion-live-dot{
    position:absolute;
    top:4px;
    right:0;
    margin:0;
  }

  /* News title gets the same baseline; action becomes compact and predictable. */
  .home-three-column-news .sectionhead{
    padding-top:29px!important;
  }

  .home-three-column-news .sectionhead h2{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    padding-right:0;
  }

  .home-three-column-news .sectionhead .btn{
    position:absolute;
    left:0;
    bottom:0;
    width:auto!important;
    min-width:0!important;
    height:36px!important;
    min-height:36px!important;
    padding:0 13px!important;
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    white-space:nowrap!important;
    line-height:1!important;
    font-size:12px!important;
    border-radius:10px!important;
  }

  /* All cards/boxes line up horizontally row by row. */
  .home-three-column-board .bj-event-grid,
  .home-three-column-board .bj-invasions-grid,
  .home-three-column-board .home-news-grid{
    grid-auto-rows:120px;
  }

  .home-three-column-board .bj-event-card,
  .home-three-column-board .bj-invasion-card,
  .home-three-column-board .home-news-card{
    width:100%!important;
    height:120px!important;
    min-height:120px!important;
    max-height:120px!important;
    box-sizing:border-box!important;
    border-radius:16px!important;
  }

  .home-three-column-board .bj-event-card{
    padding:17px 18px!important;
  }

  .home-three-column-board .bj-invasion-card{
    padding:16px 18px!important;
  }

  .home-three-column-board .home-news-card{
    padding:13px 14px!important;
    align-items:center;
  }

  .home-three-column-board .home-news-thumb{
    width:82px!important;
    height:82px!important;
    flex:0 0 82px!important;
    aspect-ratio:1/1;
  }

  .home-three-column-board .home-news-body{
    align-content:center;
    min-height:0;
    overflow:hidden;
  }

  .home-three-column-board .home-news-body b{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
  }

  .home-three-column-board .home-news-body > span{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
    line-height:1.35;
  }

  /* Keep long names from changing box geometry. */
  .home-three-column-board .bj-event-title,
  .home-three-column-board .bj-invasion-copy,
  .home-three-column-board .home-news-body{
    min-width:0;
  }
}

html[data-mode="light"] .home-three-column-panel + .home-three-column-panel::before{
  opacity:.9;
}

/* Tablet/mobile: return to natural-height stacked sections. */
@media(max-width:980px){
  .home-three-column-grid{
    grid-template-columns:1fr;
    gap:20px;
  }

  .home-three-column-panel{
    padding:0;
  }

  .home-three-column-panel + .home-three-column-panel::before{
    top:-10px;
    bottom:auto;
    left:0;
    right:0;
    width:auto;
    height:1px;
  }

  .home-three-column-board .sectionhead{
    min-height:0;
  }
}

@media(max-width:620px){
  .home-three-column-board{
    padding:11px;
    border-radius:16px;
  }

  .home-three-column-grid{
    gap:18px;
  }
}