/* ==== News panel layout (right side) ===================================== */
/* Two rows: top (construction) bigger, bottom (economy) smaller */
.news-side-panel{
  display:grid;
  gap:14px;
  /* Let sections size to their content to avoid large empty gaps */
  grid-template-rows: auto auto;
}

.news-section{
  background:#0753cc;
  border:1px solid #2f2f2f;
  border-radius:10px;
  padding:10px;
}

.news-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:8px;
}
.news-header h3{ margin:0; font-size:1.05rem; font-weight:600; }
.controls button{
  background:#fdfcfc; color:#141414; border:1px solid #faf8f8;
  border-radius:8px; padding:4px 10px; cursor:pointer;
}
.controls button:hover{ background:#faf8f8; }

/* ==== Carousels (scoped so login.css can't override) ===================== */
#carousel-construction{ --carousel-h: clamp(200px, 40vh, 300px); } /* top */
#carousel-economy{      --carousel-h: clamp(200px, 40vh, 300px); } /* bottom */
/* third row: a bit smaller */
#carousel-others{       --carousel-h: clamp(200px, 40vh, 300px); }

.news-side-panel .carousel{
  position:relative;                 /* ensure not absolute */
  height:var(--carousel-h);
  overflow:hidden;
}
.news-side-panel .track{
  display:flex; gap:12px;
  height:100%;                      /* ensures cards can be 100% tall */
  align-items:stretch;               /* stretch cards to full carousel height */
  transition:transform 400ms ease; will-change:transform;
}

/* ==== Cards ============================================================== */
.news-side-panel .card{
  position:relative;
  height:100%;
  min-width:58%;                      /* shows ~1.7 cards at top by default */
  background:#fefefe;
  border:1px solid #2c2c2c;
  border-radius:10px;
  overflow:hidden;
  --body-h: 82px;                     /* typical caption height */
}

/* Bottom: a touch denser */
#carousel-economy .card{ min-width:48%; }

/* Image fills the remaining space; cropped uniformly */
.news-side-panel .card .thumb{
  width:100%;
  height:100%;                        /* fill the card; caption overlays */
  object-fit:cover;                   /* crop without distortion */
  object-position:center;
  display:block;
  background:#fcfbfb;
}

/* Text area */
.news-side-panel .card .body{
  position:absolute; left:0; right:0; bottom:0;
  min-height:64px;                   /* room for title + meta */
  padding:10px 12px;
  box-sizing:border-box;
  display:flex; flex-direction:column; gap:6px;
  background: linear-gradient( to bottom, rgba(248, 246, 246, 0), rgba(251, 250, 250, 0.65) );
}
.news-side-panel .card .title{
  color:#fcfbfb; font-weight:bold;
  font-size:1.5rem; line-height:1.25;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  line-clamp: 2;
  overflow:hidden;                    /* clamp title to 2 lines */
}
.news-side-panel .card .title:hover{ text-decoration:underline; }
.news-side-panel .card .meta{
  font-size:.8rem; color:#fdfcfc; opacity:1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Responsive widths */
@media (max-width:1100px){
  #carousel-construction .card{ min-width:70%; }
  #carousel-economy .card{ min-width:60%; }
}
@media (max-width:900px){
  .news-side-panel .card{ min-width:85%; }
}

/* Accessibility: reduce motion for users who request it */
@media (prefers-reduced-motion: reduce){
  .news-side-panel .track{ transition:none !important; }
}