/* Production external stylesheet for Solar News Carousel (Design-System) */

:root{
  --snc-navy:#08203a;
  --snc-accent:#0b66a3;
  --snc-green:#2ecc71;
  --snc-muted:#95a1a8;
  --snc-card-bg:#ffffff;
  --snc-gap:28px;
}
body .snc-wrap .snc-arrows {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  display: flex !important;
  gap: 8px !important;
  z-index: 99999 !important;
}

body .snc-wrap .snc-arrows button {
  width: 44px !important;
  height: 44px !important;
  border-radius: 8px !important;
  background: #0b3d66 !important; /* DARK BLUE */
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}

body .snc-wrap .snc-arrows button svg,
body .snc-wrap .snc-arrows button svg *,
body .snc-wrap .snc-arrows button svg path {
  stroke: #ffffff !important; /* FORCE WHITE */
  fill: #ffffff !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Hover interaction */
body .snc-wrap .snc-arrows button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(10, 25, 40, 0.35) !important;
}
.snc-wrap{
  max-width:1400px;
  margin:0 auto;
  padding:56px 24px;
  box-sizing:border-box;
  font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color:var(--snc-navy);
}

/* HEADER ARCHITECTURE */
.snc-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  margin-bottom:32px;
  position:relative;
}
.snc-header-left{min-width:0}
.snc-badge{
  display:inline-block;
  background:var(--snc-green);
  color:#fff;
  font-weight:700;
  font-size:12px;
  padding:6px 10px;
  border-radius:8px;
  letter-spacing:0.4px;
  margin-bottom:12px;
}
.snc-title{
  font-size:40px;
  line-height:1.04;
  margin:0;
  font-weight:800;
  color:var(--snc-navy);
  -webkit-font-smoothing:antialiased;
}

/* Nav area positioned far-right */
.snc-header-right{display:flex;align-items:center;justify-content:flex-end;min-width:120px}
.snc-arrows{display:flex;gap:8px;align-items:center}
/* Navigation arrows – dark blue background, white icons */
.snc-arrows button {
  width:44px;
  height:44px;
  border-radius:8px;
  border:0;
  background:#0b3d66; /* DARK BLUE */
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
}

.snc-arrows button svg path {
  stroke:#ffffff !important; /* ALWAYS WHITE ARROW */
}

.snc-arrows button:hover {
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(10,25,40,0.25);
}
/* CAROUSEL + CARD GRID */
.snc-carousel{position:relative}
.swiper-wrapper{padding-bottom:12px}
.swiper-slide{display:flex;align-items:stretch;height:auto}
.snc-card{
  background:var(--snc-card-bg);
  border-radius:20px;
  box-shadow:0 8px 30px rgba(10,25,40,0.06);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  width:100%;
  min-height:320px;
}
.snc-thumb{display:block;overflow:hidden;border-radius:20px 20px 0 0}
.snc-thumb img{width:100%;height:260px;object-fit:cover;display:block}

/* body inside card */
.snc-body{padding:18px 18px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.snc-meta{display:flex;align-items:center;gap:12px;font-size:13px;color:#6b7a86}
.snc-cat{background:#e8fbf0;color:#0b7a43;padding:6px 10px;border-radius:12px;font-weight:700;font-size:12px}
.snc-date{color:var(--snc-muted);font-size:13px}
.snc-title-card{font-size:18px;color:var(--snc-navy);margin:0;font-weight:700;line-height:1.25}
.snc-title-card a{color:inherit;text-decoration:none}
.snc-read{font-size:13px;color:var(--snc-accent);text-decoration:underline;margin-top:auto;display:inline-block}

/* mobile pagination */
.snc-pagination{display:none;margin-top:14px}

/* Responsive / Grid behavior
   The Swiper shows multiple slides (3,2,1) — visually it is a grid-like carousel.
*/
@media (min-width:992px){
  .snc-swiper .swiper-slide{width:calc((100% - (var(--snc-gap) * 2)) / 3) !important;}
  .snc-swiper .swiper-slide:not(:last-child){margin-right:var(--snc-gap)}
}
@media (min-width:576px) and (max-width:991px){
  .snc-swiper .swiper-slide{width:calc((100% - (var(--snc-gap))) / 2) !important;}
  .snc-swiper .swiper-slide:not(:last-child){margin-right:var(--snc-gap)}
}
@media (max-width:575px){
  .snc-swiper .swiper-slide{width:100% !important;margin-right:0}
}

/* Smaller screens & polish */
@media (max-width:1199px){
  .snc-title{font-size:34px}
  .snc-thumb img{height:220px}
}
@media (max-width:991px){
  .snc-thumb img{height:200px}
  .snc-title{max-width:100%}
}
@media (max-width:767px){
  .snc-wrap{padding:36px 14px}
  .snc-title{font-size:28px}
  .snc-thumb img{height:160px}
  .snc-arrows{display:none} /* arrows hidden on small screens */
  .snc-pagination{display:block} /* show dots */
  .snc-header{gap:12px}
}
@media (max-width:479px){
  .snc-thumb img{height:140px}
  .snc-title{font-size:22px}
  .snc-body{padding:12px}
}