/* V177 - Complete article detail refinement based on approved attached layout */
:root{
  --v177-shell:1600px;
  --v177-sidebar:340px;
}

/* Entire news detail uses the same public 1600px shell */
@media(min-width:1500px){
  body:not(.admin-layout) .v175-news-detail{
    width:min(var(--v177-shell),calc(100% - 48px))!important;
    max-width:var(--v177-shell)!important;
  }
}

/* Header/title balance */
body:not(.admin-layout) .v175-article-header{
  width:100%!important;
  max-width:1220px!important;
  margin-bottom:19px!important;
}

body:not(.admin-layout) .v175-article-header h1{
  max-width:1180px!important;
  margin:10px 0 14px!important;
  font-size:clamp(32px,2.8vw,44px)!important;
  line-height:1.12!important;
  letter-spacing:-.8px!important;
  text-wrap:balance;
}

/* More balanced article vs right sidebar */
body:not(.admin-layout) .v175-news-layout{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) var(--v177-sidebar)!important;
  gap:34px!important;
  align-items:start!important;
}

body:not(.admin-layout) .v175-news-main{
  width:100%!important;
  min-width:0!important;
}

/* Right column starts at hero area and always keeps Latest first */
body:not(.admin-layout) .v175-news-sidebar{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:14px!important;
  align-content:start!important;
  position:sticky!important;
  top:74px!important;
}

body:not(.admin-layout) .v175-news-sidebar > .v175-side-card:first-child{
  order:-10!important;
}

/* View metric */
body:not(.admin-layout) .v177-view-count{
  color:#556b62!important;
  font-weight:650!important;
}

/* Hero follows design: slightly wider, compact rounded corners */
body:not(.admin-layout) .v175-article-hero{
  aspect-ratio:16/7.8!important;
  min-height:390px!important;
  border-radius:13px!important;
}

/* Summary block */
body:not(.admin-layout) .v177-summary-box{
  display:grid!important;
  grid-template-columns:31px minmax(0,1fr)!important;
  align-items:start!important;
  gap:10px!important;
  padding:15px 17px!important;
  margin:0 0 18px!important;
}

body:not(.admin-layout) .v177-summary-box>span{
  width:27px!important;
  height:27px!important;
  font-family:inherit!important;
  font-size:13px!important;
}

body:not(.admin-layout) .v177-summary-box>div>b{
  display:block!important;
  margin:0 0 4px!important;
  color:#174a31!important;
  font-size:11.5px!important;
  line-height:1.2!important;
  font-weight:850!important;
}

body:not(.admin-layout) .v177-summary-box p{
  margin:0!important;
}

/* Main content menu + readable article */
@media(min-width:901px){
  body:not(.admin-layout) .v175-content-layout{
    display:grid!important;
    grid-template-columns:215px minmax(0,1fr)!important;
    gap:22px!important;
  }

  body:not(.admin-layout) .v175-article-content{
    max-width:1000px!important;
  }

  body:not(.admin-layout) .v175-service-banner,
  body:not(.admin-layout) .v175-article-footer{
    max-width:1000px!important;
  }
}

/* Latest posts card */
body:not(.admin-layout) .v175-latest-list{
  gap:11px!important;
}

body:not(.admin-layout) .v175-latest-item{
  grid-template-columns:76px minmax(0,1fr)!important;
  gap:10px!important;
}

body:not(.admin-layout) .v175-latest-img{
  width:76px!important;
  height:57px!important;
}

body:not(.admin-layout) .v175-latest-item b{
  font-size:10.8px!important;
  line-height:1.38!important;
}

body:not(.admin-layout) .v175-latest-item small{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  margin-top:4px!important;
  color:#87968f!important;
  font-size:8.8px!important;
  font-style:normal!important;
}

body:not(.admin-layout) .v175-latest-item small em{
  color:#5f746a!important;
  font-style:normal!important;
  white-space:nowrap!important;
}

/* Category card and sidebar titles */
body:not(.admin-layout) .v175-news-sidebar .v175-side-card{
  border-radius:12px!important;
  padding:16px!important;
}

body:not(.admin-layout) .v175-news-sidebar .v175-side-title h2{
  font-size:15px!important;
}

/* Breadcrumb aligns to same public shell and is not jammed against header */
body:not(.admin-layout) .breadcrumbs{
  min-height:38px!important;
  display:flex!important;
  align-items:center!important;
  margin-top:0!important;
  margin-bottom:4px!important;
  padding-top:8px!important;
  padding-bottom:8px!important;
  font-size:11.5px!important;
  line-height:1.35!important;
}

@media(min-width:1500px){
  body:not(.admin-layout) .breadcrumbs{
    width:min(var(--v177-shell),calc(100% - 48px))!important;
    max-width:var(--v177-shell)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

/* Standard desktop */
@media(min-width:1200px) and (max-width:1499px){
  :root{--v177-sidebar:320px}

  body:not(.admin-layout) .v175-news-detail{
    width:calc(100% - 40px)!important;
    max-width:1380px!important;
  }

  body:not(.admin-layout) .v175-article-header h1{
    max-width:1060px!important;
    font-size:40px!important;
  }

  body:not(.admin-layout) .v175-article-hero{
    min-height:350px!important;
  }

  body:not(.admin-layout) .v175-content-layout{
    grid-template-columns:200px minmax(0,1fr)!important;
  }
}

/* Tablet: keep sidebar useful until 900px */
@media(min-width:901px) and (max-width:1199px){
  :root{--v177-sidebar:280px}

  body:not(.admin-layout) .v175-news-detail{
    width:calc(100% - 30px)!important;
  }

  body:not(.admin-layout) .v175-news-layout{
    gap:20px!important;
  }

  body:not(.admin-layout) .v175-article-header h1{
    font-size:34px!important;
  }

  body:not(.admin-layout) .v175-content-layout{
    grid-template-columns:175px minmax(0,1fr)!important;
    gap:16px!important;
  }

  body:not(.admin-layout) .v175-article-hero{
    min-height:300px!important;
  }
}

/* Mobile */
@media(max-width:900px){
  body:not(.admin-layout) .v175-news-sidebar{
    display:none!important;
  }

  body:not(.admin-layout) .v175-article-header{
    max-width:none!important;
  }

  body:not(.admin-layout) .v175-article-header h1{
    max-width:none!important;
    font-size:28px!important;
  }

  body:not(.admin-layout) .v175-article-hero{
    min-height:0!important;
    aspect-ratio:16/9!important;
  }

  body:not(.admin-layout) .v177-summary-box{
    padding:13px!important;
  }
}

@media(max-width:560px){
  body:not(.admin-layout) .v175-article-header h1{
    font-size:24px!important;
    line-height:1.16!important;
  }
}