/* news_brickindustrial - 红砖工业风 */

:root{
  --brk-brick:#b1503a;
  --brk-brick-deep:#8a3a28;
  --brk-brick-light:#c96a4f;
  --brk-cement:#8a8580;
  --brk-cement-dark:#6f6a65;
  --brk-cream:#f4efe6;
  --brk-cream-dark:#e8e0d0;
  --brk-ink:#2b241f;
  --brk-mortar:#d8cfc0;
  --brk-accent:#e08a3e;
}

*,
*::before,
*::after{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }

body.brk-body{
  font-family:"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;
  color:var(--brk-ink);
  background-color:var(--brk-cream);
  background-image:
    repeating-linear-gradient(180deg, transparent 0 40px, rgba(138,133,128,0.08) 40px 41px),
    repeating-conic-gradient(from 90deg, transparent 0 25%, rgba(138,133,128,0.06) 0 50%);
  background-size:100% 41px, 120px 82px;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p{ margin:0; }

/* ---- brick texture mixin ---- */
.brk-brickwall{
  background-color:var(--brk-brick);
  background-image:
    repeating-linear-gradient(180deg, transparent 0 34px, var(--brk-mortar) 34px 38px),
    repeating-conic-gradient(from 90deg, transparent 0 25%, var(--brk-mortar) 0 50%);
  background-size:100% 38px, 96px 76px;
}

/* ---- top decorative band ---- */
.brk-topband{
  height:6px;
  background:repeating-linear-gradient(90deg, var(--brk-brick) 0 24px, var(--brk-cement) 24px 26px);
}

/* ---- header ---- */
.brk-header{ position:relative; background:var(--brk-cream); border-bottom:4px solid var(--brk-ink); }

.brk-header-inner{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:18px 24px;
  flex-wrap:wrap;
}

.brk-brand{ display:flex; align-items:center; gap:14px; text-decoration:none; }
.brk-brand-logo{ height:48px; width:auto; border:3px solid var(--brk-ink); background:#fff; }
.brk-brand-name{ font-size:22px; font-weight:800; color:var(--brk-ink); letter-spacing:1px; white-space:nowrap; }

.brk-nav-list{ display:flex; flex-wrap:wrap; gap:10px; }

.brk-nav-btn{
  display:inline-block;
  padding:8px 16px;
  border:2px solid var(--brk-ink);
  color:var(--brk-ink);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.5px;
  font-size:13px;
  background:var(--brk-cream);
  transition:border-width .15s ease, border-color .15s ease, color .15s ease, padding .15s ease;
}
.brk-nav-btn:hover{
  border-width:4px;
  border-color:var(--brk-brick);
  color:var(--brk-brick-deep);
  padding:6px 14px;
}

/* ---- hero ---- */
.brk-hero{
  position:relative;
  text-align:center;
  padding:64px 24px;
  background-image:
    linear-gradient(rgba(20,14,10,.42), rgba(20,14,10,.42)),
    repeating-linear-gradient(180deg, transparent 0 34px, var(--brk-mortar) 34px 38px),
    repeating-conic-gradient(from 90deg, transparent 0 25%, rgba(216,207,192,.55) 0 50%);
  background-size:auto, 100% 38px, 96px 76px;
  background-color:var(--brk-brick-deep);
}
.brk-hero-inner{ max-width:760px; margin:0 auto; }
.brk-hero-eyebrow{
  font-size:13px; letter-spacing:3px; font-weight:700; text-transform:uppercase;
  color:var(--brk-cream); opacity:.85; margin-bottom:12px;
}
.brk-hero-title{
  font-size:40px; font-weight:900; margin-bottom:16px; line-height:1.3;
  color:#ffffff; /* fallback before gradient clip */
  background:linear-gradient(90deg, #ffffff 0%, var(--brk-accent) 60%, var(--brk-cream) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.brk-hero-sub{ font-size:16px; line-height:1.7; color:var(--brk-cream); opacity:.92; }

/* ---- generic block head ---- */
.brk-block{ max-width:1200px; margin:0 auto; padding:0 24px; }
.brk-block-hot{ padding-top:36px; padding-bottom:8px; }

.brk-block-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  margin-bottom:18px; padding-bottom:10px; border-bottom:3px solid var(--brk-ink); flex-wrap:wrap;
}
.brk-block-title{
  font-size:22px; font-weight:900; color:var(--brk-ink); text-transform:uppercase; letter-spacing:1px;
}
.brk-block-tag{
  font-size:12px; font-weight:700; letter-spacing:2px; color:#fff;
  background:var(--brk-brick); padding:4px 10px;
}
.brk-block-more{ font-size:13px; font-weight:700; color:var(--brk-brick-deep); white-space:nowrap; }
.brk-block-more:hover{ color:var(--brk-accent); text-decoration:underline; }

/* ---- hot row: horizontal scroll ---- */
.brk-hotrow{
  display:flex;
  gap:16px;
  overflow-x:auto;
  padding:6px 6px 20px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  counter-reset:brkhot;
}
.brk-hotrow::-webkit-scrollbar{ height:8px; }
.brk-hotrow::-webkit-scrollbar-thumb{ background:var(--brk-cement); }
.brk-hotrow::-webkit-scrollbar-track{ background:var(--brk-cream-dark); }

.brk-hotcard{
  flex:0 0 260px;
  scroll-snap-align:start;
  border:3px solid var(--brk-ink);
  background:#fff;
  counter-increment:brkhot;
}
.brk-hotcard-link{ display:block; padding:20px 16px 16px; min-height:170px; }
.brk-hotcard-num{
  display:inline-block; background:var(--brk-ink); color:var(--brk-cream);
  font-size:12px; font-weight:800; padding:3px 8px; margin-bottom:10px; letter-spacing:1px;
}
.brk-hotcard-num::before{ content:"NO." counter(brkhot, decimal-leading-zero); }
.brk-hotcard-title{
  font-size:15px; font-weight:800; color:var(--brk-ink); margin-bottom:8px; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.brk-hotcard-info{
  font-size:12.5px; color:var(--brk-cement-dark); line-height:1.5; margin-bottom:10px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.brk-hotcard-meta{
  display:flex; justify-content:space-between; font-size:11.5px; color:var(--brk-cement-dark);
  border-top:1px dashed var(--brk-cement); padding-top:8px;
}
.brk-hotcard:hover{ border-color:var(--brk-brick); }
.brk-hotcard:hover .brk-hotcard-title{ color:var(--brk-brick-deep); }

/* ---- columns layout, sidebar on the left ---- */
.brk-columns{
  max-width:1200px; margin:0 auto; display:flex; align-items:flex-start; gap:28px;
  padding:36px 24px 48px;
}
.brk-side{ flex:0 0 260px; width:260px; }
.brk-main{ flex:1; min-width:0; }

.brk-side-block{ border:3px solid var(--brk-ink); margin-bottom:22px; background:#fff; }
.brk-side-title{
  margin:0; padding:10px 14px; background:var(--brk-ink); color:var(--brk-cream);
  font-size:14px; font-weight:800; letter-spacing:1px; text-transform:uppercase;
}
.brk-side-list{ padding:8px 0; }
.brk-side-list li{ border-bottom:1px dashed var(--brk-cement); }
.brk-side-list li:last-child{ border-bottom:none; }
.brk-side-list a{ display:block; padding:9px 14px; font-size:13.5px; color:var(--brk-ink); }
.brk-side-list a:hover{ color:var(--brk-brick-deep); background:var(--brk-cream-dark); }

/* ---- vertical post list (flex + ellipsis, needs min-width:0) ---- */
.brk-postlist{ border:3px solid var(--brk-ink); margin-bottom:32px; }
.brk-postitem{ border-bottom:1px solid var(--brk-cement); }
.brk-postitem:last-child{ border-bottom:none; }
.brk-postitem-link{ display:flex; align-items:center; gap:14px; padding:13px 16px; color:var(--brk-ink); }
.brk-postitem-title{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:14.5px;
  font-weight:600;
}
.brk-postitem-date{ flex:0 0 auto; font-size:12px; color:var(--brk-cement-dark); }
.brk-postitem-link:hover{ background:var(--brk-cream-dark); }
.brk-postitem-link:hover .brk-postitem-title{ color:var(--brk-brick-deep); }

/* ---- grid cards (max 4 columns) ---- */
.brk-gridlist{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.brk-gridcard{ border:3px solid var(--brk-ink); background:#fff; }
.brk-gridcard a{ display:block; padding:18px; }
.brk-gridcard-title{
  font-size:16px; font-weight:800; color:var(--brk-ink); margin-bottom:10px; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.brk-gridcard-info{
  font-size:13px; color:var(--brk-cement-dark); line-height:1.6; margin-bottom:12px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.brk-gridcard-meta{
  display:flex; justify-content:space-between; font-size:12px; color:var(--brk-cement-dark);
  border-top:1px dashed var(--brk-cement); padding-top:8px;
}
.brk-gridcard:hover{ border-color:var(--brk-brick); }
.brk-gridcard:hover .brk-gridcard-title{ color:var(--brk-brick-deep); }

/* ---- breadcrumb ---- */
.brk-breadcrumb{ background:var(--brk-cream-dark); border-bottom:3px solid var(--brk-ink); }
.brk-breadcrumb-inner{ max-width:1200px; margin:0 auto; padding:12px 24px; font-size:13px; color:var(--brk-cement-dark); }
.brk-breadcrumb-inner a{ color:var(--brk-brick-deep); }
.brk-breadcrumb-inner a:hover{ text-decoration:underline; }
.brk-breadcrumb-sep{ margin:0 8px; color:var(--brk-cement); }
.brk-breadcrumb-current{ color:var(--brk-ink); font-weight:700; }

/* ---- list.html article list ---- */
.brk-listview-item{ display:flex; gap:16px; padding:20px 0; border-bottom:1px solid var(--brk-cement); }
.brk-listview-item:first-child{ padding-top:0; }
.brk-listview-thumb-link{ flex:0 0 auto; }
.brk-listview-badge{
  display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px;
  background:var(--brk-brick); color:#fff; font-weight:900; font-size:15px; border:2px solid var(--brk-ink);
}
.brk-listview-body{ flex:1; min-width:0; }
.brk-listview-title{ margin-bottom:8px; font-size:17px; font-weight:800; line-height:1.4; }
.brk-listview-title a:hover{ color:var(--brk-brick-deep); }
.brk-listview-info{
  margin-bottom:10px; font-size:13.5px; color:var(--brk-cement-dark); line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.brk-listview-meta{ display:flex; gap:16px; font-size:12px; color:var(--brk-cement-dark); }

/* ---- pager ---- */
.brk-pager{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:32px; }
.brk-pager-btn{
  display:inline-block; padding:8px 14px; border:2px solid var(--brk-ink); color:var(--brk-ink);
  font-weight:700; background:#fff; transition:border-width .15s ease, border-color .15s ease, padding .15s ease;
}
.brk-pager-btn:hover{ border-width:3px; border-color:var(--brk-brick); color:var(--brk-brick-deep); padding:7px 13px; }

/* ---- article (show.html) ---- */
.brk-article{ border:3px solid var(--brk-ink); background:#fff; padding:32px; margin-bottom:28px; }
.brk-article-head{ border-bottom:3px double var(--brk-cement); padding-bottom:18px; margin-bottom:22px; }
.brk-article-title{ font-size:26px; font-weight:900; color:var(--brk-ink); margin-bottom:12px; line-height:1.4; }
.brk-article-meta{ font-size:13px; color:var(--brk-cement-dark); }
.brk-article-body{ font-size:15.5px; line-height:1.9; color:var(--brk-ink); }
.brk-article-body p{ margin-bottom:18px; }
.brk-article-body img{ max-width:100%; height:auto; border:3px solid var(--brk-ink); }

/* ---- prev / next article nav ---- */
.brk-articlenav{ display:flex; gap:18px; flex-wrap:wrap; }
.brk-articlenav-prev,
.brk-articlenav-next{
  flex:1 1 220px;
  min-width:0;
  border:2px solid var(--brk-ink);
  padding:14px 16px;
  background:#fff;
  transition:border-width .15s ease, border-color .15s ease, padding .15s ease;
}
.brk-articlenav-label{
  display:block; font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase;
  color:var(--brk-cement-dark); margin-bottom:6px;
}
.brk-articlenav-prev a,
.brk-articlenav-next a{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--brk-ink);
  font-weight:700;
  font-size:14px;
}
.brk-articlenav-prev:hover,
.brk-articlenav-next:hover{ border-width:3px; border-color:var(--brk-brick); padding:13px 15px; }
.brk-articlenav-prev:hover a,
.brk-articlenav-next:hover a{ color:var(--brk-brick-deep); }

/* ---- footer ---- */
.brk-footer{ background:var(--brk-ink); color:var(--brk-cream); margin-top:20px; }
.brk-footer-inner{
  max-width:1200px; margin:0 auto; padding:40px 24px;
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:28px;
}
.brk-footer-col{ min-width:0; }
.brk-footer-logo{ height:40px; filter:grayscale(1) brightness(1.4); margin-bottom:12px; }
.brk-footer-desc{ font-size:13px; line-height:1.7; color:var(--brk-cement); }
.brk-footer-title{
  font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:1px; margin-bottom:14px;
  color:#fff; border-bottom:2px solid var(--brk-brick); padding-bottom:8px;
}
.brk-footer-list li{ margin-bottom:9px; }
.brk-footer-list a{ color:var(--brk-cement); font-size:13px; }
.brk-footer-list a:hover{ color:var(--brk-brick-light); text-decoration:underline; }
.brk-footer-bottom{
  border-top:1px solid rgba(244,239,230,.15); padding:18px 24px; text-align:center;
  font-size:12px; color:var(--brk-cement);
}
.brk-copyright,
.brk-beian,
.brk-host{ margin:4px 0; }
.brk-beian a{ color:var(--brk-cement); }

/* ---- responsive breakpoints ---- */
@media (max-width:1024px){
  .brk-gridlist{ grid-template-columns:repeat(2, 1fr); }
  .brk-footer-inner{ grid-template-columns:1fr 1fr; }
  .brk-side{ flex:0 0 220px; width:220px; }
}

@media (max-width:768px){
  .brk-header-inner{ flex-direction:column; align-items:flex-start; gap:14px; }
  .brk-nav-list{ flex-wrap:nowrap; overflow-x:auto; width:100%; padding-bottom:4px; }
  .brk-columns{ flex-direction:column; }
  .brk-side{ width:100%; flex:1 1 auto; }
  .brk-gridlist{ grid-template-columns:repeat(2, 1fr); }
  .brk-hero-title{ font-size:30px; }
  .brk-listview-item{ flex-direction:column; }
  .brk-footer-inner{ grid-template-columns:1fr 1fr; }
}

@media (max-width:480px){
  .brk-gridlist{ grid-template-columns:1fr; }
  .brk-hotcard{ flex:0 0 220px; }
  .brk-article{ padding:20px; }
  .brk-footer-inner{ grid-template-columns:1fr; }
  .brk-articlenav{ flex-direction:column; }
}